509 lines
15 KiB
JavaScript
509 lines
15 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("trainingLeicht");
|
|
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("trainingMittel");
|
|
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) {
|
|
|
|
const temp = trainingsZustand.ziehKarten[index1];
|
|
trainingsZustand.ziehKarten[index1] =
|
|
trainingsZustand.ziehKarten[index2];
|
|
trainingsZustand.ziehKarten[index2] = temp;
|
|
|
|
const container = document.querySelector(".spalte-rechts");
|
|
const cards = container.children;
|
|
|
|
container.insertBefore(cards[index2], cards[index1]);
|
|
}
|
|
|
|
// 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.getElementById("trainingLeicht").classList.add("hidden");
|
|
document.getElementById("trainingMittel").classList.add("hidden");
|
|
document.getElementById("trainingSchwer").classList.add("hidden");
|
|
|
|
document.getElementById(id).classList.remove("hidden");
|
|
}
|
|
|
|
document.querySelectorAll(".level-btn").forEach(btn => {
|
|
btn.addEventListener("click", () => {
|
|
const level = btn.dataset.level;
|
|
console.log("Level ausgewähl:", level);
|
|
|
|
if (level === "leicht") {
|
|
showLevel("trainingLeicht");
|
|
startLeichtTraining();
|
|
|
|
document.getElementById("checkBtn").style.display = "none";
|
|
}
|
|
|
|
if (level === "mittel") {
|
|
showLevel("trainingMittel");
|
|
startMittelTraining();
|
|
|
|
document.getElementById("checkBtn").style.display = "block";
|
|
}
|
|
|
|
if (level === "schwer") {
|
|
showLevel("trainingSchwer");
|
|
startSchwerTraining();
|
|
|
|
document.getElementById("checkBtn").style.display = "none";
|
|
}
|
|
});
|
|
});
|