Installing Admin Panel on Shared Hosting

1. Create your domain or subdomain in shared hosting.
2. Set up an empty database in your shared hosting and keep track of these credentials:
   1. Database name
   2. Database username
   3. Database password
   
   

   Note Avoid using hyphens(-) in the Database Name, as it doesn't work in some configurations.

3. Uploading the source code to Server
   1. Begin by extracting the Source Code you acquired from CodeCanyon.
   2. Unpack the Admin Panel zip file and proceed to upload the PHP Code Folder's contents onto your Server.
   
   

   important .htaccess file is essential; kindly verify its existence. If it is not visible, enable the option to display hidden files.

   important Supported PHP versions are 7.4 to 8.1.

4. Now head to your project's URL (e.g., mydomain.com or subdomain.mydomain.com).
   The Installation screen will then walk you through the process seamlessly.

Great news! You're all set to start your Elite Quiz experience.

Customize Admin Panel for your brand

• Change Login Page Background Image & Bot Image from here
• Include a JWT Key (optional) to enhance security by generating user tokens. You have the flexibility to input any passphrase or password of your choice.
• Adjusting the Theme Color lets you change the main panel color to suit your preferences.
• Revise Footer Copyright Text to incorporate your copyright information.

Settings for the App

• System Timezone: This option sets the time zone of the admin panel.
• App Links: You can set your apps play store/app store links in here, when user refers the app this links will be used.
• Refer Coins: Amount of coins your referral gets for using your referral code.
• Earn Coins: Amount of coins user gets for referring.
• Force Update: if you want to require users to update the app to latest version. you can enable force update and add the Android/IOS App Version if app has given version it will show force update dialog to those users.
• True/False Values: When Creating True False Question these values will be added as default values, then you can also edit them.
• Share App Text: sharing the app will share this text.
• App Maintenance: When you are working on the admin panel or apps Maintenance, you can enable this option so it will show users that app is in Maintenance Mode.
• Language Mode: If you want to only use one language in the app you can disable this option. if you want to add multiple languages enable this feature.
• Option E: If you want 5 options for the answer you can enable this option. otherwise there will be 4 options to select from for answer.
• Daily Quiz/Contest Mode:Toggle Daily Quiz/Contest feature functionality
• In App Purchase: This option controls 'Coin Store' functionality in the app. if you disable this feature user won't be able to purchase coins.

Required Softwares

• Android Studio
• Flutter
• Java Version 21

Additionally, for Macos

• HomeBrew
• Cocoapods
• XCode 15

Setup flutter

important Install the current supported Flutter v3.19.5 (Latest) from the Stable channel.

Explore the official Flutter website at https://docs.flutter.dev/get-started/install for a complete installation guide for your platform.
Prefer video tutorials? Check out the playlist:

After installation run flutter doctor -v to check if everything is correctly setup.

important Android Toolchain, Android Studio, and XCode for Mac users should be correctly configured.

If you are using Android Studio, install the flutter & dart plugin from Android Studio plugin market place.
and if you are using VS Code you can install flutter extension.

If not do the necessary steps to resolve them, check the official fluter documentation for the guide.

After everything is verified to be correct you can continue with the documentation.

Steps to run this project successfully:

1. Begin by extracting the downloaded code.
2. Next, extract the contents of the Elite Quiz App XXX.zip and launch it in either Android Studio or Visual Studio Code.
3. Access the IDE terminal and enter the command flutter pub get to fetch the necessary dependencies.
4. If you want to run the app in IOS simulator (otherwise skip this step), then execute the following commands in the terminal:
   cd ios
pod install
cd ..
5. Finally, To run the application, run flutter run command.

Change app package name

1. If you are using Android Studio , you can press CTRL+SHIFT+R to open Replace in Files tool.
   then search our package name com.wrteam.flutterquiz and replace it with your package name in all places.
   
2. And if you are using VS Code , you can press CTRL+SHIFT+F to open Find in Files Tool.
   then search our package name com.wrteam.flutterquiz and replace it with your package name in all places.
   

Change application name

Similarly you can change the app name by finding and replacing in all the places.

Integrate firebase with your Project

1. First, Create a new Firebase Project
   
   
2. After creating your Firebase project, you'll now connect your Android application to it


3. Now, fill in the details, to get your SHA-1 & SHA-256 keys visit https://developers.google.com/android/guides/client-auth .
   SHA keys are required for using firebase authentication. if you have doubts about SHA keys, click here.
   
   Skip this step
   Skip this step
   Continue
   


4. Now it's time for connecting IOS to your Firebase Project.

Skip this step


5. Finally, We need to add firebase services json file into the Admin panel.



Download the firebase json by opening your Firebase Project > Project Settings > Services Account, and clicking generate new key.




Upload the downloaded services json in the admin panel by going to Settings > Firebase Configurations section, as shown in the image.

Congrats! You have successfully connected your android & IOS app to your firebase project.

Enable Firebase Authentication

1. Head to your Firebase project, click on the authentication menu, and enable Email, Phone, Google, and Apple sign-in methods, as shown in the image.
2. Add the SHA-256 key as shown in below image. Go to Project Settings -> Your apps -> Android apps
3. If you want to use Phone authentication in IOS then
   1. Go to ios/Runner/GoogleService-Info.plist and copy REVERSED_CLIENT_ID
   2. Paste it in ios/Runner/Info.plist as shown in below image

Firebase Configurations for Group and 1v1 Battles

For battles to work you will need to enable Cloud Firestore in Firebase.
Follow these steps shown in images below.

1. First Create Firestore database
2. Select the nearest location to you
   
3. After database has been created, you will need to do 2 things
   1. Set rules, to enable permissions for storing battle data in the database.

      rules_version = '2';
      service cloud.firestore {
          match /databases/{database}/documents {
              match /{document=**} {
                      allow read, write: if request.auth.uid != null;
              }
          }
      }

      
   2. Create an index, for message functionality to work in battles.

      Follow the below details exactly otherwise messages won't work in the app.

      • Collection Id : messages
      • First Field : roomId, Ascending. important here i is Capital.
      • Second Field : timestamp, Descending.
      • Select Query Scopes to be Collection
      

That's it for battles functionality.

Connect your admin panel to the app

1. Go to lib/utils/constants/constants.dart and add your admin panel url in databaseUrl variable, like shown in the image below.

   Important Make sure to not add '/' at the end of the url.
   Important Make sure to check if the admin panel is http or https.

   

Enable Notifications for App

Access your Firebase project and locate "Project Settings" > "Cloud Messaging" as shown in the image.

Then, enable Cloud Messaging in Google Cloud.

Comeback to firebase project, copy the Server Key, and paste it under "Settings" > "Notification Settings"

Change application version and app launcher icon

You can start from 1.0.0+1 version, then as you update the app you can update version also. you can follow semantic versioning or simply increase the build number, its upto you.

Change Splash and Organization Logo

To change the splash and Organization logo, you can replace svg logo files called splash_logo.svg & org_logo.svg. and if you are using png images then you will have to add them in assets/images and change its name from .svg to .png or .jpg lib/utils/constants/assets_constants.dart

Change Authentication Screen App Logo

Similarly, you can replace app_logo.svg in assets/images and/or change the extension by changing it in assets_constants.dart file

Change App Logo

1. For Android , open android > app > src > main > res and add here your logo according to device screen size
2. For IOS open , ios > Runner > Assets.xcassets > AppIcon.appiconset here and add your logo according to diffrent size.

Set app's default language

1. The App's default language is English, but you can easily modify it. To do so, navigate to the lib/utils/constants/constants.dart file and locate the section displaying the language codes, as illustrated in the image below.
   

   note You can obtain your desired language code from the following link. Just ensure that the language code you select is available in the aforementioned link for proper functionality.

   
2. If your desired language code is not in supported languages list, add language code in list as shown in below image.
3. create a [language-code].json file in assets/languages/ if your desired language is not available. Copy all labels from en.json and translate the values accordingly.

Add new app language from admin panel

1. Enable language mode in your admin panel as shown in the image below
2. Go to languages section and select the language you want to from the drop down.
3. Also Add this language code in supported languages list in your app code.
4. create a [language-code].json file in assets/languages/ if your desired language is not available. Copy all labels from en.json and translate the values accordingly.

Change app colors

Configure Ads

Google AdMob

To begin, create an AdMob account and set up three Ad Units:

1. Banner Ad
2. Interstitial Ad
3. Rewarded Ad

1. For Android, go to android/app/src/main/AndroidManifest.xml and enter android App Id as shown in below image.
   
2. For IOS, go to ios/Runner/Info.plist and enter IOS App Id as shown in below image.
   
3. Go to Settings > Ads.Settings in admin panel and add AdMob ad ids as shown in below image.

Unity Ads

Daily Watch Ads

Daily Watch Ads are Reward Ads shown to user in home screen. Users can choose to watch ads to earn some coins. for daily watch ads you can limit how many time a day user can watch ad to earn coin. and how much coin will they get per ad.

And you can change settings for it from Ads Settings

Placements of the Ads

Banner Ads

Banner Ads are shown screens which are mainly used to show list. like,

• Category List Screen
• Sub Category List Screen
• Levels List Screen
• Sub Category & Levels List Screen
• Exams List Screen
• Fun'N'Learn List Screen

Interstitial Ads

Interstitial Ads are shown in places when user enters some section & before showing result.

• Before Showing Result Screen
• Going to sections from Menu Screen like, Notifications, Wallet, Statistics, etc
• before going to Categories List Screen

Reward Ads

Rewards Ads are shown in only specific scenarios,

• like when creating Battle Room if user doesn't have enough Coins. or when playing Random Battle user doesn't have enough coins.
• When playing quiz zone, if user doesn't have enough coins for using lifelines. And similarly in Guess The Word when user tries to use hint without enough coins.
• Also in homescreen, user can opt in to watch Daily Ads to earn more coins by watching video ads.

Change intro slider images

Update SVGs in assets/images folder using the same filenames shown in the images.

You can add/remove onboarding details from lib/ui/screens/onboarding_screen.dart

Change default profile avatar images

1. Update Avatars in assets/images/profile folder using the same filenames preferably shown in the images.
2. Then add those filenames in assets/files/defaultProfileImages.json file.

Configure In-App purchases

For In App Products to show up in the app, first you will need to at least publish the app in closed or internal testing, and create products in app store and/or play console. then create the same products with same product_id in admin panel. remember product_id should be same in admin panel products and app store/play console.

Once you have created IAP(In-App-Purchase) Products in app store/play console and in admin panel and published the app in closed/internal testing. verify that it is showing up in the app.

Follow the below given resources for creating IAP in app store / play console. and in admin panel

For creating in-app purchase products refer to the documentation here: Apple, Google

For android (Play Store)

• Upload your application to the Play Store and create in-app products as shown in the image. Ensure that the ID of consumable products in both Apple and Play Store is the same.
  

For IOS (App Store)

• Open the ios folder of the project into Xcode. Go to Capabilities. And enable "In-App Purchase" as shown in image.
• use the following links to get help enabling in-app purchases:
  https://help.apple.com/app-store-connect/#/devae49fb316
  https://help.apple.com/app-store-connect/#/devb57be10e7
  For further assistance, refer to the official Apple Developer documentation on in-app purchases at: https://developer.apple.com/in-app-purchase/

Add In-App products from Admin Panel

• Then After creating in-app purchase products, add their respective coins and productIds in Admin Panel > Settings > Coin Store Settings as shown in image.

Then you will need to do some further configuration for both android and ios, so that IAP purchases can be verified from the server side.

1. go to Admin Panel > Settings > In App Settings
2. Add the Android App package name
3. and copy the Client Email
4. Open Play Console and go to Users and Permissions click Invite new Users
5. Paste the email into the Email Address field and for Account Permission give it Admin permission. as shown in the image.

1. Go to App Store Connect and choose your app
2. Select "App Information" from the left side menu
3. Click "Manage" under App-Specific Shared Secret

4. Click Generate and Copy the shared secret
5. Paste the copied shared secret in the admin panel in "iTunes Shared Secret"

To Enable Remove Ads feature

1. Create an product with product id of remove_ads in the admin panel and select its Type to be of Ads. You can use any other product_id but remember to add it in every other places as well. Important if you are updating from 2.1.8 version, then after updating you will need to edit the remove ads iap and select its type to be Ads.
2. Then Create an Consumable Product in the App Store/Play Console with the same product id (remove_ads)

Modify battle messages & emojis

1. From lib/utils/constants/constants.dart you can add/modify predefinedMessages a list of predefined messages as per your liking.
   
2. You can update the emojis from assets/images/emojis/ . These emojis must be SVGs.
3. Any additional emojis that you might have added you also need to add them in assets/files/emojis.json

Configure force update

1. To do that go to admin panel, Settings -> System Configurations and enable force update.
   
2. Go to pubspec.yaml and copy the version number of application.
   
3. Enter the version number that we just copied into, Android and Ios Version fields.
   
4. Add the App Store & Play Store links to your app. And make sure that links are correct, otherwise force update will not work as expected.
   

Manage Badges

1. Manage badges from here
2. To unlock badges like Super Sonic, Flashback and Brainiac minimum question is set to 5.
   You can change that as shown in below image.
3. To unlock badges like Combat Winner, Clash Winner and Quiz Warrior winner must be declared by completing battle.
   
4. To get more information about how badges works click here .

Setup Exams

1. Go to admin panel, Settings -> System Configurations and enable exam module as shown in image.
   
2. If you want to update the exam rules you can do so by updating examRules in lib/utils/constants/constants.dart
   

Setup earning module

1. To set up the earning module for users to redeem coins, access the Admin Panel and go to Settings -> Payment Settings.
   Users can convert earned coins to real money with customizable conversion rates. For example here, per 10 Coins user will get 1 Amount.
   Amount here refers to the real money. And Currency Symbol will be used for the amount.
   
2. You can also modify the notes that will be shown to user when they redeem the coins, and for that go to lib/utils/constants/constants.dart
   
3. From there you also have the option to add or update payment methods.
   These methods require manual approval by the Admin , who then proceeds to send the actual funds to the users through their chosen payment options specified in this section.
   
4. Admin can view and process payment requests in the Payment Requests section of their Admin Panel.
   

Configure quiz timers, score and coins management

• Maximum Winning Coins : The highest coins users can earn based on their correct answers percentage in the quiz.
• Minimum Winning Percentage: The minimum correct answers percentage needed to earn Maximum Winning Coins .
• Quiz Winning Percentage : Percentage required to win the quiz
• Score: Points awarded per correct answer.
• Timer Settings : Customize quiz durations from here.
• Welcome Bonus : coins received on initial login.
• Lifeline Deduct : adjust coins needed for using lifeline.
• Random Battle Entry : base entry fee for playing random battles.
• Review Answers Deduct : coins deducted for reviewing quiz answers.

Change app constants

1. In addition to modifying System Configurations and System Utilities , you have the option to make specific changes to certain application aspects through the lib/utils/constants/constants.dart file.
   
   These include altering Sound files, setting the initialSelectedCountryCode for the default country selection in the Phone login screen,
   defining maxPhoneNumberLength to limit the phone number length based on your country, adjusting the wait duration for opponents in battles, setting the in-between questions duration, modifying the deduction for wrong answers, and configuring extra points for the quickest answers, among other possibilities.
2. To modify coin distribution, access lib/utils/ui_utils.dart and update the equation according to your preferences.

Generate release version of this product