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 the user must specify all answers to be found in the word search. Those answers should be separated using commas or new line separators. If the grid contains answers not specified in the Answers section, they will not be considered correct. |
| Check By Words | When selecting this option, the module will check answers by words, not letters, in the Check Errors mode. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| isAllOK | --- | Returns true when all letters are marked correctly. |
| 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 must 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 errors, 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 deselected) 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.