Documentation
Table
Description
This addon allows users to add simple tables into presentations. 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 column.s |
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 (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 "Columns width" and "Rows height" properties. |
Columns width | Defines columns 'width' CSS style. Number of entries should not be higher than the Columns count. 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. Number of entries should not be higher than the Rows count. 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 option is selected, the answers in gaps are case sensitive in the error checking mode. |
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 | When this option is selected, all non-word characters are omitted when errors are checked. |
Gap width | Indicates gaps' width in pixels. |
Gap Type | The property defines the type of gaps to be rendered. The available options are: "editable" or "draggable." |
Gaps
The Table addon allows users to add gaps, known from the Text module. A table gap consists of the following activity types:
- a drop-down gap which enables to choose answers from a drop-down menu,
- an editable gap that enables to type text manually into it.
- a draggable gap which can be filled in with an item selected from a Source list.
- a math gap, which is an editable gap working with MathJax.
- a filled gap, which is an editable gap with a placeholder.
To insert a gap into a Table cell, enter a simple script into the cell content:
editable and draggable gap
\gap{orange} - will result in a gap for which the correct answer is "orange". For multiple answers, just separate them with '|' sign like this: \gap{orange|blue|red} - will result in a gap for which the correct answers are "orange", "blue" and "red"drop-down gap
{{2:blue|yellow|red}} – will result in a drop-down menu with "blue", "yellow" and "red" options to choose from. The first option is always the correct answer, in this case it is "blue". "2" defines the value of a correct answer.math gap
Use the editable gap pattern inside MathJax brackets \( MathJax commands \). For example: \( \frac{1}{\gap{2}} \) will render 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 when 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.
Calculating gaps index
It's important to know that for each kind of gap (editable, draggable, math) the calculating order is:
- First, all editable gaps are counted (both \gap and \filledgap),
- Next, drop-down gaps are counted.
Example:
In this case, the getGapText(8) method returns text of a draggable gap, not the last gap.
Supported commands
Command name | Params | Description |
---|---|---|
show | --- | Shows the module. |
hide | --- | Hides the module. |
getGapText | index - 1-based index of gap in table | Returns gap text entered by user. |
getGapValue | index - 1-based index of gap in table | Returns gap text entered by user. |
markGapAsCorrect | index - 1-based index of gap in table | Mark gap as correct. |
markGapAsWrong | index - 1-based index of gap in table | Mark gap as wrong. |
markGapAsEmpty | index - 1-based index of gap in table | Mark gap as empty. |
enableGap | index - 1-based index of gap in table | Enables gap. |
enableAllGaps | --- | Enables all gaps. |
disableGap | index - 1-based index of gap in table | Disables gap. |
disableAllGaps | --- | Disables all gaps. |
getView | --- | Returns HTML element which is the container of the addon. |
isAllOK | --- | Returns true if all gaps are filled in correctly and there are no mistakes, otherwise 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 addon can be used in the Advanced Connector addon scripts. The below example shows how to show or hide addon accordingly to the Double State Button addon's state.
EVENTSTART Source:DoubleStateButton1 Value:1 SCRIPTSTART var table = presenter.playerController.getModule('Table1'); table.show(); SCRIPTEND EVENTEND EVENTSTART Source:DoubleStateButton1 Value:0 SCRIPTSTART var table = presenter.playerController.getModule('Table1'); table.hide(); SCRIPTEND EVENTEND
Scoring
Table addon allows to create exercises as well as activities. By default addon is in activity mode, so whenever gaps are included it will report points and errors. To disable excercise mode set 'Is not an activity' property. If Addon is not in excercise mode, all of below methods returns 0!
Property | Description |
---|---|
maxScore | number of gaps |
score | 1 for each gap filled correctly |
errorCount | 1 for each gap filled incorrectly, but only if gap is not-empty |
Events
Table addon sends ValueChanged type events to Event Bus when either gap is changed.
Field name | Description |
---|---|
Item | Modified gap index (1-based) |
Value | Gap value or "-" sign if no value is selected (default option) |
Score | 1 if new value is correct answer, 0 otherwise |
Table addon sends ValueChanged type events to Event Bus when all gaps are filled correctly.
Field name | Description |
---|---|
Item | all |
Value | |
Score |
Show Answers
This module is fully compatible with 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) defining 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) defining in which row the cell is placed. Rows are counted from 1 to Rows (model property). |
.ic_gap | Indicates the look of a gap in a table that can be completed by typing the answer into it. |
.ic_gap-correct | A way of indicating a right answer. |
.ic_gap-wrong | A way of indicating a wrong answer. |
.ic_gap-empty | A way of indicating an empty gap. |
.ic_gap-show-answers | Indicates the look of a gap in the show answers mode. |
.draggable-gap | Indicates the look of a draggable gap. |
.draggable-gap.gapFilled | A way of indicating a filled draggable gap. |
Examples
.Table_header { }
.Table_header .row_1 { background-color: #F2BF5B; font-weight: bold; }
The above declaration will change the apperance 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 a 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 apperance of a cell in all rows but 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 a 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 the Table addon's usage.