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!
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:
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.
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="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-->
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.
Complete game flow:
The most important functions used for page.
The most important functions used for game.
The game contain 'design' folder which include following:
The game contain 'animations' folder which include following:
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.
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]></answer> <answer><![CDATA]></answer> <answer><![CDATA]></answer> <answer><![CDATA]></answer> </answers> </item> </questions>
Below is the explanation of each most important XML elements:
<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>
<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 fontSize='50' width="250" height="50" x='700' y='350'><![CDATA]></answer>
<answer x='200' y='500' type='image' audio='assets/sounds/questions/question3_a2.ogg'> assets/questions/number1.png </answer>
There are total 17 type of layouts:
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.
Build-In Editor Tool come with the 'Save XML' button after version 1.6, follow steps below to use the feature:
$savePassord = '12345';
$saveEnable = true;
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.
I've used the following font and sound files as listed.
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!