Components
Created by Smart Sparrow

Input Table

The input table component allows you to create a table with blank cells for learners to complete. You are able to include different inputs in the blank cells, including numerical, text and drop down lists.

 

Unique ways to use this widget

There are multiple ways you can use this widget. For example:

  • Ask students to fill in the table with numbers
  • Ask students to select the correct inputs for cells using drop down lists

 

Have a play

 

Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Type or paste the text you want to display into the table. Note that the column (A, B, C,…) and row (1,2,3,…) labels will not be visible for students.
  5. Add rows or columns by pressing the add row/column icon, as shown in the image below.
  6. You can delete/add columns and rows by right clicking in the table and selecting insert/remove row/column.
  7. You can also edit the font size, font colour, cell colour and alignment by selecting the various options in the toolbar. For example, you choose a custom cell colour by entering a HEX code, as shown in the image below.
  8. Once you’re done, open the Options menu and change the Mode to Student.
  9. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Adding editable inputs to the table

  1. Make sure you are in Configuration mode.
  2. By default, all cells are not editable by students. To make a cell editable, Select a cell and Press Cell type, which is located on the left hand side of the taskbar.
  3. Select the type of input you’d like to add, either editable (text entry), dropdown and number.
  4. Enter the correct answer (or options for drop down lists) and save your changes.
  5. Before deploying your lesson to learners, make sure you switch the widget from Configuration Mode into Student Mode.

 

Other options

  • The table title and summary are the only for accessibility purposes. A screen reader will read the title and summary you enter, along with the text/numbers in the table. They will not appear on the screen.
  • The Show correct property can be used to display all correct answers to students.
  • The Show hints property highlights correct answers in green and incorrect answers in red. It can be useful to display hints to students after incorrect attempts.

 

FAQs

Q: I’ve set up my widget, but when I preview it I can’t complete the activity the way students should. A: This is because you still have the widget set to “Config” mode. Use the edit icon on the Widget’s iFrame to change it to “Student” mode. Whenever you want to make changes to the widget, switch it back to “Config” mode.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Cell.{colHeader}.{rowHeader}.Value
Value for the cell
StringNumber
Cell.{colHeader}.{rowHeader}.Correct
The cell are correct
Boolean
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Mode
Mode of the widget
Student
Configuration
Configuration
The configuration data for the widget.
String
Custom CSS
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Correct
All student's answers are correct
Boolean
Show correct
Show the correct answers to the student
Boolean
Show hints
Show the hints for the answers to the student
Boolean
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Direction
Language direction of the widget
LTR
RTL
Property Purpose Type
Cell.{colHeader}.{rowHeader}.Value
Value for the cell
StringNumber
Cell.{colHeader}.{rowHeader}.Correct
The cell are correct
Boolean
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Mode
Mode of the widget
Student
Configuration
Configuration
The configuration data for the widget.
String
Custom CSS
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Correct
All student's answers are correct
Boolean
Show correct
Show the correct answers to the student
Boolean
Show hints
Show the hints for the answers to the student
Boolean
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Screen Reader Language
The language used by screen readers
Arabic
English
French
Italian
Japanese
Portuguese
Russian
Spanish
Direction
Language direction of the widget
LTR
RTL
Property Purpose Type
Cell.{colHeader}.{rowHeader}.Value
Value for the cell
StringNumber
Cell.{colHeader}.{rowHeader}.Correct
The cell are correct
Boolean
Column.{name}
All the entries for a particular column
Array
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Mode
Mode of the widget
Student
Configuration
Configuration
The configuration data for the widget.
String
Custom CSS
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Correct
All student's answers are correct
Boolean
Show correct
Show the correct answers to the student
Boolean
Show hints
Show the hints for the answers to the student
Boolean
Table title
Title of the table, used for screen readers
String
Table summary
Summary of the table contents, used for screen readers
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}.Value
Value for the cell
StringNumber
Cell.{colHeader}.{rowHeader}.Correct
The cell are correct
Boolean
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Configuration
Configuration
The configuration data for the widget.
String
Custom CSS
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Correct
All student's answers are correct
Boolean
Show correct
Show the correct answers to the student
Boolean
Show hints
Show the hints for the answers to the student
Boolean
Property Purpose Type
Cell.{colHeader}.{rowHeader}.Value
Value for the cell
StringNumber
Cell.{colHeader}.{rowHeader}.Correct
The cell are correct
Boolean
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Configuration
Configuration
The configuration data for the widget.
String
Custom CSS
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Correct
All student's answers are correct
Boolean
Show correct
Show the correct answers to the student
Boolean
Show hints
Show the hints for the answers to the student
Boolean
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data.value
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Column.{name}
All the entries for a particular column
Array
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String
Property Purpose Type
Cell.{colHeader}.{rowHeader}
Value for the cell
String
Student editing enabled
Allows editing in student mode
Boolean
Date format
Format for Date cells
String
Currency format
Format for Currency cells
String
Number format
Format for Number cells
String
Scientific format
Scientific format for Number cells
String
Scientific magnitude
Magnitude threshold for displaying numbers in scientific format
Number
Show headers
Show reference headers
Boolean
Mode
Mode of the widget
Student
Config
Config JSON
The configuration data for the widget.
String
CSS Source
Css or the url of the CSS file to style the button
String
Table data
Data for the table
String

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services