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 include external CSS file in web page?
<body> <script> <link>
<link href="/templ/style.css" rel="stylesheet" type="text/css" />
Which CSS property sets the text size?
font-weight text-decoration font-size
h2 {
  font-size: 1em;
}
Indicate the JavaScript property that can add HTML code into an element.
text value innerHTML
document.getElementById("someID").innerHTML = "HTML content";
Click on the function that returns the number of characters of a string in PHP.
count() strlen() stristr()
$str = "http://CoursesWeb.net/";
$nr_chr = strlen($str);
echo $nr_chr;       // 22
JavaScript Game - Find the Word

Last accessed pages

  1. Highlight Images on click (6010)
  2. Convert XML to JSON in PHP (11356)
  3. innerHTML in PHP (14847)
  4. Get Duration of Audio /Video file before Upload (14015)
  5. Execute JavaScript scripts loaded via AJAX (7026)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (689)
  2. SHA256 Encrypt hash in JavaScript (425)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (412)
  4. SHA1 Encrypt data in JavaScript (381)
  5. Read Excel file data in PHP - PhpExcelReader (305)