765 lines
23 KiB
JavaScript
765 lines
23 KiB
JavaScript
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;
|
|
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('Format wurde in die Zwischenablage kopiert!');
|
|
}).catch(err => {
|
|
console.error('Konnte nicht kopieren: ', err);
|
|
});
|
|
});
|
|
|
|
// 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 = [];
|
|
|
|
for (let block of wortBlocks) {
|
|
const lines = block.trim().split("\n").map(line => line.trim());
|
|
|
|
if (lines.length !== 5) {
|
|
console.warn("Block übersprungen (falsches Format):", block);
|
|
continue;
|
|
}
|
|
|
|
const wortObj = {
|
|
id: crypto.randomUUID(),
|
|
englisch: lines[0],
|
|
ipa: lines[1],
|
|
beispielEN: lines[2],
|
|
deutsch: lines[3],
|
|
beispielDE: lines[4]
|
|
};
|
|
|
|
wortListe.push(wortObj);
|
|
}
|
|
|
|
return wortListe;
|
|
}
|
|
|
|
// Gibt beide Seiten als Objekt zurück.
|
|
function createPagePair() {
|
|
const frontPage = document.createElement("div");
|
|
frontPage.className = "page page-front";
|
|
|
|
const backPage = document.createElement("div");
|
|
backPage.className = "page page-back";
|
|
|
|
return { frontPage, backPage };
|
|
}
|
|
|
|
const button = document.getElementById("kartenErstellen");
|
|
|
|
button.addEventListener("click", () => {
|
|
const inputText = document.getElementById("inputText").value;
|
|
parsedArray = parseWordText(inputText);
|
|
|
|
if(parsedArray.length === 0) {
|
|
alert("Kein gültiges Format erkannt. Bitte überprüfe deine Eingabe.");
|
|
return;
|
|
}
|
|
|
|
alert("Karten erfolgreich erstellt!");
|
|
|
|
|
|
document.getElementById("startScreen").style.display = "none";
|
|
document.getElementById("modusAuswahlSeite").style.display = "block";
|
|
});
|
|
|
|
// 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 < wordArray.length; i += 8) {
|
|
|
|
const { frontPage, backPage } = createPagePair();
|
|
|
|
wordArray.slice(i, i + 8).forEach((karte) => {
|
|
|
|
const frontCard = document.createElement("div");
|
|
frontCard.className = "card card-en";
|
|
frontCard.innerHTML = `
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
`;
|
|
frontPage.appendChild(frontCard);
|
|
|
|
const backCard = document.createElement("div");
|
|
backCard.className = "card card-de";
|
|
backCard.innerHTML = `
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
`;
|
|
backPage.appendChild(backCard);
|
|
});
|
|
|
|
kartenContainer.appendChild(frontPage);
|
|
kartenContainer.appendChild(backPage);
|
|
}
|
|
|
|
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');
|
|
|
|
modusBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const modus = btn.dataset.modus;
|
|
|
|
if (modus === 'druck') {
|
|
showMode('pdfPages');
|
|
createPDFPages(parsedArray);
|
|
}
|
|
|
|
else if (modus === 'training_einfach') {
|
|
showMode('onlineTraining');
|
|
}
|
|
|
|
else if (modus === 'statistik') {
|
|
console.log("Statistik anzeigen...");
|
|
}
|
|
});
|
|
});
|
|
|
|
let trainingsZustand = {
|
|
modus: "leicht",
|
|
// für alle Level
|
|
quelleKarten: [],
|
|
basisKarten: [],
|
|
aktiveKarten: [],
|
|
gelernt: [],
|
|
nichtGelernt: [],
|
|
// für Mittel
|
|
ziehKarten: [],
|
|
rundeNummer: 0,
|
|
richtung: "EN_DE",
|
|
};
|
|
|
|
// Startet das Training im Modus "Leicht".
|
|
function startLeichtTraining() {
|
|
trainingsZustand.modus = "leicht";
|
|
trainingsZustand.quelleKarten = [...parsedArray];
|
|
trainingsZustand.aktiveKarten = [];
|
|
trainingsZustand.gelernt = [];
|
|
trainingsZustand.nichtGelernt = [];
|
|
|
|
for (let i = 0; i < 3; i++) {
|
|
if (trainingsZustand.quelleKarten.length > 0) {
|
|
const karte = trainingsZustand.quelleKarten.shift();
|
|
karte.versuche = 0;
|
|
trainingsZustand.aktiveKarten.push(karte);
|
|
}
|
|
}
|
|
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("trainingFlip");
|
|
container.innerHTML = "";
|
|
|
|
const cardEl = document.createElement("div");
|
|
cardEl.className = "training-card";
|
|
cardEl.innerHTML = `
|
|
<div class="training-card-inner">
|
|
<div class="training-front">
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
</div>
|
|
<div class="training-back">
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
cardEl.onclick = () => cardEl.classList.toggle("flip");
|
|
|
|
const actions = document.createElement("div");
|
|
actions.className = "training-actions";
|
|
actions.innerHTML = `
|
|
<button id="knowBtn">Weiß ich</button>
|
|
<button id="dontKnowBtn">Weiß ich nicht</button>
|
|
`;
|
|
|
|
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,
|
|
erfolge: 0,
|
|
fehler: 0
|
|
}));
|
|
|
|
trainingsZustand.gelernt = [];
|
|
trainingsZustand.nichtGelernt = [];
|
|
trainingsZustand.rundeNummer = 0;
|
|
|
|
ladeMittelRunde();
|
|
}
|
|
|
|
// Lädt eine neue Runde im mittleren Trainingsmodus.
|
|
function ladeMittelRunde() {
|
|
trainingsZustand.aktiveKarten = [];
|
|
trainingsZustand.ziehKarten = [];
|
|
|
|
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}
|
|
Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
|
|
return;
|
|
}
|
|
|
|
trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
|
|
|
|
renderMittelMatching();
|
|
}
|
|
|
|
// Rendert das Matching-Layout für den mittleren Modus.
|
|
function renderMittelMatching() {
|
|
const container = document.getElementById("trainingMatching");
|
|
container.innerHTML = "";
|
|
|
|
const links = document.createElement("div");
|
|
links.className = "spalte-links";
|
|
|
|
const rechts = document.createElement("div");
|
|
rechts.className = "spalte-rechts";
|
|
|
|
// Linke Zone
|
|
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 = `
|
|
<div class="">
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
</div>
|
|
`;} else {
|
|
dropZone.innerHTML = `
|
|
<div class="">
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
</div>
|
|
`;}
|
|
|
|
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 = `
|
|
<div class="">
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
</div>
|
|
`;} else {
|
|
ziehKarte.innerHTML = `
|
|
<div class="">
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
</div>
|
|
`;}
|
|
|
|
// dragstart
|
|
ziehKarte.addEventListener("dragstart", e => {
|
|
console.log("dragstart работает");
|
|
e.dataTransfer.setData("draggedIndex", index);
|
|
});
|
|
|
|
// dragover
|
|
ziehKarte.addEventListener("dragover", e => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
// drop
|
|
ziehKarte.addEventListener("drop", e => {
|
|
console.log("drop работает");
|
|
|
|
e.preventDefault();
|
|
|
|
const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
|
|
|
|
swapZiehKarten(draggedIndex, index);
|
|
});
|
|
|
|
rechts.appendChild(ziehKarte);
|
|
});
|
|
|
|
container.appendChild(links);
|
|
container.appendChild(rechts);
|
|
}
|
|
|
|
// Überprüft, ob die Zuordnungen korrekt sind.
|
|
function pruefeRunde() {
|
|
|
|
const ziehElemente = document.querySelectorAll(".zieh-karte");
|
|
|
|
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) {
|
|
[trainingsZustand.ziehKarten[index1], trainingsZustand.ziehKarten[index2]] =
|
|
[trainingsZustand.ziehKarten[index2], trainingsZustand.ziehKarten[index1]];
|
|
|
|
const container = document.querySelector(".spalte-rechts");
|
|
container.innerHTML = "";
|
|
|
|
trainingsZustand.ziehKarten.forEach((karte, idx) => {
|
|
const ziehKarte = document.createElement("div");
|
|
ziehKarte.className = "training-card zieh-karte";
|
|
ziehKarte.draggable = true;
|
|
ziehKarte.dataset.index = idx;
|
|
|
|
if (trainingsZustand.richtung === "EN_DE") {
|
|
ziehKarte.innerHTML = `
|
|
<div class="">
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
</div>
|
|
`;
|
|
} else {
|
|
ziehKarte.innerHTML = `
|
|
<div class="">
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
ziehKarte.addEventListener("dragstart", e => {
|
|
e.dataTransfer.setData("draggedIndex", idx);
|
|
});
|
|
|
|
ziehKarte.addEventListener("dragover", e => e.preventDefault());
|
|
|
|
ziehKarte.addEventListener("drop", e => {
|
|
e.preventDefault();
|
|
const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
|
|
swapZiehKarten(draggedIndex, idx);
|
|
});
|
|
|
|
container.appendChild(ziehKarte);
|
|
});
|
|
}
|
|
|
|
// Blendet alle Trainingslevel-Ansichten aus
|
|
function showMode(id) {
|
|
|
|
document.getElementById("pdfPages").style.display = "none";
|
|
document.getElementById("onlineTraining").style.display = "none";
|
|
|
|
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");
|
|
startLeichtTraining();
|
|
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";
|
|
}
|
|
});
|
|
});
|
|
|
|
function startMultipleTraining() {
|
|
trainingsZustand.modus = "multiple";
|
|
trainingsZustand.quelleKarten = mischeArray([...parsedArray]);
|
|
trainingsZustand.aktuelleKarte = null;
|
|
trainingsZustand.gelernt = [];
|
|
trainingsZustand.nichtGelernt = [];
|
|
|
|
zeigeNaechsteMultipleKarte();
|
|
}
|
|
|
|
function generiereMultipleOptionen(karte) {
|
|
const optionen = [karte.deutsch];
|
|
|
|
const falscheOptionen = parsedArray
|
|
.filter(k => k.id !== karte.id)
|
|
.map(k => k.deutsch);
|
|
|
|
mischeArray(falscheOptionen);
|
|
|
|
optionen.push(...falscheOptionen.slice(0, 4));
|
|
|
|
return mischeArray(optionen);
|
|
}
|
|
|
|
function generiereHint(deutsch) {
|
|
const chars = deutsch.split('');
|
|
const anzahlZuVerstecken = Math.floor(chars.length / 2);
|
|
|
|
const indices = Array.from(chars.keys());
|
|
mischeArray(indices);
|
|
|
|
for (let i = 0; i < anzahlZuVerstecken; i++) {
|
|
chars[indices[i]] = '*';
|
|
}
|
|
|
|
return chars.join('');
|
|
}
|
|
|
|
|
|
function zeigeNaechsteMultipleKarte() {
|
|
if (trainingsZustand.quelleKarten.length === 0) {
|
|
alert(`Training beendet!
|
|
Gelernt: ${trainingsZustand.gelernt.length}
|
|
Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
|
|
return;
|
|
}
|
|
|
|
const karte = trainingsZustand.quelleKarten.shift();
|
|
trainingsZustand.aktuelleKarte = karte;
|
|
|
|
const container = document.getElementById("trainingMultiple");
|
|
container.innerHTML = "";
|
|
|
|
const frage = document.createElement("div");
|
|
frage.className = "multiple-frage";
|
|
frage.innerHTML = `<h2>${karte.englisch}</h2>`;
|
|
container.appendChild(frage);
|
|
|
|
const optionen = generiereMultipleOptionen(karte);
|
|
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 = () => {
|
|
if (text === karte.deutsch) {
|
|
trainingsZustand.gelernt.push(karte);
|
|
zeigeNaechsteMultipleKarte();
|
|
} else {
|
|
btn.style.textDecoration = "line-through";
|
|
btn.disabled = true;
|
|
}
|
|
};
|
|
|
|
optionContainer.appendChild(btn);
|
|
});
|
|
|
|
container.appendChild(optionContainer);
|
|
}
|
|
|
|
trainingsZustand.hintCards = [];
|
|
|
|
function startHintTraining() {
|
|
trainingsZustand.modus = "hint";
|
|
trainingsZustand.hintCards = mischeArray([...parsedArray]);
|
|
zeigeNaechsteHintKarte();
|
|
}
|
|
|
|
function zeigeNaechsteHintKarte() {
|
|
if (trainingsZustand.hintCards.length === 0) {
|
|
alert(`Training beendet!
|
|
Gelernt: ${trainingsZustand.gelernt.length}
|
|
Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
|
|
return;
|
|
}
|
|
|
|
const karte = trainingsZustand.hintCards.shift();
|
|
trainingsZustand.aktuelleKarte = karte;
|
|
|
|
const container = document.getElementById("trainingHint");
|
|
container.innerHTML = "";
|
|
|
|
const frage = document.createElement("div");
|
|
frage.className = "hint-frage";
|
|
frage.innerHTML = `<h2>${karte.englisch}</h2>`;
|
|
container.appendChild(frage);
|
|
|
|
const clue = document.createElement("div");
|
|
clue.className = "hint-clue";
|
|
clue.innerText = generiereHint(karte.deutsch);
|
|
container.appendChild(clue);
|
|
|
|
const input = document.createElement("input");
|
|
input.className = "hint-input";
|
|
input.placeholder = "Schreibe die Übersetzung hier...";
|
|
container.appendChild(input);
|
|
|
|
const button = document.createElement("button");
|
|
button.className = "hint-button";
|
|
button.innerText = "Überprüfen";
|
|
container.appendChild(button);
|
|
|
|
const feedback = document.createElement("div");
|
|
feedback.className = "hint-feedback";
|
|
container.appendChild(feedback);
|
|
|
|
button.onclick = () => {
|
|
const answer = input.value.trim();
|
|
if (answer.toLowerCase() === karte.deutsch.toLowerCase()) {
|
|
feedback.innerText = "✅ Richtig!";
|
|
trainingsZustand.gelernt.push(karte);
|
|
setTimeout(() => zeigeNaechsteHintKarte(), 800);
|
|
} else {
|
|
feedback.innerText = `❌ Falsch! Richtige Antwort: ${karte.deutsch}`;
|
|
trainingsZustand.nichtGelernt.push(karte);
|
|
setTimeout(() => zeigeNaechsteHintKarte(), 1200);
|
|
}
|
|
};
|
|
}
|
|
|
|
function startWriteTraining() {
|
|
trainingsZustand.modus = "write";
|
|
trainingsZustand.quelleKarten = mischeArray([...parsedArray]);
|
|
trainingsZustand.aktuelleKarte = null;
|
|
trainingsZustand.gelernt = [];
|
|
trainingsZustand.nichtGelernt = [];
|
|
|
|
zeigeNaechsteWriteKarte();
|
|
}
|
|
|
|
function zeigeNaechsteWriteKarte() {
|
|
if (trainingsZustand.quelleKarten.length === 0) {
|
|
const container = document.getElementById("trainingWrite");
|
|
container.innerHTML = `
|
|
<div class="schwer-frage">
|
|
Training beendet!<br>
|
|
Gelernt: ${trainingsZustand.gelernt.length}<br>
|
|
Nicht gelernt: ${trainingsZustand.nichtGelernt.length}
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const karte = trainingsZustand.quelleKarten.shift();
|
|
trainingsZustand.aktuelleKarte = karte;
|
|
|
|
const container = document.getElementById("trainingWrite");
|
|
container.innerHTML = "";
|
|
|
|
const frage = document.createElement("div");
|
|
frage.className = "schwer-frage";
|
|
frage.innerHTML = `<h2>${karte.englisch}</h2>`;
|
|
container.appendChild(frage);
|
|
|
|
const input = document.createElement("input");
|
|
input.type = "text";
|
|
input.placeholder = "Schreibe die Übersetzung hier...";
|
|
input.style.fontSize = "18px";
|
|
input.style.width = "300px";
|
|
input.style.padding = "8px";
|
|
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";
|
|
|
|
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}`;
|
|
}
|
|
|
|
container.appendChild(resultDiv);
|
|
|
|
setTimeout(() => zeigeNaechsteWriteKarte(), 2000);
|
|
};
|
|
|
|
container.appendChild(submitBtn);
|
|
}
|