-
-
Wählt einen Schwierigkeitsgrad:
-
🟢 Leicht
-
🟡 Mittel
-
🔴 Schwer
+
+
Wählt eine Trainingsart:
+
+
+ Karte umdrehen
+ Multiple Choice
+ Zuordnen
+ Mit Hinweis schreiben
+ Frei schreiben
+
-
-
-
+
+
+
+
+
+
+ Überprüfen
+
diff --git a/MainPage/stas/eigenerCode.js b/MainPage/stas/eigenerCode.js
index 9073ce2..2bd6707 100644
--- a/MainPage/stas/eigenerCode.js
+++ b/MainPage/stas/eigenerCode.js
@@ -1,5 +1,15 @@
let parsedArray = [];
+// Mischt ein Array zufällig mit dem Fisher-Yates-Algorithmus
+// und gibt das gemischte Array zurück.
+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;
@@ -10,6 +20,7 @@ document.getElementById('copyButton').addEventListener('click', () => {
});
});
+// Analysiert den eingegebenen Text und wandelt ihn in ein Array von Wort-Objekten um.
function parseWordText(inputText) {
const wortBlocks = inputText.trim().split("\n\n");
const wortListe = [];
@@ -23,6 +34,7 @@ function parseWordText(inputText) {
}
const wortObj = {
+ id: crypto.randomUUID(),
englisch: lines[0],
ipa: lines[1],
beispielEN: lines[2],
@@ -36,6 +48,7 @@ function parseWordText(inputText) {
return wortListe;
}
+// Gibt beide Seiten als Objekt zurück.
function createPagePair() {
const frontPage = document.createElement("div");
frontPage.className = "page page-front";
@@ -47,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;
@@ -62,38 +72,26 @@ button.addEventListener("click", () => {
alert("Karten erfolgreich erstellt!");
- showView("modusAuswahlSeite");
- document.getElementById("title").style.display = "none";
- button.style.display = "none";
-
+ document.getElementById("startScreen").style.display = "none";
document.getElementById("modusAuswahlSeite").style.display = "block";
});
-document.querySelectorAll(".modus-btn").forEach(button => {
- button.addEventListener("click", () => {
- const modus = button.dataset.modus;
-
- if (modus === "druck") {
- createPDFPages(parsedArray);
- } else {
- console.log("Gewählter Modus:", modus);
- }
- });
-});
-
+// 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";
@@ -115,28 +113,31 @@ 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', () => {
const modus = btn.dataset.modus;
if (modus === 'druck') {
- showView('pdfPages');
+ showMode('pdfPages');
+ createPDFPages(parsedArray);
}
else if (modus === 'training_einfach') {
- showView('trainingLevels');
+ showMode('onlineTraining');
}
else if (modus === 'statistik') {
@@ -145,165 +146,739 @@ modusBtns.forEach(btn => {
});
});
-let trainingsZustand = {
- modus: "leicht",
- quelleKarten: [],
- aktiveKarten: [],
- gelernt: [],
- nichtGelernt: [],
-};
+// Blendet alle Trainingslevel-Ansichten aus
+function showMode(id) {
-function startLeichtTraining() {
- console.log("🔥 startLeichtTraining вызвана");
+ document.getElementById("pdfPages").style.display = "none";
+ document.getElementById("onlineTraining").style.display = "none";
- if (!parsedArray || parsedArray.length === 0) {
- alert("Нет карточек для тренировки");
- return;
+ document.getElementById(id).style.display = "block";
+}
+
+function showLevel(id) {
+ document.querySelectorAll("#onlineTraining .training-view").forEach(view => {
+ if (view.id !== "trainingLevels") {
+ view.classList.add("hidden");
+ }
+ });
+
+ document.getElementById(id).classList.remove("hidden");
+}
+
+document.querySelectorAll(".level-btn").forEach(btn => {
+ btn.addEventListener("click", () => {
+ const type = btn.dataset.level;
+ console.log("Trainingsart:", type);
+
+ if (type === "flip") {
+ showLevel("trainingFlip");
+ startFlipTraining();
+ document.getElementById("checkBtn").style.display = "none";
+ }
+
+ if (type === "matching") {
+ showLevel("trainingMatching");
+ startMittelTraining();
+ document.getElementById("checkBtn").style.display = "block";
+ }
+
+ if (type === "multiple") {
+ showLevel("trainingMultiple");
+ startMultipleTraining();
+ document.getElementById("checkBtn").style.display = "none";
+ }
+
+ if (type === "hint") {
+ showLevel("trainingHint");
+ startHintTraining();
+ document.getElementById("checkBtn").style.display = "none";
+ }
+
+ if (type === "write") {
+ showLevel("trainingWrite");
+ startWriteTraining();
+ document.getElementById("checkBtn").style.display = "none";
+ }
+ });
+});
+
+class TrainingsEngine {
+
+ constructor(kartenListe) {
+ this.kartenQueue = [];
+ this.letzteKarteId = null;
+ this.gelernt = [];
+ this.nichtGelernt = [];
+
+ // Initialisierung aller Richtungen
+ kartenListe.forEach(karte => {
+ ["EN_DE", "DE_EN"].forEach(richtung => {
+ this.kartenQueue.push({
+ karte: karte,
+ richtung: richtung,
+ korrektInFolge: 0,
+ versuche: 0,
+ maxVersuche: 3,
+ status: "learning"
+ });
+ });
+ });
+
+ this.#mischeQueue();
}
- trainingsZustand.quelleKarten = [...parsedArray];
- trainingsZustand.aktiveKarten = [];
- trainingsZustand.gelernt = [];
- trainingsZustand.nichtGelernt = [];
+ //ÖFFENTLICHE API
- for (let i = 0; i < 3; i++) {
- if (trainingsZustand.quelleKarten.length > 0) {
- const karte = trainingsZustand.quelleKarten.shift();
- karte.versuche = 0;
- trainingsZustand.aktiveKarten.push(karte);
+ naechstesElement() {
+ if (this.kartenQueue.length === 0) return null;
+
+ // Verhindert direkte Wiederholung derselben Karte
+ if (
+ this.kartenQueue.length > 1 &&
+ this.kartenQueue[0].karte.id === this.letzteKarteId
+ ) {
+ const alternativeIndex = this.kartenQueue.findIndex(
+ el => el.karte.id !== this.letzteKarteId
+ );
+
+ if (alternativeIndex !== -1) {
+ const [element] = this.kartenQueue.splice(alternativeIndex, 1);
+ this.kartenQueue.unshift(element);
+ }
+ }
+
+ const aktuellesElement = this.kartenQueue.shift();
+ this.letzteKarteId = aktuellesElement.karte.id;
+
+ return aktuellesElement;
+ }
+
+ antwortVerarbeiten(element, istKorrekt) {
+ if (!element || element.status !== "learning") return;
+
+ element.versuche++;
+
+ if (istKorrekt) {
+ element.korrektInFolge++;
+
+ if (element.korrektInFolge >= 3) {
+ element.status = "gelernt";
+ this.gelernt.push(element);
+ this.kartenQueue = this.kartenQueue.filter(e => e !== element);
+ return;
+ }
+
+ this.#wiederEinreihen(element, 8, 10);
+
+ } else {
+ element.korrektInFolge = 0;
+ element.maxVersuche = 5;
+
+ if (element.versuche >= element.maxVersuche) {
+ element.status = "nichtGelernt";
+ this.nichtGelernt.push(element);
+ this.kartenQueue = this.kartenQueue.filter(e => e !== element);
+ return;
+ }
+
+ this.#wiederEinreihen(element, 2, 3);
}
}
- zeigeNaechsteKarte();
+ istBeendet() {
+ return this.kartenQueue.length === 0;
+ }
+
+ statistik() {
+ const alle = [...this.kartenQueue];
+
+ return {
+ verbleibend: this.kartenQueue.length,
+ gelernt: alle.filter(e => e.status === "gelernt").length,
+ nichtGelernt: alle.filter(e => e.status === "nichtGelernt").length
+ };
+ }
+
+ exportiereZustand() {
+ return JSON.stringify({
+ kartenQueue: this.kartenQueue,
+ letzteKarteId: this.letzteKarteId
+ });
+ }
+
+ ladeZustand(json) {
+ const daten = JSON.parse(json);
+ this.kartenQueue = daten.kartenQueue;
+ this.letzteKarteId = daten.letzteKarteId;
+ }
+
+ //PRIVATE METHODEN
+ #wiederEinreihen(element, minAbstand, maxAbstand) {
+ const zufall =
+ Math.floor(Math.random() * (maxAbstand - minAbstand + 1)) + minAbstand;
+
+ const position = Math.min(zufall, this.kartenQueue.length);
+ this.kartenQueue.splice(position, 0, element);
+ }
+
+ #mischeQueue() {
+ for (let i = this.kartenQueue.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [this.kartenQueue[i], this.kartenQueue[j]] =
+ [this.kartenQueue[j], this.kartenQueue[i]];
+ }
+ }
}
-function zeigeNaechsteKarte() {
- if (
- trainingsZustand.aktiveKarten.length === 0 &&
- trainingsZustand.quelleKarten.length === 0
- ) {
- alert(`Training beendet!
- Gelernt: ${trainingsZustand.gelernt.length}
- Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
+let flipEngine;
+
+function startFlipTraining() {
+ flipEngine = new TrainingsEngine(parsedArray);
+ zeigeNaechsteFlipKarte();
+}
+
+function zeigeNaechsteFlipKarte() {
+ const element = flipEngine.naechstesElement();
+
+ const container = document.getElementById("trainingFlip");
+ container.innerHTML = "";
+
+ if (!element) {
+ container.classList.remove("hidden");
+ container.innerHTML = `
🎉 Training beendet!
`;
return;
}
- const index = Math.floor(
- Math.random() * trainingsZustand.aktiveKarten.length
- );
-
- trainingsZustand.aktuelleKarte =
- trainingsZustand.aktiveKarten[index];
-
- renderLeichtKarte(trainingsZustand.aktuelleKarte);
-}
-
-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}
-
-
- `;
+
+
+
+
+
${element.richtung === "EN_DE" ? element.karte.englisch : element.karte.deutsch}
+ ${element.richtung === "EN_DE" && element.karte.ipa
+ ? `
${element.karte.ipa}
`
+ : ``
+ }
+
+
+ ${element.richtung === "EN_DE"
+ ? element.karte.beispielEN || ""
+ : element.karte.beispielDE || ""
+ }
+
+
+
+
+
+
${element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch}
+ ${element.richtung !== "EN_DE" && element.karte.ipa
+ ? `
${element.karte.ipa}
`
+ : ``
+ }
+
+
+ ${element.richtung === "EN_DE"
+ ? element.karte.beispielDE || ""
+ : element.karte.beispielEN || ""
+ }
+
+
+
+
+`;
cardEl.onclick = () => cardEl.classList.toggle("flip");
const actions = document.createElement("div");
actions.className = "training-actions";
- actions.innerHTML = `
-
✔️ Weiß ich
-
❌ Weiß ich nicht
- `;
+ const knowBtn = document.createElement("button");
+ knowBtn.innerText = "Weiß ich";
+ const dontKnowBtn = document.createElement("button");
+ dontKnowBtn.innerText = "Weiß ich nicht";
- actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true);
- actions.querySelector("#dontKnowBtn").onclick = () => antworteAufKarte(false);
+ knowBtn.onclick = () => {
+ flipEngine.antwortVerarbeiten(element, true);
+ zeigeNaechsteFlipKarte();
+ };
+ dontKnowBtn.onclick = () => {
+ flipEngine.antwortVerarbeiten(element, false);
+ zeigeNaechsteFlipKarte();
+ };
+
+ actions.appendChild(knowBtn);
+ actions.appendChild(dontKnowBtn);
container.appendChild(cardEl);
container.appendChild(actions);
}
-function antworteAufKarte(weißIch) {
- const karte = trainingsZustand.aktuelleKarte;
+let multipleEngine;
- 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);
+function startMultipleTraining() {
+ multipleEngine = new TrainingsEngine(parsedArray);
+ zeigeNaechsteMultipleKarte();
+}
+
+let aktuelleKarte = null;
+let ersteAntwort = true;
+
+function zeigeNaechsteMultipleKarte() {
+ const container = document.getElementById("trainingMultiple");
+ container.innerHTML = "";
+
+ const element = multipleEngine.naechstesElement();
+
+ if (!element) {
+ container.innerHTML = `
🎉 Training beendet!
`;
+ return;
+ }
+
+ aktuelleKarte = element;
+ ersteAntwort = true;
+
+ const frage = document.createElement("div");
+ frage.className = "multiple-frage";
+ frage.innerHTML = `
${element.richtung === "EN_DE" ? element.karte.englisch : element.karte.deutsch} `;
+ container.appendChild(frage);
+
+ const optionen = generiereMultipleOptionen(element);
+ const optionContainer = document.createElement("div");
+ optionContainer.className = "multiple-optionen";
+
+ optionen.forEach(text => {
+ const btn = document.createElement("button");
+ btn.className = "multiple-option";
+ btn.innerText = text;
+
+ btn.onclick = () => {
+ const korrektText = element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch;
+ const istKorrekt = (text === korrektText);
+
+ if (istKorrekt) {
+ btn.style.backgroundColor = "#a8f0a8";
+ if (ersteAntwort) multipleEngine.antwortVerarbeiten(element, true);
+ setTimeout(() => zeigeNaechsteMultipleKarte(), 500);
+
+ } else if (ersteAntwort) {
+ btn.style.backgroundColor = "#f5a8a8";
+ btn.style.textDecoration = "line-through";
+ multipleEngine.antwortVerarbeiten(element, false);
+ ersteAntwort = false;
+ } else {
+ btn.style.backgroundColor = "#f5a8a8";
+ btn.style.textDecoration = "line-through";
+ }
+ };
+
+ optionContainer.appendChild(btn);
+ });
+
+ container.appendChild(optionContainer);
+}
+function generiereMultipleOptionen(element) {
+ const korrekt = element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch;
+
+ const falscheOptionen = parsedArray
+ .filter(k => k.id !== element.karte.id)
+ .map(k => element.richtung === "EN_DE" ? k.deutsch : k.englisch);
+
+ mischeArray(falscheOptionen);
+
+ const optionen = [korrekt, ...falscheOptionen.slice(0, 4)];
+ return mischeArray(optionen);
+}
+
+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;
+}
+
+let hintEngine;
+
+function startHintTraining() {
+ hintEngine = new TrainingsEngine(parsedArray);
+ zeigeNaechsteHintKarte();
+}
+
+function zeigeNaechsteHintKarte() {
+ const container = document.getElementById("trainingHint");
+ container.innerHTML = "";
+
+ const element = hintEngine.naechstesElement();
+
+ if (!element) {
+ container.innerHTML = `
+
+ 🎉 Training beendet!
+ `;
+ return;
+ }
+
+ const korrekt = element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch;
+
+ const frage = document.createElement("div");
+ frage.className = "hint-frage";
+ frage.innerText = element.richtung === "EN_DE" ? element.karte.englisch : element.karte.deutsch;
+ container.appendChild(frage);
+
+ const clue = document.createElement("div");
+ clue.className = "hint-clue";
+ clue.innerText = erstelleClue(korrekt);
+ container.appendChild(clue);
+
+ const input = document.createElement("input");
+ 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.caretColor = "#005b5b";
+ container.appendChild(input);
+
+ const feedback = document.createElement("div");
+ feedback.className = "hint-feedback";
+ feedback.style.marginTop = "10px";
+ container.appendChild(feedback);
+
+ 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();
+ hintEngine.antwortVerarbeiten(element, istKorrekt);
+
+ if (istKorrekt) {
+ input.style.backgroundColor = "#a8f0a8";
+ setTimeout(() => zeigeNaechsteHintKarte(), 500);
+ } else {
+ input.style.backgroundColor = "#f5a8a8";
+ feedback.innerText = `Korrekte Antwort: ${korrekt}`;
+ button.innerText = "Weiter";
+ phase = "next";
+ }
+ } else if (phase === "next") {
+ zeigeNaechsteHintKarte();
+ }
+ };
+
+ button.onclick = pruefeAntwort;
+
+ input.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ pruefeAntwort();
+ }
+ });
+
+ input.focus();
+}
+
+function erstelleClue(text) {
+ if (text.length === 1) return "*";
+
+ const chars = text.split("");
+ let clue = chars.map(char => (char === " " ? " " : "*"));
+
+ const visibleIndices = [];
+ while (visibleIndices.length < Math.max(1, Math.floor(chars.length / 2))) {
+ const idx = Math.floor(Math.random() * chars.length);
+ if (chars[idx] !== " " && !visibleIndices.includes(idx)) {
+ visibleIndices.push(idx);
+ }
+ }
+
+ visibleIndices.forEach(idx => {
+ clue[idx] = chars[idx];
+ });
+
+ return clue.join("");
+}
+
+let writeEngine;
+
+function startWriteTraining() {
+ writeEngine = new TrainingsEngine(parsedArray);
+ zeigeNaechsteWriteKarte();
+}
+
+function zeigeNaechsteWriteKarte() {
+ const container = document.getElementById("trainingWrite");
+ container.innerHTML = "";
+
+ const element = writeEngine.naechstesElement();
+
+ if (!element) {
+ container.innerHTML = `
+
+ 🎉 Training beendet!
+ `;
+ return;
+ }
+
+ const korrekt = element.richtung === "EN_DE" ? element.karte.deutsch : element.karte.englisch;
+
+ const frage = document.createElement("div");
+ 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.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.caretColor = "#005b5b";
+ container.appendChild(input);
+
+ const feedback = document.createElement("div");
+ feedback.className = "hint-feedback";
+ feedback.style.marginTop = "10px";
+ container.appendChild(feedback);
+
+ 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();
+ }
+ };
+
+ 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 {
- 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();
-}
-
-function showView(id) {
- document.querySelectorAll(".modus-view").forEach(view => {
- view.style.display = "none";
- });
-
- const active = document.getElementById(id);
- if (active) {
- active.style.display = "block";
- }
-}
-
-function showTrainingLevel(id) {
- document.querySelectorAll(".training-view").forEach(view => {
- view.style.display = "none";
- });
-
- const active = document.getElementById(id);
- if (active) {
- active.style.display = "block";
- }
-}
-
-document.querySelectorAll(".level-btn").forEach(btn => {
- btn.addEventListener("click", () => {
- const level = btn.dataset.level;
-
- if (level === "leicht") {
- showTrainingLevel("trainingLeicht");
- startLeichtTraining();
- }
-
- if (level === "mittel") {
- showTrainingLevel("trainingMittel");
- startMittelTraining();
- }
-
- if (level === "schwer") {
- showTrainingLevel("trainingSchwer");
- startSchwerTraining();
+ elementDiv.style.backgroundColor = "#f5a8a8";
+ matchingEngine.antwortVerarbeiten(gezogene, false);
}
});
-});
-document
- .querySelector(".modus-btn[data-modus='training_einfach']")
- .addEventListener("click", () => {
- showView("onlineTraining");
-});
+ 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!
+ `;
+ 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 dfe3695..d8824e6 100644
--- a/MainPage/stas/style.css
+++ b/MainPage/stas/style.css
@@ -281,14 +281,53 @@ h1 {
}
}
+#trainingFlip .training-card {
+ height: 180px;
+}
+
+#trainingMatching .training-card {
+ height: 100px;
+ font-size: 0.9rem;
+ margin: 0;
+ margin-top: 10px;
+}
+
.training-card {
width: 300px;
- height: 180px;
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%;
@@ -313,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 {
@@ -334,33 +407,229 @@ h1 {
cursor: pointer;
}
-.training-front h2 {
- margin-bottom: 4px;
- margin-top: -25px;
+#pdfPages,
+#onlineTraining {
+ display: none;
}
-.training-front .ipa {
+#trainingMatching {
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ align-items: flex-start;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.spalte-links {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 10px;
+}
+
+.spalte-rechts {
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 10px;
+}
+
+.drop-zone, .zieh-karte {
+ padding: 10px;
+ margin: 10px 0;
+ background: #fff;
+ border: 2px solid #666;
+ border-radius: 8px;
+}
+
+.zieh-karte {
+ cursor: grab;
+}
+
+#checkBtn {
+ width: 500px;
+ height: 100px;
+ font-size: 46px;
+ font-weight: 600;
+ font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
+ color: #dc6743;
+ border: none;
+ border-radius: 8px;
+ cursor: pointer;
+ box-sizing: border-box;
+ background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url("verified.jfif");
+ background-repeat: repeat;
+ background-size: 80px;
+}
+
+#trainingMultiple {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 20px;
+ margin-top: 30px;
+}
+
+.multiple-frage {
+ text-align: center;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.multiple-optionen {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 300px;
+}
+
+.multiple-option {
+ padding: 10px 15px;
font-size: 16px;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ background-color: #f0f0f0;
+ text-align: center;
+ transition: background-color 0.2s, transform 0.1s;
+}
+
+.multiple-option:hover {
+ background-color: #e0e0e0;
+ transform: scale(1.03);
+}
+
+.multiple-option[disabled] {
+ text-decoration: line-through;
+ background-color: #f5a8a8;
+ color: #800;
+}
+
+#trainingHint {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ margin-top: 30px;
+}
+
+.hint-frage {
+ text-align: center;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.hint-input {
+ width: 300px;
+ font-size: 18px;
+ padding: 10px;
+ text-align: center;
+ border-radius: 6px;
+}
+
+.hint-button {
+ padding: 10px 15px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 6px;
+ border: none;
+ background-color: #005b5b;
+ color: white;
+ transition: 0.2s;
+}
+
+.hint-button:hover {
+ background-color: #007070;
+}
+
+.hint-feedback {
+ font-size: 16px;
+ font-weight: 600;
+ margin-top: 10px;
+}
+
+.hint-clue {
+ font-size: 20px;
+ letter-spacing: 2px;
+ margin-bottom: 10px;
color: #555;
- margin-bottom: 34px;
- margin-top: -12px;
+ text-align: center;
+ font-family: monospace;
}
-.training-front .example {
- font-size: 15px;
- line-height: 1.4;
+#trainingWrite {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 20px;
+ margin-top: 30px;
}
-.training-back h2 {
- margin-bottom: 54px;
- margin-top: -28px;
+#trainingWrite .schwer-frage {
+ text-align: center;
+ font-size: 28px;
+ font-weight: bold;
}
-.modus-view {
- display: none;
+#trainingWrite input[type="text"] {
+ font-size: 18px;
+ border-radius: 6px;
}
-.training-view {
- display: none;
- margin-top: 25px;
+#trainingWrite button {
+ padding: 10px 15px;
+ font-size: 16px;
+ cursor: pointer;
+ border-radius: 6px;
+ border: none;
+ background-color: #005b5b;
+ color: white;
+ transition: 0.2s;
+}
+
+#trainingWrite button:hover {
+ background-color: #007070;
+}
+
+#trainingLevels {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ width: 100%;
+}
+
+.training-title {
+ margin: 0 0 10px 0;
+ font-size: 20px;
+ font-weight: 600;
+ text-align: left;
+}
+
+#trainingLevels .buttons-row {
+ display: flex;
+ gap: 10px;
+ width: 100%;
+}
+
+#trainingLevels .buttons-row .level-btn {
+ flex: 1;
+ padding: 12px 0;
+ font-size: 16px;
+ font-weight: 600;
+ border: none;
+ border-radius: 8px;
+ background-color: #f0f0f0;
+ cursor: pointer;
+ text-align: center;
+ transition: background-color 0.2s, transform 0.1s;
+}
+
+#trainingLevels .buttons-row .level-btn:hover {
+ background-color: #e0e0e0;
+ transform: scale(1.02);
}
diff --git a/MainPage/stas/verified.jfif b/MainPage/stas/verified.jfif
new file mode 100644
index 0000000..6e5780b
Binary files /dev/null and b/MainPage/stas/verified.jfif differ
diff --git a/Readme.md b/Readme.md
new file mode 100644
index 0000000..149a237
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,22 @@
+# Lernplattform Projekt
+
+Dies ist unser Lernplattform-Projekt, entwickelt von:
+
+- Abdelaziz Elouazzani
+- Younes El Haddoury
+- Ayman Alshian
+- Stanislav Kharchenko
+- Saad Akki
+
+---
+
+## Projektbeschreibung
+
+Dieses Projekt ist eine Lernplattform, die verschiedene Funktionen zum Üben und Lernen bietet.
+
+---
+
+## Abgabe & Download
+
+- **Git-Repository:** [Zum Repository](https://git.bib.de/PBT3H24AKH/LerningCSW.git)
+- **Projekt als ZIP herunterladen:** [Download ZIP](https://git.bib.de/PBT3H24AKH/LerningCSW/archive/refs/heads/main.zip)