Documentation

Quizix

Thank you so much for purchasing our item from themeforest.


  • Created: 10 January, 2018
  • Update: 28 September, 2021

If you have any questions that are beyond the scope of this help file, Please feel free to email at madebyarif@gmail.com or comment on Codecnayon Item Support Page.


About

Firstly, a huge thanks for purchasing this Quizix, your support is truly appreciated!
Create your Custom Quiz App. its Too simple, just add your questions from backend and publish, that’s it. Quizix is an android quiz app with single question with upto fiver answer options. Now you can build your own quiz app by just adding questions and all remaining tasks will be done by app.

Quizix

Quizix Features

  • Laravel Admin Panel
  • Admob Banners, Interstitials & Reward Video
  • Firebase Push Notification
  • Firebase Crash Reporting
  • Firebase Google Analytics
  • Firebase Auth(Facebook, Google, Email, Phone)
  • Firebase Realtime Database(Leaderboard Data)
  • Tutorial
  • Data Caching for Offline
  • Supports Tablets & Mobiles
  • Random Questions/Answers
  • Quick Quiz Round
  • Category/Sub-category Wise Questions
  • Photo/Text Question with 2/3/4/5 Answer Choice
  • Unlimited Categories & Questions
  • Backend Push Notification Panel
  • Splash Screen, App Intro Slide, Material Dialog
  • Question Timer, Sound, Vibration
  • 50-50, Skip Question, Negative Point, Answer Explanation Dialog
  • Share App/Score on Facebook/by Message, Email etc
  • Lifeline
  • Internet Only Mode
  • Enable/Disable ads per Activity
  • Press Back again to Exit
  • Enable/Disable Splash Screen after first run
  • Bulk Upload(Questions)
  • Multiple Layout Option

Backend Demo

Server Requirements

As QuizixX backend developed with Laravel 8, you will need to make sure your server meets the following requirements:

  • PHP >= 7.2.5
  • BCMath PHP Extension
  • Ctype PHP Extension
  • Fileinfo PHP extension
  • JSON PHP Extension
  • Mbstring PHP Extension
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Installation

Follow the steps below to setup backend on your server.

  1. Login to your Cpanel/VPS/Hosting Panel, Create MySQL Database, Create New User & Add/Grant user to the Database.
    You can follow this tutorial: https://www.youtube.com/watch?v=qSdbNoW2f-c
  2. Go to PHPMyAdmin, select your newly created Database, go to import and import "QuizixX_Database.sql".
  3. Now from the File Manager of your hosting go to the corresponding directory where you want to install Laravel Backend. You can use domain root, directory & sub-domain too(better use a domain root or sub-domain).
  4. Use file from QuizixX_Backend_files.zip.
  5. Upload zip, extract zip file on the corresponding directory(maybe some .htaccess configuration changing needed, depends on your hosting environment).
  6. Edit .env file from Laravel Root
    • APP_NAME: Your App name
    • APP_VERSION: Your App version
    • APP_SLOGAN: Your App slogan
    • APP_AUTHOR: Your name
    • READ_ONLY: Read only mode, value(true/false), if true then logged user can't add/edit/delete anything from backend
    • API_KEY: Your API key, use a random key as you want. Need to use same key on Android end(found at Config.java on App). Just for security purpose.

    • FIREBASE_API_SERVER_KEY: Server key of your Firebase Project(You can find it from: Firebase >> Project Settings >> Cloud Messaging)
    • FIREBASE_TOPIC: Firebase Push Notification Topic Name(same as App, found at Config.java on App)
    • FIREBASE_DATABASE_URL: Realtime Database URL here(You can find it from: Firebase >> Realtime Database)
    • FIREBASE_ADMIN_FILE: Firebase Admin SDK JSON file(You can find it from: Firebase >> Project Settings >> Service Accounts >> Generate new private key)

    • APP_URL: Root URL of your Backend App
    • DB_HOST: Host of your Database(Usually 127.0.0.1 or localhost)
    • DB_PORT: Port of your Database(Usually 3306)
    • DB_DATABASE: Database Name
    • DB_USERNAME: Username of your Database User
    • DB_PASSWORD: Password of your Database User
  7. If everything is OK, you're ready to go :)

Usage

Login with pre-defined access first. Email: user@test.com, Password: 12348765

  • Screenshot #1: Quizix Homepage

    Quizix

  • Screenshot #2: Quizix Login

    Quizix

  • Screenshot #3: Quizix Dashboard

    Quizix

  • Screenshot #3.1: Quizix Dashboard

    Quizix

  • Screenshot #4: Quizix Categories

    Quizix

  • Screenshot #5: Quizix Questions

    Quizix

  • Screenshot #6: Quizix Profile

    Quizix

  • Screenshot #7: Quizix Import

    Quizix

  • Screenshot #8: Quizix API

    Quizix

  • Screenshot #9: Quizix Push Notification

    Quizix

  • Screenshot #10: Quizix App Users

    Quizix

  • Screenshot #11: Quizix App Leaderboard

    Quizix


About

Firstly, You need Android Studio & basic Android knowledge to get started.
Don't worry everything is quite easy to follow if you're follow the documentation properly.

Installation

  • Import/open project by Android Studio
  • To change applicationId/Package name follow this video- https://www.youtube.com/watch?v=EEDRt2X-Q90. If you're facing difficulty on changing package name follow this- https://stackoverflow.com/questions/48713006/error-in-renaming-package-cannot-create-file-com-file-already-exist
  • Open drawable, drawable-hdpi, drawable-xxhdpi directory and change app icon or simply go File >> New >> Image Asset & follow the instruction
  • Open string.xml and change 'ads_app_id', 'ads_banner_id', 'ads_interstitial_id' and 'ads_reward_id' by your own Ad id. If you don't want to enable fullscreen/interstitial ad then put empty string on 'ads_interstitial_id' & same for Banner. Also, if you want to disable AdMob then simply open Config.java file from Utils Package & make "SHOW_ADS" value to false.
  • Change Facebook App id- 'facebook_app_id' and login protocal scheme- 'fb_login_protocol_scheme' from string.xml & also from Manifest file change "533234030710333" with your app id. Check the code sample located below.

  • <provider
                  android:name="com.facebook.FacebookContentProvider"
                  android:authorities="com.facebook.app.FacebookContentProvider533234030710333"
                  android:exported="true" />
                

  • Change BASE_URL with your laravel installation URL(Trailing Slash is important, don't remove that, like http://www.example.com/ not http://www.example.com). Beside that you can change all the game related settings from Config.java file
    • PROJECT_CODENAME = "arifix_quizix"; // Codename of your Project(You can put anything as you want but be relevant), required for Shared Preference
    • BASE_URL = "https://quizix.madebyarif.com/"; // Base URL of your Site(for API Call), Trailing Slash is important, don't remove that
    • API_KEY = "2ffOR3Ut1z"; // API Key
    • SPLASH_LAYOUT = R.layout.activity_splash3; // R.layout.activity_splash OR R.layout.activity_splash2 OR R.layout.activity_splash3
    • HOME_LAYOUT = R.layout.activity_home; // R.layout.activity_home OR R.layout.activity_home2 OR R.layout.activity_home3
    • GAME_LAYOUT = R.layout.activity_game2; // R.layout.activity_game OR R.layout.activity_game2 OR R.layout.activity_game3
    • CATEGORY_LAYOUT = R.layout.row_category3; // R.layout.row_category OR R.layout.row_category2 OR R.layout.row_category3
    • SUB_CATEGORY_LAYOUT = R.layout.row_subcategory; // R.layout.row_subcategory OR R.layout.row_subcategory2 OR R.layout.row_subcategory3
    • QUESTION_LAYOUT = R.layout.activity_question2; // R.layout.activity_question OR R.layout.activity_question2 OR R.layout.activity_question3
    • SPLASH_SCREEN = true; // If true, show Splash Activity on every time & if false, show only for first time
    • INTERNET_ONLY = true; // If true, run App only if there is an active Internet Connection
    • SHOW_ADS = true; // Show AdMob Ads, value- true/false
    • QUESTION_COUNTDOWN = true; // Show CountDown Timer on Question, value- true/false
    • MINUS_POINT = true; // Minus Point for per Wrong Answer, value- true/false
    • SKIP_QUESTION = true; // Add Skip Question on Question, value- true/false
    • FIFTY_FIFTY = true; // Add Fifty Fifty option on Question, value- true/false
    • SHOW_EXPLANATION = true; // Show Explanation of Answer, value- true/false
    • RANDOM_QUESTION = true; // Show Questions Randomly, value- true/false
    • RANDOM_ANSWER = true; // Show Answers Randomly, value- true/false
    • SHOW_CORRECT_ANSWER = true; // Show Correct Answer if Wrong, value- true/false
    • LIFE_LINE = true; // Lifeline, value- true/false
    • QUESTION_COUNTDOWN_TIME = 10; // Countdown Time(in seconds)
    • POINT_PER_CORRECT_ANSWER = 10; // Point per Correct Answer
    • MINUS_POINT_PER_WRONG_ANSWER = 5; // Minus Point per Wrong Answer
    • MAX_FIFTY_FIFTY_CHANCE = 2; // How many times they can take 50/50 Chance
    • MAX_SKIP_QUESTION_CHANCE = 2; // How many times they can Skip Question
    • QUICK_QUIZ_COUNTDOWN_TIME = 10; // Quick Quiz Category Countdown Time(In seconds)
    • SHOW_LEADERS_COUNT = 15; // How many leaders need to display
    • MAX_LIFE_LINE = 3; // Max Life Line
    • LIFE_PER_WATCH_VIDEO = 1; // How many lifeline user will get by watching per Reward Video Ad
    • CATEGORY_IMAGES_ROOT = "uploads/category/"; // Categories Photo Directory
    • QUESTIONS_IMAGES_ROOT = "uploads/question/"; // Questions Photo Directory
    • DATABASE_NAME = "arifix_quizix"; // Database name used to store Scores(You can put anything as you want but be relevant)
    • FIREBASE_TOPIC = "arifix_quizix"; // Firebase Push Notification Topic Name(You can put anything as you want but be relevant). Also, you need to exact same name on Laravel Backend(.env file, FIREBASE_TOPIC)
    • DATABASE_TABLE_NAME = "scores"; // Table name used to store Scores
  • Add your firebase setting json file on app/google-services.json by replacing current one. If you don't have any, change package name from app/google-services.json file with yours.
  • Build, test, create signed apk and publish:

Backend Demo


Screens

QuizixX Screens

Quizix

Quizix


Firebase

Firebase installations

  • Go to- https://console.firebase.google.com/
  • Add Project, Enter Project Name, Select Country & Create the Project
  • Select "Add Firebase to your Android App"
  • Enter your package name & Register App
  • Go to "Authentication >> Sign-in methods"
  • Go to "Realtime Database >> Rules", on rules edito, paste codes from below & publish.
  • 
                               {
                                 "rules": {
                                   ".read": true,
                                   ".write": "auth != null"
                                 }
                               }   
                        
  • Download google-services.json from "Firebase >> Project Settings >> Downlaod google-services.json" & replace it with current one located at(App Root/app directory)
  • Go to "Firebase >> Project Settings >> Cloud Messaging", copy "Server key" & use it on Backend(.env) file, on "FIREBASE_API_SERVER_KEY" value.
  • Go to "Firebase >> Project Settings >> Service Accounts >> Generate new private key", put downloaded files on Backend root & put file name with extension on Backend(.env) file, on "FIREBASE_ADMIN_FILE" value.
  • Go to "Firebase >> Realtime Database" & copy database URL. Put it on "FIREBASE_DATABASE_URL" value. Example value "https://quizix.firebaseio.com/".
  • To send Push Notification, simply go- https://console.firebase.google.com/ then go to "Notification" menu located under "Grow" panel & go to "New Message".
  • Altertively, you can send push notifiactions from Backend.
  • Input "Message text", select your App, from Advanced options input "Title" & select "Enabled" of "Sound" downdown for sound & click on "Send Message". Voila!.
  • You can check all the Issues/Users impacted from Firebase Crashlytics.
  • You can check analytics from "Analytics >> Dashboard".

Technical Description

Technologies:

Technologies: We built this app with native android programming, java. We used Android Studio 3.5.3. All layout has been designed by android xml.

Java Packages:
  • Adapter: All Adapters(Category, Sub-Category, Score & Leader).
  • Client: Singleton Retrofit API Client
  • Database: Google Room Database related files.
  • Firebase: Firebase Push Notification Related files.
  • Fragment: App Fragments(Intros, Scores & Settings).
  • Model: All Models(Category, Question, Score, Leader & Tutorial).
  • Network: Network related Inteface, Callback, Abstarct Class &am; Mock.
  • Utils: Utility Files(Singleton Shared Preference, Custom Countdown Timer, Helper(helper methods), Utilities & most importantly Config.java setting file).

Layout Designs

Layout implementation is pretty much simple. We have implemented all design by maintaining google material design standard.


String resources:

string.xml file is basically important to configure your ad id's, facebook is's & play store id's. Please modify those before publish up.


Project File Structure

Android

  • QuizixX
    • .gradle
    • app
      • src
        • main
          • java (java packages and classes)
          • res (resources and layouts)

Backend

  • QuizixX
    • app
      • Http
        • Controllers
      • Models
    • config
    • database
      • migrations
    • public
      • assets
    • resources
      • views
    • routes
    • uploads
    • .env

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Unfortunately No, you need to buy multiple copy or extended license for it.
Yes, I can help you with that.
Yes. Email me with details at madebyarif@gmail.com with subject "Quizix Customization".
Sorry, as I don't know Swift I don't ahve any plan to make an iOS version. But I have plan to create a Flutter version soon(Early 2022 hopefully).

Source & Credits

Images:
Sounds:
Backend(Bootstrap Template):
Documentation(Bootstrap Template):
App Showcase Templates
Animated App Icons

Support

If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page

We are located in GMT +6:00 time zone and we answer all questions within 24-72 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template like bugs and errors. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

Video Tutorials

Setup instructions

Change Package & Setup Social Login
Setup Backend
Setup Firebase
Upgrade Database without losing Data

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version X (28 September, 2021)

  • Added Multiple layouts for Splash Screen, Game Screen, Category Screen, Sub-category Screen & Question Screen
  • Updated Updated to latest Android version
  • Updated Brand new backend
  • Updated Brand new documentation
  • Updated All libraries are up-to-date
  • Updated Laravel to latest version
  • Updated Improvements on Android code

Version 2020 (17 February, 2020)

  • Check Codecanyon

Version 2019 (25 August, 2019)

  • Check Codecanyon

Version 4.3 (05 August, 2018)

  • Check Codecanyon

Version 4.2 (10 July, 2018)

  • Check Codecanyon

Version 4.1 (14 June, 2018)

  • Check Codecanyon

Version 4.0 (05 June, 2018)

  • Check Codecanyon

Version 3.3 (09 May, 2018)

  • Check Codecanyon

Version 3.3 (30 March, 2018)

  • Check Codecanyon

Version 3.1 (18 March, 2018)

  • Check Codecanyon

Version 3.0 (06 March, 2018)

  • Check Codecanyon

Version 2.1 (26 January, 2018)

  • Check Codecanyon

Version 2.0 (18 January, 2018)

  • Check Codecanyon

Version 1.0 (10 January, 2018)

Initial Release