Javascript Course

A script for educational games (named: Find the Word, it is like Hangman) created with JavaScript, with Pixi JS framework. The quizzes (questions and answers) are stored in external file, in JSON format.
You can easily add quizzes in this Find the Word game, directly in a text file (with data in valid JSON format).


• To Download this script, click: Find the Word Game Script

Demo Game

Instructions

- The questions and answers must be added into a ".json" file, with this format (see also in the "findword.json"):
[
 {"q":"Text of the first question.", "a":"Answer"},
 {"q":"Text of the second question.", "a":"Answer"},
 ....
]

Installing the script

To include this game into a web page:

1) Download the archive with the script (from the link above), and copy the "findword" folder (with al its files) on your server, in the root directory of your website (in 'www', 'public_html' or 'htdocs').
2) Copy the following code and add it in the place you want to display the trivia (see in the code of the findword.html file):
<div id='fw_game'></div>
<script charset='utf-8' src='findword/pixi.js'></script>
<script charset='utf-8' src='findword/findword.js'></script>
<script>
//pass the path to the json file with tests, and the number of groups you want with quizzes
var find_word = new FindWord('/findword/findword.json', 3);
</script>
- The first parameter '/findword/findword.json' is the path to the json files with quizzes; the second argument (here 3) is optional, it is the number of groups you want to divide the tests.

- To edit /change the texts of the game, open the findword.js file and edit data of in the this.txt object.
- The game contains the english and spanish alphabets, if you want to use the spanish alphabet, open the "findword.js" file and replace "en" with "es" in this line of code:
this.abc = abc.en; //get the alphabet (use: abs.es; for spanish)

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
JavaScript Game - Find the Word

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142523)
  2. Pencil and Pen Tools (2262)
  3. Graphic Symbols (1512)
  4. CSS cursor property - Custom Cursors (6184)
  5. Responses (329)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (526)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (63)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)