feat: Mittelmodus – Kartenanzeige, Drag&Drop-Swap und Prüfung

MainPage/stas/WoerterLernen.html

@@ -63,6 +63,7 @@
 
             <div id="trainingLeicht" class="training-view modus-view"></div>
             <div id="trainingMittel" class="training-view"></div>
+            <button onclick="checkMatching()">Überprüfen</button>
             <div id="trainingSchwer" class="training-view"></div>
 
         </div>

MainPage/stas/eigenerCode.js

@@ -1,5 +1,13 @@
 let parsedArray = [];
 
+function mischeArray(array) {
+    for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+    }
+    return array;
+}
+
 document.getElementById('copyButton').addEventListener('click', () => {
     const text = document.getElementById('formatText').innerText;
 
@@ -23,6 +31,7 @@ function parseWordText(inputText) {
         }
 
         const wortObj = {
+            id: crypto.randomUUID(),
             englisch: lines[0],
             ipa: lines[1],
             beispielEN: lines[2],
@@ -147,20 +156,17 @@ modusBtns.forEach(btn => {
 
 let trainingsZustand = {
     modus: "leicht",
+    // für alle Level
     quelleKarten: [],
     aktiveKarten: [],
     gelernt: [],
     nichtGelernt: [],
+    // für Mittel
+    ziehKarten: []
 };
 
 function startLeichtTraining() {
-    console.log("🔥 startLeichtTraining вызвана");
-
-    if (!parsedArray || parsedArray.length === 0) {
-        alert("Нет карточек для тренировки");
-        return;
-    }
-
+    trainingsZustand.modus = "leicht";
     trainingsZustand.quelleKarten = [...parsedArray];
     trainingsZustand.aktiveKarten = [];
     trainingsZustand.gelernt = [];
@@ -173,10 +179,149 @@ function startLeichtTraining() {
             trainingsZustand.aktiveKarten.push(karte);
         }
     }
-
     zeigeNaechsteKarte();
 }
 
+function startMittelTraining() {
+    // console.log("startMilletTraining");
+
+    trainingsZustand.modus = "mittel";
+    trainingsZustand.quelleKarten = [...parsedArray];
+    trainingsZustand.gelernt = [];
+    trainingsZustand.nichtGelernt = [];
+
+    ladeMittelRunde();
+}
+
+function ladeMittelRunde() {
+    // console.log("ladeMittelRunde start");
+    trainingsZustand.aktiveKarten = [];
+    trainingsZustand.ziehKarten = [];
+
+    for(let i=0; i < 4; i++) {
+        if(trainingsZustand.quelleKarten.length > 0) {
+            trainingsZustand.aktiveKarten.push(
+                trainingsZustand.quelleKarten.shift()
+            );
+        }
+    }
+     
+    trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
+
+    if(trainingsZustand.aktiveKarten.length === 0) {
+        alert(`Training beendet! 
+            Gelernt: ${trainingsZustand.gelernt.length}`);
+        return;
+    }
+    renderMittelMatching();
+}
+
+console.log("aktiveKarten:", trainingsZustand.aktiveKarten);
+console.log("ziehKarten:", trainingsZustand.ziehKarten);
+
+function renderMittelMatching() {
+    const container = document.getElementById("trainingMittel");
+    container.innerHTML = "";
+
+    const links = document.createElement("div");
+    links.className = "spalte-links";
+
+    const rechts = document.createElement("div");
+    rechts.className = "spalte-rechts";
+
+    // Linke Zone
+    trainingsZustand.aktiveKarten.forEach(karte => {
+        const dropZone = document.createElement("div");
+        dropZone.className = "training-card drop-zone";
+        dropZone.innerHTML = `
+            <div class="">
+                <h2>${karte.englisch}</h2>
+                <div class="ipa">${karte.ipa}</div>
+                <div class="example">${karte.beispielEN}</div>
+            </div>
+        `;
+        links.appendChild(dropZone);
+    });
+
+    // draggable + droppable (swap)
+    trainingsZustand.ziehKarten.forEach(karte => {
+        const ziehKarte = document.createElement("div");
+        ziehKarte.className = "training-card zieh-karte";
+        ziehKarte.draggable = true;
+        ziehKarte.dataset.id = karte.id;
+
+        ziehKarte.innerHTML = `
+            <div class="">
+                <h2>${karte.deutsch}</h2>
+                <div class="example">${karte.beispielDE}</div>
+            </div>
+        `;
+
+        // dragstart
+        ziehKarte.addEventListener("dragstart", e => {
+            e.dataTransfer.setData("draggedId", karte.id);
+        });
+
+        // dragover
+        ziehKarte.addEventListener("dragover", e => {
+            e.preventDefault();
+        });
+
+        // drop
+        ziehKarte.addEventListener("drop", e => {
+            e.preventDefault();
+
+            const draggedId = e.dataTransfer.getData("draggedId");
+            const targetId = karte.id;
+
+            swapZiehKarten(draggedId, targetId);
+        });
+
+        rechts.appendChild(ziehKarte);
+    });
+
+    container.appendChild(links);
+    container.appendChild(rechts);
+}
+
+function swapZiehKarten(draggedId, targetId) {
+    const draggedIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === draggedId);
+    const targetIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === targetId);
+
+    if (draggedIndex === -1 || targetIndex === -1) return;
+
+    const temp = trainingsZustand.ziehKarten[draggedIndex];
+    trainingsZustand.ziehKarten[draggedIndex] = trainingsZustand.ziehKarten[targetIndex];
+    trainingsZustand.ziehKarten[targetIndex] = temp;
+
+    renderMittelMatching();
+}
+
+function checkMatching() {
+    const richtig = trainingsZustand.aktiveKarten.every((k, i) => k.id === trainingsZustand.ziehKarten[i].id);
+    alert(richtig ? "Aless richtig!" : "Es gibt noch Fehler");
+}
+
+function pruefeZuordnung(ziehId, dropId) {
+    if(ziehId === dropId) {
+        const karte = trainingsZustand.aktiveKarten.find(k => k.id == ziehId);
+
+        trainingsZustand.gelernt.push(karte);
+
+        trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k.id != ziehId);
+
+        trainingsZustand.ziehKarten = trainingsZustand.ziehKarten.filter(k => k.id != ziehId);
+
+        renderMittelMatching();
+
+        if(trainingsZustand.aktiveKarten.length === 0) {
+            ladeMittelRunde();
+        }
+    } else {
+        console.log("Falsh zugeorgnet");
+    }
+}
+
 function zeigeNaechsteKarte() {
     if (
         trainingsZustand.aktiveKarten.length === 0 &&
@@ -223,8 +368,8 @@ function renderLeichtKarte(karte) {
     const actions = document.createElement("div");
     actions.className = "training-actions";
     actions.innerHTML = `
-        <button id="knowBtn">✔️ Weiß ich</button>
-        <button id="dontKnowBtn">❌ Weiß ich nicht</button>
+        <button id="knowBtn">Weiß ich</button>
+        <button id="dontKnowBtn">Weiß ich nicht</button>
     `;
 
     actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true);

MainPage/stas/style.css

@@ -364,3 +364,34 @@ h1 {
     display: none;
     margin-top: 25px;
 }
+
+#trainingMittel {
+    display: flex !important;
+    gap: 20px;
+    align-items: flex-start;
+}
+
+.spalte-links,
+.spalte-rechts {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 300px;
+    border: 1px dashed #ccc;
+    padding: 0;
+    align-items: center;
+}
+
+
+.drop-zone, .zieh-karte {
+    padding: 10px;
+    margin: 10px 0;
+    background: #fff;
+    border: 2px solid #666;
+    border-radius: 8px;
+}
+
+.zieh-karte {
+    cursor: grab;
+}