Quizionic 3 – Full Quiz App Template For Ionic 3

Overview

Quizionic3 is an app template developed in Ionic3 Framework with local SQLite database and PHP/MySQL backend server with plenty of integrated Cordova plugins such as: Facebook login, Google Admob, Google Analytics, In-App-Purchase and Chartjs/Momemnts.js libraries.

This android and ios app template helps developers to reduce time when building database-driven applications such as Quiz, Exam Simulators or eLearning mobile apps.

UPDATED October 20th (version 3.5.0)

1. Added compatibility to Angular 5.2.11

2. Cordova 8.0.0 and Cordova Android 7.1.1 engine

3. Rxjs 5.5.2 POST requests

UPDATED June 29th (version 3.4.0)

1. Added support for VoguePay payment platform (Android)

2. Added support for PayStack payment platform

3. Added SearchBar in ExamList Page

4. Updated plugins and config.xml file to support most recent plugins, frameworks and Cordova Android 7.1.0 engine

UPDATED June 5th (version 3.3.0)

1. New menu entry for FlashCard support (even with database version 3.2 or with the new database schema 3.3).

2. FlashCards can be retrieved from the database ordered by ascendant or descendant order or as random. This is configurable per each FlashCardList. It’s possible to specify the ID of the FlashCard from where to start the order.

April 28th (version 3.2.5).

Now compatible with iPhone X, Angular 5.0.0 and Ionic 3.9.2, Rxjs 5.5.2 versions

Features

Plugins integrated

  • In-App-Purchase cordova plugin integrated to illustrates consumable and non-consumable products
  • Google Analytics cordova plugin used to report user activity
  • Google AdMob cordova plugin used for banner and interstitial ads
  • In-App-Browser cordova plugin to get Facebook login page in-side application
  • Facebook cordova plugin used to offer login featured based on Facebook users
  • VoguePay/PayStack payment platforms support
  • Cordova CrossWalk Plugin support
  • Chartjs library used to represent user exam scores
  • SQLite storage plugin used to load a pre-populated local database as well as to create the user’s progress one.

App Pages:

  • Login page
  • Welcome page
  • Developer page (useful for changing app behavior when testing on device)
  • Side menu
  • Exam list page
  • Exam detail page (the actual exam execution either for practice or timed one)
  • Tracker page (presents a list of recorded exams scores)
  • Exam Result Review page (after exam completion is now available the result page)
  • Tracker detail page (presents the attempts and scores for a given exam)
  • FlashCardList page (presents all available FlashCards)
  • FlashCard Page (display each FlashCard)
  • PayStack/Vogue payment support pages.
  • Store list page (displays the available in-app-purchase products)
  • Store detail page (presents the buy option for selected product)
  • PIN page (allows the integration of PIN management to unlock app features without the request of products purchase from formal stores)
  • UpdateDB page (allows the synchronization of local database with content from a remote PHP/MySQL server).

Server Side:

  • PHP script for PIN webservice
  • PHP script for database synchronization webservice
  • SQL script for PIN database creation
  • SQL script for MySQL Quizionic remote database creation
  • SQL script for MySQL to store remotely the user score
  • PHP script to handle the reportProgress webservice

Documentation:

  • 1 Index file with installation and overall instructions
  • 1 PDF Manual about use and customization of Quizionic 3
  • 1 PDF Manual for Server Side installation/configuration
  • Commented code

General:

  • SASS used to customize application theme. Each page has its own css file
  • Store management layer as ionic provider
  • DB management layer as ionic provider
  • Works even under Safari or Chrome browser (except Facebook login and In-App-Purchase features – simulated) by falling into WebSQL

Requirements

  • Install node.js, ionic framework, cordova, xcode, android sdk, android build toos, android libs.

Instructions

PLEASE FOLLOW ALL THE DOCUMENTATION PROVIDED IN THE PACKAGE, STARTING BY INDEX.HTML LOCATED IN DOCUMENTATION FOLDER, THEN READ THE TWO PROVIDED PDF DOCS.

  • Unzip the files on a new folder.
  • Copy the Quizionic3 folder into your desired location
  • Change to that folder and do: “npm install”
  • Put the Quizionic3/src/assets/Q3data.db in your folder/www
  • Then run it as: “ionic cordova run ios” or “ionic cordova run android”
  • If you wist to test it under browser, you have to manually put the Q3data.db file under Safari/Chrome cache database folder. Once copied it there, then you can proceed with “ionic serve”. The exact location where to put the file is indicated in the provided documentation.

Related