Documentation

Millionaire Quiz

Thank you so much for purchasing our item from codecanyon.

Version: 2.2
Author: demonisblack

Created: 23 October, 2020
Update: 25 November, 2023

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Overview

Millionaire Quiz is a HTML5 game with trivia knowledge question and win big prize.

The ZIP package contains the game with 1280x768 and 768x1024 resolution that scales proportionally to fit current screen device.

Built-In Editor Tool:

Installation

Follow the steps below to setup your game:

To install the game just upload folder /game to your hosting web server using FTP or localhost in order to use it on your website. The game won't run locally with some browser like Chrome due to some security mode.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- game/assets - Images & audio files
- game/css - Stylesheet files
- game/js - Javacript files
- game/edit.html - Built-in Editor page
- game/editTools.html - Built-in Editor Tool
- game/icon.ico - Website icon
- game/share.jpg - Social share image
- game/share.php - Social share file
- game/index.html - Homepage
- game/questions.xml - Questions XML file
You will 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" />

Settings

Follow the steps below to customize your game:

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

                        
//prize array list
var prize_arr = [
					{text:'$100', value:100},
					{text:'$200', value:200},
					{text:'$400', value:400},
					{text:'$800', value:800},
					{text:'$1,000', value:1000},
					{text:'$2,000', value:2000},
					{text:'$4,000', value:4000},
					{text:'$8,000', value:8000},
					{text:'$16,000', value:16000},
					{text:'$32,000', value:32000},
					{text:'$64,000', value:64000},
					{text:'$125,000', value:125000},
					{text:'$250,000', value:250000},
					{text:'$500,000', value:500000},
					{text:'$1 MILLION', value:1000000},
	
];

//call friend avatar array list
var avatar_arr = [
					'assets/item_avatar_01.png',
					'assets/item_avatar_02.png',
					'assets/item_avatar_03.png',
					'assets/item_avatar_04.png',
					'assets/item_avatar_05.png',
];

var avatarSpeech = ['Answer is [ANSWER]','Choose [ANSWER] I\'m sure'];

//game test display
var textDisplay = {
					loading:'Loading...',
					play:'Play Now',
					rules:'Rules',
					category:'Choose Category',
					categorySelect:'Select',
					categoryAll:'ALL',
					back:'Back',
					continue:'Continue',
					confirm:'Proceed',
					cancel:'Cancel',
					dollar:'$',
					million:'MILLION',
					assistconfirm:'Yes',
					assistcancel:'No',
					walkawayconfirm:'Walkaway',
					walkawaycancel:'Stay',
					exitTitle:'Quit Game',
					exitMessage:'Are you sure you want\nto quit game?',
					exitYes:'Proceed',
					exitNo:'Cancel',
					share:'Share your score:',
					resultWon:'Congratulation\nyou won [PRIZE]',
					resultWalkaway:'Congratulation\nyou walk away [PRIZE]',
					resultCheckpoint:'Too bad\nbut you still got [PRIZE]',
					resultLost:'You lost...\nbetter luck next time',
					rulesTitle:'Millionaire Quiz Rules',
					rulesDesc:'There are 15 questions in total and each question is worth a specific amount of money and time limit is placed on contestant to come up with an answer.\n\nThere are three ‘checkpoint’ in the question structure (Questions 5, 10 and 15). Contestant accumulate money with each correct answer, but should the they answer incorrectly before reaching a checkpoint, they stand to lose a large amount of winnings. At any point, the contestant may use up one (or more) of their three ‘lifelines’. These are:\n\n50:50 - two of the three incorrect answers are removed. \nPhone-A-friend - the contestant may speak to a friend on the phone for answer.\nAsk the audience - the audience votes on their choice of answer.\n\nEach lifeline may only be used once during a contestant\'s entire game.'
				}

//game settings
var gameSettings = {
					category:true,
					categoryAllOption:true,
					level:false,
					lists:['A.','B.','C.','D.'],
					randomQuestion:true,
					randomAnswer:true,
					timer:30000,
					timerFontSize:35,
					timerColour:'#FFCE00',
					questionFontSize:35,
					questionColour:'#fff',
					answerFontSize:30,
					answerColour:'#fff',
					speechFontSize:25,
					speechColour:'#081622',
					audienceChartColour:'#fff',
					prizeColour:'#FFB000',
					prizeCheckpointColour:'#fff',
					prizeHighlightColour:'#081622',
					prizeCheckpointHighlightColour:'#FC4F03',
					resultWinColor:'#FFCE00',
					resultLostColor:'#fff',
					speechAudio:true,
					questionAudio:true,
					questionAudioDelay:.5,
					answerAudioDelay:.3
				};
	

//Social share, [SCORE] will replace with game score
var shareEnable = true; //toggle share
var shareTitle = 'Highscore on Millionaire Quiz Game is [SCORE]';//social share score title
var shareMessage = '[SCORE] is mine new highscore on Millionaire Game! Try it now!'; //social share score message

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

                         
var enableDesktopSound = true; //sound for dekstop
var enableMobileSound = true; //sound for mobile and tablet

Hosts

You can easily customize hosts in host_arr in game.js file, it store all hosts data and below is the explanation of each most important objects:

                        
//host array list
var host_arr = [
	{
		src:'assets/item_host_01.png',
		offset:{x:0, y:0},
		eye:{src:'assets/item_host_eye_01.png', property:{width:30, height:11, x:115, y:58}},
		mouth:{src:'assets/item_host_talk_01.png', property:{width:16, height:16, x:115, y:76}},
		speech:{
			prize:[
					'assets/audios/host1/100.ogg',
					'assets/audios/host1/200.ogg',
					'assets/audios/host1/400.ogg',
					'assets/audios/host1/800.ogg',
					'assets/audios/host1/1000.ogg',
					'assets/audios/host1/2000.ogg',
					'assets/audios/host1/4000.ogg',
					'assets/audios/host1/8000.ogg',
					'assets/audios/host1/16000.ogg',
					'assets/audios/host1/32000.ogg',
					'assets/audios/host1/64000.ogg',
					'assets/audios/host1/125000.ogg',
					'assets/audios/host1/250000.ogg',
					'assets/audios/host1/500000.ogg',
					'assets/audios/host1/1million.ogg',

			],
			welcome:[
				{text:'Welcome to Millionaire Quiz Show', audio:['assets/audios/host1/welcome1.ogg']}
			],
			begin:[
				{text:'Let\'s play', audio:['assets/audios/host1/begin1.ogg']},
				{text:'Should we begin', audio:['assets/audios/host1/begin2.ogg']}
			],
			firstquestion:[
				{text:'First question...', audio:['assets/audios/host1/firstquestion1.ogg']},
				{text:'Let\'s check your first question', audio:['assets/audios/host1/firstquestion2.ogg']}
			],
			nextquestion:[
				{text:'Ready for next question [PRIZE]', audio:['assets/audios/host1/nextquestion1.ogg'], prize:1},
				{text:'Here is the [PRIZE] question', audio:['assets/audios/host1/nextquestion2_a.ogg', 'assets/audios/host1/nextquestion2_b.ogg'], prize:1}
			],
			finalquestion:[
				{text:'Are you ready to win [PRIZE]', audio:['assets/audios/host1/finalquestion1.ogg'], prize:1},
				{text:'This is your final question', audio:['assets/audios/host1/finalquestion2.ogg']}
			],
			assist:[
				{text:'Sure you want to use assist?', audio:['assets/audios/host1/assist1.ogg']}
			],
			assistcontinue:[
				{text:'And your answer?', audio:['assets/audios/host1/assistcontinue1.ogg']},
				{text:'Final decision?', audio:['assets/audios/host1/assistcontinue2.ogg']}
			],
			confirm:[
				{text:'Is this your answer?', audio:['assets/audios/host1/confirm1.ogg']},
				{text:'Are you certain?', audio:['assets/audios/host1/confirm2.ogg']}
			],
			choosen:[
				{text:'Answer is choosen', audio:['assets/audios/host1/choosen1.ogg']},
				{text:'Answer lockdown', audio:['assets/audios/host1/choosen2.ogg']}
			],
			figure:[
				{text:'Maybe', audio:['assets/audios/host1/figure1.ogg']},
				{text:'Perhaps', audio:['assets/audios/host1/figure2.ogg']},
				{text:'We will see', audio:['assets/audios/host1/figure3.ogg']}
			],
			correct:[
				{text:'You had it right', audio:['assets/audios/host1/correct1.ogg']},
				{text:'That\'s correct', audio:['assets/audios/host1/correct2.ogg']},
				{text:'Yes', audio:['assets/audios/host1/correct3.ogg']}
			],
			congrat:[
				{text:'Congratulation you won [PRIZE]', audio:['assets/audios/host1/congrat1.ogg'], prize:1},
				{text:'You just won [PRIZE]', audio:['assets/audios/host1/congrat2.ogg'], prize:1},
				{text:'You got [PRIZE]', audio:['assets/audios/host1/congrat3.ogg'], prize:1}
			],
			stop:[
				{text:'Very unfortunate', audio:['assets/audios/host1/stop1.ogg']},
				{text:'Too bad', audio:['assets/audios/host1/stop2.ogg']}
			],
			proceed:[
				{text:'Continue?', audio:['assets/audios/host1/proceed1.ogg']},
				{text:'Move on?', audio:['assets/audios/host1/proceed2.ogg']},
				{text:'Ready for next question?', audio:['assets/audios/host1/proceed3.ogg']}
			],
			giveup:[
				{text:'Ready to walk away?', audio:['assets/audios/host1/giveup1.ogg']},
				{text:'Sure to give up?', audio:['assets/audios/host1/giveup2.ogg']}
			],
			walkaway:[
				{text:'You walk away with [PRIZE]', audio:['assets/audios/host1/walkaway1.ogg'], prize:1},
			],
			checkpoint:[
				{text:'You have reach checkpoint [PRIZE]', audio:['assets/audios/host1/checkpoint1.ogg'], prize:1},
				{text:'You\'re on [PRIZE] checkpoint', audio:['assets/audios/host1/checkpoint2_a.ogg','assets/audios/host1/checkpoint2_b.ogg'], prize:1},
			],
			half:[
				{text:'Computer remove two wrong answer please', audio:['assets/audios/host1/half1.ogg']},
				{text:'Let\'s see remain answer', audio:['assets/audios/host1/half2.ogg']},
			],
			call:[
				{text:'Calling your friend...', audio:['assets/audios/host1/call1.ogg']},
			],
			audience:[
				{text:'Audience make your choice', audio:['assets/audios/host1/audience1.ogg']},
			]					
		}
	}
];

src - image path
offset - offset x y position
eye - eye spritesheet animation
1. src - image path
2. property -
  - width - spritesheet width
  - height - spritesheet height
  - x - x position
  - y - y position
mouth - talk spritesheet animation
1. src - image path
2. property -
  - width - spritesheet width
  - height - spritesheet height
  - x - x position
  - y - y position
speech - speech text and audio file
1. prize - prize audio files from 100 to 1 million
2. welcome, begin, firstquestion... - speech type
  - text - text string
  - audio - speech audio files
  - prize - sequence to play prize audio files, eg. "You're on [PRIZE] checkpoint" with 2 audio files 'assets/audios/host1/checkpoint2_a.ogg','assets/audios/host1/checkpoint2_b.ogg', set prize sequence to 1 will play after first audio file.
Note Audio must have MP3 and OGG file format for cross-browser compatible, insert only OGG format for audio field.

XML File

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:


<?xml version="1.0" encoding="UTF-8"?>
<questions>
	<item>
		<category>Animal</category>
		<level>1</level>
		<question><![CDATA[What sort of animal is Walt Disney's Dumbo?]]></question>
		<answers correctAnswer='3'>
			<answer><![CDATA[Deer]]></answer>
			<answer><![CDATA[Rabbit]]></answer>
			<answer><![CDATA[Elephant]]></answer>
			<answer><![CDATA[Donkey]]></answer>
		</answers>
	</item>
</questions>

Below is the explanation of each most important XML elements:

category - category name

Note Set category in gameSettings to true to enable category select page

level - level (1,2,3); there are total three levels, level 1 (questions 1 - 5), level 2 (questions 6 - 10), level 3 (questions 10 - 15)

Note Set level in gameSettings to true to enable level system

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
- fontSizeP - (Portrait Mode) 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 - question audio file
answers - the 4 choice answers can be insert here
- correctAnswer - attribute correctAnswer is the right answer of the question
- answer - the answer must enter in between <![CDATA[ ]]> in xml so the data contained therein will not be parsed as XMLs

Note Audio must have MP3 and OGG file format for cross-browser compatible, insert only OGG format for audio field.

Built-in Editor

This is the section where you can edit the questions with the tool by running edit.html. The page start with edit tools, click generate button to export the XML string, replace the new XML format in questions.xml file.

1. Basic Options

First select the viewport mode, then select the quetions you want to edit.
Option to add, remove and sort questions.
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

2. Edit Questions

Edit question:
- Category - category name
- Level - level (1,2,3); there are total three levels, level 1 (questions 1 - 5), level 2 (questions 6 - 10), level 3 (questions 10 - 15)
- 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
- Font Size (Portrait) - (Portrait Mode) 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
- Audio - audio file
Click preview question to see the new update, click back or done to save and go back main options.

2. Edit Answers

Answer setting:
- Correct Answer - is the right answer of the question, eg the answer is 2 'Diwali'
Answer list - 4 choice answers can be select to edit here
Answer settings:
- Text - the question 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
- Font Size (Portrait) - (Portrait Mode) 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 - audio file
Click preview answer to see the new update, click back or done to save and go back main options.

HTML Structure

Structure used to design web pages including HTML structure, CSS Files, Javascript and more...

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

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

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="1280" height="768"></canvas>
</div>
<!-- CANVAS END-->

CSS Files

We're using two CSS files in this game. The first one is normalize.css 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 main.css contains all of the specific stylings for the canvas and some hack to be fully compatible with all most popular mobile device.

JavaScript

This game using Javascript files below.

jquery.min.js - is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.
detectmobilebrowser.js - is a open source scripts to detect mobile browsers and phones.
createjs.min.js - is a suite of modular libraries and tools which work together to create interactive content on open web technologies via HTML5.
TweenMax.min.js - 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
- edit.js - editor tool
- game.js - game play and logics
- plugins.js - additonal useful plugins

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 with game.js
If user choose the right answer, user will score point and move to next question
If user choose the wrong answer, the game will end
If user did not answer the question on time, game result will shows
User are allowed three lifelines during the game, each lifeline can only be used once
1. 50/50 – eliminates one correct and one incorrect answer
2. Ask audience – quick poll isdone to show their answers with chart
3. Call friend – call to a friend for answer
When user reach checkpoint $1,000, $32,000, $1,000,000, for each checkpoint if user get question wrong, they leave with checkpoint money. If this question is answered correctly, contestants are guaranteed even if the answer incorrectly before reaching next question.
When all the 15 question is complete, game result will shows
If user click the screen in game result, it will restart the game

Game Functions

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
updateGame() This function manages the game loop
stopGame() This function stop gameplay
saveGame() This function save game score

Game Assets

You can edit the design files and easily reskin the game graphics.

The game contain /design folder which include following:

millionairequiz_1280x768.psd - with layer folders below
- Option
- Result
- Gameplay
- Landing
millionairequiz_768x1024.psd - with layer folders below
- Option
- Result
- Gameplay
- Landing

The folder /game/assets 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.

Compatibility

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

Add-ons

The add-on is an additional feature added to the game and it requires the base game in order to work, below are the add-ons that are compatible with this game:

This game is compatible with Scoreboard for HTML5 Games, it is a add-ons page where user can submit score and view top 10 leaderboard. You can get it here.

This game is compatible with Multiplayer add-on, it is a add-ons page where user can join and play with other online players. You can get it here.

Source & Credits

Fonts:

LT Reponse from file Daniel Lyons

Images:

Businessman doing different actions Free Vector from file freepik
Illuminated fashion show podium realistic vector Free Vector from file freepik
Set of vector scenic spotlights Free Vector from file freepik
Women from file Vecteezy

Sounds:

music from file bensound
Magic Circle Short Ringing SFX.mp3 from file Ari Glitch
Magic 1. Grain+Smooth.wav from file gsb1039
Dark Magic Loop from file qubodup
Magic sound 1.wav from file JomelleJager
Magical portal open from file alanmcki
Magical Hit from file SailorErick
Teleport-01b.wav from file DWOBoyle
Magic disappearing/appearing from file Tetoszka
Correct.wav from file Eponn
Videogame Menu Select from file Fupicat
UI_4-1 Atmosphere(Sytrus,arpegio,multiprocessing,rsmpl).wav from file newlocknew
Game win.mp3 from file elijahdanie
Magical portal open from file alanmcki

Support

If this documentation doesn't answer your questions, you can send us email via Item Support Page

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our game like bugs and errors. Custom modifications or third party module implementations are not included. Please read and check item support policy here.

Here you can find plugin & other documentation that support this game.

Wordpress Site - By using Scoreboard for HTML5 Games plugin, you can embed HTML5 game into WordPress post or page. Get the Plugin
Ad Placeholder - Help simulate ads on HTML5 Games, you can integrate and display static and takeover ads through different Ads Serving Platform. Documentation
Instant Games – Facebook - Guide you through integrating Facebook Instant Games API in our HTML5 Games. Documentation

Don’t forget to Rate this game

Please Add your Review (Opinion) for Our game. It would be a great support for us.
Go to your Codecanyon Profile > Downloads Tab > & then You can Rate & Review for our game.
Thank You.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 2.2

Improved timer interface

Version 2.1

Added new category questions

Version 2.0

Updated sound function
Added music button

Version 1.9

Option to change dollar sign

Version 1.8

Fixed scoreboard issue

Version 1.7

Add-on script integrated

Version 1.6

Fixed random questions
Fixed speech audio

Version 1.5

Option to set level for each question

Version 1.4

Option to select category

Version 1.3

Fixed display 50 - 50 percent answer on Portrait
Option to adjust text alignemtn

Version 1.2

Option to play audio for both question and answers
Option to play audio for host speech

Version 1.1

Added game rules page

Version 1.0

Initial Release