Quiz und Tabs

Zwei weitere eingebaute Komponenten: <question> für Multiple-Choice-Quiz und Umfragen, und <tabs-container> für gruppierte Inhalte mit umschaltbaren Ansichten.

Quiz

Ein Quiz ist ein <question>-Block mit einem oder mehreren <answer>-Kindern. Eine Antwort als correct zu markieren, macht sie zur richtigen Antwort.

Einzelauswahl (Radio-Buttons)

<question id="q-single-demo" type="single">
  <p>Welches Schlüsselwort definiert eine Funktion in Python?</p>
  <answer>function</answer>
  <answer correct>def</answer>
  <answer>fn</answer>
  <answer>lambda</answer>
</question>

Rendert als:

Schüler sehen eine Liste mit Radio-Buttons; können eine wählen. Klick auf Check, um zu sehen, ob es richtig ist.

Mehrfachauswahl (Checkboxen)

<question id="q-multi-demo" type="multi">
  <p>Welche davon sind in Python unveränderlich (immutable)?</p>
  <answer correct>tuple</answer>
  <answer>list</answer>
  <answer correct>str</answer>
  <answer correct>frozenset</answer>
  <answer>dict</answer>
</question>

Rendert als:

Schüler müssen alle und nur die richtigen Antworten auswählen, damit es als richtig gilt.

Freitext-Antwort

<question id="q-text-demo" type="text">
  <p>Was ist die Ausgabe von <code>print(2 ** 10)</code>?</p>
  <answer correct>1024</answer>
</question>

Rendert als:

Schüler tippt eine Antwort ein; Gross-/Kleinschreibung wird beim Vergleich mit der correct-Antwort(en) ignoriert. Du kannst mehrere <answer correct> auflisten, um Varianten zu akzeptieren:

<question id="q-text-variants-demo" type="text">
  <p>Wie heisst die Bundesstadt der Schweiz?</p>
  <answer correct>Bern</answer>
  <answer correct>Berne</answer>
</question>

Rendert als:

Es gibt auch einen anderen Freitext-Mechanismus

Das hier ist exaktes Varianten-Matching für kurze Faktenantworten. Für die Bewertung einer vorhergesagten Ausgabe eines Code-Stücks — mit Teilpunkten und einem Diff statt exaktem Match — siehe die predict-output-Variante von <question type="text"> in Code-Editoren & Bewertung. Gleicher Tag, anderer Zweck.

Frage-Attribute

<question id="q-feedback-demo" type="single" points="2"
          feedback-correct="Genau! In Python ist `def` das Schlüsselwort."
          feedback-incorrect="Hinweis: Die Antwort beginnt mit dem Buchstaben d.">
  <p>Welches Schlüsselwort definiert eine Funktion in Python?</p>
  <answer>function</answer>
  <answer correct>def</answer>
  <answer>fn</answer>
</question>

Rendert als:

Welches Schlüsselwort definiert eine Funktion in Python?

Was Schüler sehen

• Fragetext + Antwortmöglichkeiten
• Check-Button zum Absenden
• ✓ grün oder ✗ rot als Feedback nach dem Absenden
• Eigene Feedback-Meldung (falls gesetzt)
• Score für diese Frage

Ihre Antwort wird pro Schüler und pro Seite gespeichert; kommen sie später zurück, wird ihre vorherige Antwort angezeigt.

Bewertungsoptionen

points (Standard 1) setzt das Score-Gewicht einer Frage — die maximale Punktzahl, die sie beiträgt. Wie eine Frage diese Punkte verdient, hängt vom Typ ab:

• single / multi bewerten automatisch die volle Punktzahl bei exaktem Match mit den correct-Antworten — keine Teilpunkte bei Auswahlfragen.
• text bewertet automatisch bei Gross-/Kleinschreibung-unabhängigem Match mit einer <answer correct>-Variante.
• Schieberegler (number / range) bewerten automatisch gegen ein Ziel, mit gestaffelten Teilpunkten:

<question id="q-slope-demo" type="number" points="2" expected="-1" tolerance="0.15">
  <p>Wie gross ist die Steigung der im Plot gezeigten Geraden?</p>
  <answer from="0.9" feedback="Exakt, oder nahe genug, um als exakt zu zählen."></answer>
  <answer from="0.5" feedback="Richtige Richtung, aber überprüfe deine Berechnung."></answer>
</question>

type="number" expected="-1" tolerance="0.15" setzt einen einzelnen Zielwert mit Toleranzband; type="range" expected="-1..1" akzeptiert stattdessen jede Antwort in diesem Bereich. <answer from="...">-Bänder gehen von bester zu schlechtester Bewertung — das erste, das die Antwort des Schülers erreicht (von oben nach unten gelesen), bestimmt sein Feedback und seinen Teilscore.

Alle automatisch bewerteten Ergebnisse sind beim Bewerten durch die Lehrperson überschreibbar — siehe unten.

Umfragen (unbewertete Fragen)

Nicht jede Frage braucht eine richtige Antwort. Ein <question> ohne <answer correct> (oder ohne bewertetes Schieberegler-Ziel) sammelt eine Antwort, ohne sie zu bewerten — nützlich für Meinungsumfragen, "wie sicher fühlst du dich bei diesem Thema" oder Exit-Tickets. Schüler sehen ihre eigene frühere Antwort trotzdem, wenn sie zurückkommen; es gibt nur kein ✓/✗-Feedback, weil es nichts gibt, das richtig oder falsch sein könnte.

Was du als Lehrperson siehst

Für Schüler, die bei einer Klasse eingeloggt sind, fliessen Quiz-Antworten in dieselbe Abgaben-Ansicht wie automatisch bewerteter Code (siehe Code-Editoren & Bewertung):

• Abgaben-Oberfläche (Dashboard → Classes → Submissions) — die Antworten und den Score jedes Schülers, pro Frage
• Detail pro Schüler — sieh genau, was er ausgewählt oder eingetippt hat
• Numerische Überschreibungen — passe den automatisch bewerteten Score für eine Frage an, z.B. um Teilpunkte zu vergeben, die ein Schieberegler-Band nicht ganz erfasst hat
• Kommentare — hinterlasse Feedback pro Abgabe

Automatisch bewertete Quiz-Ergebnisse stehen neben python-check- und predict-output-Ergebnissen im selben Review-Ablauf, sodass du an einem Ort siehst, wie ein Schüler über eine ganze Seite hinweg abgeschnitten hat, statt zwischen Komponententypen hin- und herzuspringen.

Tabs

Tab-Container gruppieren verwandte Inhalte mit umschaltbaren Ansichten. Nützlich für: Sprachalternativen, betriebssystemspezifische Anleitungen, Anfänger-/Fortgeschrittenen-Versionen desselben Inhalts, Vorher-/Nachher-Vergleiche.

Grundsyntax

<tabs-container>
  <tab-item label="Python">
    Standardlösung in Python.

    ```python
    print("Hello")
    ```
  </tab-item>

  <tab-item label="JavaScript">
    JavaScript-Äquivalent.

    ```javascript
    console.log("Hello")
    ```
  </tab-item>

  <tab-item label="Rust">
    Rust-Version (kompiliert).

    ```rust
    println!("Hello");
    ```
  </tab-item>
</tabs-container>

Rendert als:

Standardlösung in Python.

print("Hello")

JavaScript-Äquivalent.

console.log("Hello")

Rust-Version (kompiliert).

println!("Hello");

Schüler sehen eine Tab-Leiste oben mit den drei Labels; ein Klick wechselt zwischen ihnen.

Tabs können beliebige Inhalte enthalten

Markdown, Codeblöcke, Code-Editoren, Callouts, Bilder, Mathe — alles, was im Hauptteil einer Seite funktioniert, funktioniert auch innerhalb eines <tab-item>.

<tabs-container>
  <tab-item label="Beschreibung">
    Der Satz des Pythagoras besagt, dass für ein rechtwinkliges Dreieck gilt:
    $a^2 + b^2 = c^2$
  </tab-item>

  <tab-item label="Ausprobieren">
    ```python editor id="pythagoras"
    a, b = 3, 4
    c = (a**2 + b**2) ** 0.5
    print(f"c = {c}")
    ```
  </tab-item>

  <tab-item label="Beweis">
    > [!example] Geometrischer Beweis
    > Nimm vier rechtwinklige Dreiecke mit den Katheten $a$ und $b$ ...
  </tab-item>
</tabs-container>

Standardmässig offener Tab

Füge default zu einem Tab hinzu, damit er anfangs offen ist (sonst ist der erste Tab standardmässig offen):

<tabs-container>
  <tab-item label="macOS">Anleitung für macOS</tab-item>
  <tab-item label="Windows" default>Anleitung für Windows</tab-item>
  <tab-item label="Linux">Anleitung für Linux</tab-item>
</tabs-container>

Tabs-Spickzettel

Wann was verwenden

Für selbstbewertende Code-Übungen ist python-check deutlich mächtiger als <question>. Für Faktenwissen und Fragen mit diskreten Antworten ist <question> schneller geschrieben.