A · Recherche: Was ist was? (ohne KI)
Nutze eine Internet-Suchmaschine. Schreibe kurze Antworten in eigenen Worten.
- Wofür wird HTML auf einer Webseite gebraucht? Nenne ein Beispiel.
- Was macht JavaScript? Was könnte es bei einem Sudoku-Löser übernehmen?
- Wofür wird CSS benutzt? Und könnte eine Webseite mit nur HTML ein Sudoku selbst lösen?
B · Plane deinen Sudoku-Löser
Entscheidet gemeinsam und tragt die Planung am iPad ein. Die Person am PC setzt eure Ideen danach in eigene Worte um.
C · Lass die KI dein Programm erstellen
Jetzt arbeitet ihr zusammen: Die Person am iPad liest eure Planung aus Teil B vor. Die Person am PC gibt den KI-Auftrag ein. Formuliert gemeinsam eure eigenen Anweisungen. Prüft danach die KI-Antwort, speichert den Code als .html und öffnet die Datei im Browser.
Erstelle eine HTML-Datei für einen Sudoku-Löser. Er soll …
Schaut auf eure Planung am iPad. Beantwortet die Fragen am PC mit eigenen Sätzen:
Wenn euch die Wörter fehlen: „Ich möchte, dass …“ · „Wenn ich auf … klicke, soll …“ · „Die App soll …“
Ein Beispiel für einen eigenen Wunsch: „Die Zahlen sollen groß und gut lesbar sein.“
Schreibt mindestens 3 eigene Sätze hinter den Startsatz. Nicht alle Fragen abschreiben!
Danach: Probiert das Programm aus. Funktioniert etwas nicht, müsst ihr selbst überlegen, was ihr der KI genauer sagen müsst.
Nur wenn Zeit bleibt: „2 Tipps“, neue Sudoku-Aufgaben, Fotoerkennung. Ein Foto einzulesen ist deutlich aufwendiger und für die 45 Minuten keine Pflicht.
D · Testen und Code erklären
Erst testen: Gib dieses Sudoku in deine neue App ein. Leere Kästchen bleiben leer. Teste „1 Tipp“ und danach „Lösen“.
| 5 | 3 | · | · | 7 | · | · | · | · |
| 6 | · | · | 1 | 9 | 5 | · | · | · |
| · | 9 | 8 | · | · | · | · | 6 | · |
| 8 | · | · | · | 6 | · | · | · | 3 |
| 4 | · | · | 8 | · | 3 | · | · | 1 |
| 7 | · | · | · | 2 | · | · | · | 6 |
| · | 6 | · | · | · | · | 2 | 8 | · |
| · | · | · | 4 | 1 | 9 | · | · | 5 |
| · | · | · | · | 8 | · | · | 7 | 9 |
Jetzt zeige am Code, was du verstanden hast. Öffne deine eigene .html-Datei in einem Texteditor und finde:
- Ein HTML-Element, z. B.
<button>– Was sieht man dadurch auf der Seite? - Die JavaScript-Funktion für „Lösen“ – Was passiert beim Klick?
- Eine CSS-Regel – Was verändert sie am Aussehen?
Findet die Stellen selbst in eurer HTML-Datei. Markiert sie mit passenden Kommentaren und erklärt sie euch gegenseitig. Die KI darf bei der richtigen Schreibweise der Kommentare helfen, aber die Erklärung muss von euch kommen.
<!-- HTML: Dieser Button erscheint auf der Webseite. -->
/* CSS: Diese Regel legt z. B. eine Farbe fest. */
// JavaScript: Diese Funktion berechnet die Sudoku-Lösung.Achte auf die richtige Kommentarart: <!-- ... --> im HTML, /* ... */ im CSS und // ... im JavaScript. Setzt die Kommentare an die passende Stelle im eigenen Code.
Kurz notieren: Was würdest du an deiner HTML-Datei zeigen?
E · Zeigen und abgeben
Sudoku_Nachname_Vorname.html vom PC als Dateianhang senden (z. B. per IServ). 2. Ausgefülltes Arbeitsblatt am iPad als PDF speichern und per AirDrop senden. Ein Screenshot oder KI-Chat ersetzt keine Datei. Beide müssen die markierten Code-Stellen erklären können.