Differences

This shows you the differences between two versions of the page.

--- interactivity_sortable_grid_page [2022/12/02 10:57] – removed - external edit (Unknown date) 127.0.0.1
+++ interactivity_sortable_grid_page [2023/09/25 09:52] (current) – [Further information] jsmith
@@ Line 1: / Line 1: @@
+====== Interactivity > Sortable grid ======
+This page presents a grid with cells containing content, positioned at random in the grid. The cells are re-positioned by the learner, using drag and drop.  Those cells in the correct position are marked with a green tick, and those incorrectly placed with a red cross. The learner can then continue until all the cells are correctly placed.
+Specific rows, columns and cells can be locked, so they stay in the correct position and can't be dragged (as is the case in Row 1 and Column 1 in the demo below).  Columns or rows can be constrained, so that cells can only be dragged within the column or row they are located in. You can also create a grid with just one column, which enables you to create a text re-ordering task.
+===== Example demo =====
+{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#sortablegrid}}
+or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#sortablegrid| Xerte Page Types > Interactivity: Sortable Grid]] (opens in new tab).
+===== Editor Interface =====
+{{:xerte-inter-sortablegrid-editor.jpg?600&direct}}
+==== Core Properties ====
+^ Property ^ Description ^ Type ^ Additional information ^
+| Page Title | Text that appears in header of published page | Text |   |
+| Page Text | Content that appears at the top of the page (the position of this text may change if you change the Text Align setting (see 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. |
+| Feedback | Feedback revealed after hitting **Check Answers **button. | Text+ (Toolbar) |   |
+| 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. This function sometimes freezes; if this happens closing and reopening the project should clear the problem. |
+| Constrain Labels | { **Off** / On (Row) / On (Column } If you want cells only to be draggable within columns, or within rows, change the setting here. Otherwise leave the setting on **Off**. | Drop-down |   |
+| Borders | Design the borders of the grid here {**None **/ Full Grid / Simple / Horizontal Only / Vertical Only / Outside Border}  | Drop-down |   |
+| Text Align | {**Left**/Right/Top} Aligns text relative to the grid  | Drop-down |   |
+| Drop Label Action | Decide what happens to the cell content when another cell is dropped onto it {**Insert **/ Replace}  | Drop-down | **Replace **will swap the label you are dragging with the label in the cell you are dragging to. **Insert **will adjust all of the labels in between the original cell and the new cell that you are dragging a label to - this would work well if you are making a list of items in order, particularly if **Constrain Labels** for columns or rows is set to **On **(see above)  |
+==== Optional Properties ====
+=== Page-specific ===
+^ Property ^ Description ^ Type ^ Tooltip ^
+| CSV File | Allows a CSV file with the cell data to be uploaded; may save time | Link to Media Browser | Data can be prepared in Excel, and the file saved in .csv format  |
+| Fixed Cells | Allows rows, columns  and cells to be fixed, so they can't be dragged | Text | Fix specific cells by identifying cells as follows: column, row.  E.g. 3,1 would be the cell at column 3, row 1. |
+| Table Appearance | Allows the first row or column to be fixed, with  text in bold on a grey background. Also allows alternate rows to be shaded. | Text and tick boxes  |   |
+| 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 ^
+| Check Button Label | Text on button for checking matches.  | Text | Default - "Check Answers"  If you delete the text in this window, the Check button is hidden, which can be useful, if there is no "model answer" for the task.|
+| Reset Button Label | Text on button for resetting the task, so that the learner can start it again | Text  | Default - "Reset" |
+===== Further information =====
+This page can be tracked.
+It can also be used to create a text-ordering task, by creating a grid with __only one column__.
+:!: Drag and drop is fiddly for learners if they have to scroll up and down to access all drop zones.  Dragging and scrolling at the same time does not work consistently. Items can be dropped temporarily into any drop zone and then re-dragged after scrolling, but this adds an additional layer of complication. Zooming out solves the problem, but may impact on readability.
+{{tag>pagetype interactivity}}