Quiz und Tabs

Zwei weitere eingebaute Komponenten: <question> für Multiple-Choice-Quiz 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.

Single-Choice (Radio-Buttons)

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

Wird gerendert als:

Die Schülerinnen und Schüler sehen eine Liste mit Radio-Buttons; sie können eine Option wählen. Klicke auf Check, um zu sehen, ob sie richtig ist.

Multi-Choice (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>

Wird gerendert als:

Die Schüler müssen alle und nur die richtigen Antworten wählen, damit die Frage als richtig gewertet wird.

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>

Wird gerendert als:

Der Schüler tippt eine Antwort ein; Vergleich ohne Beachtung der Gross-/Kleinschreibung mit der/den correct-Antwort(en). Du kannst mehrere <answer correct> angeben, um Varianten zu akzeptieren:

<question id="q-text-variants-demo" type="text">
  <p>Was ist die Hauptstadt der Schweiz?</p>
  <answer correct>Bern</answer>
  <answer correct>Berne</answer>
</question>

Wird gerendert als:

Question-Attribute

<question id="q-def" type="single" points="2" attempts="2">
Welches Schlüsselwort definiert in Python eine Funktion?
<answer feedback="Das ist JavaScript.">function</answer>
<answer correct="true">def</answer>
<answer feedback="Das ist Rust.">fn</answer>
</question>

Wird gerendert als:

Was Schüler sehen

• Fragetext + Antwortoptionen
• Auf einer normalen Seite: ein Check answer-Button. ✓ grüne oder ✗ rote Markierungen, der Feedback-Text pro Antwort und die Punkte erscheinen nach dem Drücken; die Eingaben sperren, sobald die Frage abgeschlossen ist
• Auf einer Prüfungsseite: kein Button, keine Markierungen. Die Antwort wird automatisch gespeichert und mit der Prüfung abgegeben; die Markierungen erscheinen auf der zurückgegebenen Prüfung

Ihre Antwort wird pro Schüler und pro Seite gespeichert; wer später zurückkommt, sieht seine vorherige Antwort.

Tabs

Tab-Container gruppieren zusammengehörige 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">
    Standard-Python-Lösung.

    ```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>

Wird gerendert als:

Standard-Python-Lösung.

print("Hello")

JavaScript-Äquivalent.

console.log("Hello")

Rust-Version (kompiliert).

println!("Hello");

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

Tabs können beliebigen Inhalt enthalten

Markdown, Code-Blöcke, Code-Editoren, Callouts, Bilder, Mathematik — alles, was im Seitenkörper funktioniert, funktioniert auch in einem <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="Probier es">
    ```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 geöffneter Tab

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

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

Tabs-Spickzettel

Wann was verwenden

Für selbstbewertende Code-Aufgaben ist python-check viel mächtiger als <question>. Für Faktenabfragen und Fragen mit diskreten Antworten ist <question> schneller geschrieben.