Info Trivia Game Script

A script for Trivia created with JavaScript. The quizzes (questions and answers) are stored in external files, in XML or JSON format.
The Trivia Game has two levels: Level 1 (Easy) displays a list of answers to each quiz, and the user must click on the correct answer; and Level 2 is a little more difficult. The last letter from the possible answers is deleted. It is displayed a text box in which the user can write the answer.
It has two modes: Consecutive - the quiestions start from the quiz with index number added into a text field, and are displayed in their order till the last quiz; and Random - the quizzes are choosed randomly, till the last quiz, without repeat.
Also, the user can choose to play the trivia with a Countdown Timer (15 seconds to answer till the script adds automatically the correct answer).
You can easily add quizzes and multiple categories in this Trivia, the quizzes of each category are stored in its external file.
- For test, see the "trivia.html", or online to this URL address: coursesweb.net/javascript/trivia-game-script_s2

Instructions

1. If you want to use quizzes stored in JSON format, create in the trivia directory a file for each category, with this format (see also in the "general.json"):
[
 {"q":"Text of the first question.", "c":"Correct answer", "i":["Incorrect answer", "Other Incorrect answer"]},
 {"q":"Text of the second question.", "c":"Correct answer", "i":["Incorrect answer", "Other Incorrect answer", "Another Incorrect answer"]},
 ....
]
2. If you want to store the quizzes in XML file, create in the trivia directory a ".xml" file for each category, with this format (see also in the "general.xml"):
<?xml version="1.0" encoding="utf-8"?>
<trivia>
 <quiz>
  <q>Text of the first question.</q>
  <c>Correct answer</c>
  <i>Incorrect answer</i>
  <i>Other Incorrect answer</i>
 </quiz>
 <quiz>
  <q>Text of the second qstion.</q>
  <c>Correct answer</c>
  <i>Incorrect answer</i>
  <i>Other Incorrect answer</i>
  <i>Another Incorrect answer</i>
 </quiz>
 .....
</trivia>

Installing the script

To include this trivia into a web page:

1) Copy the "trivia" folder (with al its files) on your server, in the root directory of your website (in 'www', 'public_html' or 'htdocs').
2) In the <head></head> zone of the page adds this code:
<link href='/trivia/trivia.css' rel='stylesheet' type='text/css' />
3) Copy the following code and add it in the place you want to display the trivia (see in the code of the trivia.html file):
<div id='trivia'>
<h3 id='qnr'>Welcome to Trivia Game</h3>
 <div id='quiz'>- Choose the set of questions from the "Trivia Category".<br>- Click the Start button to start the quizzes.<br>-The Reset button resets the Trivia.<br><br>Levels:<ul><li>Level 1 - Easy - It is displayed a list of answers to each quiz. Click the correct answer.</li><li>Level 2 - Difficult - You write the answer into a text field, then click on Send button. The last letter from the possible answers is deleted.</li></ul>Mode<ul><li>Consecutive - The quiestions start from the quiz with index number added into a text field, and are added in their order till the last quiz.</li><li>Random - The quizzes are choosed randomly, till the last quiz, without repeat.</li></ul>- Countdown Timer - If that button is checked, you have 15 seconds to answer till the correct answer is added automatically.</div>
 <div id='tqdata'>
 <div id='tcateg'>Trivia Category</div>
 <div id='qlevels'>
 <input type='radio' name='level' id='level1' checked='checked' /><label for='level1'>Level 1</label><br>
 <input type='radio' name='level' id='level2' /><label for='level2'>Level 2</label>
 <h4>Mode</h4>
 <input type='radio' name='qmode' id='qindex' checked='checked' /><label for='qindex'>Consecutive</label><br>
 <div id='startqn'>From <input type='number' size='2' name='nquiz' id='nquiz' min='1' value='1' /> to <span id='totalq'></span></div>
 <input type='radio' name='qmode' id='qrandom' /><label for='qrandom'>Random</label><br>
 <input type='checkbox' id='qctimer' /><label for='qctimer'>Countdown Timer</label>
 </div>
 <div id='qbtn_sr'>
 <button id='squiz'>Start</button>
 <button id='treset' disabled='disabled'>Reset</button>
 </div>
 <div id='qanswered'>
 <h4>Quizzes: <em id='nqansw'>0</em> of <span id='ntotalq'></span></h4>
 <span id='nca'>0</span> - Correct<br>
 <span id='nia'>0</span> - Incorrect
 </div>
 </div>
</div>
<script charset='utf-8' src='/trivia/trivia.js'></script>
<script>
// Here add pairs with "Category_name" and the json file with quizzes associated to each category
var trivia_files ={'General':'general.json', 'Animals':'animals.json'};

// object with pairs with "Category_name" and the XML file with quizzes associated to each category
 var trivia_files = {'General':'general.xml', 'Animals':'animals.xml'};

// calls the method that creates the list with categories for trivia added in xml or json files
obTrivia.setCateg(trivia_files);
</script>
4) In the trivia_files object variable add the categories with the json or xml files with quizzes.

Oter info

- When the Trivia Game starts, the Start button is pressed, it is called the sQuiz('start') method.
- When the User chooses /sends an answer, it is called the getAnswer() method.
- When the User clicks the Next button for the next quiz (or the Countdown Time expired), it is called the sQuiz('next') method.
- When the Reset button is pressed, it is called the resetTrivia() method.
- When the User selects other categories, it is called the setQuizXML() method if Trivia quizzes are stored in ".xml" files, or, the setQuizJSON() method if Trivia quizzes are in JSON format.


Have a Good life with everyone and with yourself

Free JavaScript Course, tutorials, and code snippets: coursesweb.net/javascript/