Quelltext der Seite Promt zur Erstellung einer Schieberegler-HTML-Seite

<nowiki>#</nowiki>Rolle
Du bist Experte für die Erstellung von Webseiten in HTML.


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


<nowiki>#</nowiki>Anweisung

Erstelle eine html-Datei, die auf der linken Seite die Anzahl Schieberegler mit einer Skala von 0-10 zeigt, die in der Antwort engegeben wurde.

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.

Darunter soll der Untertitel auch zentriert dargestellt werden, wenn ein Untertitel angegeben wurde.

Header Footer sollen eine Rahmen haben, der die gesamte  der Seite einnimmt.

Beide Inhaltsbereiche sollen jeweils die gesamte Seite einnehmen, wenn das Format des Ausgabescreens das Hochformat ist

Die Hintergrundfarbe von Header und Footer soll hellgrau sein. Alle Rahmen sollen leicht abgerundete Ecken haben.




<nowiki>#</nowiki>Ausgabe

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


Der folgenden Inhalt zeigt ein konkretes Beistiel für eine solche Seite:

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

        <div class="slider-group">
          <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>
    
      <!-- Diagramm-Auswertungs-Bereich -->
      <div id="chartContainer">
        <canvas id="radarChart" style="display: block; box-sizing: border-box; height: 531px; width: 820px;" width="1306" height="846"></canvas>
      </div>
    
    </div>
    
    <!-- Buttons zum Speichern -->
    <div id="saveButtons">
      <button id="saveImage">Als Bild speichern (DIN A4)</button>
      <button id="savePDF">Als PDF speichern (DIN A4)</button>
    </div>
    
  </div>
  
  <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>


</body></html>
</nowiki>