DragAndDrop Template for LiaScript: Order and Multiple-Choice Drag Quizzes

Drag-and-drop quizzes are more engaging than click-to-select, especially for sequencing and sorting tasks. The LiaScript_DragAndDrop_Template by Michael Markert provides two macros for drag-and-drop interaction: @dragdroporder for putting items in the correct sequence, and @dragdropmultiple for selecting the correct subset from a shuffled pool.

Quick Start

<!--
import: https://raw.githubusercontent.com/MichaelMarkert/LiaScript_DragAndDrop_Template/refs/heads/main/README.md
-->

Note: Both macros require @uid as the first argument. This must be passed explicitly to ensure unique element IDs on each use.

@dragdroporder — Sequence / sorting quiz

Students arrange items into the correct order by dragging:

@dragdroporder(@uid, 4|2|3|1, 1|2|3|4)

• Argument 1: @uid (always pass this)
• Argument 2: Initial order (pipe-separated item indices, shuffled presentation)
• Argument 3: Correct order (pipe-separated item indices)

The item labels are defined by their position: 1 is the first item, 2 the second, and so on.

Full example — historical events

<!--
import: https://raw.githubusercontent.com/MichaelMarkert/LiaScript_DragAndDrop_Template/refs/heads/main/README.md
-->

# Drag-and-Drop Quizzes

## Task 1 — Put the events in chronological order

Drag the cards into the correct order:

| Step | Event |
|---|---|
| 1 | French Revolution begins |
| 2 | Napoleon becomes Emperor |
| 3 | Battle of Waterloo |
| 4 | Congress of Vienna |

@dragdroporder(@uid, 3|1|4|2, 1|2|3|4)

Try it live — drag the event cards into the correct chronological order:

@dragdropmultiple — Multiple-choice from a pool

Students select the correct items from a larger shuffled pool:

@dragdropmultiple(@uid, 1|2|3|4|5|6, 1|3|5)

• Argument 1: @uid (always pass this)
• Argument 2: Full pool of items (pipe-separated, shuffled on render)
• Argument 3: Correct item indices from the pool

Full example — classification exercise

## Task 2 — Select all mammals

Drag only the mammals into the answer box:

| # | Animal |
|---|---|
| 1 | Dog |
| 2 | Salmon |
| 3 | Bat |
| 4 | Salamander |
| 5 | Whale |
| 6 | Crow |

@dragdropmultiple(@uid, 1|2|3|4|5|6, 1|3|5)

Combined example: Biology classification

<!--
import: https://raw.githubusercontent.com/MichaelMarkert/LiaScript_DragAndDrop_Template/refs/heads/main/README.md
-->

# Cell Division — Drag-and-Drop

## Task 1 — Order the phases of mitosis

Drag the phases into the correct sequence:

| # | Phase |
|---|---|
| 1 | Interphase |
| 2 | Prophase |
| 3 | Metaphase |
| 4 | Anaphase |
| 5 | Telophase |

@dragdroporder(@uid, 3|5|1|4|2, 1|2|3|4|5)

---

## Task 2 — Select phases of MEIOSIS only

Drag only the items that apply specifically to meiosis (not mitosis):

| # | Statement |
|---|---|
| 1 | Produces haploid cells |
| 2 | Produces 2 daughter cells |
| 3 | Includes crossing-over |
| 4 | Produces 4 daughter cells |
| 5 | Used for growth and repair |
| 6 | Homologous chromosomes pair |

@dragdropmultiple(@uid, 1|2|3|4|5|6, 1|3|4|6)

Try both macros live — sequence the mitosis phases, then select the meiosis-only facts:

Full Template Demo

Use Cases

Sequence exercises — Students reconstruct historical timelines, algorithm steps, laboratory procedures, or narrative story elements by sorting.

Classification quizzes — Drag items into the correct category: mammals vs. reptiles, acids vs. bases, primary vs. secondary sources.

Grammar reordering — Reorder scrambled words to form a correct sentence.

Combine with lia-kachel — Use lia-kachel for inline text gap fill and DragAndDrop for full card sorting on the same page.

Technical Facts

Try It

Related Templates

• lia-kachel — tile-based drag-and-drop within text gaps
• Random — randomized quiz banks
• lia-marker — color-coded text highlighting quizzes
• lia-freeze-v2 — freeze quiz answers and submit to teacher