Documentation

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.

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:

1. First, all editable gaps are counted (both \gap{} and \filledgap{}),
2. 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

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!

Events

The Table module sends the ValueChanged events to the Event Bus when the user changes the value of a gap.

The Table module sends the ValueChanged type events to the Event Bus when all gaps are filled correctly.

Show Answers

This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.

CSS classes

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.