Magic Boxes


The Magic Boxes addon allows adding a ready-made wordsearch activity to a presentation. To define the boxes, it is enough to enter all texts in the "Grid" section, where each line corresponds to one row in the grid. All possible answers to be found in a wordsearch should also be typed into a relevant field.

Of course, it is possible to change the look of the grid, including the size and color of the individual boxes, which can be done by using the CSS classes.


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
Grid This section serves for entering all texts visible in the grid, where each line corresponds to one row. Each grid box equals its corresponding character in a row.
Answers In this section a user must specify all possible answers to be found in a wordsearch. Those answers should be separated by commas or new line separators. If a grid contains answers not specified in the Answers section, they will not be taken into account in progress, score and error count.
Check By Words When this option is selected, the module will be checking all answers by words, not by letters in the Check Errors mode.

Supported commands

Command name Params Description
isAllOK --- Returns true when all letters are marked properly.
show --- Shows the module.
hide --- Hides the module.

Show Answers

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


Magic Boxes addon allows to create exercises as well as activities.

Property Description
maxScore a number of grid elements that need to be selected to cover all words from the Answers property
score 1 point for a correctly selected grid element
errorCount 1 error point for an incorrectly selected grid element


The Magic Boxes addon sends ValueChanged type events to Event Bus when a user selects a box.

Field name Description
Item Information about which box has been selected/deselected (i.e. 1-4 means that the box which has been selected is in the first row and the fourth column)
Value Contains content of the selected box
Score 1 if the selected box is correct, 0 if it is incorrect

When a user selects all correct boxes without any error, the addon sends the 'ALL OK' event. This event is different from a normal Magic Boxes event so its structure is shown below.

Field name Description
Item all
Value N/A
Score N/A

CSS classes

Class name Description
magicGridWrapper Element main DIV element surrounding all grid cells
selectable-element Grid element when not in a selected mode
selectable-element-selected Grid element when in a selected mode
selectable-element-wrapper Grid element surrounding element allowing to create border for elements in both (selected and unselected) states
selectable-element-selected-correct Grid element correctly selected while in error checking mode
selectable-element-selected-uncorrect Grid element incorrectly selected while in error checking mode
selectable-element-show-answers Grid element when Show Answers is active

Demo presentation

Demo presentation contains examples of how Addon Magic Boxes can be used.