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
+}