Hilfe zur CodeHilfe

Mit der CodeHilfe können Schülerinnen und Schüler Lücken in einem Programm ergänzen, Codebausteine einsetzen und durcheinandergeratene Zeilen sortieren. Die Lösung wird direkt im Browser überprüft.

Eine CodeHilfe erstellen

Grundlage jeder CodeHilfe ist das fertige, richtige Programm. Darin markierst du, was die Schülerinnen und Schüler ergänzen oder ordnen sollen. Das Werkzeug ist sprachunabhängig; die Beispiele auf dieser Seite verwenden Python und Kotlin.

1. Öffne den Editor, füge den Lösungscode ein und wähle die Programmiersprache für die Syntaxhervorhebung. Zum Ausprobieren lädt „Beispiel laden“ eine kleine fertige Aufgabe.
2. Wähle Text aus und setze mit den Knöpfen über dem Codefeld Lücken und Zeilenmarkierungen. Du kannst die Markierungen auch direkt tippen.
3. Lege unter Einstellungen fest, ob Zeilen sortiert werden, wie Lücken gefüllt werden und ob eine Lösung angezeigt wird.
4. Ergänze bei Bedarf eine Überschrift und eine Aufgabenstellung.
5. Prüfe die Aufgabe in der Vorschau. Sie verhält sich genau so wie bei deinen Schülerinnen und Schülern. Stimmt etwas mit den Markierungen nicht, erklärt die Vorschau, was zu ändern ist.
6. Teile den Link, den QR-Code oder bette die Aufgabe ein (siehe Teilen).

Ein umfassendes Beispiel

Dieses Beispiel verbindet sortierbare und feste Zeilen, zu tippende Lücken, Codebausteine, eine überflüssige Zeile und einen zusätzlichen Baustein. Außerdem kann die Lösung nach einem fehlerhaften Versuch angezeigt werden.

Heute in Mainz: 18 °C
Vorhersage für morgen:
20 °C

def temperaturbericht():                       §§fest
    ort = §§"Mainz"§§                           §§gruppe
    heute = §§18§§                              §§gruppe
    print(f"Heute in {ort}: {heute} °C")
    print("Vorhersage für morgen:")              §§fest
    morgen = heute + §§2::tippen§§
    print(f"{morgen} °C")
    print("Keine Daten")                         §§extra
    §§20::extra§§
temperaturbericht()                            §§fest

Der Lösungscode dazu, wie er im Editor steht:

def temperaturbericht():                       §§fest
    ort = §§"Mainz"§§                           §§gruppe
    heute = §§18§§                              §§gruppe
    print(f"Heute in {ort}: {heute} °C")
    print("Vorhersage für morgen:")              §§fest
    morgen = heute + §§2::tippen§§
    print(f"{morgen} °C")
    print("Keine Daten")                         §§extra
    §§20::extra§§
temperaturbericht()                            §§fest

Einstellungen: Zeilen mischen und sortieren lassen, Lücken füllen durch Tippen oder Bausteine, Lösung anzeigen nach einem Fehlversuch.

Referenz

Einstellungen

Markierungen im Lösungscode

Zeilenmarkierungen (§§fest, §§gruppe, §§extra) wirken nur, wenn Zeilen sortiert werden. Der Editor schaltet das Sortieren deshalb ein, sobald du eine davon setzt, und richtet alle Zeilenmarkierungen untereinander aus.

Aufgabenstellung formatieren

Überprüfung und Kopieren

• Die Überprüfung ist textbasiert; der Code wird nicht kompiliert.
• Bei Lücken sind Leerzeichen um Operatoren und Satzzeichen unerheblich. Groß- und Kleinschreibung muss stimmen.
• Mehrere akzeptierte Antworten sind nur bei zu tippenden Lücken möglich. Ein Codebaustein hat genau eine Form.
• Der Copy-Button oben rechts im Code kopiert den aktuellen Bearbeitungsstand ohne CodeHilfe-Markierungen. Eine überflüssige Zeile wird mitkopiert, solange sie noch nicht in der Ablage liegt.

Empfehlungen für den Einsatz

• Die CodeHilfe eignet sich besonders als freiwillige Hilfe zu einer offenen Programmieraufgabe: Stelle die Aufgabe offen und biete den Link für alle an, die nicht weiterkommen.
• Bei Aufgaben, die ein Projekt einführen oder neue Inhalte vermitteln, bietet sich Lösung anzeigen: nach einem Fehlversuch an.
• Bei Übungsaufgaben sollte keine Lösung angezeigt werden (Lösung anzeigen: nie).
• Überflüssige Zeilen und Extra-Bausteine erhöhen den Anspruch, weil Ausprobieren allein nicht mehr zum Ziel führt.

Teilen, Speichern und Datenschutz

Wege zum Teilen

Wo wird die Aufgabe gespeichert?

• Nirgends auf einem Server. Die Aufgabe steckt vollständig und komprimiert im Link, im Teil hinter dem #. Diesen Teil schicken Browser nicht an den Server. Es gibt keine Anmeldung und keine Datenbank.
• Links laufen deshalb nicht ab. Sie lassen sich aber auch nicht nachträglich ändern: Jede Änderung ergibt einen neuen Link. Wer den alten Link hat, sieht weiterhin die alte Fassung.
• Dein aktueller Entwurf wird nur in deinem Browser zwischengespeichert. Löschst du die Browserdaten oder wechselst das Gerät, ist er dort weg. Bewahre deshalb den Bearbeitungslink oder eine Datei auf.
• Die Lösung steckt ebenfalls im Link. Wer sich auskennt, kann sie auslesen. Die CodeHilfe ist zum Üben gedacht, nicht für Leistungsüberprüfungen.
• Zum Erzeugen und Öffnen der Links ist ein aktueller Browser nötig (Chrome, Edge oder Firefox ab 2023, Safari ab Version 16.4).

Beispiele

Jedes Beispiel hat einen Schwerpunkt. Mit „Im Editor öffnen“ kannst du es als Vorlage für eine eigene Aufgabe verwenden.

Beispiel 1 – Einfache Zeilensortierung

Für eine reine Sortieraufgabe genügt die Einstellung Zeilen mischen und sortieren lassen. Die erste und letzte Zeile bleiben hier fest.

def verdoppeln():                  §§fest
    zahl = 5
    doppelt = zahl * 2
    print(doppelt)
verdoppeln()                       §§fest

Beispiel 2 – Einfache Lücken

Ohne weitere Einstellungen bleiben die Zeilen geordnet und die Lösungen werden eingetippt. Es wird kein Lösungsbutton angezeigt.

class Hund {
    var name: §§String§§ = "§§Bello§§"
}

Beispiel 3 – Getrennte Sortierabschnitte

Mit Zeilen verschieben: nur innerhalb ihres Abschnitts werden bewegliche Zeilen nur innerhalb des jeweiligen, durch feste Zeilen begrenzten Abschnitts gemischt und verschoben.

def ausgabe():                       §§fest
    name = "Ada"
    print(f"Hallo {name}")
    print("----------------")         §§fest
    zahl = 5
    doppelt = zahl * 2
    print(doppelt)
ausgabe()                            §§fest

Beispiel 4 – Tippen und Bausteine mischen

Mit ::baustein kann bei der standardmäßigen Texteingabe für eine einzelne Lücke ein Baustein angeboten werden. In jedes Feld kann trotzdem getippt werden. Ein Baustein in einer reinen Tipplücke gilt dagegen als falsch.

class Person {
    val name = §§"Ada"::baustein§§
    val alter = §§17§§
}

Beispiel 5 – Alternative Antworten und sofortige Lösung

Alternative Antworten werden mit einem einzelnen § getrennt. Lösung anzeigen: jederzeit zeigt den Lösungsbutton von Anfang an.

def verdoppeln(zahl):
    return §§zahl * 2§2 * zahl§§

Beispiel 6 – Direkt aufeinanderfolgende austauschbare Zeilen

Direkt aufeinanderfolgende Zeilen mit §§gruppe bilden eine unbenannte Gruppe. Ihre Reihenfolge ist für die Lösung unerheblich.

class Hund {                       §§fest
    var name = ""                  §§gruppe
    var alter = 0                  §§gruppe
    fun bellen() {
        println("Wuff")
    }
}                                  §§fest

Beispiel 7 – Verteilte austauschbare Zeilen

Eine benannte Gruppe gilt in der gesamten CodeHilfe. Gleich benannte Zeilen dürfen deshalb auch über eine feste Zeile hinweg ihre vorgesehenen Plätze tauschen.

def farben_ausgeben():              §§fest
    print("Beginn")
    print("Rot")                     §§gruppe=farben
    print("----------------")         §§fest
    print("Blau")                    §§gruppe=farben
    print("Ende")
farben_ausgeben()                    §§fest

Beispiel 8 – Überflüssige Zeile

Eine mit §§extra markierte Zeile gehört nicht zur Lösung. Sie kann in die Ablage gezogen oder mit dem Knopf ✕ dorthin verschoben werden.

def zahl_ausgeben():          §§fest
    zahl = 5
    print(zahl)
    print zahl                §§extra
zahl_ausgeben()               §§fest

Beispiel 9 – Hinweise bei fehlerhaften Markierungen

Erkennt die CodeHilfe eine widersprüchliche oder unvollständige Konfiguration, zeigt sie anstelle der Aufgabe konkrete Hinweise. Im Editor erscheinen sie in der Vorschau; Schülerlink und QR-Code gibt es erst, wenn alles stimmt. Das folgende Beispiel ist absichtlich fehlerhaft: Die Lücke soll ein Baustein sein, hat aber zwei Antworten, und eine Gruppe besteht aus nur einer Zeile.

fun main() {                              §§fest
    val tier = §§"Hund"§"Katze"§§
    println(tier)                         §§gruppe
}                                         §§fest

In eigene Webseiten einbinden

Für eine einzelne Aufgabe genügt der iframe-Code aus dem Editor. Wer eigene Webseiten mit mehreren CodeHilfen gestaltet, kann das Skript auch direkt einbinden. Dazu den Ordner lib/codehilfe aus dem Quelltext dieses Werkzeugs in das eigene Projekt kopieren.

<link rel="stylesheet" href="lib/codehilfe/css/codehilfe.css">
…
<article>
    <pre class="quelltext codehilfe" data-zeilen-sortieren><code class="language-python">
    …
    </code></pre>
</article>
…
<script src="lib/codehilfe/js/codehilfe.js"></script>

• Eine CodeHilfe ist ein normaler Quelltextblock aus pre und code. Das pre-Element erhält die Klasse codehilfe, eine Klasse wie language-python am code-Element steuert die Syntaxhervorhebung. Fehlt sie, wird der Code ohne Hervorhebung angezeigt.
• Die Stile erwarten, dass die CodeHilfe innerhalb eines article-Elements steht.
• Für Syntaxhervorhebung und Copy-Knopf zusätzlich Prism mit den Plugins Toolbar, Copy to Clipboard und Normalize Whitespace vor codehilfe.js laden.
• Zeichen wie < und & werden im Quelltext wie in jedem HTML-Code als < bzw. & geschrieben.

Attribute am pre-Element

Beispiel 10 – CodeHilfe als aufklappbare Hilfe

Auf einer eigenen Seite kann die CodeHilfe als freiwillige Hilfe zu einer offenen Programmieraufgabe in einem aufklappbaren Bereich stehen. Wer die Aufgabe selbstständig löst, sieht sie nicht.

n = int(input("n: "))                 §§fest
summe = 0                             §§gruppe
zahl = 1                              §§gruppe
while zahl <= n:
    summe = summe + zahl
    zahl = zahl + 1
    print(summe)                      §§extra
print("Summe:", summe)                §§fest

<details class="frage">
<summary>Hilfe zum Programm</summary>
<p>
    Bringe die Zeilen in die richtige Reihenfolge. Eine Zeile wird nicht
    benötigt.
</p>
<pre class="quelltext codehilfe" data-zeilen-sortieren data-loesung="nach-fehler"><code class="language-python">
n = int(input("n: "))                 §§fest
summe = 0                             §§gruppe
zahl = 1                              §§gruppe
while zahl &lt;= n:
    summe = summe + zahl
    zahl = zahl + 1
    print(summe)                      §§extra
print("Summe:", summe)                §§fest
</code></pre>
</details>