Documentation

Description

This addon allows users to add simple tables into presentations. With this functionality, users can easily organize their lessons and presentations.

Properties

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	When this option is selected, all gaps are disabled at startup.
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.

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.