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 in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
JavaScript Game - Find the Word

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (59216)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (143287)
  3. Image in PHP with background in two colors (1238)
  4. AJAX Course, free Lessons (19946)
  5. Working with XML Namespaces in ActionScript (2997)

Popular pages this month

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