From be159bcbf0e7c5a6fddee548613f3b9bd3c8e756 Mon Sep 17 00:00:00 2001 From: pbt3h24akh Date: Wed, 18 Feb 2026 13:53:00 +0100 Subject: [PATCH] Mitte Level implementieren --- MainPage/stas/WoerterLernen.html | 2 +- MainPage/stas/eigenerCode.js | 230 ++++++++++++++----------------- MainPage/stas/style.css | 13 +- 3 files changed, 112 insertions(+), 133 deletions(-) diff --git a/MainPage/stas/WoerterLernen.html b/MainPage/stas/WoerterLernen.html index c2f7359..b1b6fce 100644 --- a/MainPage/stas/WoerterLernen.html +++ b/MainPage/stas/WoerterLernen.html @@ -65,7 +65,7 @@
- +
diff --git a/MainPage/stas/eigenerCode.js b/MainPage/stas/eigenerCode.js index ba0f608..5f062d1 100644 --- a/MainPage/stas/eigenerCode.js +++ b/MainPage/stas/eigenerCode.js @@ -60,9 +60,6 @@ function createPagePair() { } const button = document.getElementById("kartenErstellen"); -const onlineContainer = document.getElementById("kartenContainer"); -const frontPage = document.querySelector(".page_front"); -const backPage = document.querySelector(".page_back"); button.addEventListener("click", () => { const inputText = document.getElementById("inputText").value; @@ -82,17 +79,19 @@ button.addEventListener("click", () => { // Erstellt druckfertige PDF-Seiten mit jeweils 8 Karten pro Seite. function createPDFPages(wordArray) { + const kartenContainer = document.getElementById("kartenContainer"); + const druckenBtn = document.getElementById("druckenBtn"); kartenContainer.innerHTML = ""; kartenContainer.style.display = "flex"; kartenContainer.style.flexDirection = "column"; - for (let i = 0; i < parsedArray.length; i += 8) { + for (let i = 0; i < wordArray.length; i += 8) { const { frontPage, backPage } = createPagePair(); - parsedArray.slice(i, i + 8).forEach((karte) => { + wordArray.slice(i, i + 8).forEach((karte) => { const frontCard = document.createElement("div"); frontCard.className = "card card-en"; @@ -114,17 +113,19 @@ function createPDFPages(wordArray) { kartenContainer.appendChild(frontPage); kartenContainer.appendChild(backPage); - document.getElementById("druckenBtn").style.display = "block"; } + + druckenBtn.style.display = "block"; + alert("PDF-Seiten wurden erstellt! Du kannst sie jetzt drucken."); } + document.getElementById("druckenBtn").addEventListener("click", () => { window.print(); }); const modusBtns = document.querySelectorAll('.modus-btn'); -const trainingLevels = document.getElementById('trainingLevels'); modusBtns.forEach(btn => { btn.addEventListener('click', () => { @@ -157,7 +158,6 @@ let trainingsZustand = { ziehKarten: [], rundeNummer: 0, richtung: "EN_DE", - zuordnungen: 0, }; // Startet das Training im Modus "Leicht". @@ -178,15 +178,99 @@ function startLeichtTraining() { zeigeNaechsteKarte(); } +// Verarbeitet die Antwort des Nutzers im leichten Modus. +function antworteAufKarte(weißIch) { + const karte = trainingsZustand.aktuelleKarte; + + if (weißIch) { + trainingsZustand.gelernt.push(karte); + trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte); + } else { + karte.versuche++; + if (karte.versuche >= 5) { + trainingsZustand.nichtGelernt.push(karte); + trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte); + } else { + trainingsZustand.aktiveKarten.push(trainingsZustand.aktiveKarten.splice(trainingsZustand.aktiveKarten.indexOf(karte), 1)[0]); + } + } + + if (trainingsZustand.aktiveKarten.length < 3 && trainingsZustand.quelleKarten.length > 0) { + let neueKarte = trainingsZustand.quelleKarten.shift(); + neueKarte.versuche = 0; + trainingsZustand.aktiveKarten.push(neueKarte); + } + + zeigeNaechsteKarte(); +} + +// Wählt zufällig eine aktive Karte aus +function zeigeNaechsteKarte() { + if (trainingsZustand.aktiveKarten.length === 0) { + + if (trainingsZustand.quelleKarten.length === 0) { + alert(`Training beendet! + Gelernt: ${trainingsZustand.gelernt.length} + Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`); + return; + } + + const neueKarte = trainingsZustand.quelleKarten.shift(); + neueKarte.versuche = 0; + trainingsZustand.aktiveKarten.push(neueKarte); + } + const index = Math.floor( + Math.random() * trainingsZustand.aktiveKarten.length + ); + + trainingsZustand.aktuelleKarte = + trainingsZustand.aktiveKarten[index]; + + renderLeichtKarte(trainingsZustand.aktuelleKarte); +} + +// Rendert eine einzelne Karte im leichten Modus. +function renderLeichtKarte(karte) { + const container = document.getElementById("trainingLeicht"); + container.innerHTML = ""; + + const cardEl = document.createElement("div"); + cardEl.className = "training-card"; + cardEl.innerHTML = ` +
+
+

${karte.englisch}

+
${karte.ipa}
+
${karte.beispielEN}
+
+
+

${karte.deutsch}

+
${karte.beispielDE}
+
+
+ `; + + cardEl.onclick = () => cardEl.classList.toggle("flip"); + + const actions = document.createElement("div"); + actions.className = "training-actions"; + actions.innerHTML = ` + + + `; + + actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true); + actions.querySelector("#dontKnowBtn").onclick = () => antworteAufKarte(false); + + container.appendChild(cardEl); + container.appendChild(actions); +} + // Startet das Training im Modus "Mittel". function startMittelTraining() { trainingsZustand.modus = "mittel"; trainingsZustand.basisKarten = parsedArray.map(karte => ({ ...karte, - // richtigEN: 0, - // richtigDE: 0, - // fehler: 0, - // verbleibend: 2 erfolge: 0, fehler: 0 })); @@ -202,13 +286,11 @@ function startMittelTraining() { function ladeMittelRunde() { trainingsZustand.aktiveKarten = []; trainingsZustand.ziehKarten = []; - trainingsZustand.zuordnungen = 0; trainingsZustand.richtung = trainingsZustand.rundeNummer % 2 === 0 ? "EN_DE" : "DE_EN"; trainingsZustand.rundeNummer++; mischeArray(trainingsZustand.basisKarten); - trainingsZustand.aktiveKarten = trainingsZustand.basisKarten.slice(0, 4); if(trainingsZustand.aktiveKarten.length === 0) { @@ -298,7 +380,6 @@ function renderMittelMatching() { e.preventDefault(); const draggedIndex = Number(e.dataTransfer.getData("draggedIndex")); - // const targetId = karte.id; swapZiehKarten(draggedIndex, index); }); @@ -375,113 +456,10 @@ function swapZiehKarten(index1, index2) { trainingsZustand.ziehKarten[index2]; trainingsZustand.ziehKarten[index2] = temp; - renderMittelMatching(); -} + const container = document.querySelector(".spalte-rechts"); + const cards = container.children; -// Überprüft eine einzelne Zuordnung im Matching-Modus. -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"); - } -} - -// Wählt zufällig eine aktive Karte aus -function zeigeNaechsteKarte() { - if ( - trainingsZustand.aktiveKarten.length === 0 && - trainingsZustand.quelleKarten.length === 0 - ) { - alert(`Training beendet! - Gelernt: ${trainingsZustand.gelernt.length} - Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`); - return; - } - - const index = Math.floor( - Math.random() * trainingsZustand.aktiveKarten.length - ); - - trainingsZustand.aktuelleKarte = - trainingsZustand.aktiveKarten[index]; - - renderLeichtKarte(trainingsZustand.aktuelleKarte); -} - -// Rendert eine einzelne Karte im leichten Modus. -function renderLeichtKarte(karte) { - const container = document.getElementById("trainingLeicht"); - container.innerHTML = ""; - - const cardEl = document.createElement("div"); - cardEl.className = "training-card"; - cardEl.innerHTML = ` -
-
-

${karte.englisch}

-
${karte.ipa}
-
${karte.beispielEN}
-
-
-

${karte.deutsch}

-
${karte.beispielDE}
-
-
- `; - - cardEl.onclick = () => cardEl.classList.toggle("flip"); - - const actions = document.createElement("div"); - actions.className = "training-actions"; - actions.innerHTML = ` - - - `; - - actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true); - actions.querySelector("#dontKnowBtn").onclick = () => antworteAufKarte(false); - - container.appendChild(cardEl); - container.appendChild(actions); -} - -// Verarbeitet die Antwort des Nutzers im leichten Modus. -function antworteAufKarte(weißIch) { - const karte = trainingsZustand.aktuelleKarte; - - if (weißIch) { - trainingsZustand.gelernt.push(karte); - trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte); - } else { - karte.versuche++; - if (karte.versuche >= 5) { - trainingsZustand.nichtGelernt.push(karte); - trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte); - } else { - trainingsZustand.aktiveKarten.push(trainingsZustand.aktiveKarten.splice(trainingsZustand.aktiveKarten.indexOf(karte), 1)[0]); - } - } - - if (trainingsZustand.aktiveKarten.length < 3 && trainingsZustand.quelleKarten.length > 0) { - let neueKarte = trainingsZustand.quelleKarten.shift(); - neueKarte.versuche = 0; - trainingsZustand.aktiveKarten.push(neueKarte); - } - - zeigeNaechsteKarte(); + container.insertBefore(cards[index2], cards[index1]); } // Blendet alle Trainingslevel-Ansichten aus @@ -494,13 +472,11 @@ function showMode(id) { } function showLevel(id) { - console.log("showLevel called with:", id); + document.getElementById("trainingLeicht").classList.add("hidden"); + document.getElementById("trainingMittel").classList.add("hidden"); + document.getElementById("trainingSchwer").classList.add("hidden"); - document.getElementById("trainingLeicht").style.display = "none"; - document.getElementById("trainingMittel").style.display = "none"; - document.getElementById("trainingSchwer").style.display = "none"; - - document.getElementById(id).style.display = "block"; + document.getElementById(id).classList.remove("hidden"); } document.querySelectorAll(".level-btn").forEach(btn => { diff --git a/MainPage/stas/style.css b/MainPage/stas/style.css index def8949..9ec44ed 100644 --- a/MainPage/stas/style.css +++ b/MainPage/stas/style.css @@ -368,30 +368,33 @@ h1 { #pdfPages, #onlineTraining, -#trainingLeicht, #trainingMittel, #trainingSchwer { display: none; } #trainingMittel { - display: flex !important; + display: flex; justify-content: center; gap: 10px; align-items: flex-start; } +.hidden { + display: none !important; +} + .spalte-links { display: flex; flex-direction: column; - align-items: flex-end; + align-items: stretch; gap: 10px; } .spalte-rechts { display: flex; flex-direction: column; - align-items: flex-start; + align-items: stretch; gap: 10px; } @@ -421,4 +424,4 @@ h1 { background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("verified.jfif"); background-repeat: repeat; background-size: 80px; -} \ No newline at end of file +}