“Quiz Game 2” Documentation by “demonisblack” v1.2

“Quiz Game 2”

Shared by: prowebber.ru
Created: 30/8/2017
By: demonisblack
Email: demonisblack@gmail.com

Thank you for purchasing my game. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Introduction
Getting Started
HTML Structure
CSS Files and Structure
JavaScript
Game Functions
Game Assets
XML File
Build-in Edit Tools
Question Templates
Save XML with password
Scoreboard
Compatibility
Sources and Credits
Changelog

A) Introduction - top

Quiz Game 2 is a HTML5 game with free general knowledge quiz questions and multiple choice answers, it is rebuild without canvas which can support responsive for landscape and portrait layout, and include the new fill in the blank and video question.

The ZIP package contains the game with 1200×650 resolution that scales to fit the whole screen device, but it may not be perfectly full screen.

B) Getting Started - top

To install the game just upload folder 'game' to your server. The game won't run locally with some browser like Chrome due to some security mode.

You need a website that runs PHP to make facebook share button work, and make sure to change Facebook Open Graph meta and Twitter meta in index.html, just replace [GAME_URL] to your game URL.

        <!-- for Facebook -->
        <meta property="og:image" content="[GAME_URL]/share.jpg" />
        <meta property="og:url" content="[GAME_URL]" />
        
        <!-- for Twitter -->
        <meta name="twitter:image" content="[GAME_URL]/share.jpg" />

You can easily customize game text and settings in game.js file

        var stageW=1200; //game width
        var stageH=650; //game height
        var portraitW=380; //game portrait width
        var portraitH=600; //game portrait height
        var fitToScreen = true; //fit to browser screen
        var maintainAspectRatio = true; //maintain aspect ratio
        
        var loaderText = 'Loading question...'; //game loading text
        
        var categoryPage = true; //show/hide category select page
        var categoryAllOption = true; //add ALL category select option
        var categoryAllText = 'All'; //text for all category select option
        
        var questionTotalDisplay = '[NUMBER]/[TOTAL]:'; //current question and total question display
        var totalQuestions = 0; //set 0 for all questions, set more than 0 to limit questions
        
        var enableRandomQuestion = true; //enable question in random sequence
        var enableRandomAnswer = true; //enable answer in random sequence
        var enableRevealAnswer = true; //enable reveal answer
        var enableExplanation = true; //enable show explanation
        
        var enableCountdownTimer = true; //enable countdown timer
        var coundownTimer = 25; //countdown timer
        
        //question property
        var questionFontSize = 50;
        var questionLineHeight = 50;
        var questionColor = '#fff';
        var questionTop = 25;
        var questionLeft = 5;
        var questionWidth = 90;
        var questionHeight = 30;
        var questionAlign = 'center';
        
        //video property
        var videoTop = 15;
        var videoLeft = 30;
        var videoWidth = 40;
        var videoHeight = 41;
        var videoAutoplay = true;
        var videoControls = true;
        
        //answers property
        var answerFontSize = 40;
        var answerLineHeight = 40;
        var answerColor = '#fff';
        var answerAlign = 'center';
        var answerWidth = 30;
        var answerHeight = 14;
        var answerOffsetTop = -15;
        
        var answerListsEnable = true; //enable answer list style
        var answerLists = ['a) ','b) ','c) ','d) ','e) ','f) ','g) ','h) ']; //answer list style formatn, maximum 8
        var answerAnimationEnable = true; //enable answer animation
        
        var answerButtonBgEnable = true; //toggle answer button background
        var answerButtonBgRoundNumber = 15; //answer button background round corner number
        var answerButtonBgColour = '#a2cd4a'; //answer button background colour
        var answerButtonBgShadowColour = '#6fad4e'; //answer button background shadow colour
        var answeredButtonBgColour = '#f89a31'; //answered button background colour
        var answeredButtonBgShadowColour = '#dc4832'; //answered button background shadow colour
        var wrongButtonBgColour = '#989898'; //answered button background colour
        var wrongButtonBgShadowColour = '#666'; //answered button background shadow colour
        
        var audioQuestionDelay = 300; //timer delay to play question audio
        var audioAnswerDelay = 100; //timer delay to play answer audio
        
        //inputs property
        var inputFontSize = 40;
        var inputLineHeight = 40;
        var inputColor = '#333';
        var inputBackground = '#fff';
        var inputAlign = 'center';
        var inputWidth = 20;
        var inputHeight = 10;
        var inputTop = 50;
        var inputLeft = 40;
        var inputOffsetTop = -15;
        
        //correct or wrong property
        var correctDisplayText = 'That\'s Correct!';
        var wrongDisplayText = 'INCORRECT!';
        var quesResultFontSize = 50;
        var quesResultLineHeight = 50;
        var quesResultColor = '#fff';
        var quesResultTop = 30;
        var quesResultLeft = 5;
        var quesResultWidth = 90;
        var quesResultHeight = 30;
        var quesResultAlign = 'center';
        
        //explanation property
        var explanationFontSize = 35;
        var explanationLineHeight = 35;
        var explanationColor = '#fff';
        var explanationTop = 45;
        var explanationLeft = 5;
        var explanationWidth = 90;
        var explanationHeight = 30;
        var explanationAlign = 'center';
        
        //result
        var scoreDisplayText = 'You score : [NUMBER]!'; //score result display text
        
        //Social share, [SCORE] will replace with game score
        var shareEnable = true; //toggle share
        var shareTitle = 'Highscore on Quiz Game 2 Game is [SCORE]pts';//social share score title
        var shareMessage = '[SCORE] is mine new highscore on Quiz Game 2 Game! Try it now!'; //social share score message

If you wish to customize the question and answer via XML file, check out XML File section.

If you wish to customize the question and answer with build-in tool, check out Build-In Editor Tool section.

If you wish to check out question templates, check out Question Templates section.

If you wish to enable scorebard, check out Scorebard section.

The sound can be easily disabled to avoid compatibility issues in sound.js file:

        var enableMobileSound = true;

C) HTML Structure - top

The page start with the loader wrapper that covering the whole screen in the body. It shows loader progress when calls the function initPreload()

        <!-- PERCENT LOADER START-->
    	<div id="mainLoader"><img src="assets/loader.png" /><br><span>0</span></div>
        <!-- PERCENT LOADER END-->

Follow by one HTML tag in the body. The game start initiatie by calls the main function of the game initMain().

        <!-- CONTENT START-->
        <div id="mainHolder">
        	
        </div>
        <!-- CONTENT END-->

D) CSS Files and Structure - top

I'm using two CSS files in this game. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page.

E) JavaScript - top

This game using Javascript files below.

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.
CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
TweenMax is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).
The game have the following js files
- init.js : check if browser or device support
- loader.js : loader to load all game images
- main.js : initiate game setup and browser resize function
- mobile.js : mobile orientation change
- canvas.js : canvas setup and resize
- sound.js : sound event
- game.js : game play and logics
- plugins.js : additonal useful plugins

Complete game flow:

The index.html file start init.js for browser detection
If browser is supported, init loader.js to start load asserts with loading progress
For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
When all asserts contained in "/assets" folder are loaded, the game start construct canvas.js from main.js thats shows game menu
If user click the screen in game menu, the game will start category page with game.js
If user click select category in category page, the game will start with first question
If user choose the right answer, user will score point and move to next question
If user choose the wrong answer, the game will move to next question
If user did not answer the question on time, game result will shows
When all the question is complete, game result will shows
If user click the screen in game result, it will restart the game

F) Game Functions - top

The most important functions used for page.

checkBrowser()
This function is runs for browser detection
checkMobileEvent()
This function runs for mobile event

The most important functions used for game.

initMain()
This function build canvas
startGame()
This function start gameplay
stopGame()
This function stop gameplay
saveGame()
This function save game score

G) Game Assets - top

The game contain 'design' folder which include following:

quizgame2_1200x650.psd - with layer folders below
- Option
- Result
- Game
- Category
- Landing
- Background

The folder 'assets' in 'game' folder contains all the images of the game that can be replaced. Is better to have the same size of the old ones if you want to reskin the game graphic without coding.

H) XML File - top

You can easily build or edit Question and Answer in questions.xml file

All Question and Answer are store in each XML item, sample code below:.

        <item>
            <category>IQ Questions</category>
            <landscape>
                <question type="text" top="17" audio="assets/sounds/questions/iq_q8.ogg"><![CDATA[If Bob sold 15 apples in a working week, what is the average number of apples he sells each day?]]></question>
                <answers correctAnswer="2">
                    <answer type="text" top="48" width="35" left="14" audio="assets/sounds/questions/iq_q8_a.ogg"><![CDATA[1]]></answer>
                    <answer top="48" type="text" left="51" width="35" audio="assets/sounds/questions/iq_q8_b.ogg"><![CDATA[3]]></answer>
                    <answer top="65" type="text" left="14" width="35" audio="assets/sounds/questions/iq_q8_c.ogg"><![CDATA[6]]></answer>
                    <answer top="65" type="text" left="51" width="35" audio="assets/sounds/questions/iq_q8_d.ogg"><![CDATA[15]]></answer>
                </answers>
                <inputs/>
                <explanation audio="assets/sounds/questions/iq_q8_explain.ogg"><![CDATA[ There are 5 days in a working week, so you divide 15 by 5 = 3. ]]></explanation>
                <video left="5" top="22" width="90" height="33" autoplay="true" controls="true">assets/questions/mov_bbb.mp4</video>
            </landscape>
            
            <portrait>
                <question type="text" top="12" fontSize="25" lineHeight="25" audio="assets/sounds/questions/iq_q8.ogg"><![CDATA[If Bob sold 15 apples in a working week, what is the average number of apples he sells each day?]]></question>
                <answers correctAnswer="2">
                    <answer type="text" width="90" height="10" top="35" fontSize="35" lineHeight="35" offsetTop="-15" audio="assets/sounds/questions/iq_q8_a.ogg"><![CDATA[1]]></answer>
                    <answer width="90" height="10" top="47" type="text" fontSize="35" lineHeight="35" offsetTop="-15" audio="assets/sounds/questions/iq_q8_b.ogg"><![CDATA[3]]></answer>
                    <answer width="90" height="10" top="59" type="text" fontSize="35" lineHeight="35" offsetTop="-15" audio="assets/sounds/questions/iq_q8_c.ogg"><![CDATA[6]]></answer>
                    <answer width="90" height="10" top="71" type="text" fontSize="35" lineHeight="35" offsetTop="-15" audio="assets/sounds/questions/iq_q8_d.ogg"><![CDATA[15]]></answer>
                </answers>
                <inputs/>
                <explanation type="text" fontSize="30" lineHeight="30" audio="assets/sounds/questions/iq_q8_explain.ogg"><![CDATA[ There are 5 days in a working week, so you divide 15 by 5 = 3. ]]></explanation>
                <video left="5" top="22" width="90" height="33" autoplay="true" controls="true">assets/questions/mov_bbb.mp4</video>
            </portrait>
        </item>

Below is the explanation of each most important XML elements:

category - is to categories the type of question (eg. IQ Questions, Math Puzzles), the category name will be display in category page, leave it empty if categoryPage option is set to false.
```
        <category>IQ Questions</category>
            
```
landscape, portrait - all questions value are seperate by two view mode which is landscape and portrait, each mode have their own values and settings
```
        <landscape></landscape>
        <portrait></portrait>
            
```
question - the question must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
- type - attribute type can set to 'image' to load image as question instead of text, and the image path can insert into question element like below
- lineHeight - attribute lineHeight can set the text line height (number only), this is optional when the question is too long to adjust the font size smaller, leave it empty to load default font size
- fontSize - attribute fontSize can set the text font size (number only), this is optional when the question is too long to adjust the font size smaller, leave it empty to load default font size
- color - attribute color can change the text color (hex only)
- align - attribute align can set the text align (left, center, right)
- top - attribute top can change the text top position (number only) in %
- left - attribute left can change the text left position (number only) in %
- width - attribute width can change the text width (number only) in %
- height - attribute height can change the text height (number only) in %
- audio - attribute audio is the audio file path for question, it must have MP3 and OGG file format for cross-browser compatible, only OGG format to be insert to XML data, it will auto change to MP3 if is not support.
answers - the multiple choice answers can be insert here, maximum 8 answers
- correctAnswer - attribute correctAnswer is the right answer of the question (number only), for multiple choices answer can add in by comma (1,3,4)
- answer - the answer must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
inputs - the fill in the blank answers can be insert here
- input - the input must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
videos - the videos can be insert here
- top - attribute top can change the text top position (number only) in %
- left - attribute left can change the text left position (number only) in %
- width - attribute width can change the text width (number only) in %
- height - attribute height can change the text height (number only) in %
- autoplay - attribute autoplay is to autoplay the video.
- controls - attribute controls is to show/hide the video player controls.
- video - the video path can be insert here, most browser can support mp4 video format.
explanation - the explanation can be insert here in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
- type - attribute type can set to 'image' to load image as answer instead of text
- fontSize - attribute fontSize can set the text font size (number only), this is optional when the question is too long to adjust the font size smaller, leave it empty to load default font size
- lineHeight - attribute lineHeight can set the text line height (number only), this is optional when the question is too long to adjust the font size smaller, leave it empty to load default font size
- color - attribute color can change the text color (hex only)
- align - attribute align can set the text align (left, center, right)
- top - attribute top can change the text top position (number only) in %
- left - attribute left can change the text left position (number only) in %
- width - attribute width can change the text width (number only) in %
- height - attribute height can change the text height (number only) in %
- audio - attribute audio is the audio file path for explanation, it must have MP3 and OGG file format for cross-browser compatible, only OGG format to be insert to XML data, it will auto change to MP3 if is not support.

#IMPORTANS:
- Each questions must only have either answers/inputs only one of these settings, it will not run with both
- For multiple choice answers it must have at least one submit button for user to submit answer
- For input it must have at least one type of BLANK and a submit button for user to submit answer

You can add category thumbnail with format below.

        <category>
            <thumb name="IQ Questions">assets/item_thumb_1.png</thumb>
            <thumb name="Math Puzzles">assets/item_thumb_2.png</thumb>
            <thumb name="All">assets/item_thumb_3.png</thumb>
        </category>

name - the category name to match for question's category to grap thumbnail
Follow by the image path

I) Build-in Edit Tools - top

This is the section where you can preview or edit the question with the tool by running edit.html.

1) Basic Options

Select the viewport mode you want to edit.
Select the questions you want to edit.
Additionally you can remove, sort or add new questions.
Edit your question (Question, Answer list, Inputs, Explanation).
Generate the new XML, copy and replace into questions.xml file

2) Sort question list

3) Add new questions

You may check out Question Templates section.

4) Edit questions

Edit question category.
Select question type and insert question text or image path.
Insert question property to adjust.
Insert question audio file path, it must have MP3 and OGG file format for cross-browser compatible, only OGG format to be insert to XML data, it will auto change to MP3 if is not support
Preview questions to save.

5) Edit video

Insert video property to adjust.
Preview video to save.

6) Edit answers

Input correct answer.
Select answer to edit, additionaly can add/remove answer.
Select answer type and insert answer text or image path.
Insert answer property to adjust.
Insert answer audio file path, it must have MP3 and OGG file format for cross-browser compatible, only OGG format to be insert to XML data, it will auto change to MP3 if is not support
Preview answer to save.

7) Edit inputs

Select input to edit, additionaly can add/remove input.
Select input type and insert input text or image path.
Insert input correct answer and property to adjust.
Preview input to save.

8) Edit Explanation

Select explanation type and insert explanation text or image path.
Insert explanation property to adjust.
Insert explanation audio file path, it must have MP3 and OGG file format for cross-browser compatible, only OGG format to be insert to XML data, it will auto change to MP3 if is not support
Preview explanation to save.

J) Question Templates - top

There are total 18 type of templates:

K) Save XML with password - top

Build-In Editor Tool come with the 'Save XML' button, follow steps below to use the feature:

First open save.php and change to the new password, default password is 12345.
It is important to change the new password else anyone can open edit and save your XML file.
```
            $savePassord = '12345';
            
```
In the same save.php file, enable the save feature by changing $saveEnable to true.
```
            $saveEnable = true;
            
```
Set the questions.xml file permissions to 775 using your FTP software.
Start the Build-In Editor Tool, clicking the 'Save XML' button will prompt to enter password to save.

L) Scoreboard - top

Scoreboard is a option where user can submit score and view top 10 leaderboard, follow the steps below to setup and run scoreboard.

1) Server setup

Create new database in cPanel

In cPanel, select MySQL Database Wizard from the Databases section.
Enter a name for the new database you wish to create and continue to the next step.
Enter a username and password to create the database user account and continue to the next step.
Select All Privileges to set security permissions the user has to the database and continue to the next step.

Add new table in cPanel

In cPanel, select PhpMyAdmin tool from the Databases section.
Click and open the newly create database and run sql query below to create new table

CREATE TABLE quizgame2_scores (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(30) NOT NULL DEFAULT 'anonymous',
email VARCHAR(30) NOT NULL,
type VARCHAR(30) NOT NULL,
score INT(100) UNSIGNED NOT NULL DEFAULT 0,
date TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;

Configuration for database access

Open dbconn.php in game folder and change the settings to your newly created database info

    $host = "localhost"; // MySQL hostname
    $dbUserName = "root"; // MySQL database username
    $dbPwd = ""; // MySQL database password
    $dbName = "scoreboard"; // The name of the database
    $table = "quizgame2_scores"; //the name of the table

2) Settings

Enable the scoreboard by changing 'displayScoreBoard' to true in score.js, you can easily customize other settings in here

        var displayScoreBoard = false; //toggle submit and scoreboard button
        var scoreBoardTitle = 'TOP 10 Scoreboard'; //text for scoreboard title
        var scoreRank_arr = ['1st','2nd','3rd','4th','5th','6th','7th','8th','9th','10th']; //scoreboard ranking list
        
        var submitTitle = 'Submit your score'; //text for submit title
        
        var score_arr = [{col:'RANK', percent:8, align:'center'},
                        {col:'NAME', percent:42, align:'left'},
                        {col:'CATEGORY', percent:20, align:'center'},
                        {col:'SCORE', percent:30, align:'center'}];

M) Compatibility - top

This game is build for Desktop browsers that support HTML5 canvas. Any mobile/tablet should work in landscape view, but they are not officially supported.

N) Sources and Credits - top

I've used the following font and sound files as listed.

button 13.wav from file bubaproducer
SFX UI Button Click from file suntemple
ui interface neutral from file JavierZumer
buttonchime02up.wav from file JustinBW
Confirm - HarpEPianoEdit.mp3 from file ying16
Answer and Description audio are record from Google Translate

O) Changelog - top

Version 1.2

Fixed output XML for Build-in Editor Tool

Version 1.1

Added multiple choices option

Once again, thank you so much for purchasing this game. As I said at the beginning, I'd be glad to help you if you have any questions relating to this game. No guarantees, but I'll do my best to assist. If you have a more general question relating to the games on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you like my game, please take a moment to rate it. Thanks!

demonisblack

Go To Table of Contents