Documentation
Magic Boxes
Description
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.
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 |
|---|---|
| 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.
Scoring
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 |
Events
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.