Documentation

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.

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:

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 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 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!

Events

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

Table addon sends ValueChanged type events to 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 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.