====== Interactivity > Interactive Table ======

:!: **New in 3.14**. This page allows the creation of an table containing a number of interactive cells. These can be:

  * **Information cells **containing a button which, when clicked can open additional information in a lightbox, or reveal additional information within the cell itself.

  * or **Question cells** containing a text box in the cell, or a button which, when clicked, opens a lightbox containing a question that is answered in a **text box** or via a **drop down menu**.

Additional options allow the page to be set up so that interactive cells are all available immediately, or only after previous cells have been interacted with.

{{ :playground:new_interactive_cell.jpg?direct&150|}} To create this page, first you need to create your table and then make individual cells interactive using; 


===== Example demo =====

{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#interactiveTable}}

or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#interactiveTable| Xerte Page Types > Interactivity: Interactive Table]] (opens in new tab).


===== Editor Interface =====

{{ :playground:interactive_table.jpg?direct&600 |}}

==== Core Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Page Title | Text that appears in header of published page | Text |   |
| Page Text | Content displayed to the left or right of the Interactive Table (see **Align Text **below. | Text+ (Toolbar) | Use this to give the context or instructions for the task.  Other content (e.g. images, audio, video) can be embedded here. |
| Align Text | {**Left**/Right} | Drop-down |   |
| Table data | This is where you set the number of rows and columns, and enter and edit the content that appears in each cell. | Text | The Default provides 1 row with 3 columns; you need to add rows and columns as appropriate.  Mouseover the icons in the table editor to see what their functions are. \\ :!: Only __rows__ can be selected for editing. Click on the number of the row to select and then the Edit icon to edit. |
| Table Width | { **Automatic** / Small / Medium / Large / Full } | Drop-down | When set to to Small, Medium or Large, the selected size will be overridden if needed to display the table's content.  |


==== Optional Properties ====

=== Page-specific ===

^ Property ^ Description ^ Type ^ Tooltip ^
| Attempts Allowed | The number of attempts allowed for each question before the correct answer is given.  When this is set to zero, an unlimited number of attempts are allowed, and the correct answer will never be shown when an incorrect answer has been submitted. | Drop-down | Only applies to **Question Cells**.  |
| Delimiters | The characters you use to separate 2 or more acceptable **Text Entry **answers, or the options in a **Drop-down Menu** question.  | Text  |   |
| Feedback | The feedback shown after all cells have been interacted with.  | Text+ (Toolbar)  |   |
| Icons... | :?:  //Tooltips didn't display for me, and neither did the Question icon (JS)//  |   |   |
| Reveal Interactive Cells | { **All at once** / One at a time / One row at a time / One column at a time}  | Drop-down  |   |
| Table Appearance | Allows borders for table to be edited, header and/or footer row text to be put in bold, and alternate rows to be shaded. | Text and tick boxes  |   |
| Table Caption | A caption displayed above the table.  | Text  |   |
| Tracking Score Weight | Allows the task on the page to be weighted relative to other scored pages in the project  | Text  | See the [[:trackingandweighting|Tracking and Weighting ]]page for more information on weighting. |

=== General ===

See [[:optional_properties#General optional properties|General Optional Properties]]


==== Language Options ====

^ Property ^ Description ^ Type ^ Additional information ^
| Submit Label | Text on button for submitting answers.  | Text | Default - "Submit" |
| Continue Label | Text on button for resetting the task, so that the learner can start it again | Text  | Default - "Continue" |
| Correct Answer | Text displayed to indicate a correct answer (this only displays when the question is displayed in a __lightbox)__.  |   | Default - "Your answer is correct" |
| Incorrect Answer | Text displayed to indicate an incorrect answer (this only displays when the question is displayed in a __lightbox)__.  |   | Default - "Your answer is incorrect" |
| Correct Answer feedback | Text displayed before the correct answer (this only displays when the question is displayed in a __lightbox__; bear in mind your setting for **Attempts Allowed**) . |   | Default - "The correct answer is" |
| Incomplete Text | Text displayed when a learner submits before attempting all the Questions. |   | Default - "Complete the exercise" |
| Correct Answer (screen readers only) |   |   | Default - "Incorrect submitted answer"  :!: //Wrong?// |
| Incorrect Answer (screen readers only) |   |   | Default - "Correct answer"  :!: //Wrong?// |


==== Add Interactive Cell ====

^ Property ^ Sub-property ^ Description ^ Type ^ Additional information ^
| Title || This cell title only appears: for authors in the Project Tree; for users in any Results Page this page is associated with; and when tracking results (i.e. via SCORM/LTI/xAPI)  | Text |   |
| Position || This identifies which cell you are dealing with. Use the format **column, row**  (e.g. 2, 3 denotes the cell in the second column, third row) | Text  |   |
| Interactivity || The type of interactivity you want for this cell {**Question**/Information}  | Drop-down  |   |
| Question | Type | {**Text field**/Drop down menu}  | Drop-down  |   |
| ::: | Answer | For **Text field**, separate acceptable correct answers with a **comma**.For **Drop down menu** separate options with a **forward slash** ( **/** ) and make sure the correct answer is the first item in the list.  | Text  | The default limiters are given here, but you can change these using the **Delimiters **optional  property.  |
| ::: | Display In | Determines where the answer is shown {**Cell**/Lightbox} | Drop-down  |   |
| Information | Text | The text that is displayed when the cell is selected  | Text+ (Toolbar)  |   |
| ::: | Display In | Determines where the information is shown when the cell is selected {**Cell**/Lightbox}  | Drop-down  |   |
| ::: | Add text | {**At end**/Replace cell content} | Drop-down | :!: This sub-property is only visible if you have selected **Cell **in Display In (see above) |
| ::: | Required | Tick if you want this information to be viewed before moving on to the next stage and/or to receive feedback.  | Tick box |   |


===== Further information =====

This page can be tracked.

{{tag>pagetype interactivity}}