Documentation

Hangman

Description

The Hangman addon allows users to embed the hangman game functionality in their presentations.

Multiple phrases

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

Properties

Property name Description
Phrases List of phrases. Each phrase consists of 'Phrase' (string with space separated words ) and 'Letters' (comma separated letters available for users to select, an empty field means that all English alphabet letters are available). If you want to mark a letter in 'Phrase' as a tip, then type an exclamation mark before it, e.g. if you want to make letters 'H', 'G', and 'D' constant in the phrase 'HANGMAN DEMO', then the whole phrase will look like this: '!HAN!GMAN !DEMO'
Possible mistakes Number of mistakes user can make for each phrase and still would be able to select letters
Keyboard letters order This property allows you to set a custom order of letters on a keyboard. The input consists of comma separated letters, which are to present the active keyboard letters order for all phrases in the Hangman module. You don't need to specify all the letters. This property uses basic English alphabet (A-Z), letters not entered 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 correct answer for a current phrase
hide --- Hide Addon
show --- Show Addon
isAllOK --- Returns true when all phrases are filled in correctly

Advanced Connector integration

Each command supported by the Hangman addon can be used in the Advanced Connector addon's scripts. The below example shows how to react when the Text module's gap content changes (i.e. by putting in it elements from the Source List) and change 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 addon allows to create exercises as well as activities.

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

Events

The Hangman addon sends ValueChanged type events to 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 a user has run out of mistakes, the addon 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 a user has lose game (have mistakes above declared in Possible mistakes property), the addon 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 a user fills in all phrases properly, the addon 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 Addon elements
hangman-letters DIV containing letters for user to be selected
hangman-phrase DIV containing current phrase words
hangman-phrase-word DIV element containing single word in 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 a correctly selected letter in error checking mode
incorrect Additional class for incorrectly selected or not selected letter 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;
}

Above example changes letters background color in every scenario (work and error checking mode).

Demo presentation

Demo presentation contains examples on how to use the Hangman addon.