Eine Aufgabe in HTML, CSS und JavaScript stellen
Eine Webaufgabe besteht aus drei Dateien statt einer: der Seite, den Stilen und dem Skript. Die Lernenden bearbeiten jede davon, und die Vorschau neben dem Editor wird neu gezeichnet.
Drei Bereiche und eine Vorschau
Die Tabs sind die Dateien. Die Vorschau ist die Seite, wie sie gerade ist, dargestellt in einem isolierten Rahmen. Ein fehlerhaftes Skript zerstört also die Vorschau und sonst nichts.
Es gibt keinen Server zu starten und keine Datei auf dem Desktop zu speichern. Damit entfällt die übliche erste Stunde einer Web-Einheit, in der dreißig Personen erklärt werden muss, wohin ihre Datei verschwunden ist.
Die Seite wird im eigenen Browser der Lernenden erstellt und ausgeführt. Eine Webaufgabe hat deshalb keine Schaltfläche „Ausführen“, keine Warteschlange und keine Laufzeit, die einzustellen wäre: Die Vorschau ist die Ausführung, und sie folgt dem Tippen. Ein vollständiges HTML-Dokument, das in den HTML-Bereich eingefügt wird, wird so verwendet, wie es ist, mit den Stilen und dem Skript darin, statt in eine zweite Seite verpackt zu werden.
Was Sie vorgeben und was die Lernenden abgeben
Sie schreiben die drei Ausgangsdateien, und was Sie darin stehen lassen, ist der Startpunkt jeder oder jedes Lernenden: eine Seite ohne Stile, ein Stylesheet mit einem Kommentar an der Stelle, wo die Regel hingehört, oder alle drei leer.
Einer Webaufgabe lässt sich keine vierte Datei hinzufügen, denn die drei Bereiche machen sie aus. Das ist Absicht: Bei einer Aufgabe, deren Form sich verändern kann, müssen die Bewertenden raten.
Es gibt eine TypeScript-Variante, Web (TS), mit denselben drei Bereichen, in der das Skript TypeScript ist. Sie wird beim Tippen im Tab kompiliert, und ein Typfehler blockiert die Vorschau nie, weil es kein „Ausführen“ gibt, das ihn ablehnen könnte.
In einer Lektion
Ein Web- oder Web-(TS)-Codeblock in einer Lektion hat dieselben drei Tabs und dieselbe Vorschau, sodass eine Klasse eine Seite ändern kann, ohne die Lektion zu verlassen. Was Sie in den Block schreiben, ist der Ausgangspunkt für alle Lernenden, und deren Änderungen werden in der jeweils eigenen Kopie gespeichert: Ihre wird dadurch nie verändert.
Setzen Sie am Block das Häkchen bei „Lernenden erlauben, diese Seite zu ändern und das Ergebnis zu sehen“, das beim Erstellen des Blocks gesetzt ist. Lassen Sie es aus, wird die Seite wie bisher als Code zum Lesen gezeigt. Es gibt keine Schaltfläche „Ausführen“ und kein Eingabefeld, weil eine Seite beides nicht hat: Die Vorschau ist ihre Ausführung.
Häufige Fragen
- Können die Lernenden ein Framework verwenden?
- Es ist reines HTML, CSS und JavaScript, wie es die Lehrpläne verlangen. Für eine Klasse, die schon weiter ist, gibt es eine TypeScript-Variante.
- Führt die Vorschau ihr JavaScript aus?
- Ja, in einem isolierten Rahmen, der weder die Cookies noch die gespeicherten Daten der Website lesen kann. Eine Endlosschleife kostet sie also die Vorschau und sonst nichts.