“Quiz Game” Documentation by “demonisblack” v2.1

“Quiz Game”

Created: 2/22/2015
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. Answer Layouts
  10. Build-In Editor Tool
  11. Save XML with password
  12. Compatibility
  13. Sources and Credits
  14. Changelog

A) Introduction - top

Quiz Game is a HTML5 game with free general knowledge quiz questions and multiple choice answers.

The ZIP package contains the game with 1024x768 resolution that scales proportionally to fit current screen device.

List of types of games:

Build-In Editor Tool:

Total 17 type of answer layouts, maximum up to 8 answers choice:

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 loadingText = 'LOADING...'; //text for loading...
        var startButtonText = 'TAP TO START'; //text for start button
        
        var categoryPage = true; //show/hide category select page
        var categoryAllOption = true; //add ALL category select option
        var categoryContinueText = 'SELECT CATEGORY'; //text for category page button
        var categoryAllText = 'All'; //text for all category select option
        
        var totalQuestions = 0; //set 0 for all questions, set more than 0 to limit questions
        
        var backgroundColour = '#755FBE'; //background colour
        var questionTextColour = '#fff'; //question text colour
        var answerTextColour = '#fff'; //answer text colour
        var questionTextSize = 50; //question text size
        var answerTextSize = 50; //answer text size
        var textLineHeight = 5; //text line height
        
        var questionTextDisplay = 'Q[NUMBER] / [TOTAL]:'; //current question and total question display
        var questionTextAlign = 'center'; //question text align, for now only support align center
        var questionStartY = 170; //question starting position y
        var questionImageOffsetY = -60; //question image format offset y
        
        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 = 20; //answer button background round corner number
        var answerButtonBgShadowNumber = 10; //answer button background shadow
        var answerButtonBgColour = '#E7577A'; //answer button background colour
        var answerButtonBgShadowColour = '#D03E61'; //answer button background shadow colour
        var answeredButtonBgColour = '#FFCC46'; //answered button background colour
        var answeredButtonBgShadowColour = '#FFA73A'; //answered button background shadow colour
        var answerButtonPositionOffsetY = -15; //answer button background offsey y
        
        var revealAnswerEnable = false; //toggle reveal answer
        var answeredWrongButtonBgColour = '#999'; //answered button background colour
        var answeredWrongButtonBgShadowColour = '#666'; //answered button background shadow colour
        
        var audioQuestionDelay = 300;
        var audioAnswerDelay = 100;
        
        var textHeight = 70; //text height
        var textSpace = 25; //text spacing
        
        var timerEnable = true; //enable timer
        var timerStart = 100; //timer start number
        var timerBarHeight = 10; //timer bar height
        var timerBarColour = '#fff'; //timer bar colour
        
        var animateCorrectEnable = true; //toggle answer correct animation
        var animateWrongEnable = true; //toggle answer wrong animation
        var randomQuestionEnable = true; //toggle random question
        var randomAnswerEnable = true; //toggle answer in random order
        
        var resultTitleText = 'BEST SCORE'; //text for result page title
        var buttonReplayText = 'TRY AGAIN'; //text for replay button
        
        //Social share, [SCORE] will replace with game score
        var shareEnable = true; //enable share option
        var shareText ='SHARE IT NOW'; //text for share instruction
        var shareTitle = 'Highscore on Quiz Game is [SCORE]';//social share score title
        var shareMessage = '[SCORE] is mine new highscore on Quiz Game! Try it now!'; //social share score message

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

        var enableMobileSound = true;

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.

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">0</div>
        <!-- PERCENT LOADER END-->

This section is for browser not support page when calls the function checkBrowser(). It shows error message when detect the browser does not support canvas.

        <!-- BROWSER NOT SUPPORT START-->
        <div id="notSupportHolder">
            <div class="notSupport">YOUR BROWSER ISN'T SUPPORTED.<br/>PLEASE UPDATE YOUR BROWSER IN ORDER TO RUN THE GAME</div>
        </div>
        <!-- BROWSER NOT SUPPORT END-->

Device rotate instruction page when calls the function checkMobileOrientation(). It shows rotate instruction when device is in portrait view.

        <!-- ROTATE INSTRUCTION START-->
        <div id="rotateHolder">
            <div class="mobileRotate">
            	<div class="rotateImg"><img src="assets/rotate.png" /></div>
                <div class="rotateDesc">Rotate your device <br/>to landscape</div>
            </div>
        </div>
        <!-- ROTATE INSTRUCTION END-->

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

        <!-- CANVAS START-->
        <div id="canvasHolder">
            <canvas id="gameCanvas" width="1024" height="768"></canvas>
        </div>
        <!-- CANVAS 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.

The most important functions used for game.

G) Game Assets - top

The game contain 'design' folder which include following:

  1. quizgame_1024x768.psd - with layer folders below
    • Result
    • Gameplay
    • Landing

The game contain 'animations' folder which include following:

  1. loader.fla - complete animation frames for loader
  2. brainidea.fla - complete animation frames for brain idea

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 question.xml file

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

        <?xml version="1.0" encoding="UTF-8"?>
        <questions>
            <item>
                <category>IQ Test</category>
                <question><![CDATA[Some months have 31 days,
                some others have 30 days.
                How many months have 28 days?]]></question>
                <answers answerLayout='4type3' correctAnswer='3'>
                    <answer><![CDATA[6]]></answer>
                    <answer><![CDATA[2]]></answer>
                    <answer><![CDATA[12]]></answer>
                    <answer><![CDATA[11]]></answer>
                </answers>
            </item>
        </questions>

Below is the explanation of each most important XML elements:

  1. category - is to categories the type of question (eg. IQ Test, Idiot Test), the category name will be display in category select option page, leave it empty if categoryPage option is set to false. 
            <category>IQ Test</category>
  2. question - the question must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
    • 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
    • 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.
            <question fontSize='50' audio='assets/sounds/questions/question1.ogg'>
        <![CDATA[You are participating in a race.
            You overtake the second person.
            What position are you in?]]>
        </question>
    • 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/tshirt.png</question>
  3. answers - the multiple choice answers can be insert here, maximum 8 answers
    • answerLayout - attribute answerLayout is the layout options, there are total 17 type of layouts (check out Answer Layouts section.)
    • correctAnswer - attribute correctAnswer is the right answer of the question, eg the answer is 7 'None'
    • answerOffsetY - attribute answerOffsetY is the offset position y
    • randomOrder - attribute randomOrder is to enable answer display in random order (Note randomAnswerEnable in game.js must be set to false, if you have different option for this in each questions.)
      •         <answers answerLayout='8type2' correctAnswer='7' answerOffsetY='-30' randomOrder='true'>
            <answer><![CDATA[Nomo]]></answer>
            <answer><![CDATA[Nuni]]></answer>
            <answer><![CDATA[Neno]]></answer>
            <answer><![CDATA[Nino]]></answer>
            <answer><![CDATA[Nena]]></answer>
            <answer><![CDATA[Nono]]></answer>
            <answer><![CDATA[None]]></answer>
            <answer><![CDATA[Nunu]]></answer>
        </answers>
    • answer - the answer must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs
      •         <answer fontSize='50' width="250" height="50" x='700' y='350'><![CDATA[2]]></answer>
      • fontSize - attribute fontSize can set the text font size (number only), this is optional when the answer is too long to adjust the font size smaller, leave it empty to load default font size
      • width - attribute width is the width of the answer (number only, and apply to text not image)
      • height - attribute height is the height of the answer (number only, and apply to text not image)
      • x - attribute x is the position x of the answer
      • y - attribute y is the position y of the answer
      • Can customize your own layout with width, height, position x and y, leave it empty to load default layouts
      • type - attribute type can set to 'image' to load image as answer instead of text, and the image path can insert into answer element like below
      • 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.
        •         <answer x='200' y='500' type='image' audio='assets/sounds/questions/question3_a2.ogg'>
        	assets/questions/number1.png
        </answer>

I) Answer Layouts - top

There are total 17 type of layouts:

  1. 2type1


  2. 2type2


  3. 3type1


  4. 3type2


  5. 3type3


  6. 4type1


  7. 4type2


  8. 4type3


  9. 5type1


  10. 5type2


  11. 5type3


  12. 6type1


  13. 6type2


  14. 7type1


  15. 7type2


  16. 8type1


  17. 8type2


J) Build-In Editor Tool - top

This is the section where you can preview or edit the question and answer with the tool by running edit.html. The page start with edit tools.

  1. First select the quetions you want to edit.
  2. Option to add, remove and sort questions.
  3. This section is to edit question and answers, and also output the new XML string.
    • Edit Question - edit question settings
    • Edit Answers - edit all answers settings
    • Generate XML - click to generate new XML string, copy and replace into questions.xml for new update

  1. Edit question:
    • Category - is to categories the type of question (eg. IQ Test, Idiot Test), the category name will be display in category select option page, leave it empty if categoryPage option is set to false.
    • Type - option set to 'image' to load image as question instead of text
    • Font Size - 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
    • Text - the question text or image path
    • 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.
  2. Click preview question to see the new update, click back or done to save and go back main options.

  1. Answer layouts - there are total 17 type of layouts for multiple answers
  2. Answer setting:
    • Correct Answer - is the right answer of the question, eg the answer is 2 '75'
    • Offset Y - is the offset position y
  3. Answer list - multiple choice answers can be select to edit here, and option to add new or remove answer, only maximum 8 answers. (*If new answer is added, make sure to choose new answer layout to see new answer)
  4. Answer settings:
    • Type - option set to 'image' to load image as answer instead of text
    • Text - the answer text or image path
    • Font Size - can set the text font size (number only), this is optional when the answer is too long to adjust the font size smaller, leave it empty to load default font size
    • Width - is the width of the answer (number only, and apply to text not image)
    • Height - is the height of the answer (number only, and apply to text not image)
    • X - is the position x of the answer
    • Y - is the position y of the answer
    • 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.
    • Can customize your own layout with width, height, position x and y, leave it empty to load default layouts
  5. Click preview answer to see the new update, click back or done to save and go back main options.

K) Save XML with password - top

Build-In Editor Tool come with the 'Save XML' button after version 1.6, 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) 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.

M) Sources and Credits - top

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

N) Changelog - top

Version 2.1 Version 2.0 Version 1.9 Version 1.8 Version 1.7 Version 1.6 Version 1.5 Version 1.4 Version 1.3 Version 1.2 Version 1.1

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!

How to rate an item on CodeCanyon?

If you want to rate one of our items on CodeCanyon please do it like this:
  1. Login to CodeCanyon
  2. Open the menu on the top right, and click onto the link “Downloads” which shows a list of your downloads
  3. Rate our items using the stars
  4. That’s it. Thank you very much!

demonisblack

Go To Table of Contents