455 lines
13 KiB
JavaScript
455 lines
13 KiB
JavaScript
let parsedArray = [];
|
|
|
|
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);
|
|
});
|
|
});
|
|
|
|
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;
|
|
}
|
|
|
|
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");
|
|
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;
|
|
parsedArray = parseWordText(inputText);
|
|
|
|
if(parsedArray.length === 0) {
|
|
alert("Kein gültiges Format erkannt. Bitte überprüfe deine Eingabe.");
|
|
return;
|
|
}
|
|
|
|
alert("Karten erfolgreich erstellt!");
|
|
|
|
showView("modusAuswahlSeite");
|
|
|
|
document.getElementById("title").style.display = "none";
|
|
button.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);
|
|
}
|
|
});
|
|
});
|
|
|
|
function createPDFPages(wordArray) {
|
|
const kartenContainer = document.getElementById("kartenContainer");
|
|
|
|
kartenContainer.innerHTML = "";
|
|
kartenContainer.style.display = "flex";
|
|
kartenContainer.style.flexDirection = "column";
|
|
|
|
for (let i = 0; i < parsedArray.length; i += 8) {
|
|
|
|
const { frontPage, backPage } = createPagePair();
|
|
|
|
parsedArray.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);
|
|
document.getElementById("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');
|
|
}
|
|
|
|
else if (modus === 'training_einfach') {
|
|
showView('trainingLevels');
|
|
}
|
|
|
|
else if (modus === 'statistik') {
|
|
console.log("Statistik anzeigen...");
|
|
}
|
|
});
|
|
});
|
|
|
|
let trainingsZustand = {
|
|
modus: "leicht",
|
|
// für alle Level
|
|
quelleKarten: [],
|
|
aktiveKarten: [],
|
|
gelernt: [],
|
|
nichtGelernt: [],
|
|
// für Mittel
|
|
ziehKarten: []
|
|
};
|
|
|
|
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();
|
|
}
|
|
|
|
function startMittelTraining() {
|
|
// console.log("startMilletTraining");
|
|
|
|
trainingsZustand.modus = "mittel";
|
|
trainingsZustand.quelleKarten = [...parsedArray];
|
|
trainingsZustand.gelernt = [];
|
|
trainingsZustand.nichtGelernt = [];
|
|
|
|
ladeMittelRunde();
|
|
}
|
|
|
|
function ladeMittelRunde() {
|
|
// console.log("ladeMittelRunde start");
|
|
trainingsZustand.aktiveKarten = [];
|
|
trainingsZustand.ziehKarten = [];
|
|
|
|
for(let i=0; i < 4; i++) {
|
|
if(trainingsZustand.quelleKarten.length > 0) {
|
|
trainingsZustand.aktiveKarten.push(
|
|
trainingsZustand.quelleKarten.shift()
|
|
);
|
|
}
|
|
}
|
|
|
|
trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
|
|
|
|
if(trainingsZustand.aktiveKarten.length === 0) {
|
|
alert(`Training beendet!
|
|
Gelernt: ${trainingsZustand.gelernt.length}`);
|
|
return;
|
|
}
|
|
renderMittelMatching();
|
|
}
|
|
|
|
console.log("aktiveKarten:", trainingsZustand.aktiveKarten);
|
|
console.log("ziehKarten:", trainingsZustand.ziehKarten);
|
|
|
|
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.innerHTML = `
|
|
<div class="">
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
</div>
|
|
`;
|
|
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 = `
|
|
<div class="">
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
</div>
|
|
`;
|
|
|
|
// dragstart
|
|
ziehKarte.addEventListener("dragstart", e => {
|
|
e.dataTransfer.setData("draggedId", karte.id);
|
|
});
|
|
|
|
// dragover
|
|
ziehKarte.addEventListener("dragover", e => {
|
|
e.preventDefault();
|
|
});
|
|
|
|
// drop
|
|
ziehKarte.addEventListener("drop", e => {
|
|
e.preventDefault();
|
|
|
|
const draggedId = e.dataTransfer.getData("draggedId");
|
|
const targetId = karte.id;
|
|
|
|
swapZiehKarten(draggedId, targetId);
|
|
});
|
|
|
|
rechts.appendChild(ziehKarte);
|
|
});
|
|
|
|
container.appendChild(links);
|
|
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);
|
|
|
|
if (draggedIndex === -1 || targetIndex === -1) return;
|
|
|
|
const temp = trainingsZustand.ziehKarten[draggedIndex];
|
|
trainingsZustand.ziehKarten[draggedIndex] = trainingsZustand.ziehKarten[targetIndex];
|
|
trainingsZustand.ziehKarten[targetIndex] = 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");
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
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();
|
|
}
|
|
});
|
|
});
|
|
|
|
document
|
|
.querySelector(".modus-btn[data-modus='training_einfach']")
|
|
.addEventListener("click", () => {
|
|
showView("onlineTraining");
|
|
});
|