PBT3H24AKH/LerningCSW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mittel-Training mit Matching-System und Auswertung implementiert

Browse Source
This commit is contained in:
Stanislav Kharchenko
2026-02-12 08:00:05 +01:00
parent 2e3c937b99
commit 374be205b7
4 changed files with 246 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
MainPage/stas/WoerterLernen.html
View File

@@ -11,61 +11,66 @@
<h1>Flashcards Generator</h1> <h1>Flashcards Generator</h1>
</header> </header>
<div class="main-wrapper"> <div class="main-wrapper">
<div class="section-title" id="title"> <div id="startScreen">
<div class="content"> <div class="section-title" id="title">
<label for="inputText" class="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
</div>
<div id="aufgabe_fuer_gpt">
<pre id="formatText">
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
</pre>
<button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
</div>
<div id="inputHinweis">
<div class="content"> <div class="content">
<label for="inputText" class="section-title">Füge deinen Text hier ein:</label> <label for="inputText" class="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
<textarea id="inputText" placeholder="Hier Text einfügen..."></textarea> </div>
<div id="aufgabe_fuer_gpt">
<pre id="formatText">
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
</pre>
<button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
</div>
<div id="inputHinweis">
<div class="content">
<label for="inputText" class="section-title">Füge deinen Text hier ein:</label>
<textarea id="inputText" placeholder="Hier Text einfügen..."></textarea>
</div>
</div> </div>
</div> </div>
<div class="button-wrapper">
<button id="kartenErstellen">Karten erstellen</button>
</div>
</div> </div>
<div class="button-wrapper">
<button id="kartenErstellen">Karten erstellen</button> <div id="modusAuswahlSeite" style="display:none;">
</div>
<div id="modusAuswahlSeite" style="display:none">
<h2>Wählt einen Modus:</h2> <h2>Wählt einen Modus:</h2>
<button class="modus-btn" data-modus="druck">📄 PDF erstellen</button> <button class="modus-btn" data-modus="druck">📄 PDF erstellen</button>
<button class="modus-btn" data-modus="training_einfach">🃏 Online-Training</button> <button class="modus-btn" data-modus="training_einfach">🃏 Online-Training</button>
<button class="modus-btn" data-modus="statistik">📊 Statistik</button> <button class="modus-btn" data-modus="statistik">📊 Statistik</button>
</div> </div>
<div id="pdfPages" class="modus-view"> <div id="pdfPages">
<div id="kartenContainer"></div> <div id="kartenContainer"></div>
<div class="button-wrapper"> <div class="button-wrapper">
<button id="druckenBtn" style="display:none;">Drucken</button> <button id="druckenBtn" style="display:none;">Drucken</button>
</div> </div>
</div> </div>
<div id="onlineTraining" class="modus-view"> <div id="onlineTraining">
<div id="trainingLevels"> <div id="trainingLevels" class="training-view">
<h3>Wählt einen Schwierigkeitsgrad:</h3> <h3>Wählt einen Schwierigkeitsgrad:</h3>
<button class="level-btn" data-level="leicht">🟢 Leicht</button> <button class="level-btn" data-level="leicht">🟢 Leicht</button>
<button class="level-btn" data-level="mittel">🟡 Mittel</button> <button class="level-btn" data-level="mittel">🟡 Mittel</button>
<button class="level-btn" data-level="schwer">🔴 Schwer</button> <button class="level-btn" data-level="schwer">🔴 Schwer</button>
</div> </div>
<div id="trainingLeicht" class="training-view modus-view"></div> <div id="trainingLeicht" class="training-view"></div>
<div id="trainingMittel" class="training-view"></div> <div id="trainingMittel" class="training-view" style="display:none;"></div>
<button onclick="checkMatching()">Überprüfen</button>
<div id="trainingSchwer" class="training-view"></div> <div id="trainingSchwer" class="training-view"></div>
<div class="button-wrapper">
<button id="checkBtn" style="display:none;" onclick="pruefeRunde()">Überprüfen</button>
</div>
</div> </div>
<div id="trainingContainer" style="display:none; text-align:center; margin-top:30px;"></div> <div id="trainingContainer" style="display:none; text-align:center; margin-top:30px;"></div>

260
MainPage/stas/eigenerCode.js
View File

@@ -1,5 +1,7 @@
let parsedArray = []; let parsedArray = [];
// Mischt ein Array zufällig mit dem Fisher-Yates-Algorithmus
// und gibt das gemischte Array zurück.
function mischeArray(array) { function mischeArray(array) {
for (let i = array.length - 1; i > 0; i--) { for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); 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) { function parseWordText(inputText) {
const wortBlocks = inputText.trim().split("\n\n"); const wortBlocks = inputText.trim().split("\n\n");
const wortListe = []; const wortListe = [];
@@ -45,6 +48,7 @@ function parseWordText(inputText) {
return wortListe; return wortListe;
} }
// Gibt beide Seiten als Objekt zurück.
function createPagePair() { function createPagePair() {
const frontPage = document.createElement("div"); const frontPage = document.createElement("div");
frontPage.className = "page page-front"; frontPage.className = "page page-front";
@@ -71,26 +75,12 @@ button.addEventListener("click", () => {
alert("Karten erfolgreich erstellt!"); 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.getElementById("modusAuswahlSeite").style.display = "block";
}); });
document.querySelectorAll(".modus-btn").forEach(button => { // Erstellt druckfertige PDF-Seiten mit jeweils 8 Karten pro Seite.
button.addEventListener("click", () => {
const modus = button.dataset.modus;
if (modus === "druck") {
createPDFPages(parsedArray);
} else {
console.log("Gewählter Modus:", modus);
}
});
});
function createPDFPages(wordArray) { function createPDFPages(wordArray) {
const kartenContainer = document.getElementById("kartenContainer"); const kartenContainer = document.getElementById("kartenContainer");
@@ -141,11 +131,12 @@ modusBtns.forEach(btn => {
const modus = btn.dataset.modus; const modus = btn.dataset.modus;
if (modus === 'druck') { if (modus === 'druck') {
showView('pdfPages'); showMode('pdfPages');
createPDFPages(parsedArray);
} }
else if (modus === 'training_einfach') { else if (modus === 'training_einfach') {
showView('trainingLevels'); showMode('onlineTraining');
} }
else if (modus === 'statistik') { else if (modus === 'statistik') {
@@ -158,13 +149,18 @@ let trainingsZustand = {
modus: "leicht", modus: "leicht",
// für alle Level // für alle Level
quelleKarten: [], quelleKarten: [],
basisKarten: [],
aktiveKarten: [], aktiveKarten: [],
gelernt: [], gelernt: [],
nichtGelernt: [], nichtGelernt: [],
// für Mittel // für Mittel
ziehKarten: [] ziehKarten: [],
rundeNummer: 0,
richtung: "EN_DE",
zuordnungen: 0,
}; };
// Startet das Training im Modus "Leicht".
function startLeichtTraining() { function startLeichtTraining() {
trainingsZustand.modus = "leicht"; trainingsZustand.modus = "leicht";
trainingsZustand.quelleKarten = [...parsedArray]; trainingsZustand.quelleKarten = [...parsedArray];
@@ -182,43 +178,52 @@ function startLeichtTraining() {
zeigeNaechsteKarte(); zeigeNaechsteKarte();
} }
// Startet das Training im Modus "Mittel".
function startMittelTraining() { function startMittelTraining() {
// console.log("startMilletTraining");
trainingsZustand.modus = "mittel"; 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.gelernt = [];
trainingsZustand.nichtGelernt = []; trainingsZustand.nichtGelernt = [];
trainingsZustand.rundeNummer = 0;
ladeMittelRunde(); ladeMittelRunde();
} }
// Lädt eine neue Runde im mittleren Trainingsmodus.
function ladeMittelRunde() { function ladeMittelRunde() {
// console.log("ladeMittelRunde start");
trainingsZustand.aktiveKarten = []; trainingsZustand.aktiveKarten = [];
trainingsZustand.ziehKarten = []; trainingsZustand.ziehKarten = [];
trainingsZustand.zuordnungen = 0;
for(let i=0; i < 4; i++) { trainingsZustand.richtung = trainingsZustand.rundeNummer % 2 === 0 ? "EN_DE" : "DE_EN";
if(trainingsZustand.quelleKarten.length > 0) { trainingsZustand.rundeNummer++;
trainingsZustand.aktiveKarten.push(
trainingsZustand.quelleKarten.shift() 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]); trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);
if(trainingsZustand.aktiveKarten.length === 0) {
alert(`Training beendet!
Gelernt: ${trainingsZustand.gelernt.length}`);
return;
}
renderMittelMatching(); renderMittelMatching();
} }
console.log("aktiveKarten:", trainingsZustand.aktiveKarten); // Rendert das Matching-Layout für den mittleren Modus.
console.log("ziehKarten:", trainingsZustand.ziehKarten);
function renderMittelMatching() { function renderMittelMatching() {
const container = document.getElementById("trainingMittel"); const container = document.getElementById("trainingMittel");
container.innerHTML = ""; container.innerHTML = "";
@@ -233,33 +238,52 @@ function renderMittelMatching() {
trainingsZustand.aktiveKarten.forEach(karte => { trainingsZustand.aktiveKarten.forEach(karte => {
const dropZone = document.createElement("div"); const dropZone = document.createElement("div");
dropZone.className = "training-card drop-zone"; dropZone.className = "training-card drop-zone";
dropZone.dataset.id = karte.id;
if(trainingsZustand.richtung === "EN_DE") {
dropZone.innerHTML = ` dropZone.innerHTML = `
<div class=""> <div class="">
<h2>${karte.englisch}</h2> <h2>${karte.englisch}</h2>
<div class="ipa">${karte.ipa}</div> <div class="ipa">${karte.ipa}</div>
<div class="example">${karte.beispielEN}</div> <div class="example">${karte.beispielEN}</div>
</div> </div>
`; `;} else {
links.appendChild(dropZone); dropZone.innerHTML = `
});
// 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=""> <div class="">
<h2>${karte.deutsch}</h2> <h2>${karte.deutsch}</h2>
<div class="example">${karte.beispielDE}</div> <div class="example">${karte.beispielDE}</div>
</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 // dragstart
ziehKarte.addEventListener("dragstart", e => { ziehKarte.addEventListener("dragstart", e => {
e.dataTransfer.setData("draggedId", karte.id); console.log("dragstart работает");
e.dataTransfer.setData("draggedIndex", index);
}); });
// dragover // dragover
@@ -269,12 +293,14 @@ function renderMittelMatching() {
// drop // drop
ziehKarte.addEventListener("drop", e => { ziehKarte.addEventListener("drop", e => {
console.log("drop работает");
e.preventDefault(); e.preventDefault();
const draggedId = e.dataTransfer.getData("draggedId"); const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
const targetId = karte.id; // const targetId = karte.id;
swapZiehKarten(draggedId, targetId); swapZiehKarten(draggedIndex, index);
}); });
rechts.appendChild(ziehKarte); rechts.appendChild(ziehKarte);
@@ -284,24 +310,75 @@ function renderMittelMatching() {
container.appendChild(rechts); container.appendChild(rechts);
} }
function swapZiehKarten(draggedId, targetId) { // Überprüft, ob die Zuordnungen korrekt sind.
const draggedIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === draggedId); function pruefeRunde() {
const targetIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === targetId);
if (draggedIndex === -1 || targetIndex === -1) return; const ziehElemente = document.querySelectorAll(".zieh-karte");
const temp = trainingsZustand.ziehKarten[draggedIndex]; trainingsZustand.aktiveKarten.forEach((karte, index) => {
trainingsZustand.ziehKarten[draggedIndex] = trainingsZustand.ziehKarten[targetIndex];
trainingsZustand.ziehKarten[targetIndex] = temp; 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(); renderMittelMatching();
} }
function checkMatching() { // Überprüft eine einzelne Zuordnung im Matching-Modus.
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) { function pruefeZuordnung(ziehId, dropId) {
if(ziehId === dropId) { if(ziehId === dropId) {
const karte = trainingsZustand.aktiveKarten.find(k => k.id == ziehId); 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() { function zeigeNaechsteKarte() {
if ( if (
trainingsZustand.aktiveKarten.length === 0 && trainingsZustand.aktiveKarten.length === 0 &&
@@ -343,6 +421,7 @@ function zeigeNaechsteKarte() {
renderLeichtKarte(trainingsZustand.aktuelleKarte); renderLeichtKarte(trainingsZustand.aktuelleKarte);
} }
// Rendert eine einzelne Karte im leichten Modus.
function renderLeichtKarte(karte) { function renderLeichtKarte(karte) {
const container = document.getElementById("trainingLeicht"); const container = document.getElementById("trainingLeicht");
container.innerHTML = ""; container.innerHTML = "";
@@ -379,6 +458,7 @@ function renderLeichtKarte(karte) {
container.appendChild(actions); container.appendChild(actions);
} }
// Verarbeitet die Antwort des Nutzers im leichten Modus.
function antworteAufKarte(weißIch) { function antworteAufKarte(weißIch) {
const karte = trainingsZustand.aktuelleKarte; const karte = trainingsZustand.aktuelleKarte;
@@ -404,51 +484,49 @@ function antworteAufKarte(weißIch) {
zeigeNaechsteKarte(); zeigeNaechsteKarte();
} }
function showView(id) { // Blendet alle Trainingslevel-Ansichten aus
document.querySelectorAll(".modus-view").forEach(view => { function showMode(id) {
view.style.display = "none";
});
const active = document.getElementById(id); document.getElementById("pdfPages").style.display = "none";
if (active) { document.getElementById("onlineTraining").style.display = "none";
active.style.display = "block";
} document.getElementById(id).style.display = "block";
} }
function showTrainingLevel(id) { function showLevel(id) {
document.querySelectorAll(".training-view").forEach(view => { console.log("showLevel called with:", id);
view.style.display = "none";
});
const active = document.getElementById(id); document.getElementById("trainingLeicht").style.display = "none";
if (active) { document.getElementById("trainingMittel").style.display = "none";
active.style.display = "block"; document.getElementById("trainingSchwer").style.display = "none";
}
document.getElementById(id).style.display = "block";
} }
document.querySelectorAll(".level-btn").forEach(btn => { document.querySelectorAll(".level-btn").forEach(btn => {
btn.addEventListener("click", () => { btn.addEventListener("click", () => {
const level = btn.dataset.level; const level = btn.dataset.level;
console.log("Level ausgewähl:", level);
if (level === "leicht") { if (level === "leicht") {
showTrainingLevel("trainingLeicht"); showLevel("trainingLeicht");
startLeichtTraining(); startLeichtTraining();
document.getElementById("checkBtn").style.display = "none";
} }
if (level === "mittel") { if (level === "mittel") {
showTrainingLevel("trainingMittel"); showLevel("trainingMittel");
startMittelTraining(); startMittelTraining();
document.getElementById("checkBtn").style.display = "block";
} }
if (level === "schwer") { if (level === "schwer") {
showTrainingLevel("trainingSchwer"); showLevel("trainingSchwer");
startSchwerTraining(); startSchwerTraining();
document.getElementById("checkBtn").style.display = "none";
} }
}); });
}); });
document
.querySelector(".modus-btn[data-modus='training_einfach']")
.addEventListener("click", () => {
showView("onlineTraining");
});

59
MainPage/stas/style.css
View File

@@ -283,12 +283,22 @@ h1 {
.training-card { .training-card {
width: 300px; width: 300px;
height: 180px;
margin: 10px auto; margin: 10px auto;
perspective: 1000px; perspective: 1000px;
cursor: pointer; cursor: pointer;
} }
#trainingLeicht .training-card {
height: 180px;
}
#trainingMittel .training-card {
height: 100px;
font-size: 0.9rem;
margin: 0;
margin-top: 10px;
}
.training-card-inner { .training-card-inner {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -356,33 +366,34 @@ h1 {
margin-top: -28px; margin-top: -28px;
} }
.modus-view { #pdfPages,
#onlineTraining,
#trainingLeicht,
#trainingMittel,
#trainingSchwer {
display: none; display: none;
} }
.training-view {
display: none;
margin-top: 25px;
}
#trainingMittel { #trainingMittel {
display: flex !important; display: flex !important;
gap: 20px; justify-content: center;
gap: 10px;
align-items: flex-start; align-items: flex-start;
} }
.spalte-links, .spalte-links {
.spalte-rechts {
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
gap: 12px; align-items: flex-end;
min-height: 300px; gap: 10px;
border: 1px dashed #ccc;
padding: 0;
align-items: center;
} }
.spalte-rechts {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.drop-zone, .zieh-karte { .drop-zone, .zieh-karte {
padding: 10px; padding: 10px;
@@ -395,3 +406,19 @@ h1 {
.zieh-karte { .zieh-karte {
cursor: grab; 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;
}

BIN
MainPage/stas/verified.jfif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB