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

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.

Supported commands

Command name Params Description
isAllOK --- Returns true when all cells are filled in correctly, otherwise false

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 Numer of the word
Value The correct word
Score N/A

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;
}

Demo presentation

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