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:
|
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:
|
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.
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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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 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.