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

Aus Wikidental.de
Keine Bearbeitungszusammenfassung
 
(27 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
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
<nowiki>#</nowiki>Rolle
Du bist Experte für die Erstellung von Webseiten in HTML.
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:
Stelle folgende Fragen und warte bei jeder Frage auf die Antwort:


1. 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.


2. Frage nach dem Titel der Seite.


3. Frage nach einem eventuellen Untertitel der Seite.
<nowiki>#</nowiki>Anwweisungen
 
4. Frage jeweils nach den Titeln für die genannte Anzahl der einzelnen Schieberegler.
 
 
<nowiki>#</nowiki>Anweisung


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.
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.


Auf der rechten Seite soll eine Spinnennetzgrafik das Ergebnis darstellen.
Gehe strukturiert vor:
 
*1. Erzeuge das vollständige Grundgerüst der HTML-Datei
Unten im Footer sollen in der Mitte zwei Schalter zum Download der Grafik im JPG- und PDf-Format dargestellt sein.
*2. Erstelle Header und Footer nach den Anweisungen des Benutzers
 
*3. Erstelle den Inhalt der Seite.
Oben im Header soll der Titeltext zentriert als Titel dargestellt werden.


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




Zeile 39: Zeile 60:
Gib den HTML-Code wenn möglich als HTML-Datei zum Download aus.
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.


Der folgenden Inhalt zeigt ein konkretes Beistiel für eine solche Seite:
(Kopiere den Text ab der nächsten Zeile bis zum Ende des Artikels und verwende ihn als Prompt)
 
<nowiki>###</nowiki>
 
<nowiki>
 
<!DOCTYPE html>
 
<html lang="de">
 
<head>
 
  <meta charset="UTF-8">
 
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <title>Didaktische Schieberegler mit responsiver Auswertung</title>
 
  <!-- Chart.js CDN -->
 
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
  <!-- html2canvas CDN -->
 
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
 
  <!-- jsPDF CDN -->
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 
  <style>
 
    body {
 
      font-family: Arial, sans-serif;
 
      margin: 20px;
 
    }
 
    h1, h2, p.instructions {
 
      text-align: center;
 
    }
 
    /* Container, der den Bereich der Schieberegler und die Auswertung zusammenfasst */
 
    .flex-container {
 
      display: flex;
 
      flex-wrap: wrap;
 
      gap: 20px;
 
      justify-content: center;
 
    }
 
    /* Bereich Schieberegler */
 
    #sliderContainer {
 
      flex: 1 1 300px;
 
      border: 1px solid #ccc;
 
      padding: 15px;
 
      box-sizing: border-box;
 
    }
 
    /* Bereich Auswertung (Diagramm) */
 
    #chartContainer {
 
      flex: 1 1 300px;
 
      border: 1px solid #ccc;
 
      padding: 15px;
 
      box-sizing: border-box;
 
      display: flex;
 
      justify-content: center;
 
      align-items: center;
 
    }
 
    .slider-group {
 
      margin-bottom: 30px;
 
    }
 
    .slider-label {
 
      display: block;
 
      margin-bottom: 5px;
 
      font-weight: bold;
 
    }
 
    .slider-container {
 
      display: flex;
 
      align-items: center;
 
    }
 
    .slider-value {
 
      margin-left: 15px;
 
      font-size: 1.1em;
 
      min-width: 20px;
 
      text-align: center;
 
    }
 
    /* Container für die Speichern-Buttons */
 
    #saveButtons {
 
      display: flex;
 
      justify-content: center;
 
      gap: 20px;
 
      margin-top: 30px;
 
    }
 
    button {
 
      padding: 10px 20px;
 
      font-size: 1em;
 
      cursor: pointer;
 
    }
 
    /* Bei kleinen Bildschirmen die Flexrichtung auf Spalte setzen */
 
    @media (max-width: 768px) {
 
      .flex-container {
 
        flex-direction: column;
 
      }
 
    }
 
  </style>
 
</head>
 
<body>
 
  <div class="container">
 
    <h1>Didaktische Schieberegler</h1>
 
    <h2>"Lernen und Lehren neu denken - Effiziente und zukunftsfähige Unterrichtsgestaltung in der Digitalität"</h2>
 
    <p class="instructions">Du hast eine didaktische Jahresplanung für einen bestehenden Bildungsplan in welchen Umfang auch immer: Verwende die Schieberegler zur Ermittlung Deines Fortbildungsbedarfs zum Thema "Lernen und Lehren neu denken - Effiziente und zukunftsfähige Unterrichtsgestaltung in der Digitalität". Dokumentiere Dein Ergebnis als Bild oder PDF. Das Ergebnis ist die Grundlage für die Planung notwendiger bzw. gewünschter Fortbildungen mit Deiner Abteilungsleitung.</p>
 
<p class="instructions">Du hast einen neuen Bildungsplan und möchtest mit der Didaktischen Jahresplanung beginnen: Buche eine moderative Begleitung der neu zu erstellenden DJP in Absprache mit Deiner Abteilungsleitung.</p>
 
<p class="instructions">Das Fortbildungsangebot findest Du hier: <a href="https://lfb.nrw.de/brd/108304">Link zum Fortbildungsangebot Nr. 108304 "Lernen und Lehren neu denken - Effiziente und zukunftsfähige Unterrichtsgestaltung in der Digitalität"</a> </p>   
 
   
 
   
 
    <div class="flex-container">
 
      <!-- Schieberegler-Bereich -->
 
      <div id="sliderContainer">
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider1">
 
            1. Die didaktische Jahresplanung (DJP) ist vollständig und aktuell vorhanden.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider1" name="slider1" min="0" max="10" value="5" oninput="updateValue(0, this.value)">
 
            <span id="value1" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider2">
 
            2. Jede Lernsituation (LS) enthält farbig markierte digitale Schlüsselkompetenzen in den Kompetenzbeschreibungen.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider2" name="slider2" min="0" max="10" value="5" oninput="updateValue(1, this.value)">
 
            <span id="value2" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider3">
 
            3. Jede LS berücksichtigt das Konzept der vollständigen Handlung und wird auch so unterrichtet.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider3" name="slider3" min="0" max="10" value="5" oninput="updateValue(2, this.value)">
 
            <span id="value3" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider4">
 
            4. Alle LS sind im Didaktischen Wizard Online (DWO) dokumentiert.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider4" name="slider4" min="0" max="10" value="5" oninput="updateValue(3, this.value)">
 
            <span id="value4" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider5">
 
            5. Für jedes Lernfeld ist in einem Lernmanagmentsystem (LMS) eine Basiskurs (z.B. DJP-Moodlekurs) mit allen LS fertig vorbereitet.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider5" name="slider5" min="0" max="10" value="5" oninput="updateValue(4, this.value)">
 
            <span id="value5" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider6">
 
            6. Jede Lernsituation ist in einem Kurs eines LMS (z.B. in einem DJP-Moodlekurs) nach dem Konzept der vollständigen Handlung dargestellt.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider6" name="slider6" min="0" max="10" value="5" oninput="updateValue(5, this.value)">
 
            <span id="value6" class="slider-value">5</span>
 
          </div>
 
        </div>
 
   
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider7">
 
            7. Alle LS sind in den Kursen eines LMS (z.B. DJP-Moodlekursen) mit der DJP im DWO verknüpft.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider7" name="slider7" min="0" max="10" value="5" oninput="updateValue(6, this.value)">
 
            <span id="value7" class="slider-value">5</span>
 
          </div>
 
        </div>
 
 
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider8">
 
            8. Die Erstellung und Evaluation der DJP wird durch ein Projektmanagment (z.B. Kanban-Board) gesteuert.        </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider8" name="slider8" min="0" max="10" value="5" oninput="updateValue(7, this.value)">
 
            <span id="value8" class="slider-value">5</span>
 
          </div>
 
        </div>
 
 
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider9">
 
            9. Für die Informationsphasen der vollständigen Handlung sind Lernvideos vorbereitet.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider9" name="slider9" min="0" max="10" value="5" oninput="updateValue(8, this.value)">
 
            <span id="value9" class="slider-value">5</span>
 
          </div>
 
        </div>
 
 
 
        <div class="slider-group">
 
          <label class="slider-label" for="slider10">
 
            10. Es sind interaktive Übungen (z.B. H5P) in der DJP zur Information und Übung vorbereitet.
 
          </label>
 
          <div class="slider-container">


            <input type="range" id="slider10" name="slider10" min="0" max="10" value="5" oninput="updateValue(9, this.value)">


            <span id="value10" class="slider-value">5</span>
<nowiki># **Persona**</nowiki>


          </div>
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.


        </div>
<nowiki># **Ziel**</nowiki>


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.


<nowiki># **Interaktiver Abfrageprozess**</nowiki>


        <div class="slider-group">
Führe den Benutzer durch die Erstkonfiguration. Stelle die folgenden Fragen nacheinander und warte jeweils die Antwort ab, bevor du die nächste stellst:
 
          <label class="slider-label" for="slider11">
 
            11. Die sinnvolle Verknüpfung von Präsenz- und Distanzunterricht wurde geprüft und dokumentiert.
 
          </label>
 
          <div class="slider-container">
 
            <input type="range" id="slider11" name="slider11" min="0" max="10" value="5" oninput="updateValue(10, this.value)">
 
            <span id="value11" class="slider-value">5</span>
 
          </div>
 
        </div>
 
 
 
    </div>


#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."
      
      


      <!-- Diagramm-Auswertungs-Bereich -->
<nowiki># **Detaillierte Anforderungen an die Webseite**</nowiki>


      <div id="chartContainer">
<nowiki>## **1\. Grundstruktur & Layout**</nowiki>


        <canvas id="radarChart" style="display: block; box-sizing: border-box; height: 531px; width: 820px;" width="1306" height="846"></canvas>
* 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).
       


      </div>
<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.
      
      


    </div>
<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.
      
      


    <!-- Buttons zum Speichern -->
<nowiki>### **4\. Rechte Spalte: Spinnennetzdiagramm & Vergleichsfunktion**</nowiki>


    <div id="saveButtons">
* <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).
       


      <button id="saveImage">Als Bild speichern (DIN A4)</button>
<nowiki>### **5\. Footer & Datenmanagement (Import/Export & Download)**</nowiki>


      <button id="savePDF">Als PDF speichern (DIN A4)</button>
Platziere die folgenden Funktions-Buttons zentral im Footer:


    </div>
<nowiki>**A) Grafik-Export:**</nowiki>


* <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.
      
      


  </div>
<nowiki>**B) Datenmanagement (Konfiguration):**</nowiki>
 
 
 
  <script>
 
    // Startwerte der Schieberegler
 
    const sliderValues = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];
 
 
 
    // Radar Chart Konfiguration
 
    const ctx = document.getElementById('radarChart').getContext('2d');
 
    const radarChart = new Chart(ctx, {
 
      type: 'radar',
 
      data: {
 
        labels: [
 
          "DJP vorhanden",
 
          "Digitale Schlüsselkompetenzen",
 
          "Vollständige Handlung LS",
 
          "Dokumentation im Wizard",
 
          "Moodlekurs vorbereitet",
 
          "Darstellung im Moodlekurs",
 
          "Verknüpfung mit DWO",
 
          "Projektmanagment vorhanden",
 
          "Lernvideos vorhanden",
 
          "Interaktive Übungen vorhanden",
 
          "Präsenz und Distanz geprüft"
 
        ],
 
        datasets: [{
 
          label: 'Bewertung',
 
          data: sliderValues,
 
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
 
          borderColor: 'rgba(54, 162, 235, 1)',
 
          pointBackgroundColor: 'rgba(54, 162, 235, 1)',
 
          pointBorderColor: '#fff',
 
          pointHoverBackgroundColor: '#fff',
 
          pointHoverBorderColor: 'rgba(54, 162, 235, 1)'
 
        }]
 
      },
 
      options: {
 
        responsive: true,
 
        maintainAspectRatio: false,
 
        scales: {
 
          r: {
 
            suggestedMin: 0,
 
            suggestedMax: 10,
 
            ticks: {
 
              stepSize: 1
 
            }
 
          }
 
        }
 
      }
 
    });
 
 
 
    // Funktion zur Aktualisierung des Wertes und Diagramm-Daten
 
    // function updateValue(index, value) {
 
    //  document.getElementById('value' + (index + 1)).textContent = value;
 
    //  sliderValues[index] = Number(value);
 
    //  radarChart.data.datasets[0].data = sliderValues;
 
    //  radarChart.update();
 
    //}
 
   
 
    function updateValue(index, value) {
 
      document.getElementById('value' + (index + 1)).textContent = value;
 
      sliderValues[index] = Number(value);
 
      radarChart.data.datasets[0].data = sliderValues;
 
      radarChart.update();
 
    }
 
 
 
   
 
 
 
    // Funktion, um den Bereich der Auswertung als Bild zu speichern
 
    document.getElementById('saveImage').addEventListener('click', function() {
 
      // Wir nutzen html2canvas, um den 'chartContainer' in ein Canvas zu rendern.
 
      html2canvas(document.getElementById('chartContainer')).then(function(canvas) {
 
        // DIN A4: 210 x 297 mm -> bei 96 dpi ca. 794 x 1123 Pixel (Skalierung kann hier angepasst werden)
 
        // Wir erstellen ein temporäres Image aus dem Canvas
 
        var imgData = canvas.toDataURL('image/png');
 
        // Neues Fenster oder Download des Bildes initiieren
 
        // Hier erstellen wir einen Link zum Download
 
        var a = document.createElement('a');
 
        a.href = imgData;
 
        a.download = 'auswertung_din_a4.png';
 
        document.body.appendChild(a);
 
        a.click();
 
        document.body.removeChild(a);
 
      });
 
    });
 
 
 
    // Funktion, um den Bereich als PDF im DIN A4 Format zu speichern
 
    document.getElementById('savePDF').addEventListener('click', function() {
 
      // Wir nutzen html2canvas, um den 'chartContainer' in ein Canvas zu rendern.
 
      html2canvas(document.getElementById('chartContainer')).then(function(canvas) {
 
        var imgData = canvas.toDataURL('image/png');
 
 
 
        // Erstelle ein neues PDF-Dokument im Hochformat DIN A4 (210 x 297 mm)
 
        // jsPDF erwartet Maße in mm, Standardabmessungen: 210 x 297
 
        const { jsPDF } = window.jspdf;
 
        var pdf = new jsPDF('p', 'mm', 'a4');
 
 
 
        // Berechne die Breite und Höhe für das Bild im PDF
 
        var pdfWidth = 210; // mm
 
        // Höhe errechnen, sodass Seitenverhältnis beibehalten wird
 
        var imgProps = pdf.getImageProperties(imgData);
 
        var pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
 
 
 
        // Füge das Bild zentral im PDF ein
 
        var marginY = (297 - pdfHeight) / 2;
 
        pdf.addImage(imgData, 'PNG', 0, marginY, pdfWidth, pdfHeight);
 
 
 
        pdf.save('auswertung_din_a4.pdf');
 
      });
 
    });


   </script>
* <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>


</body></html>
* <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>## **Ausgabeformat**</nowiki>


<nowiki>###</nowiki>
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.

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. 1. "Wie viele Dimensionen (Achsen) soll dein Spinnennetz haben?"
  2. 2. "Wie lautet der Haupttitel für die Analyse?"
  3. 3. "Gibt es einen beschreibenden Untertitel?"
  4. 4. "Was ist der Maximalwert für die Bewertungsskala? (z.B. 10, 20 oder 100)"
  5. 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.

Abgerufen von „https://www.wikidental.de/wikidental1/index.php?title=Promt_zur_Erstellung_einer_Schieberegler-HTML-Seite&oldid=11352“