From 2e3c937b99c59cbabeee0d58f2b11d13c53691ec Mon Sep 17 00:00:00 2001 From: pbt3h24akh Date: Tue, 10 Feb 2026 15:15:25 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Mittelmodus=20=E2=80=93=20Kartenanzeige?= =?UTF-8?q?,=20Drag&Drop-Swap=20und=20Pr=C3=BCfung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MainPage/stas/WoerterLernen.html | 1 + MainPage/stas/eigenerCode.js | 165 +++++++++++++++++++++++++++++-- MainPage/stas/style.css | 31 ++++++ 3 files changed, 187 insertions(+), 10 deletions(-) diff --git a/MainPage/stas/WoerterLernen.html b/MainPage/stas/WoerterLernen.html index 408ddb7..227deac 100644 --- a/MainPage/stas/WoerterLernen.html +++ b/MainPage/stas/WoerterLernen.html @@ -63,6 +63,7 @@
+
diff --git a/MainPage/stas/eigenerCode.js b/MainPage/stas/eigenerCode.js index 9073ce2..ec8704e 100644 --- a/MainPage/stas/eigenerCode.js +++ b/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 = ` +
+

${karte.englisch}

+
${karte.ipa}
+
${karte.beispielEN}
+
+ `; + 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 = ` +
+

${karte.deutsch}

+
${karte.beispielDE}
+
+ `; + + // 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 = ` - - + + `; actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true); diff --git a/MainPage/stas/style.css b/MainPage/stas/style.css index dfe3695..7ef8c2e 100644 --- a/MainPage/stas/style.css +++ b/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; +}