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
Entscheide selbst. Diese Angaben kommen gleich in deinen KI-Auftrag.
C · Lass die KI dein Programm erstellen
Schicke den folgenden Auftrag an deine KI. Ergänze vorher deine Wünsche aus Teil B. Lasse dir eine vollständige HTML-Datei geben und speichere sie mit der Endung .html. Öffne die Datei im Browser und verbessere Fehler mithilfe der KI.
Erstelle eine einzige vollständige HTML-Datei für einen Sudoku-Löser. Der Name ist [MEIN APP-NAME], die Hauptfarbe ist [MEINE FARBE]. Das Programm muss ohne Installation direkt im Browser funktionieren, auch offline. Pflicht: 9×9-Sudoku-Raster; ich kann Ziffern 1–9 selbst eingeben und Felder leer lassen; Taste „Lösen“ löst das eingegebene Sudoku; Taste „1 Tipp“ füllt genau ein bisher leeres Feld richtig aus; Taste „Leeren“ setzt das Raster zurück. Bei widersprüchlichen Eingaben oder unlösbaren Sudokus erscheint eine verständliche Meldung. Große, gut bedienbare Felder und Tasten. Verwende HTML für die Oberfläche, CSS für das Aussehen und JavaScript für die Funktionen. Alles muss in EINER HTML-Datei stehen, ohne externe Bibliotheken. Kommentiere im Code an passenden Stellen ein konkretes HTML-Element, eine CSS-Regel und die JavaScript-Funktion für „Lösen“, damit ich diese Teile meiner Lehrkraft erklären kann. Gib mir den vollständigen Code.
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?
Markiere die drei Stellen mit passenden Kommentaren im Quelltext (die KI darf beim Einfügen helfen). So können auch später alle drei Teile geprüft werden.
<!-- 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. Die KI kann die Kommentare an die richtige Stelle setzen.
Platz für kurze Stichwörter (freiwillig): Was würdest du an deiner HTML-Datei zeigen?
E · Zeigen und abgeben
Sudoku_Nachname_Vorname.html als Dateianhang über den vereinbarten Weg (z. B. IServ). Kein Screenshot, kein Chatverlauf, kein Link. In der Datei müssen die Kommentare zu HTML, CSS und JavaScript enthalten sein.