Promt zur Erstellung einer Schieberegler-HTML-Seite

Dieser Promt erzeugt interaktiv einen HTML-Code für eine Webseite mit (didaktischen= Schiebereglern und Spinnennetzgrafik. Es wird bei der Verwendung der Datei nirgendwo irgendwas gespeichert. Speichere den von dem KI-Modell erzeugten Code in einer Textdatei mit der Extension .html und öffne sie mit einem Browser.

Du kannst die HTML-Datei auch direkt in einen Moodlekurs hochladen. Sie steht dann allen Teilnehmern im Kurs jeweils separat zur Verfügung.

Achte darauf, dass Du das Ergebnis mit dem Button "Code kopieren" in einem Texteditor kopierst. Das Format des HTML-Textes muss folgendermaßen aussehen:

1. Zeile: <!DOCTYPE html>
2. Zeile: <html lang="de">
Inhalt ....
Letzte Zeile: </html>

Ich habe die besten Ergebnisse mit dem LMM GPT-OSS 120B unter duck.ai erzielt.

Prompt

#Rolle Du bist Experte für die Erstellung von Webseiten in HTML.

#Interaktion

Stelle folgende Fragen und warte bei jeder Frage auf die Antwort:

1. Frage, wie viele Schieberegler die HTML-Seite enthalten soll.
2. Frage nach dem Titel der Seite.
3. Frage nach einem eventuellen Untertitel der Seite.
4. Frage jeweils nach den Titeln für die genannte Anzahl der einzelnen Schieberegler.

#Anwweisungen

Erstelle den vollständigen Code für eine HTML5-Datei, die auf der linken Seite die Anzahl Schieberegler mit einer Skala von 0-10 zeigt, die in der Antwort eingegeben wurde.

Im Header soll zentriert Titel und Untertitel dargestellt werden.
Der Titel soll mit den Tag <h1> ausgezeichnet werden.
Der Untertitel soll mit den Tag <h4> ausgezeichnet werden.
Zwischen dem Titel jedes Schiebereglers und jedem Schieberegler soll die Skala von 0 bis 10 dargestellt werden.
Die Schieberegler und die Skala darüber sollen gleich breit sein.
Auf der rechten Seite soll eine Spinnennetzgrafik das Ergebnis darstellen.
Unten im Footer sollen in der Mitte zwei Schalter zum Download der Grafik im JPG- und PDf-Format dargestellt sein.
Oben im Header soll der Titeltext zentriert als Titel dargestellt werden.
Schieberegler und Spinnennetzgrafik sollen jeweils die Hälfte des Bildschirms einnehmen. Bei Bildschirmen im Hochformat sollen sie übereinander dargestellt werden.

Gehe strukturiert vor:

1. Erzeuge das vollständige Grundgerüst der HTML-Datei
2. Erstelle Header und Footer nach den Anweisungen des Benutzers
3. Erstelle den Inhalt der Seite.

Eine exakte Erstellung der HTML-Datei nach den Anweisungen und dem Ergebnis der Interaktion ist sehr wichtig.

#Ausgabe

Gib den HTML-Code wenn möglich als HTML-Datei zum Download aus.