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:

  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

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.