Promt zur Erstellung einer Schieberegler-HTML-Seite: Unterschied zwischen den Versionen

Aktuelle Version vom 16. Oktober 2025, 12:38 Uhr

Erläuterung

Beispielseite

Diese beiden Promts erzeugen 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>

Prompt 1

Dies ist die erste einfache Version des Prompts. Sie funktioniert mit dem LLM GPT-OSS 120B unter duck.ai prima und reproduzierbar.

(Kopiere den Text ab der nächsten Zeile bis zum Ende des Kapitels und verwende ihn als 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.

Prompt 2

Dies ist die zweite, mit Hilfe der LLMs Gemini und Claude, überarbeitete Version des Prompts. Dabei gibt es zusätzlich zur Version 1 die Möglichkeit, die Konfiguration zu speichern. Diese Version soll mit verschiedenen großen LLMs reproduzierbar funktionieren. Mit duck.ai konnte ich das nicht reproduzieren. Mit der Bezahlversion von Gemini und Claude sollte es funktionieren.

(Kopiere den Text ab der nächsten Zeile bis zum Ende des Artikels und verwende ihn als Prompt)

# **Persona**

Du bist ein erfahrener Full-Stack-Webentwickler, der sich auf die Erstellung datengesteuerter, interaktiver Analyse-Tools mit reinem HTML, CSS und modernem JavaScript (ES6) spezialisiert hat.

# **Ziel**

Erstelle eine komplexe, interaktive Webseite ("Competence-Analyzer"), die es Benutzern ermöglicht, Datensätze über Schieberegler zu definieren, diese als Spinnennetzdiagramm zu visualisieren und zu vergleichen. Die Webseite muss Funktionen zum Speichern, Laden und Überlagern mehrerer Konfigurationen bieten und den grafischen Export des Diagramms ermöglichen.

# **Interaktiver Abfrageprozess**

Führe den Benutzer durch die Erstkonfiguration. Stelle die folgenden Fragen nacheinander und warte jeweils die Antwort ab, bevor du die nächste stellst:

1. "Wie viele Dimensionen (Achsen) soll dein Spinnennetz haben?"
2. "Wie lautet der Haupttitel für die Analyse?"
3. "Gibt es einen beschreibenden Untertitel?"
4. "Was ist der Maximalwert für die Bewertungsskala? (z.B. 10, 20 oder 100)"
5. "Bitte nenne mir jetzt die Bezeichnungen für jede der \[Anzahl\] Dimensionen."

# **Detaillierte Anforderungen an die Webseite**

## **1\. Grundstruktur & Layout**

Erstelle ein vollständiges HTML5-Dokument. **Wichtig:** Stelle durch `<meta charset="UTF-8">` die korrekte Darstellung von Umlauten und Sonderzeichen sicher.
Die Seite wird in zwei Hauptbereiche aufgeteilt: links die Steuerung, rechts die Visualisierung.
**Responsive Darstellung:**
**Desktop:** Beide Bereiche sind nebeneinander und nehmen je 50 % der Bildschirmbreite ein.
**Mobil (Hochformat):** Die Bereiche werden untereinander dargestellt (oben die Steuerung, unten die Visualisierung).

### **2\. Header & Titel-Anzeige**

Ein globaler Header am oberen Rand der Seite zeigt den vom Benutzer genannten Titel (`<h1>`) und Untertitel (`<h4>`) zentriert an.
**Zusätzlich** sollen derselbe Titel und Untertitel direkt über dem Spinnennetzdiagramm in der rechten Spalte angezeigt werden. Dies stellt sicher, dass der Kontext auch bei einem Grafik-Export erhalten bleibt.

## **3\. Linke Spalte: Steuerungs- und Eingabebereich**

* Erstelle für jede Dimension einen Abschnitt mit Bezeichnung und einem Schieberegler (`<input type="range">`).
* Der Wertebereich der Schieberegler muss dynamisch von `0` bis zum vom Benutzer definierten **maximalen Skalenwert** gehen.
* Eine visuelle Skala (z.B. Text `0 ... Maximum`) soll über jedem Schieberegler angezeigt werden.
* Jede Änderung an einem Schieberegler aktualisiert **in Echtzeit** den entsprechenden Datensatz im Spinnennetzdiagramm.

### **4\. Rechte Spalte: Spinnennetzdiagramm & Vergleichsfunktion**

* Implementiere ein dynamisches Spinnennetzdiagramm (Radar Chart), das **mehrere Datensätze gleichzeitig** darstellen kann.
* Der initial erstellte Datensatz (über die Schieberegler) ist immer sichtbar.
* **Vergleichsfunktion:**
* Jeder Datensatz (der aktuelle und jeder importierte) muss eine **eigene, klar unterscheidbare Farbe** haben.
* Die dargestellten Flächen der Datensätze müssen **semi-transparent** sein (z.B. `opacity: 0.4`), damit übereinanderliegende Datensätze und deren Schnittmengen sichtbar bleiben.
* Eine Legende unter oder neben dem Diagramm sollte die importierten Datensätze farblich kennzeichnen (z.B. anhand des Titels aus der importierten Datei).

### **5\. Footer & Datenmanagement (Import/Export & Download)**

Platziere die folgenden Funktions-Buttons zentral im Footer:

**A) Grafik-Export:**

* **Button 1: "Als JPEG herunterladen"**
* **Button 2: "Als PDF herunterladen"**
* **Kritische Anforderung:** Diese Buttons exportieren <nowiki>**ausschließlich den visuellen Bereich des Spinnennetzdiagramms**, inklusive seines eigenen Titels/Untertitels und der Legende. Nicht die gesamte Webseite.

**B) Datenmanagement (Konfiguration):**

* **Button 3: "Konfiguration speichern"**
* **Aktion:** Generiert und startet den Download einer `.json`\-Datei.
* **Inhalt der JSON-Datei:** Ein Objekt, das die gesamte aktuelle Konfiguration speichert (Titel, Untertitel, Skalenmaximum, Bezeichnungen der Dimensionen und die aktuellen Werte der Schieberegler).
* **Button 4: "Konfiguration laden"**
* **Aktion:** Öffnet einen Dateidialog zur Auswahl einer `.json`\-Datei.
* **Verhalten:** Die geladenen Daten **ersetzen die aktuelle Konfiguration vollständig**. Die Schieberegler, Titel, Skalen etc. werden auf die Werte aus der Datei gesetzt und das Diagramm entsprechend neu gezeichnet (alle vorherigen Vergleichs-Layer werden entfernt).
* **Button 5: "Zum Vergleich laden"**
* **Aktion:** Öffnet ebenfalls einen Dateidialog zur Auswahl einer `.json`\-Datei.
* ** **Verhalten:** Die Daten aus der Datei werden als **neuer, zusätzlicher und farblich abgesetzter Layer** zum bestehenden Spinnennetz hinzugefügt. Die aktuellen Schieberegler-Einstellungen bleiben unberührt.

## **Technische Vorgaben**

* **HTML5 & CSS3:** Nutze semantisches HTML und modernes CSS (Flexbox/Grid) für das Layout.
* **JavaScript (ES6):** Schreibe sauberen, modularen JavaScript-Code für die gesamte Logik.
* **Datenformat:** Verwende **JSON** für den Import und Export der Konfigurationsdaten.
* **Bibliotheken (via CDN einbinden):**
* **Chart.js:** Zur Erstellung und Verwaltung des Spinnennetzdiagramms.
* **html2canvas** & **jsPDF:** Zur Implementierung der Export-Funktionalität (JPEG/PDF).

## **Ausgabeformat**

Stelle den gesamten, voll funktionsfähigen Code in einem einzigen HTML-Codeblock bereit. Der Code muss als "Plug-and-Play" konzipiert sein, d.h. alle HTML-, CSS- (`<style>`) und JavaScript- (`<script>`) Teile sind in einer Datei enthalten, die direkt im Browser lauffähig ist.

@@ Zeile 1: / Zeile 1: @@
-Dieser Promt erzeugt interaktiv einen HTML-Code für eine Webseite mit didaktischen Schiebereglern und Spinnennetzgrafik. Es wird bei der Verwendung nirgendwo irgendwas gespeichert. Speichere den Code in einer Textdatei mit der Extension .html und öffne sie mit einem Browser.
+=== Erläuterung ===
-Du kannst die HTML-Datei auch direkt in einen Moodlekurs hochladen. Er steht dann allen Teilnehmern im Kurs jeweils separat zur Verfügung.
+[[File:beispiel_schieberegler_spinne.png|thumb|right|Beispielseite]]Diese beiden Promts erzeugen 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: <nowiki><!DOCTYPE html></nowiki>
+*2. Zeile: <nowiki><html lang="de"></nowiki>
+* Inhalt ....
+*Letzte Zeile: <nowiki></html></nowiki>
+=== Prompt 1===
+Dies ist die erste einfache Version des Prompts. Sie funktioniert mit dem LLM GPT-OSS 120B unter [https://duck.ai duck.ai] prima und reproduzierbar.
+(Kopiere den Text ab der nächsten Zeile bis zum Ende des Kapitels und verwende ihn als Prompt)
-'''Promt'''
 <nowiki>#</nowiki>Rolle
 Du bist Experte für die Erstellung von Webseiten in HTML.
@@ Zeile 14: / Zeile 29: @@
 Stelle folgende Fragen und warte bei jeder Frage auf die Antwort:
-. Frage, wie viele Schieberegler die HTML-Seite enthalten soll.
+*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.
+<nowiki>#</nowiki>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 <nowiki><h1></nowiki> ausgezeichnet werden.
+*Der Untertitel soll mit den Tag <nowiki><h4></nowiki> 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.
+<nowiki>#</nowiki>Ausgabe
+Gib den HTML-Code wenn möglich als HTML-Datei zum Download aus.
+=== Prompt 2 ===
+Dies ist die zweite, mit Hilfe der LLMs Gemini und Claude, überarbeitete Version des Prompts. Dabei gibt es zusätzlich zur Version 1 die Möglichkeit, die Konfiguration zu speichern. Diese Version soll mit verschiedenen großen LLMs reproduzierbar funktionieren. Mit [https://duck.ai duck.ai] konnte ich das nicht reproduzieren. Mit der Bezahlversion von Gemini und Claude sollte es funktionieren.
+(Kopiere den Text ab der nächsten Zeile bis zum Ende des Artikels und verwende ihn als Prompt)
+<nowiki># **Persona**</nowiki>
+Du bist ein erfahrener Full-Stack-Webentwickler, der sich auf die Erstellung datengesteuerter, interaktiver Analyse-Tools mit reinem HTML, CSS und modernem JavaScript (ES6) spezialisiert hat.
+<nowiki># **Ziel**</nowiki>
-. Frage nach dem Titel der Seite.
+Erstelle eine komplexe, interaktive Webseite ("Competence-Analyzer"), die es Benutzern ermöglicht, Datensätze über Schieberegler zu definieren, diese als Spinnennetzdiagramm zu visualisieren und zu vergleichen. Die Webseite muss Funktionen zum Speichern, Laden und Überlagern mehrerer Konfigurationen bieten und den grafischen Export des Diagramms ermöglichen.
-. Frage nach einem eventuellen Untertitel der Seite.
+<nowiki># **Interaktiver Abfrageprozess**</nowiki>
-. Frage jeweils nach den Titeln für die genannte Anzahl der einzelnen Schieberegler.
+Führe den Benutzer durch die Erstkonfiguration. Stelle die folgenden Fragen nacheinander und warte jeweils die Antwort ab, bevor du die nächste stellst:
+#1. "Wie viele Dimensionen (Achsen) soll dein Spinnennetz haben?"
+#2. "Wie lautet der Haupttitel für die Analyse?"
+#3. "Gibt es einen beschreibenden Untertitel?"
+#4. "Was ist der Maximalwert für die Bewertungsskala? (z.B. 10, 20 oder 100)"
+#5. "Bitte nenne mir jetzt die Bezeichnungen für jede der \[Anzahl\] Dimensionen."
-<nowiki>#</nowiki>Anweisung
+<nowiki># **Detaillierte Anforderungen an die Webseite**</nowiki>
-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.
+<nowiki>## **1\. Grundstruktur & Layout**</nowiki>
+* Erstelle ein vollständiges HTML5-Dokument. **Wichtig:** Stelle durch `<meta charset="UTF-8">` die korrekte Darstellung von Umlauten und Sonderzeichen sicher.
+* Die Seite wird in zwei Hauptbereiche aufgeteilt: links die Steuerung, rechts die Visualisierung.
+* <nowiki>**Responsive Darstellung:**</nowiki>
+* <nowiki> **Desktop:** </nowiki>Beide Bereiche sind nebeneinander und nehmen je 50 % der Bildschirmbreite ein.
+* <nowiki>**Mobil (Hochformat):**</nowiki> Die Bereiche werden untereinander dargestellt (oben die Steuerung, unten die Visualisierung).
+<nowiki>### **2\. Header & Titel-Anzeige**</nowiki>
+*Ein globaler Header am oberen Rand der Seite zeigt den vom Benutzer genannten Titel (<nowiki>`<h1>`</nowiki>) und Untertitel (<nowiki>`<h4>`</nowiki>) zentriert an.
+* <nowiki>**Zusätzlich** </nowiki>sollen derselbe Titel und Untertitel direkt über dem Spinnennetzdiagramm in der rechten Spalte angezeigt werden. Dies stellt sicher, dass der Kontext auch bei einem Grafik-Export erhalten bleibt.
+<nowiki>## **3\. Linke Spalte: Steuerungs- und Eingabebereich**</nowiki>
+* <nowiki>*</nowiki> Erstelle für jede Dimension einen Abschnitt mit Bezeichnung und einem Schieberegler (<nowiki>`<input type="range">`</nowiki>).
+* <nowiki>*</nowiki> Der Wertebereich der Schieberegler muss dynamisch von `0` bis zum vom Benutzer definierten <nowiki>**maximalen Skalenwert**</nowiki> gehen.
+* <nowiki>*</nowiki> Eine visuelle Skala (z.B. Text <nowiki>`0 ... Maximum`</nowiki>) soll über jedem Schieberegler angezeigt werden.
+* <nowiki>*</nowiki> Jede Änderung an einem Schieberegler aktualisiert **in Echtzeit** den entsprechenden Datensatz im Spinnennetzdiagramm.
+<nowiki>### **4\. Rechte Spalte: Spinnennetzdiagramm & Vergleichsfunktion**</nowiki>
+* <nowiki>*</nowiki> Implementiere ein dynamisches Spinnennetzdiagramm (Radar Chart), das **mehrere Datensätze gleichzeitig** darstellen kann.
+* <nowiki>*</nowiki> Der initial erstellte Datensatz (über die Schieberegler) ist immer sichtbar.
+* <nowiki>*</nowiki> <nowiki>**Vergleichsfunktion:**</nowiki>
+* <nowiki>*</nowiki> Jeder Datensatz (der aktuelle und jeder importierte) muss eine **eigene, klar unterscheidbare Farbe** haben.
+* <nowiki>*</nowiki> Die dargestellten Flächen der Datensätze müssen **semi-transparent** sein (z.B. <nowiki>`opacity: 0.4`</nowiki>), damit übereinanderliegende Datensätze und deren Schnittmengen sichtbar bleiben.
+* <nowiki>*</nowiki> Eine Legende unter oder neben dem Diagramm sollte die importierten Datensätze farblich kennzeichnen (z.B. anhand des Titels aus der importierten Datei).
+<nowiki>### **5\. Footer & Datenmanagement (Import/Export & Download)**</nowiki>
+Platziere die folgenden Funktions-Buttons zentral im Footer:
+<nowiki>**A) Grafik-Export:**</nowiki>
-Auf der rechten Seite soll eine Spinnennetzgrafik das Ergebnis darstellen.
+* <nowiki>* **Button 1: "Als JPEG herunterladen"**</nowiki>
+* <nowiki>* **Button 2: "Als PDF herunterladen"**</nowiki>
+* <nowiki>* **Kritische Anforderung:** Diese Buttons exportieren <nowiki>**ausschließlich den visuellen Bereich des Spinnennetzdiagramms**</nowiki>, inklusive seines eigenen Titels/Untertitels und der Legende. Nicht die gesamte Webseite.
-Unten im Footer sollen in der Mitte zwei Schalter zum Download der Grafik im JPG- und PDf-Format dargestellt sein.
+<nowiki>**B) Datenmanagement (Konfiguration):**</nowiki>
-Oben im Header soll der Titeltext zentriert als Titel dargestellt werden.
+* <nowiki>*   **Button 3: "Konfiguration speichern"**</nowiki>
+* <nowiki>*   **Aktion:** Generiert und startet den Download einer `.json`\-Datei.</nowiki>
+* <nowiki>*   **Inhalt der JSON-Datei:** </nowiki>Ein Objekt, das die gesamte aktuelle Konfiguration speichert (Titel, Untertitel, Skalenmaximum, Bezeichnungen der Dimensionen und die aktuellen Werte der Schieberegler).
+* <nowiki>*   **Button 4: "Konfiguration laden"**</nowiki>
+* <nowiki>*   **Aktion:** Öffnet einen Dateidialog zur Auswahl einer `.json`\-Datei.</nowiki>
+* <nowiki>*   **Verhalten:** Die geladenen Daten **ersetzen die aktuelle Konfiguration vollständig**</nowiki>. Die Schieberegler, Titel, Skalen etc. werden auf die Werte aus der Datei gesetzt und das Diagramm entsprechend neu gezeichnet (alle vorherigen Vergleichs-Layer werden entfernt).
+* <nowiki>*   **Button 5: "Zum Vergleich laden"**</nowiki>
+* <nowiki>*   **Aktion:** Öffnet ebenfalls einen Dateidialog zur Auswahl einer `.json`\-Datei.</nowiki>
+* <nowiki>* **   **Verhalten:** Die Daten aus der Datei werden als **neuer, zusätzlicher und farblich abgesetzter Layer** </nowiki>zum bestehenden Spinnennetz hinzugefügt. Die aktuellen Schieberegler-Einstellungen bleiben unberührt.
+<nowiki>## **Technische Vorgaben**</nowiki>
+* <nowiki>*   **HTML5 & CSS3:** </nowiki>Nutze semantisches HTML und modernes CSS (Flexbox/Grid) für das Layout.
+* <nowiki>*   **JavaScript (ES6):**</nowiki> Schreibe sauberen, modularen JavaScript-Code für die gesamte Logik.
+* <nowiki>*   **Datenformat:** Verwende **JSON** </nowiki>für den Import und Export der Konfigurationsdaten.
+* <nowiki>*   **Bibliotheken (via CDN einbinden):**</nowiki>
+* <nowiki>*   **Chart.js:** </nowiki>Zur Erstellung und Verwaltung des Spinnennetzdiagramms.
+* <nowiki>*   **html2canvas** & **jsPDF:** </nowiki>Zur Implementierung der Export-Funktionalität (JPEG/PDF).
-<nowiki>#</nowiki>Ausgabe
+<nowiki>## **Ausgabeformat**</nowiki>
-Gib den HTML-Code wenn möglich als HTML-Datei zum Download aus.
+Stelle den gesamten, voll funktionsfähigen Code in einem einzigen HTML-Codeblock bereit. Der Code muss als "Plug-and-Play" konzipiert sein, d.h. alle HTML-, CSS- (`<style>`) und JavaScript- (`<script>`) Teile sind in einer Datei enthalten, die direkt im Browser lauffähig ist.