<aside> ℹ️
Link: https://input-table-component.s3.us-west-2.amazonaws.com/index.html
⚠️ Reminder: Only enter in READ ONLY
</aside>
x^2^ → x$^2$ | Superscripts: O_3_ → O$_3$ (only in non-editable cells)| Feature | Status |
|---|---|
| Keyboard | ✅ |
| Screen Reader | ✅ |
| Touch | ✅ |
| Scenario | CAPI |
|---|---|
| Disable input on later subscreens | stage.inputTable.Enabled Boolean = false |
| Pre-fill a cell with a value | stage.inputTable.Cell.Column1.Row1 = 0.001 |
| Scenario | CAPI |
|---|---|
| Check full table correctness | stage.inputTable.IsCorrect Boolean = true |
| Check only one cell | stage.inputTable.Cell.Column1.Row1 = 0.001 |
| Check table for completion | stage.inputTable.IsComplete Boolean = true |
| Scenario | CAPI |
|---|---|
| Incomplete: didn’t modify anything | stage.inputTable.IsModified Boolean = false |
| Incomplete: didn’t complete table | stage.inputTable.IsComplete Boolean = false |
| Incorrect: generic | stage.inputTable.IsCorrect Boolean = false |
| Incorrect: specific cell | stage.inputTable.Cell.Column1.Row1 != 0.001 |
| Scenario | CAPI |
|---|---|
| Show hints | stage.inputTable.ShowHints Boolean = true |
| Show correct answers | stage.inputTable.ShowCorrect Boolean = true |
| Change the value of a specific cell | stage.inputTable.Cell.Column1.Row1 = 0.001 |
| Disable the entire table | stage.inputTable.Enabled = false |
| CAPI Name | Type | Default | Description | Examples / Notes |
|---|---|---|---|---|
| CSS | string | this is where we can enter in custom CSS to style the component. It can either be an @import link or pure CSS. This is not to be confused with customCssClass. | table { | |
| background-color: blue; | ||||
| } | ||||
| Enabled | boolean | true | enable or disable the entire component | |
| Initial Config | string | this spits out the JSON for the initial configuration of the table, i.e. what the student would see when first coming to the table before interacting with it | could be used to easily copy a table from one screen to another, or from one lesson to another. | |
| IsComplete | boolean | false | true if the student has modified all editable cells | could use this for an incomplete state if you want to make sure the student enters an answer for every cell |
| IsCorrect | boolean | false | true if the student has set up the table correctly | you would use this to check to see if the student is correct, like in the correct state |
| IsModified | boolean | false | true if the student has modified any cell in the table | could use this for an incomplete state if you just want to make sure the student has interacted with the table at all |
| Mode | enum (Config, Preview) | Config | Config mode is for setting up the table, then switch to preview mode so it displays correctly for the student | Changing this CAPI is not the same as clicking the preview button! |
| ShowCorrectAnswers | boolean | false | Changes the table to show the correct answers | This is what you would use to show students the correct answers, like in a mutate state on max attempts |
| ShowHints | boolean | false | Shows hints to the students about which cells are correct or incorrect | Once the student has modified a cell that is showing hints, the hint disappears |
| Summary | string | This is for screen readers only, and is used to give students a summary of the content in the table. | This needs to be populated by the user. It is not always necessary, since the individual cells can also be read by the screen reader. | |
| TableJSON | string | this shows the current configuration of the sim, including anything the student has done to modify cells | ||
| Title | string | This is for screen readers only and is used to give the table a title | This needs to be populated by the user. It is not always necessary, since the individual cells can also be read by the screen reader. | |
| Cell.Column#.Row# | string | This can be used to check or set the value of any cell in the table. Numbering starts at 0. |