Documentation
Magic Boxes
Description
The Magic Boxes module allows adding a ready-made word search activity to a presentation. To define the boxes, all texts must be entered in the "Grid" section, where each line corresponds to one row in the grid. All answers in the word search should also be typed in the relevant fields.
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 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 answers to be found in a word search. Those answers should be separated using commas or new line separators. If a grid contains answers not specified in the Answers section, they will not be considered in progress, score, and error count. |
| Check By Words | When this option is selected, the module will check 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. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
Show Answers
This module is fully compatible with Show Answers module and displays correct answers when a relevant event is sent.
Scoring
The Magic Boxes module allows the author to create 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 module sends the ValueChanged type events to the Event Bus when the 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 the user selects all correct boxes without any error, the module sends the 'ALL OK' event. This event is different from the 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 | The main DIV element that surrounds all the grid cells. |
| selectable-element | The grid element when not in a selected mode. |
| selectable-element-selected | The grid element when in a selected mode. |
| selectable-element-wrapper | The grid element surrounding the element allows the creation of the border for elements in both (selected and unselected) states. |
| selectable-element-selected-correct | The grid element that is correctly selected while in the error-checking mode. |
| selectable-element-selected-uncorrect | The grid element that is incorrectly selected while in the error-checking mode. |
| selectable-element-show-answers | The grid element when the Show Answers is active. |
Demo presentation
Demo presentation contains examples of how to use the Magic Boxes module.