Login Register

Documentation

Hangman

Description

The Hangman module allows users to embed the Hangman game functionality in their lessons.

Multiple phrases

It is possible to set more than one phrase in the module. The user will be able to switch between them via the module's commands (nextPhrase(), previousPhrase() and switchPhrase()).

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Phrases List of phrases appearing in the game.
Property name Description
Letters Comma-separated letters that are available for users to select. An empty field means that all English alphabet letters are available.
Phrase String with space-separated words. If you want to make a letter in the 'Phrase' visible at the start of the game, then type an exclamation mark before it, e.g. if you want to make letters 'H', 'G', and 'D' appear in the phrase 'HANGMAN DEMO', then the whole phrase will look like this: '!HAN!GMAN !DEMO'.
Possible mistakes Number of mistakes the user can make for each phrase and still be able to select letters.
Is Not Activity With this option marked, the score and errors will not be returned by the module.
Keyboard letters order This property allows you to set a custom order of letters appearing in the game's keyboard. The input consists of comma-separated letters, which will be available in the active keyboard letters order for all phrases in the Hangman module. You don't need to specify all the letters. This property uses the basic English alphabet (A-Z), omitted letters will be added in the alphabetical order. Leaving this property empty causes the module to use the A-Z order. For example, "a, g, h, j, b, c, d" will create the Hangman keyboard with the following order of letters "a, g, h, j, b, c, d, e, f, g... z".

Supported commands

Command name Params Description
nextPhrase --- Switch to the next phrase.
previousPhrase --- Switch to the previous phrase.
switchPhrase phraseNumber Switch to the specified phrase.
showCorrect --- Show the correct answer for the current phrase.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
isAllOK --- Returns "true" when all phrases are filled in correctly.

Advanced Connector integration

Each command supported by the Hangman module can be used in the Advanced Connector module's scripts. The example below shows how to react when the Text module's gap content changes (i.e. by putting in it an element from the Source List module) which changes the displayed phrase.

 EVENTSTART
 Source:Text1
 Value:1
 SCRIPTSTART

 var hangman = presenter.playerController.getModule('Hangman1');
 hangman.switchPhrase(1);

 SCRIPTEND
 EVENTEND

 EVENTSTART
 Source:Text1
 Value:2
 SCRIPTSTART

 var hangman = presenter.playerController.getModule('Hangman1');
 hangman.switchPhrase(2);

 SCRIPTEND
 EVENTEND

 EVENTSTART
 Source:Text1
 Value:3
 SCRIPTSTART

 var hangman = presenter.playerController.getModule('Hangman1');
 hangman.switchPhrase(3);

 SCRIPTEND
 EVENTEND

Scoring

The Hangman module allows the creation of activities.

Property Description
maxScore Number of phrases.
score 1 score point for every correctly and fully completed phrase.
errorCount 1 error point for every not fully completed phrase.

Events

The Hangman module sends the ValueChanged type events to the Event Bus when users select a letter and when they have used all possible attempts. Event sent on a letter selection has the following fields:

Field name Description
Item Current phrase number (from 1 to n).
Value Selected letter.
Score 1 for correct selection, 0 for incorrect.

When the user runs out of possible mistakes, the module sends an event with fields completed as described below.

Field name Description
Item Current phrase number (from 1 to n).
Value EOT
Score N/A

When the user has lost the game (their number of mistakes is above the one declared in the Possible mistakes property), the module sends an event with fields completed as described below.

Field name Description
Item Current phrase number (from 1 to n).
Value EOG
Score N/A

When the user fills in all phrases properly, the module sends the 'ALL OK' event. This event is different from a normal event, so its structure is shown below.

Field name Description
Item all
Value N/A
Score N/A

CSS classes

Class name Description
hangman-wrapper DIV wrapping the module's elements.
hangman-letters DIV containing letters for the user to be selected.
hangman-phrase DIV containing current phrase words.
hangman-phrase-word DIV element containing a single word in the current phrase.
hangman-letter DIV element representing a single letter (both in letters and phrase containers).
empty Additional class for letter element in phrase container that has no text.
selected Additional class for letter element in letters container that has been selected.
correct Additional class for correctly selected letters in the error-checking mode.
incorrect Additional class for incorrectly selected or not selected letters in error-checking mode.

Example

.Hangman_cheerful { }

.Hangman_cheerful .hangman-letter {
    border: 0;
    background-color: orange;
}

.Hangman_cheerful .hangman-letter.selected {
    background-color: blanchedAlmond;
}

.Hangman_cheerful .hangman-letter.empty {
    background-color: white;
}

.Hangman_cheerful .hangman-letter.correct {
    background-color: #adff2f;
}

.Hangman_cheerful .hangman-letter.incorrect {
    background-color: red;
}

The above example changes the letters' background color in every scenario (work and error checking mode).

Demo presentation

Demo presentation showing how to use the Hangman module.