Documentation
Hangman
Description
The Hangman module allows users to embed the Hangman game functionality in their presentations.
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.
|
---|---|
Possible mistakes | Number of mistakes the user can make for each phrase and still be able to select letters. |
Is Not Activity | The module is not an activity which means it gives neither score nor errors. |
Keyboard letters order | This property allows you to set a custom order of letters on 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. |
show | --- | Shows the module if it is hidden. |
hide | --- | Hides the module if it is visible. |
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:Text2
Value:1
SCRIPTSTART
var hangman = presenter.playerController.getModule('Hangman1');
hangman.switchPhrase(1);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:2
SCRIPTSTART
var hangman = presenter.playerController.getModule('Hangman1');
hangman.switchPhrase(2);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
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 addon sends 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 {
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.