### “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!

## Table of Contents

1. Introduction
2. Getting Started
3. HTML Structure
4. CSS Files and Structure
5. JavaScript
6. Game Functions
7. Game Assets
8. XML File
9. Build-in Edit Tools
10. Question Templates
11. Save XML with password
12. Scoreboard
13. Compatibility
14. Sources and Credits
15. 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.

1. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
2. Detect Mobile Browser is a open source scripts to detect mobile browsers and phones.
3. CreateJs plugin is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
4. TweenMax is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).
5. 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:

1. The index.html file start init.js for browser detection
2. If browser is supported, init loader.js to start load asserts with loading progress
3. For mobile the rotate instruction shows when device is in portrait view, detect by mobile.js
4. When all asserts contained in "/assets" folder are loaded, the game start construct canvas.js from main.js thats shows game menu
5. If user click the screen in game menu, the game will start category page with game.js
6. If user click select category in category page, the game will start with first question
7. If user choose the right answer, user will score point and move to next question
8. If user choose the wrong answer, the game will move to next question
9. If user did not answer the question on time, game result will shows
10. When all the question is complete, game result will shows
11. 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:

1. 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:

1. 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>

2. 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>

3. 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

                   <question type='image'>assets/questions/blank1.png</question>

   - 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.
4. 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
   - submit - attribute submit can set to a button to submit answer for multiple choices question
   - 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)
   - offsetTop - attribute offsetTop can set the text offsetTop for background button (number only) in %
   - 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.
5. 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
   - correctAnswer - attribute correctAnswer is the right answer of the question (string/number)
   - submit - attribute submit can set to a button to submit answer when done
   - type - attribute type can set to 'blank, image, text' (blank for input, text or image for submit button)
   - 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)
   - bacgkround - attribute bacgkround can change the input bacgkround color (hex only)
   - offsetTop - attribute offsetTop can set the text offsetTop for background button (number only) in %
   - 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.
6. 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.
7. 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>

1. name - the category name to match for question's category to grap thumbnail
2. 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

1. Select the viewport mode you want to edit.
2. Select the questions you want to edit.
3. Additionally you can remove, sort or add new questions.
4. Edit your question (Question, Answer list, Inputs, Explanation).
5. 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

1. Edit question category.
2. Select question type and insert question text or image path.
3. Insert question property to adjust.
4. 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
5. Preview questions to save.

##### 5) Edit video

1. Insert video property to adjust.
2. Preview video to save.

##### 6) Edit answers

1. Input correct answer.
2. Select answer to edit, additionaly can add/remove answer.
3. Select answer type and insert answer text or image path.
4. Insert answer property to adjust.
5. 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
6. Preview answer to save.

##### 7) Edit inputs

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

##### 8) Edit Explanation

1. Select explanation type and insert explanation text or image path.
2. Insert explanation property to adjust.
3. 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
4. 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:

1. 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';

2. In the same save.php file, enable the save feature by changing $saveEnable to true.

                   $saveEnable = true;

3. Set the questions.xml file permissions to 775 using your FTP software.
4. 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

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

#### Add new table in cPanel

1. In cPanel, select PhpMyAdmin tool from the Databases section.
2. 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

1. 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