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 adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
JavaScript Game - Find the Word

Last accessed pages

  1. Laravel Ajax (555)
  2. querySelector and querySelectorAll (20089)
  3. CSS Trapezoid Shape (9197)
  4. Volume and Surface Area Calculator for 3D objects (10083)
  5. Select in MySQL, Output results in HTML Table (15150)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (552)
  2. PHP Unzipper - Extract Zip, Rar Archives (535)
  3. SHA256 Encrypt hash in JavaScript (429)
  4. querySelector and querySelectorAll (426)
  5. Create simple Website with PHP (387)