-
-
-
-
-
- - Bitte formatiere meine Wortliste exakt nach folgendem Schema. - Jeder Eintrag muss durch eine Leerzeile getrennt sein. - - Englisches Wort - [IPA-Transkription] - Beispielsatz auf Englisch - Deutsche Übersetzung des Wortes - Beispielsatz auf Deutsch -- -
+
+
+
-
-
-
+
+
+
+
+ + Bitte formatiere meine Wortliste exakt nach folgendem Schema. + Jeder Eintrag muss durch eine Leerzeile getrennt sein. + + Englisches Wort + [IPA-Transkription] + Beispielsatz auf Englisch + Deutsche Übersetzung des Wortes + Beispielsatz auf Deutsch ++ +
+
+
+
+
+
+
-
-
-
+
+
-
Wählt einen Modus:
+
-
+
-
- `;
- 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 = `
+ `;} else {
+ dropZone.innerHTML = `
- `;
+ `;}
+
+ links.appendChild(dropZone);
+ });
+
+ // draggable + droppable (swap)
+ trainingsZustand.ziehKarten.forEach((karte, index) => {
+ const ziehKarte = document.createElement("div");
+ ziehKarte.className = "training-card zieh-karte";
+ ziehKarte.draggable = true;
+ ziehKarte.dataset.index = index;
+
+ if(trainingsZustand.richtung === "EN_DE") {
+ ziehKarte.innerHTML = `
+
+
-
-
-
+
+
+
diff --git a/MainPage/stas/eigenerCode.js b/MainPage/stas/eigenerCode.js
index ec8704e..ba0f608 100644
--- a/MainPage/stas/eigenerCode.js
+++ b/MainPage/stas/eigenerCode.js
@@ -1,5 +1,7 @@
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));
@@ -18,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 = [];
@@ -45,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";
@@ -71,26 +75,12 @@ 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");
@@ -141,11 +131,12 @@ modusBtns.forEach(btn => {
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') {
@@ -158,13 +149,18 @@ let trainingsZustand = {
modus: "leicht",
// für alle Level
quelleKarten: [],
+ basisKarten: [],
aktiveKarten: [],
gelernt: [],
nichtGelernt: [],
// für Mittel
- ziehKarten: []
+ ziehKarten: [],
+ rundeNummer: 0,
+ richtung: "EN_DE",
+ zuordnungen: 0,
};
+// Startet das Training im Modus "Leicht".
function startLeichtTraining() {
trainingsZustand.modus = "leicht";
trainingsZustand.quelleKarten = [...parsedArray];
@@ -182,43 +178,52 @@ function startLeichtTraining() {
zeigeNaechsteKarte();
}
+// Startet das Training im Modus "Mittel".
function startMittelTraining() {
- // console.log("startMilletTraining");
-
trainingsZustand.modus = "mittel";
- trainingsZustand.quelleKarten = [...parsedArray];
+ trainingsZustand.basisKarten = parsedArray.map(karte => ({
+ ...karte,
+ // richtigEN: 0,
+ // richtigDE: 0,
+ // fehler: 0,
+ // verbleibend: 2
+ erfolge: 0,
+ fehler: 0
+ }));
+
trainingsZustand.gelernt = [];
trainingsZustand.nichtGelernt = [];
+ trainingsZustand.rundeNummer = 0;
ladeMittelRunde();
}
+// Lädt eine neue Runde im mittleren Trainingsmodus.
function ladeMittelRunde() {
- // console.log("ladeMittelRunde start");
trainingsZustand.aktiveKarten = [];
trainingsZustand.ziehKarten = [];
+ trainingsZustand.zuordnungen = 0;
- for(let i=0; i < 4; i++) {
- if(trainingsZustand.quelleKarten.length > 0) {
- trainingsZustand.aktiveKarten.push(
- trainingsZustand.quelleKarten.shift()
- );
- }
- }
-
- trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
+ 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) {
alert(`Training beendet!
- Gelernt: ${trainingsZustand.gelernt.length}`);
+ Gelernt: ${trainingsZustand.gelernt.length}
+ Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
return;
}
+
+ trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
+
renderMittelMatching();
}
-console.log("aktiveKarten:", trainingsZustand.aktiveKarten);
-console.log("ziehKarten:", trainingsZustand.ziehKarten);
-
+// Rendert das Matching-Layout für den mittleren Modus.
function renderMittelMatching() {
const container = document.getElementById("trainingMittel");
container.innerHTML = "";
@@ -233,33 +238,52 @@ function renderMittelMatching() {
trainingsZustand.aktiveKarten.forEach(karte => {
const dropZone = document.createElement("div");
dropZone.className = "training-card drop-zone";
+ dropZone.dataset.id = karte.id;
+
+ if(trainingsZustand.richtung === "EN_DE") {
dropZone.innerHTML = `
Wählt einen Schwierigkeitsgrad:
+
+
${karte.englisch}
${karte.ipa}
${karte.beispielEN}
${karte.deutsch}
${karte.beispielDE}
+
+ `;} else {
+ ziehKarte.innerHTML = `
+ ${karte.deutsch}
+${karte.beispielDE}
+
+
+ `;}
// dragstart
ziehKarte.addEventListener("dragstart", e => {
- e.dataTransfer.setData("draggedId", karte.id);
+ console.log("dragstart работает");
+ e.dataTransfer.setData("draggedIndex", index);
});
// dragover
@@ -269,12 +293,14 @@ function renderMittelMatching() {
// drop
ziehKarte.addEventListener("drop", e => {
+ console.log("drop работает");
+
e.preventDefault();
- const draggedId = e.dataTransfer.getData("draggedId");
- const targetId = karte.id;
+ const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
+ // const targetId = karte.id;
- swapZiehKarten(draggedId, targetId);
+ swapZiehKarten(draggedIndex, index);
});
rechts.appendChild(ziehKarte);
@@ -284,24 +310,75 @@ function renderMittelMatching() {
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);
+// Überprüft, ob die Zuordnungen korrekt sind.
+function pruefeRunde() {
- if (draggedIndex === -1 || targetIndex === -1) return;
+ const ziehElemente = document.querySelectorAll(".zieh-karte");
- const temp = trainingsZustand.ziehKarten[draggedIndex];
- trainingsZustand.ziehKarten[draggedIndex] = trainingsZustand.ziehKarten[targetIndex];
- trainingsZustand.ziehKarten[targetIndex] = temp;
+ trainingsZustand.aktiveKarten.forEach((karte, index) => {
+
+ const gezogene = trainingsZustand.ziehKarten[index];
+ const element = ziehElemente[index];
+
+ element.style.backgroundColor = "";
+
+ if (karte.id === gezogene.id) {
+ element.style.backgroundColor = "#a8f0a8";
+ karte.erfolge++;
+ } else {
+ element.style.backgroundColor = "#f5a8a8";
+ karte.fehler++;
+ }
+
+ });
+
+ setTimeout(() => {
+ beendeMittelRunde();
+ }, 1000);
+}
+
+// Bewertet nach jeder Runde den Lernstatus jeder Karte.
+function beendeMittelRunde() {
+
+ const verbleibende = [];
+
+ trainingsZustand.basisKarten.forEach(karte => {
+
+ if (karte.erfolge >= 2) {
+ trainingsZustand.gelernt.push(karte);
+ }
+ else if (karte.fehler >= 4) {
+ trainingsZustand.nichtGelernt.push(karte);
+ }
+ else {
+ verbleibende.push(karte);
+ }
+ });
+
+ trainingsZustand.basisKarten = verbleibende;
+
+ if (trainingsZustand.basisKarten.length === 0) {
+ alert(`Training beendet!
+ Gelernt: ${trainingsZustand.gelernt.length}
+ Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
+ return;
+ }
+
+ ladeMittelRunde();
+}
+
+// Tauscht zwei Ziehkarten anhand ihrer Indizes
+function swapZiehKarten(index1, index2) {
+
+ const temp = trainingsZustand.ziehKarten[index1];
+ trainingsZustand.ziehKarten[index1] =
+ trainingsZustand.ziehKarten[index2];
+ trainingsZustand.ziehKarten[index2] = 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");
-}
-
+// Überprüft eine einzelne Zuordnung im Matching-Modus.
function pruefeZuordnung(ziehId, dropId) {
if(ziehId === dropId) {
const karte = trainingsZustand.aktiveKarten.find(k => k.id == ziehId);
@@ -322,6 +399,7 @@ function pruefeZuordnung(ziehId, dropId) {
}
}
+// Wählt zufällig eine aktive Karte aus
function zeigeNaechsteKarte() {
if (
trainingsZustand.aktiveKarten.length === 0 &&
@@ -343,6 +421,7 @@ function zeigeNaechsteKarte() {
renderLeichtKarte(trainingsZustand.aktuelleKarte);
}
+// Rendert eine einzelne Karte im leichten Modus.
function renderLeichtKarte(karte) {
const container = document.getElementById("trainingLeicht");
container.innerHTML = "";
@@ -379,6 +458,7 @@ function renderLeichtKarte(karte) {
container.appendChild(actions);
}
+// Verarbeitet die Antwort des Nutzers im leichten Modus.
function antworteAufKarte(weißIch) {
const karte = trainingsZustand.aktuelleKarte;
@@ -404,51 +484,49 @@ function antworteAufKarte(weißIch) {
zeigeNaechsteKarte();
}
-function showView(id) {
- document.querySelectorAll(".modus-view").forEach(view => {
- view.style.display = "none";
- });
+// Blendet alle Trainingslevel-Ansichten aus
+function showMode(id) {
- const active = document.getElementById(id);
- if (active) {
- active.style.display = "block";
- }
+ document.getElementById("pdfPages").style.display = "none";
+ document.getElementById("onlineTraining").style.display = "none";
+
+ document.getElementById(id).style.display = "block";
}
-function showTrainingLevel(id) {
- document.querySelectorAll(".training-view").forEach(view => {
- view.style.display = "none";
- });
+function showLevel(id) {
+ console.log("showLevel called with:", id);
- const active = document.getElementById(id);
- if (active) {
- active.style.display = "block";
- }
+ 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.querySelectorAll(".level-btn").forEach(btn => {
btn.addEventListener("click", () => {
const level = btn.dataset.level;
+ console.log("Level ausgewähl:", level);
if (level === "leicht") {
- showTrainingLevel("trainingLeicht");
+ showLevel("trainingLeicht");
startLeichtTraining();
+
+ document.getElementById("checkBtn").style.display = "none";
}
if (level === "mittel") {
- showTrainingLevel("trainingMittel");
+ showLevel("trainingMittel");
startMittelTraining();
+
+ document.getElementById("checkBtn").style.display = "block";
}
if (level === "schwer") {
- showTrainingLevel("trainingSchwer");
+ showLevel("trainingSchwer");
startSchwerTraining();
+
+ document.getElementById("checkBtn").style.display = "none";
}
});
});
-
-document
- .querySelector(".modus-btn[data-modus='training_einfach']")
- .addEventListener("click", () => {
- showView("onlineTraining");
-});
diff --git a/MainPage/stas/style.css b/MainPage/stas/style.css
index 7ef8c2e..def8949 100644
--- a/MainPage/stas/style.css
+++ b/MainPage/stas/style.css
@@ -283,12 +283,22 @@ h1 {
.training-card {
width: 300px;
- height: 180px;
margin: 10px auto;
perspective: 1000px;
cursor: pointer;
}
+#trainingLeicht .training-card {
+ height: 180px;
+}
+
+#trainingMittel .training-card {
+ height: 100px;
+ font-size: 0.9rem;
+ margin: 0;
+ margin-top: 10px;
+}
+
.training-card-inner {
width: 100%;
height: 100%;
@@ -356,33 +366,34 @@ h1 {
margin-top: -28px;
}
-.modus-view {
+#pdfPages,
+#onlineTraining,
+#trainingLeicht,
+#trainingMittel,
+#trainingSchwer {
display: none;
}
-.training-view {
- display: none;
- margin-top: 25px;
-}
-
#trainingMittel {
display: flex !important;
- gap: 20px;
+ justify-content: center;
+ gap: 10px;
align-items: flex-start;
}
-.spalte-links,
-.spalte-rechts {
+.spalte-links {
display: flex;
- flex: 1;
flex-direction: column;
- gap: 12px;
- min-height: 300px;
- border: 1px dashed #ccc;
- padding: 0;
- align-items: center;
+ align-items: flex-end;
+ gap: 10px;
}
+.spalte-rechts {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+}
.drop-zone, .zieh-karte {
padding: 10px;
@@ -395,3 +406,19 @@ h1 {
.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;
+}
\ No newline at end of file
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
${karte.englisch}
+${karte.ipa}
+ ${karte.beispielEN}
+