lia-kachel for LiaScript: Drag-and-Drop Tile Quizzes

LiaScript has a native tile (Kachel) quiz syntax for drag-and-drop answers. The lia-kachel community plugin by MINT-the-GAP enhances it significantly: rounded cards that match the LiaScript design system, proper touch support for tablets and phones, cross-root drop emulation, and two extra macros for order-independent grading and sequential reveal of answer slots.

Quick Start

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-Kachel/main/README.md
-->

Note: The import URL uses lia-Kachel (capital K), matching the GitHub repo.

Macro Reference

@Kachelfolge — Order-independent tile selection

Use when the correct tiles must all be present but the order doesn’t matter:

<!-- data-randomize="true" -->
Wähle die richtigen Farben aus:

@Kachelfolge(`[->[(rot)]][->[(blau)]][->[(grün)|Haus]]`)

Tile syntax: [->[(Antwort)]] or [->[(Antwort)|Beschriftung]]

• (Antwort) — the correct answer (in round brackets)
• Alternatives without brackets are presented as wrong options: [->[(rot)|blau|grün]]

@KachelfolgeN — Sequential reveal

Shows only the next empty slot — useful when the number of required tiles is unknown:

Wähle alle roten Farbtöne aus:

@KachelfolgeN(`[->[(Karmesin)]][->[(Scharlach)]][->[(Rubinrot)|Kobalt]]`)

<div class="Kachel"> — Wrap standard tile quizzes

Wrap any standard LiaScript tile quiz with the Kachel class to enable touch support and the improved styling:

<div class="Kachel">

<!-- data-randomize="true" -->
In diese Lücke muss [->[(gelb)]] rein. \
Und hier kommt [->[(rot)]] hin. \
Das Adjektiv lautet [->[pink|grün|(rot)]].

</div>

Quiz Configuration

Standard LiaScript quiz options work directly above the macro:

<!-- data-randomize="true" -->
@Kachelfolge(`[->[(A)]][->[(B)]][->[(C)]]`)

<!-- data-solution-button="2" -->
@Kachelfolge(`[->[(1)]][->[(2)|Label]][->[(3)]]`)

<!-- data-show-partial-solution="true" -->
@Kachelfolge(`[->[(X)]][->[(Y)]]`)

Example: German Grammar Lesson

<!--
import: https://raw.githubusercontent.com/MINT-the-GAP/lia-Kachel/main/README.md
-->

# Adjektivendungen

## Aufgabe 1 — Nominativ Singular

Wähle die richtige Adjektivendung aus:

Der **schön**[->[(e)|(en)|(em)]] Garten.

Eine **schön**[->[(e)]] Blume.

Das **schön**[->[(e)|(en)|(em)]] Haus.

---

## Aufgabe 2 — Kasus gemischt

Ordne die Pronomen den Kasus zu:

<!-- data-randomize="true" -->
@Kachelfolge(`[->[(Nominativ)|Akkusativ]][->[(Dativ)|Genitiv]]`)

---

## Aufgabe 3 — Satzstellung

Bring die Satzteile in die richtige Reihenfolge:

@KachelfolgeN(`[->[(Gestern)]][->[(habe)]][->[(ich)]][->[(gelernt)]]`)

Try it live — drag the tiles into the correct gaps:

Full Template Demo

Use Cases

Vocabulary and grammar quizzes — Students drag correct words, suffixes, or pronouns into gaps, with randomized distractors.

Science classification — Drag chemical elements, animals, or geological periods into the correct category.

Sequencing exercises — Use @KachelfolgeN to have students reconstruct a process (the water cycle, historical events, algorithm steps) in the correct order, one step at a time.

Touch-first classrooms — The enhanced touch support makes tile quizzes work reliably on iPads and Android tablets, which the native LiaScript tile quiz may not handle as smoothly.

Technical Facts

Try It

Related Templates

• DragAndDrop — JS-based drag-and-drop order and multiple-choice quizzes
• lia-marker — color-coded text highlighting quizzes
• Random — randomized quiz banks for practice sets
• lia-DynFlex — multi-column layouts for side-by-side quizzes