feat: BreakPilot PWA - Full codebase (clean push without large binaries)

All services: admin-v2, studio-v2, website, ai-compliance-sdk, consent-service, klausur-service, voice-service, and infrastructure. Large PDFs and compiled binaries excluded via .gitignore.
2026-02-11 13:25:58 +01:00
commit 19855efacc
2512 changed files with 933814 additions and 0 deletions
--- a/h5p-service/editors/drag-drop-editor.html
+++ b/h5p-service/editors/drag-drop-editor.html
@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Drag and Drop Editor - BreakPilot H5P</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: #f5f5f5;
+      padding: 20px;
+    }
+    .container {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      padding: 30px;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    h1 {
+      color: #333;
+      margin-bottom: 24px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .info-box {
+      background: #f0f9ff;
+      border-left: 4px solid #3b82f6;
+      padding: 16px;
+      margin-bottom: 24px;
+      border-radius: 4px;
+    }
+    .form-group {
+      margin-bottom: 24px;
+    }
+    label {
+      display: block;
+      font-weight: 600;
+      color: #374151;
+      margin-bottom: 8px;
+    }
+    input[type="text"], textarea {
+      width: 100%;
+      padding: 10px 14px;
+      border: 2px solid #e5e7eb;
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: inherit;
+      transition: border-color 0.2s;
+    }
+    input[type="text"]:focus, textarea:focus {
+      outline: none;
+      border-color: #667eea;
+    }
+    textarea {
+      resize: vertical;
+      min-height: 80px;
+    }
+    .zones-section {
+      background: #f9fafb;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 24px;
+    }
+    .zone-card {
+      background: white;
+      border: 2px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
+    .zone-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .zone-number {
+      font-weight: 600;
+      color: #667eea;
+      font-size: 14px;
+    }
+    .draggables-section {
+      background: #fef3c7;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 24px;
+    }
+    .draggable-card {
+      background: white;
+      border: 2px solid #f59e0b;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 12px;
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    .draggable-card input[type="text"] {
+      flex: 1;
+    }
+    select {
+      padding: 8px 12px;
+      border: 2px solid #e5e7eb;
+      border-radius: 6px;
+      font-size: 14px;
+      background: white;
+      cursor: pointer;
+    }
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 6px;
+      font-weight: 600;
+      cursor: pointer;
+      font-size: 14px;
+      transition: all 0.2s;
+    }
+    .btn-primary {
+      background: #667eea;
+      color: white;
+    }
+    .btn-primary:hover {
+      background: #5568d3;
+    }
+    .btn-secondary {
+      background: #e5e7eb;
+      color: #374151;
+    }
+    .btn-secondary:hover {
+      background: #d1d5db;
+    }
+    .btn-danger {
+      background: #ef4444;
+      color: white;
+    }
+    .btn-danger:hover {
+      background: #dc2626;
+    }
+    .btn-group {
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+    }
+    .add-btn {
+      width: 100%;
+      padding: 12px;
+      border: 2px dashed #9ca3af;
+      background: transparent;
+      color: #6b7280;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.2s;
+      margin-top: 12px;
+    }
+    .add-btn:hover {
+      border-color: #667eea;
+      color: #667eea;
+      background: #f9fafb;
+    }
+    .success-message {
+      background: #d1fae5;
+      border: 2px solid #10b981;
+      color: #065f46;
+      padding: 16px;
+      border-radius: 6px;
+      margin-bottom: 20px;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>
+      <span>🎯</span>
+      Drag and Drop Editor
+    </h1>
+
+    <div class="success-message" id="successMessage">
+      ✅ Drag and Drop Aufgabe erfolgreich gespeichert!
+    </div>
+
+    <div class="info-box">
+      <h3 style="color: #1e40af; margin-bottom: 8px; font-size: 14px;">💡 Wie funktioniert Drag and Drop?</h3>
+      <p style="color: #475569; font-size: 14px; line-height: 1.6;">
+        Erstelle Ablage-Zonen und zugehörige Elemente. Lernende müssen die Elemente per Drag & Drop in die richtigen Zonen ziehen.
+        Ideal für Zuordnungsaufgaben, Kategorisierung und mehr.
+      </p>
+    </div>
+
+    <div class="form-group">
+      <label for="title">Titel der Aufgabe</label>
+      <input type="text" id="title" placeholder="z.B. Ordne die Tiere den richtigen Kategorien zu">
+    </div>
+
+    <div class="form-group">
+      <label for="question">Aufgabenstellung</label>
+      <textarea id="question" placeholder="z.B. Ziehe jedes Tier in die passende Kategorie: Säugetiere, Vögel oder Reptilien."></textarea>
+    </div>
+
+    <div class="zones-section">
+      <h3 style="margin-bottom: 16px; color: #374151;">📍 Ablage-Zonen (Drop Zones)</h3>
+      <div id="zonesContainer"></div>
+      <button class="add-btn" onclick="addZone()">+ Neue Zone hinzufügen</button>
+    </div>
+
+    <div class="draggables-section">
+      <h3 style="margin-bottom: 16px; color: #78350f;">🔲 Ziehbare Elemente (Draggables)</h3>
+      <div id="draggablesContainer"></div>
+      <button class="add-btn" onclick="addDraggable()">+ Neues Element hinzufügen</button>
+    </div>
+
+    <div class="btn-group">
+      <button class="btn btn-primary" onclick="saveDragDrop()">💾 Speichern</button>
+      <button class="btn btn-secondary" onclick="previewDragDrop()">🎮 Testen</button>
+      <button class="btn btn-secondary" onclick="window.history.back()">← Zurück</button>
+    </div>
+  </div>
+
+  <script>
+    let zones = [];
+    let draggables = [];
+
+    function addZone() {
+      const zoneId = Date.now();
+      zones.push({
+        id: zoneId,
+        name: ''
+      });
+      renderZones();
+    }
+
+    function removeZone(zoneId) {
+      if (confirm('Zone wirklich löschen?')) {
+        zones = zones.filter(z => z.id !== zoneId);
+        renderZones();
+        renderDraggables(); // Re-render to update zone selections
+      }
+    }
+
+    function updateZone(zoneId, value) {
+      const zone = zones.find(z => z.id === zoneId);
+      if (zone) {
+        zone.name = value;
+        renderDraggables(); // Update dropdowns
+      }
+    }
+
+    function renderZones() {
+      const container = document.getElementById('zonesContainer');
+      container.innerHTML = '';
+
+      zones.forEach((zone, index) => {
+        const zoneEl = document.createElement('div');
+        zoneEl.className = 'zone-card';
+        zoneEl.innerHTML = `
+          <div class="zone-header">
+            <span class="zone-number">Zone ${index + 1}</span>
+            <button class="btn btn-danger" style="padding: 6px 12px; font-size: 12px;" onclick="removeZone(${zone.id})">🗑️</button>
+          </div>
+          <input type="text"
+            value="${zone.name}"
+            onchange="updateZone(${zone.id}, this.value)"
+            placeholder="z.B. 'Säugetiere' oder 'Vögel'">
+        `;
+        container.appendChild(zoneEl);
+      });
+    }
+
+    function addDraggable() {
+      const draggableId = Date.now();
+      draggables.push({
+        id: draggableId,
+        text: '',
+        correctZoneId: zones.length > 0 ? zones[0].id : null
+      });
+      renderDraggables();
+    }
+
+    function removeDraggable(draggableId) {
+      if (confirm('Element wirklich löschen?')) {
+        draggables = draggables.filter(d => d.id !== draggableId);
+        renderDraggables();
+      }
+    }
+
+    function updateDraggable(draggableId, field, value) {
+      const draggable = draggables.find(d => d.id === draggableId);
+      if (draggable) {
+        draggable[field] = field === 'correctZoneId' ? parseInt(value) : value;
+      }
+    }
+
+    function renderDraggables() {
+      const container = document.getElementById('draggablesContainer');
+      container.innerHTML = '';
+
+      draggables.forEach((draggable, index) => {
+        const draggableEl = document.createElement('div');
+        draggableEl.className = 'draggable-card';
+        draggableEl.innerHTML = `
+          <span style="color: #92400e; font-weight: 600; font-size: 14px;">${index + 1}.</span>
+          <input type="text"
+            value="${draggable.text}"
+            onchange="updateDraggable(${draggable.id}, 'text', this.value)"
+            placeholder="z.B. 'Hund' oder 'Adler'">
+          <select onchange="updateDraggable(${draggable.id}, 'correctZoneId', this.value)">
+            <option value="">Richtige Zone wählen...</option>
+            ${zones.map(zone => `
+              <option value="${zone.id}" ${draggable.correctZoneId === zone.id ? 'selected' : ''}>
+                ${zone.name || 'Zone ' + (zones.indexOf(zone) + 1)}
+              </option>
+            `).join('')}
+          </select>
+          <button class="btn btn-danger" style="padding: 6px 12px; font-size: 12px;" onclick="removeDraggable(${draggable.id})">🗑️</button>
+        `;
+        container.appendChild(draggableEl);
+      });
+    }
+
+    function saveDragDrop() {
+      const title = document.getElementById('title').value;
+      const question = document.getElementById('question').value;
+
+      if (!title) {
+        alert('Bitte gib einen Titel ein!');
+        return;
+      }
+
+      if (zones.length < 2) {
+        alert('Bitte füge mindestens 2 Ablage-Zonen hinzu!');
+        return;
+      }
+
+      if (draggables.length < 3) {
+        alert('Bitte füge mindestens 3 ziehbare Elemente hinzu!');
+        return;
+      }
+
+      for (let i = 0; i < zones.length; i++) {
+        if (!zones[i].name) {
+          alert(`Zone ${i + 1} hat keinen Namen!`);
+          return;
+        }
+      }
+
+      for (let i = 0; i < draggables.length; i++) {
+        if (!draggables[i].text) {
+          alert(`Element ${i + 1} hat keinen Text!`);
+          return;
+        }
+        if (!draggables[i].correctZoneId) {
+          alert(`Element ${i + 1} hat keine richtige Zone zugewiesen!`);
+          return;
+        }
+      }
+
+      const dragDropData = {
+        type: 'drag-drop',
+        title,
+        question,
+        zones,
+        draggables,
+        created: new Date().toISOString()
+      };
+
+      const contentId = 'dragdrop_' + Date.now();
+      localStorage.setItem(contentId, JSON.stringify(dragDropData));
+
+      const successMsg = document.getElementById('successMessage');
+      successMsg.style.display = 'block';
+      setTimeout(() => {
+        successMsg.style.display = 'none';
+      }, 3000);
+
+      console.log('Drag and Drop gespeichert:', dragDropData);
+    }
+
+    function previewDragDrop() {
+      const title = document.getElementById('title').value;
+
+      if (!title || zones.length < 2 || draggables.length < 3) {
+        alert('Bitte fülle erst alle Felder aus!');
+        return;
+      }
+
+      const previewData = encodeURIComponent(JSON.stringify({
+        title,
+        question: document.getElementById('question').value,
+        zones,
+        draggables
+      }));
+
+      window.open(`/h5p/player/drag-drop?data=${previewData}`, '_blank');
+    }
+
+    // Initialize with 2 zones
+    addZone();
+    addZone();
+  </script>
+</body>
+</html>