Documentation

Crossword

Description

A Crossword addon allows inserting a Crossword game into a presentation. It's enough to predefine some specific parameters to make it work.

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
Crossword Defines crossword. It has to be written like this:
ENGLISH
···O···
·NEVER·
·E·E···
·W·····
(in the above example spaces were replaced with dots, use spaces in real environment to indicate blank cells). In other words, it is just a text representation of a crossword. Spaces indicate blank cells, anything other indicates a place for a letter. You must ensure that the amount of characters in each row is equal (including leading and trailing spaces) and it is equal to the value in the Columns property. Amount of rows has to be equal to the value in the Rows property. While numbering of words is done automatically, you have to put their descriptions and hints to the user in a separate text module. If you would like to make a letter visible from start, simply type an exclamation mark before this letter, e.g. in order to put the letters 'E', 'N', and 'G' permanently in the word 'ENGLISH', then the whole word should look like this: '!E!N!GLISH'
Columns indicates the number of columns in a crossword
Rows indicates the number of rows in a crossword
Cell width indicates particular crossword's cell width, in pixels
Cell height indicates particular crossword's cell height, in pixels
Blank cells border color indicates color of borders that are drawn around blank cells, has to be defined in the way that is used in CSS, e.g. "#ff00ff" or "black"
Blank cells border style indicates style of borders that are drawn around blank cells, has to be defined in the way that is used in CSS - "solid", "dotted" or "dashed"
Blank cells border width indicates width of borders that are drawn around blank cells. Please note that for technical reasons, this value would be multiplied by 2 and interpreted as pixels. Set to 0 to disable blank cells' borders.
Letter cells border color indicates color of borders that are drawn around letter placeholder cells, has to be defined in the way that is used in CSS, e.g. "#ff00ff" or "black"
Letter cells border style indicates style of borders that are drawn around letter placeholder cells, has to be defined in the way that is used in CSS - "solid", "dotted" or "dashed"
Letter cells border width indicates width of borders that are drawn around letter placeholder cells. Please note that for technical reasons, this value would be multiplied by 2 and interpreted as pixels. Set to 0 to disable letter placeholder cells' borders.
Word numbers indicates how words should be automatically numbered:
  • both – put numbers on the first cell of both horizontal & vertical words
  • horizontal – put numbers on the first cell of horizontal words
  • vertical – put numbers on the first cell of vertical words
  • none – don't put any word numbers
Note: Please keep in mind that having chosen the "None" option in this property, the addon is automatically switched to the "Not Activity" mode. In the Crossword addon, points are awarded only for the words numbered with the "Word numbers" property.
Marked column index If set to a value greater than 0, it indicates the index of a column whose cells should have an additional CSS class "cell_column_marked". The column number is calculated starting from 1, and 1 means leftmost column in the crossword.
Marked row index If set to a value greater than 0, it indicates the index of a row whose cells should have an additional CSS class "cell_row_marked". The row number is calculated starting from 1, and 1 means topmost row in the crossword.
Block wrong answers With this option checked, wrong answers are removed and the "on wrong" event is sent.
Show all answers in gradual show answers mode Show all answers at once using gradual show answers functionality. Without checking this option, the gradual show answers functionality reveals the answers one by one.
Auto navigation Auto navigation for editable cells in a crossword. Auto navigation uses an algorithm that, based on data (such as the currently selected cell in the crossword, neighboring cells, and the user's last action), determines the direction of cursor movement when the user attempts to fill in the crossword cell. The rules of the algorithm are described below. There are three directions of movement for auto navigation:
  • horizontal
  • vertical
  • TabIndex direction – see description below
Auto navigation modes:
  • Extended – Auto navigation works in any of the directions listed above. In this mode, if there is no next editable cell for the crossword then auto navigation will not point to the next cell. This is the default mode.
  • Simple – Auto navigation works in vertical and horizontal directions. In this mode, if there is no next editable cell for the currently filled in word, then auto navigation will not point to the next cell.
  • Off – Auto navigation is turned off.

Supported commands

Command name Params Description
isAllOK --- Returns true when all cells are filled in correctly, otherwise false.
show --- Shows the module.
hide --- Hides the module.

Events

ValueChanged event

When a user types a letter into the crossword and leaves the cell, the ValueChanged event is sent. Its structure is shown below.

Field name Description
Item [y][x] (where x and y are coordinates of the cell)
Value inserted letter
Score 1 if letter is correct, 0 otherwise

AllOK event

When a user fills in all cells 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

CorrectWord event

When a user fills in a correct word, the CorrectWord event is sent. This event has the following structure:

Field name Description
Item Number of the word
Value The correct word
Score N/A

Advanced Connector example:

EVENTSTART
Name:CorrectWord
Source:crossword1
SCRIPTSTART

presenter.playerController.getModule('feedback1').change('1');

SCRIPTEND
EVENTEND

Show Answers

This module is fully compatible with Show Answers module and displays correct answers when adequate event is sent.

eKeyboard integration

It is possible to enter text into cells using the eKeyboard module.

See the documentation of eKeyboard module »

CSS classes

Class name Description
.crossword_container .cell_container_blank Indicates the look of blank cells, except for their borders which are set using Properties.
.crossword_container .cell_container_letter Indicates the look of letter placeholder cells, except for their borders which are set using Properties.
.crossword_container .cell_letter input Indicates the look of input fields that are used to capture answers written by a user (in their default state).
.crossword_container .cell_invalid input Indicates the look of letter placeholder cells that are used to capture answers written by a user (if Check Answers has been selected and the cell content does not match the answer).
.crossword_container .cell_invalid input Indicates the look of input fields that are used to capture answers written by a user (if Check Answers has been selected and the cell content does not match the answer).
.crossword_container .cell_valid input Indicates the look of letter placeholder cells that are used to capture answers written bya user (if Check Answers has been selected and the cell content matches the answer).
.crossword_container .cell_valid input Indicates the look of input fields that are used to capture answers written by a user (if Check Answers has been selected and the cell content matches the answer).
.crossword_container .cell_AxB Indicates the look of a particular cell where A is its horizontal position (counted from the left, the first cell is 0) and B is its vertical position (counted from the top, the first cell is 0).
.crossword_container .cell_AxB input The same as above but refers to the input field inside the cell.
.crossword_container .cell_column_X Indicates the look of cells in a particular column where X is its index (counted from the left, the first column is 0).
.crossword_container .cell_column_X input The same as above but refers to the input field inside the cells.
.crossword_container .cell_row_X Indicates the look of cells in a particular row where X is its index (counted from the top left, the first row is 0).
.crossword_container .cell_row_X input The same as above but refers to the input field inside the cells.
.crossword_container .cell_column_marked Indicates the look of cells in a marked column (please see the "Marked column index" property). Please combine it with other styles to limit the style to particular types of cells (for instance, ".crossword_container .cell_column_marked.cell_letter will change the look of letter cells in the marked column only).
.crossword_container .cell_row_marked Indicates the look of cells in a marked row (please see the "Marked row index" property). Please combine it with other styles to limit the style to particular types of cells (for instance, ".crossword_container .cell_row_marked.cell_letter will change the look of letter cells in the marked row only).
.crossword_container .word_number Indicates the look of a word number.
.crossword_cell_show-answers Indicates the look of cells in the show answers mode.

Please note that in practice, styles related to the cell position (.cell_AxB, .cell_row_X, .cell_column_X) have to be combined with another style that indicates a type of cell, e.g.

  • .cell_column_3.cell_letter will apply only to cells with letters in column 4,
  • .cell_row_0.cell_blank will apply only to cells without letters in row 1.

CSS classes for printable

CSS classes for the printable version of the addon have the same names as in the original version but with the prefix printable_. For example printable_cell_container_letter is equivalent to cell_container_letter in the printable version. Like the original classes should be defined by providing a path where the first name is printable_crossword_container, e.g. .printable_crossword_container .printable_cell_container_letter.

The new CSS classes include:

Class name Description
.printable_crossword_container .printable_cell_letter_content Indicates the look of fields that are used to capture answers written by a user (in their default state).
.printable_crossword_container .printable_sign_valid Indicates the look of fields that are used to show valid sign for the correct answer given by the user. The sign is set as ::after class.
.printable_crossword_container .printable_sign_invalid Indicates the look of fields that are used to show invalid sign for the wrong answer given by the user. The sign is set as ::after class.

Examples

1.1. Make font bigger:

.crossword_bigfont {
}

.crossword_bigfont .cell_letter input {
    font-size: 24pt;
}

1.2. Green background, only cells with a letters are visible:

  • Set _Blank cells border width_ to 0
  • Set _Letter cells border width_ to 1
  • Set _Letter cells border color_ to #aaa
.crossword_green {
    background: #D6FFE9;
}

.crossword_green .cell_container_blank {
    background: transparent;
}

.crossword_green .cell_container_letter {
    box-shadow: 5px 5px 2px 2px #ccc;
}

.crossword_green .cell_invalid {
    background: #fff;
}

.crossword_green .cell_invalid input {
    color: #aa0000;
    text-decoration: line-through;
    font-weight: bold;
}

Auto navigation algorithm

In order to better understand the algorithm, a legend has been created with a description of the elements.

Legend:

Name Description
blank cell Cell that does not belong to the crossword.
constant cell Cell with initial, non-editable value.
editable cell Editable cell.
current word One of the words whose editable cell is pointed to by the cursor. The current word consists only of editable cells and constant cells.
TabIndex direction Direction for the auto navigation cursor to point to the next editable cell to the right, regardless of whether the next cell belongs to the same word. If movement in the right direction is not possible then cursor is moved to the leftmost editable cell from the next row.

Algorithm rules/sequential steps of the algorithm:

  1. If the current direction is horizontal and there is at least one editable cell on the right side in the current word, then move to the first possible editable cell on the right side.
  2. If the current direction is horizontal and there is not at least one editable cell to the right side in the current word, then move using the TabIndex direction.
  3. If the current direction is vertical and there is at least one editable cell below it in the current word, then move to the first possible editable cell below it.
  4. If the current direction is vertical and there is not at least one editable cell below it in the current word, then move using the TabIndex direction.
  5. If there is at least one editable cell below it in the current word, and if the right cell is an blank cell, then move to the first possible editable cell below it.
  6. If there is at least one editable cell on the right side in the current word, and if the top cell and the bottom cell are blank cells, then move to the first possible editable cell on the right side.
  7. If there is at least one editable cell below it in the current word, and if the top cell is an blank cell and the right cell is not an blank cell, then move to the first possible editable cell below it.
  8. If there is at least one editable cell below in the current word, and if the right cell is not an blank cell that the user has filled in, and the cell at the bottom is not an blank cell that the user has not filled in, then move to the first possible editable cell below.
  9. If there is at least one editable cell on the right side in the current word, then move to the first possible editable cell on the right side.
  10. Use the TabIndex direction.

Note: The rules of the algorithm are checked from the first rule to the last. This means that rule 1 will be checked first, then rule 2, and so on. If any rule has all conditions satisfied, then the next rules are not checked.

Note: If "Word numbers" property is set to horizontal or vertical, auto-navigation will ignore the algorithm and jump to the next possible horizontal/vertical answer if available.

Note: If the auto-navigation mode does not allow chosen direction, then the navigation will not move cursor to the next cell. For example, if the auto-navigation mode is set to Simple and the direction analysis shows the TabIndex direction, then cursor will not be moved to the next cell.

In short, the following directions are used for the following rules:

  • 1, 6, 9 – horizontal direction
  • 3, 5, 7, 8 – vertical direction
  • 2, 4, 10 – TabIndex direction

Demo presentation

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