Documentation
Table
Description
The Table module allows users to add simple tables to their content. With this functionality, users can easily organize their lessons and presentations.
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 |
---|---|
Rows | Number of table rows. |
Columns | Number of table columns. |
Table cells | List of table cells' content. The Row and Column fields can be comma-separated lists of sequential numbers, which will result in generating cells that take more than a single cell space (the equivalent of HTML colspan and rowspan attributes). Each cell can have its own CSS class or inline CSS style. Specifying the dimensions of the cells using these styles is prohibited. To define them, use the "Columns width" and "Rows height" properties. |
Columns width | Defines columns 'width' CSS style. The number of entries should not be higher than the Columns count. A blank entry means that the width of a column (counted as list items) will be set to auto. |
Rows height | Defines rows' 'height' CSS style. The number of entries should not be higher than the Rows count. A blank entry means that the width of a row (counted as list items) will be set to auto. |
Is not an activity | When this option is selected, no points and errors are reported in the error-checking mode. |
Is disabled | Allows disabling the module so that the user is not able to interact with it. |
Case sensitive | When this property is checked, it means that the letter case is important while giving answers. |
Use numeric keyboard | When enabled, gaps will activate the virtual numeric keyboard on mobile devices when selected. This will also cause the gaps to only accept numeric values. |
Ignore punctuation | This property allows ignoring punctuation marks while checking the correctness of answers. |
Gap width | This property allows defining the width of all gaps in the currently selected Table module. |
Gap Type | This property serves for selecting a gap module type: Editable (dropdown and fillable gap), Draggable (requires the Source List module), or Math (when LaTeX is used). |
Gap max length | This property allows defining a maximum number of characters available to be put in each gap. If this property is set to zero, no restriction will be applied. If the gap's right answer is longer than the "Gap max length" property, the restriction for this gap will automatically increase to this length. For filled gaps, the length of the placeholder (Initial text) is also considered in determining the maximum number of characters. |
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. |
Keep original order | This property lets you keep the original order of elements in dropdown gaps. |
Gaps
The Table module allows users to add gaps, known from the Text module. A table gap consists of the following activity types:
- a dropdown gap that enables choosing answers from a drop-down menu,
- a draggable gap that can be filled in with an item selected from the Source List,
- an editable gap that enables typing text manually into it,
- a math gap, which is an editable gap working with MathJax.
- a filled gap, which is an editable gap with a placeholder (Initial text).
To insert a gap into a Table cell, enter a simple script into the cell content:
- draggable and editable gap
\gap{blue} – blue is the correct answer that should be entered into the gap. "1" defines the value of the correct answer.
In case of more than one correct possibility, the script is a bit different:
\gap{blue|navy} – both options are correct, and they will be counted as such.
- dropdown gap
{{1:blue|yellow|red}} – the first option is always the correct answer, in this case, it is "blue". "1" defines the value of a correct answer. If you want to keep the original order of the elements, check the 'Keep original order' property, and use the following formula: {one|two|1:three}, which means that "three" is the correct answer and 1 is the value of the correct answer.
- math gap
Use the editable gap pattern inside MathJax brackets \( MathJax commands \). For example: \( \frac{1}{\gap{2}} \) will render a fraction with 1 as the nominator and an editable gap as the denominator, where the correct answer is 2.
Note: Keep in mind that the index of the gap in the module is defined by the order of the gaps written in the LaTeX formula. To properly navigate between gaps on a page in a situation where you have two gaps – one over another (e.g., integration limits), you should always define the upper limit first.
Example: \(\int^\gap{b}_\gap{a}f(x)dx\)
- filled gap
If you want a gap with the introductory text (e.g., to be corrected by students), use the filled gap's syntax. For example: \filledGap{initial text|answer} will render a gap with "initial text" as a placeholder and "answer" as the right answer.
For more than one answer, you should use the syntax for a draggable and editable gap:
\filledGap{initial text|answer|another answer} where the first value is a placeholder, and the next two values are the answers.
Calculating the gaps index
It's important to know that for each kind of gap, the calculating order is:
- First, all editable gaps are counted (both \gap{} and \filledgap{}),
- Next, dropdown gaps are counted.
Example:
In this case, the getGapText(8) method returns the text of a dropdown gap, not the last gap.
Supported commands
Command name | Params | Description |
---|---|---|
hide | --- | Hides the module if it is visible. |
show | --- | Shows the module if it is hidden. |
getGapText | index - 1-based index of the gap | Returns the gap's text entered by the user. |
setGapText | index, text | Changes the text inside the gap. Command is supported only when "editable" is selected as the "Gap type". |
getGapValue | index - 1-based index of the gap | Returns the gap's text entered by the user. |
markGapAsCorrect | index - 1-based index of the gap | Marks the gap as correct. |
markGapAsWrong | index - 1-based index of the gap | Marks the gap as wrong. |
markGapAsEmpty | index - 1-based index of the gap | Marks the gap as empty. |
enableGap | index - 1-based index of the gap | Enables the gap. |
enableAllGaps | --- | Enables all gaps. |
disableGap | index - 1-based index of the gap | Disables the gap. |
disableAllGaps | --- | Disables all gaps. |
getView | --- | Returns an HTML element that is the container of the module. |
isAllOK | --- | Returns "true" if all gaps are filled in correctly and there are no mistakes; otherwise, it is "false". |
isAttempted | --- | Returns "true" if any gap is filled in. This command will not work properly if the module has the 'Is not an activity' property selected. |
Advanced Connector integration
Each command supported by the Table module can be used in the Advanced Connector module's scripts. The example below shows how to show or hide a module according to the Double State Button module's state.
EVENTSTART
Source:DoubleStateButton1
Value:1
SCRIPTSTART
presenter.playerController.getModule('Table1').show();
SCRIPTEND
EVENTEND
EVENTSTART
Source:DoubleStateButton1
Value:0
SCRIPTSTART
presenter.playerController.getModule('Table1').hide();
SCRIPTEND
EVENTEND
Scoring
The Table module allows the creation of scored activities. By default, the module is in activity mode, so whenever gaps are included, it will report points and errors. To disable the activity mode, activate its 'Is not an activity' property. If the module is not in activity mode, all the methods mentioned below return 0!
Property | Description |
---|---|
maxScore | Number of gaps |
score | 1 for each gap filled correctly |
errorCount | 1 for each gap filled incorrectly, but only if the gap is not empty |
Events
The Table module sends the ValueChanged events to the Event Bus when the user changes the value of a gap.
Field name | Description |
---|---|
Item | index - 1-based index of the gap |
Value | n for correct answer (where n is a maximum score for the given gap), 0 for wrong |
Score | 1 if the new value is the correct answer, 0 otherwise. |
The Table module sends the ValueChanged type events to the Event Bus when all gaps are filled correctly.
Field name | Description |
---|---|
Item | all |
Value | N/A |
Score | N/A |
Show Answers
This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.
CSS classes
Class name | Description |
---|---|
table-addon-wrapper | DIV surrounding the table element. |
col_<column number> | Additional class for every table cell (td) defines in which column the cell is placed. Columns are counted from 1 to Columns (model property). |
row_<row number> | Additional class for every table cell (td) defines in which row the cell is placed. Rows are counted from 1 to Rows (model property). |
.ic_gap | Indicates the look of the gap in the table that can be completed by typing the answer into it. |
.ic_gap-correct | A way of indicating the right answer. |
.ic_gap-wrong | A way of indicating the wrong answer. |
.ic_gap-empty | A way of indicating the empty gap. |
.ic_gap-show-answers | Indicates the look of the gap in the show answers mode. |
.draggable-gap | Indicates the look of the draggable gap. |
.draggable-gap.gapFilled | A way of indicating the filled draggable gap. |
.table-addon-wrapper .cellSelector | Style applied only in the editor, to the currently targeted cell. A double-click on such a cell will open the editor in the configuration of that cell if such a configuration exists. |
Examples
.Table_header {}
.Table_header .row_1 {
background-color: #F2BF5B;
font-weight: bold;
}
The above declaration will change the appearance of every cell in the first row, which will function as a header.
.Table_custom_cell {}
.Table_custom_cell .row_1.col_2 {
background-color: red;
}
The above declaration will change the background color only for a cell in the first row and the second column.
.Table_not_first {}
.Table_not_first td[class*='row_']:not(.row_1) {
background-color: #F2BF5B;
}
The above declaration will change the appearance of a cell in all rows but the first.
.Table_last_row_and_column {}
.Table_last_row_and_column tr:last-child td {
color: red;
}
.Table_last_row_and_column tr td:last-child {
color: red;
}
The above declaration will change the font color in cells that are in the last row and column.
Keyboard navigation
- Tab – navigate to the next gap.
Dropdown gaps:
- Space – expand the choice options.
- Up/Down arrows – choose an option.
- Enter – accept.
Draggable gaps:
- Space – insert a currently selected item into a gap or remove an item from a gap.
Demo presentation
Demo presentation contains examples of how to use the Table module.