CodeHilfe – interaktive Code-Aufgaben
Worum geht es?
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.
Diese Seite zeigt zunächst ein umfangreiches Beispiel. Danach folgen eine vollständige Referenz und kleine Beispiele mit jeweils einem Schwerpunkt. Das Werkzeug ist sprachunabhängig. Die Beispiele verwenden überwiegend Python und Kotlin, vereinzelt auch Elm.
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.
Aufgabe - Temperaturbericht
Baue einen Temperaturbericht für Mainz zusammen. Heute sind es
18 °C, morgen soll die Temperatur um 2 °C
steigen. Das fertige Programm soll folgende Ausgabe erzeugen:
Heute in Mainz: 18 °C Vorhersage für morgen: 20 °C
Fülle die Lücken und bringe die Zeilen in die richtige Reihenfolge.
Die Zuweisungen für Ort und heutige Temperatur dürfen ihre Reihenfolge
tauschen.
Verschiebe die nicht benötigte Ausgabezeile mit dem Knopf
✕ in die Ablage. Einer der angebotenen Bausteine wird nicht
benötigt.
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
<pre class="quelltext codehilfe" data-zeilen-sortieren data-luecken-eingabe="baustein" data-loesung="nach-fehler"><code class="language-python">
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
</code></pre>
Referenz
Eine CodeHilfe wird als normaler Quelltextblock aus
pre und code notiert. Das
pre-Element erhält zusätzlich die Klasse
codehilfe; eine Klasse wie language-python,
language-kotlin oder language-elm am
code-Element steuert die Syntaxhervorhebung.
Attribute am pre-Element
| Attribut | Werte | Bedeutung |
|---|---|---|
data-zeilen-sortieren |
ohne Wert | Die beweglichen Zeilen mischen und sortierbar machen. Ohne das Attribut bleibt ihre Reihenfolge fest. Lücken können unabhängig davon immer verwendet werden. |
data-zeilen-verschieben |
ueberall (Standard), abschnitt
|
Die beweglichen Zeilen über feste Zeilen hinweg mischen und
verschieben oder beides auf die durch feste Zeilen begrenzten
Abschnitte beschränken. Das Attribut ist nur zusammen mit
data-zeilen-sortieren sinnvoll. |
data-luecken-eingabe |
tippen (Standard), baustein
|
Für alle Lücken festlegen, ob nur eine getippte Lösung erwartet
oder zusätzlich ein Codebaustein angeboten wird. Richtig
eingetippter Text wird in beiden Fällen anerkannt. Die Einstellung
kann mit ::tippen oder ::baustein für
einzelne Lücken überschrieben werden. |
data-loesung |
nie (Standard), nach-fehler,
immer
|
Keine Lösungsanzeige anbieten, sie erst nach einer erfolglosen Überprüfung freischalten oder von Anfang an anbieten. |
Markierungen im Lösungscode
| Markierung | Bedeutung |
|---|---|
§§antwort§§ |
Eine Lücke. Standardmäßig wird die Antwort eingetippt. |
§§antwort§alternative§§ |
Eine zu tippende Lücke mit mehreren akzeptierten Antworten.
Die Antworten werden durch ein einzelnes §
getrennt. |
§§antwort::baustein§§ |
Für diese Lücke einen Codebaustein anbieten. Die richtige Antwort darf weiterhin eingetippt werden. |
§§antwort::tippen§§ |
Für diese Lücke ausschließlich eine getippte Antwort erwarten. |
§§antwort::extra§§ |
Einen zusätzlichen Codebaustein anbieten, der für keine Lücke benötigt wird. Die Markierung muss allein in einer Zeile stehen und erscheint nicht im zusammengesetzten Code. |
§§fest am Zeilenende |
Die Zeile bleibt an ihrer Position. Leerzeichen oder Tabs vor der Markierung werden zusammen mit ihr entfernt. |
§§gruppe am Zeilenende |
Direkt aufeinanderfolgende Zeilen mit dieser Markierung dürfen innerhalb ihrer Gruppe in beliebiger Reihenfolge stehen. |
§§gruppe=name am Zeilenende |
Alle gleich benannten Zeilen dürfen die für diese Gruppe vorgesehenen Positionen untereinander tauschen. Sie müssen nicht direkt aufeinanderfolgen und dürfen durch feste Zeilen getrennt sein. |
§§extra am Zeilenende |
Die ganze Zeile gehört nicht zur Lösung und muss in die Ablage verschoben werden. |
Ü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 kopiert den aktuellen Bearbeitungsstand ohne CodeHilfe-Markierungen. Eine überflüssige Zeile wird mitkopiert, solange sie noch nicht in der Ablage liegt.
Beispiele
Beispiel 1 - Einfache Zeilensortierung
Für eine reine Sortieraufgabe genügt
data-zeilen-sortieren. Die erste und letzte Zeile bleiben
hier fest.
Bringe die drei beweglichen Zeilen so in die richtige Reihenfolge, dass das Programm zunächst eine Zahl speichert, sie verdoppelt und anschließend das Ergebnis ausgibt.
def verdoppeln(): §§fest
zahl = 5
doppelt = zahl * 2
print(doppelt)
verdoppeln() §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren><code class="language-python">
def verdoppeln(): §§fest
zahl = 5
doppelt = zahl * 2
print(doppelt)
verdoppeln() §§fest
</code></pre>
Beispiel 2 - Einfache Lücken
Ohne weitere Attribute bleiben die Zeilen geordnet und die Lösungen
werden eingetippt. Da data-loesung fehlt, wird kein
Lösungsbutton angezeigt.
Ergänze den Datentyp des Attributs und gib dem Hund den Namen
Bello.
class Hund {
var name: §§String§§ = "§§Bello§§"
}
<pre class="quelltext codehilfe"><code class="language-kotlin">
class Hund {
var name: §§String§§ = "§§Bello§§"
}
</code></pre>
Beispiel 3 - Getrennte Sortierabschnitte
Mit data-zeilen-verschieben="abschnitt" werden bewegliche
Zeilen nur innerhalb des jeweiligen, durch feste Zeilen begrenzten
Abschnitts gemischt und verschoben.
Sortiere zuerst die Begrüßung und danach die Berechnung. Die Trennlinie zwischen den beiden Programmteilen bleibt dabei an ihrer Position.
def ausgabe(): §§fest
name = "Ada"
print(f"Hallo {name}")
print("----------------") §§fest
zahl = 5
doppelt = zahl * 2
print(doppelt)
ausgabe() §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren data-zeilen-verschieben="abschnitt"><code class="language-python">
def ausgabe(): §§fest
name = "Ada"
print(f"Hallo {name}")
print("----------------") §§fest
zahl = 5
doppelt = zahl * 2
print(doppelt)
ausgabe() §§fest
</code></pre>
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.
Ergänze die Person: Setze ihren Namen als Baustein ein und tippe ihr Alter in die zweite Lücke.
class Person {
val name = §§"Ada"::baustein§§
val alter = §§17§§
}
<pre class="quelltext codehilfe"><code class="language-kotlin">
class Person {
val name = §§"Ada"::baustein§§
val alter = §§17§§
}
</code></pre>
Beispiel 5 - Alternative Antworten und sofortige Lösung
Alternative Antworten werden mit einem einzelnen §
getrennt. data-loesung="immer" zeigt den Lösungsbutton von
Anfang an.
Ergänze die Funktion so, dass sie das Doppelte der übergebenen Zahl zurückgibt.
verdoppeln zahl =
§§zahl * 2§2 * zahl§§
<pre class="quelltext codehilfe" data-loesung="immer"><code class="language-elm">
verdoppeln zahl =
§§zahl * 2§2 * zahl§§
</code></pre>
Beispiel 6 - Direkt aufeinanderfolgende austauschbare Zeilen
Direkt aufeinanderfolgende Zeilen mit §§gruppe bilden eine
unbenannte Gruppe. Ihre Reihenfolge ist für die Lösung unerheblich.
Sortiere die Klasse Hund. Die beiden Attribute dürfen in
beliebiger Reihenfolge direkt hinter dem Klassenkopf stehen.
class Hund { §§fest
var name = "" §§gruppe
var alter = 0 §§gruppe
fun bellen() {
println("Wuff")
}
} §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren><code class="language-kotlin">
class Hund { §§fest
var name = "" §§gruppe
var alter = 0 §§gruppe
fun bellen() {
println("Wuff")
}
} §§fest
</code></pre>
Beispiel 7 - Verteilte austauschbare Zeilen
Eine benannte Gruppe gilt im gesamten CodeHilfe-Element. Gleich benannte Zeilen dürfen deshalb auch über eine feste Zeile hinweg ihre vorgesehenen Plätze tauschen.
Sortiere die Funktion. Sie soll zuerst Beginn, danach die
beiden Farben in beliebiger Reihenfolge und zuletzt Ende
ausgeben.
def farben_ausgeben(): §§fest
print("Beginn")
print("Rot") §§gruppe=farben
print("----------------") §§fest
print("Blau") §§gruppe=farben
print("Ende")
farben_ausgeben() §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren><code class="language-python">
def farben_ausgeben(): §§fest
print("Beginn")
print("Rot") §§gruppe=farben
print("----------------") §§fest
print("Blau") §§gruppe=farben
print("Ende")
farben_ausgeben() §§fest
</code></pre>
Beispiel 8 - Überflüssige Zeile
Eine mit §§extra markierte Zeile gehört nicht zur Lösung.
Sie wird mit dem Knopf ✕ in die Ablage verschoben.
Sortiere die Funktion so, dass sie die gespeicherte Zahl ausgibt. Verschiebe die syntaktisch fehlerhafte Zeile in die Ablage.
def zahl_ausgeben(): §§fest
zahl = 5
print(zahl)
print zahl §§extra
zahl_ausgeben() §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren><code class="language-python">
def zahl_ausgeben(): §§fest
zahl = 5
print(zahl)
print zahl §§extra
zahl_ausgeben() §§fest
</code></pre>
Beispiel 9 - Hilfe bei fehlerhafter Konfiguration
Erkennt die CodeHilfe eine widersprüchliche oder unvollständige Konfiguration, zeigt sie anstelle der Aufgabe konkrete Hinweise für die Autorin oder den Autor. Das folgende Beispiel ist absichtlich fehlerhaft.
Ergänze eine Tierart und ordne die Ausgabe richtig in das Hauptprogramm ein.
fun main() { §§fest
val tier = §§"Hund"§"Katze"§§
println(tier) §§gruppe
} §§fest
<pre class="quelltext codehilfe" data-zeilen-sortieren="ja" data-luecken-eingabe="baustein"><code class="language-kotlin">
fun main() { §§fest
val tier = §§"Hund"§"Katze"§§
println(tier) §§gruppe
} §§fest
</code></pre>