Documentation

Description

This module 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.

Gaps

The Table module allows users to add gaps, known from the Text module. A table gap consists of the following activity types:

• a drop-down gap that enables choosing answers from a drop-down menu,
• an editable gap that enables typing text manually into it.
• a draggable gap that 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 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.

Calculating gaps index

It's important to know that for each kind of gap (editable, draggable, math) the calculating order is:

1. First, all editable gaps are counted (both \gap and \filledgap),
2. Next, drop-down gaps are counted.

Example:

In this case, the getGapText(8) method returns the text of a draggable gap, not the last gap.

Supported commands

Advanced Connector integration

Each command supported by the Table addon can be used in the Advanced Connector addon scripts. The example below shows how to show or hide a module according 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 creating exercises as well as 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

Table addon sends the ValueChanged type events to the Event Bus when either gap is changed.

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

Show Answers

This module is fully compatible with 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 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.