- Training beendet!
- Gelernt: ${trainingsZustand.gelernt.length}
- Nicht gelernt: ${trainingsZustand.nichtGelernt.length}
+
+ 🎉 Training beendet!
+ Gelernt: ${writeEngine.gelernt.length}
+ Nicht gelernt: ${writeEngine.nichtGelernt.length}
`;
return;
}
- const karte = trainingsZustand.quelleKarten.shift();
- trainingsZustand.aktuelleKarte = karte;
-
- const container = document.getElementById("trainingWrite");
- container.innerHTML = "";
+ const korrekt = element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch;
const frage = document.createElement("div");
- frage.className = "schwer-frage";
- frage.innerHTML = `
${karte.englisch}
`;
+ frage.className = "hint-frage";
+ frage.innerHTML = element.richtung === "EN_DE" ? element.karte.englisch : element.karte.deutsch;
container.appendChild(frage);
const input = document.createElement("input");
- input.type = "text";
- input.placeholder = "Schreibe die Übersetzung hier...";
+ input.className = "hint-input";
+ input.placeholder = "Schreibe die Übersetzung...";
+ input.autofocus = true;
input.style.fontSize = "18px";
+ input.style.padding = "5px 10px";
+ input.style.border = "2px solid #005b5b";
+ input.style.borderRadius = "6px";
input.style.width = "300px";
- input.style.padding = "8px";
+ input.style.caretColor = "#005b5b";
container.appendChild(input);
- const submitBtn = document.createElement("button");
- submitBtn.innerText = "Überprüfen";
- submitBtn.style.marginTop = "10px";
- submitBtn.onclick = () => {
- const answer = input.value.trim();
- const resultDiv = document.createElement("div");
- resultDiv.style.marginTop = "12px";
- resultDiv.style.fontWeight = "600";
+ const feedback = document.createElement("div");
+ feedback.className = "hint-feedback";
+ feedback.style.marginTop = "10px";
+ container.appendChild(feedback);
- if (answer.toLowerCase() === karte.deutsch.toLowerCase()) {
- trainingsZustand.gelernt.push(karte);
- resultDiv.style.color = "#28a745";
- resultDiv.innerText = "Richtig!";
- } else {
- trainingsZustand.nichtGelernt.push(karte);
- resultDiv.style.color = "#dc3545";
- resultDiv.innerText = `Falsch! Richtige Antwort: ${karte.deutsch}`;
+ const button = document.createElement("button");
+ button.className = "hint-button";
+ button.innerText = "Überprüfen";
+ container.appendChild(button);
+
+ let phase = "check";
+
+ const pruefeAntwort = () => {
+ if (phase === "check") {
+ const userAnswer = input.value.trim();
+ if (!userAnswer) return;
+
+ const istKorrekt = userAnswer.toLowerCase() === korrekt.toLowerCase();
+ writeEngine.antwortVerarbeiten(element, istKorrekt);
+
+ if (istKorrekt) {
+ input.style.backgroundColor = "#a8f0a8";
+ setTimeout(() => zeigeNaechsteWriteKarte(), 500);
+ } else {
+ input.style.backgroundColor = "#f5a8a8";
+ feedback.innerText = `Korrekte Antwort: ${korrekt}`;
+ button.innerText = "Weiter";
+ phase = "next";
+ }
+ } else if (phase === "next") {
+ zeigeNaechsteWriteKarte();
}
-
- container.appendChild(resultDiv);
-
- setTimeout(() => zeigeNaechsteWriteKarte(), 2000);
};
- container.appendChild(submitBtn);
+ button.onclick = pruefeAntwort;
+ input.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ pruefeAntwort();
+ }
+ });
+
+ input.focus();
}
+
+let matchingEngine;
+let matchingRunde = 0;
+let linkeKarten = [];
+let rechteKarten = [];
+let aktuelleRichtung = "EN_DE";
+
+function startMittelTraining() {
+ matchingEngine = new TrainingsEngine(parsedArray);
+ matchingRunde = 0;
+ ladeMatchingRunde();
+}
+
+function ladeMatchingRunde() {
+ const container = document.getElementById("trainingMatching");
+ container.innerHTML = "";
+
+ aktuelleRichtung = matchingRunde % 2 === 0 ? "EN_DE" : "DE_EN";
+ matchingRunde++;
+
+ const learningCards = matchingEngine.kartenQueue.filter(e => e.status === "learning");
+
+ linkeKarten = learningCards
+ .reduce((acc, el) => {
+ if (!acc.find(a => a.karte.id === el.karte.id)) acc.push(el);
+ return acc;
+ }, [])
+ .slice(0, 4);
+
+ rechteKarten = mischeArray([...linkeKarten]);
+
+ const linksDiv = document.createElement("div");
+ linksDiv.className = "spalte-links";
+
+ const rechtsDiv = document.createElement("div");
+ rechtsDiv.className = "spalte-rechts";
+
+ linkeKarten.forEach(k => {
+ const dropZone = document.createElement("div");
+ dropZone.className = "training-card drop-zone";
+ dropZone.dataset.id = k.karte.id;
+
+ dropZone.innerHTML = `
+
+
${aktuelleRichtung === "EN_DE" ? k.karte.englisch : k.karte.deutsch}
+ ${aktuelleRichtung === "EN_DE" && k.karte.ipa ? `
${k.karte.ipa}
` : ""}
+
+
+ ${aktuelleRichtung === "EN_DE" ? k.karte.beispielEN || "" : k.karte.beispielDE || ""}
+
+ `;
+ linksDiv.appendChild(dropZone);
+ });
+
+ rechteKarten.forEach((k, index) => {
+ const ziehKarte = document.createElement("div");
+ ziehKarte.className = "training-card zieh-karte";
+ ziehKarte.draggable = true;
+ ziehKarte.dataset.index = index;
+
+ const zeigeEnglisch = aktuelleRichtung === "DE_EN";
+ ziehKarte.innerHTML = `
+
+
${zeigeEnglisch ? k.karte.englisch : k.karte.deutsch}
+ ${zeigeEnglisch && k.karte.ipa ? `
${k.karte.ipa}
` : ""}
+
+
+ ${zeigeEnglisch ? k.karte.beispielEN || "" : k.karte.beispielDE || ""}
+
+ `;
+
+ ziehKarte.addEventListener("dragstart", e => e.dataTransfer.setData("draggedIndex", index));
+ ziehKarte.addEventListener("dragover", e => e.preventDefault());
+ ziehKarte.addEventListener("drop", e => {
+ e.preventDefault();
+ const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
+ swapZiehKarten(draggedIndex, index, linksDiv, rechtsDiv);
+ });
+
+ rechtsDiv.appendChild(ziehKarte);
+ });
+
+ container.appendChild(linksDiv);
+ container.appendChild(rechtsDiv);
+}
+
+function renderMatchingRechts(linksDiv, rechtsDiv) {
+ rechtsDiv.innerHTML = "";
+
+ rechteKarten.forEach((k, index) => {
+ const ziehKarte = document.createElement("div");
+ ziehKarte.className = "training-card zieh-karte";
+ ziehKarte.draggable = true;
+ ziehKarte.dataset.index = index;
+
+ const zeigeEnglisch = (aktuelleRichtung === "DE_EN");
+ ziehKarte.innerHTML = `
+
+
${zeigeEnglisch ? k.karte.englisch : k.karte.deutsch}
+ ${zeigeEnglisch && k.karte.ipa
+ ? `
${k.karte.ipa}
`
+ : ""
+ }
+
+
+ ${zeigeEnglisch
+ ? k.karte.beispielEN || ""
+ : k.karte.beispielDE || ""
+ }
+
+ `;
+
+ ziehKarte.addEventListener("dragstart", e => e.dataTransfer.setData("draggedIndex", index));
+ ziehKarte.addEventListener("dragover", e => e.preventDefault());
+ ziehKarte.addEventListener("drop", e => {
+ e.preventDefault();
+ const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
+ swapZiehKarten(draggedIndex, index, linksDiv, rechtsDiv);
+ });
+
+ rechtsDiv.appendChild(ziehKarte);
+ });
+
+ const container = document.getElementById("trainingMatching");
+ container.appendChild(linksDiv);
+ container.appendChild(rechtsDiv);
+}
+
+function swapZiehKarten(fromIndex, toIndex, linksDiv, rechtsDiv) {
+ const temp = rechteKarten[fromIndex];
+ rechteKarten[fromIndex] = rechteKarten[toIndex];
+ rechteKarten[toIndex] = temp;
+ renderMatchingRechts(linksDiv, rechtsDiv);
+}
+
+function pruefeRunde() {
+ const ziehElemente = document.querySelectorAll(".zieh-karte");
+
+ linkeKarten.forEach((k, index) => {
+ const gezogene = rechteKarten[index];
+ const elementDiv = ziehElemente[index];
+
+ if (k.karte.id === gezogene.karte.id) {
+ elementDiv.style.backgroundColor = "#a8f0a8";
+ matchingEngine.antwortVerarbeiten(gezogene, true);
+ } else {
+ elementDiv.style.backgroundColor = "#f5a8a8";
+ matchingEngine.antwortVerarbeiten(gezogene, false);
+ }
+ });
+
+ const learningLeft = matchingEngine.kartenQueue.length;
+ const gelerntCount = matchingEngine.gelernt.length;
+ const nichtGelerntCount = matchingEngine.nichtGelernt.length;
+
+ if (learningLeft === 0) {
+ const container = document.getElementById("trainingMatching");
+ container.innerHTML = `
+
+ 🎉 Training beendet!
+ Gelernt: ${gelerntCount}
+ Nicht gelernt: ${nichtGelerntCount}
+
+ `;
+ const checkBtn = document.getElementById("checkBtn");
+ if (checkBtn) checkBtn.style.display = "none";
+ return;
+ }
+
+ setTimeout(() => {
+ ladeMatchingRunde();
+ }, 1000);
+}
+
+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;
+}
\ No newline at end of file
diff --git a/MainPage/stas/style.css b/MainPage/stas/style.css
index 1c2c5ab..d8824e6 100644
--- a/MainPage/stas/style.css
+++ b/MainPage/stas/style.css
@@ -281,13 +281,6 @@ h1 {
}
}
-.training-card {
- width: 300px;
- margin: 10px auto;
- perspective: 1000px;
- cursor: pointer;
-}
-
#trainingFlip .training-card {
height: 180px;
}
@@ -299,6 +292,42 @@ h1 {
margin-top: 10px;
}
+.training-card {
+ width: 300px;
+ margin: 10px auto;
+ perspective: 1000px;
+ cursor: pointer;
+ box-sizing: border-box;
+}
+
+#trainingMatching .drop-zone,
+#trainingMatching .zieh-karte {
+ min-height: 120px;
+ max-height: 120px;
+ width: 300px;
+ background: #fff;
+ border: 2px solid #666;
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ font-size: 0.9rem;
+ padding: 5px;
+ box-sizing: border-box;
+ text-align: center;
+}
+
+ #trainingMatching .drop-zone h2,
+ #trainingMatching .zieh-karte h2,
+ #trainingMatching .drop-zone .ipa,
+ #trainingMatching .zieh-karte .ipa,
+ #trainingMatching .drop-zone .example,
+ #trainingMatching .zieh-karte .example {
+ margin: 2px 0;
+ overflow: hidden;
+ }
+
.training-card-inner {
width: 100%;
height: 100%;
@@ -323,8 +352,42 @@ h1 {
box-sizing: border-box;
display: flex;
flex-direction: column;
- justify-content: center;
- gap: 10px;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.card-top {
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 2px;
+}
+
+.card-top h2 {
+ margin: 0;
+ line-height: 1.1;
+}
+
+.card-top h3 {
+ margin: 0;
+ line-height: 1.1;
+}
+
+.card-top .ipa {
+ margin: 0;
+ line-height: 1.1;
+}
+
+.card-example {
+ margin-top: auto;
+ text-align: center;
+ font-size: 15px;
+ line-height: 1.4;
+}
+
+.ipa {
+ font-size: 16px;
+ color: #555;
}
.training-back {
@@ -344,28 +407,6 @@ h1 {
cursor: pointer;
}
-.training-front h2 {
- margin-bottom: 4px;
- margin-top: -25px;
-}
-
-.training-front .ipa {
- font-size: 16px;
- color: #555;
- margin-bottom: 34px;
- margin-top: -12px;
-}
-
-.training-front .example {
- font-size: 15px;
- line-height: 1.4;
-}
-
-.training-back h2 {
- margin-bottom: 54px;
- margin-top: -28px;
-}
-
#pdfPages,
#onlineTraining {
display: none;