thomas.py/pyolingo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LegLos Button abgeschafft, Klick-Logik im quiz geändert, Refactoring-Start

Browse Source
This commit is contained in:
p3t3rp1Lz 2026-05-12 16:23:10 +02:00
parent 9812b63b82
commit cb1634796a
2 changed files with 60 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
quiz.php
View File

@ -33,87 +33,39 @@
</div>
<div class="inhalt">
<button class="button-ellipsoid" id="start">
Leg´ los
Neustart
</button>
<button class="button-karteikarte" id="deutsch" />
<button class="button-karteikarte" id="italienisch">
<p class="p-karteikarte" id="italienisch_1" />
<p class="p-karteikarte" id="italienisch_2" />
<p class="p-karteikarte" id="italienisch_3" />
<p class="p-karteikarte" id="italienisch_4" />
<p class="p-karteikarte" id="italienisch_5" />
<p class="p-karteikarte" id="italienisch_6" />
<p class="p-karteikarte" id="italienisch_7" />
<?php
for($i = 1; $i <= 7; $i++) echo '<p class="p-karteikarte" id="italienisch_' . $i . '" ></p>';
?>
</button>
<button class="button-karteikarte" id="italienisch_verben">
<table class="table-karteikarte">
<tr>
<td colspan="2">
<p class="p-karteikarte_verben" id="italienisch_wortstamm_1" />
<p class="p-karteikarte_verben" id="italienisch_endung_1" />
<p class="p-karteikarte_verben" id="italienisch_suffix_1" />
<p class="p-karteikarte_verben" id="italienisch_wortstamm_1"></p>
<p class="p-karteikarte_verben" id="italienisch_endung_1"></p>
<p class="p-karteikarte_verben" id="italienisch_suffix_1"></p>
</td>
</tr>
<?php
for($i = 2; $i <= 7; $i++) {
?>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_2" />
<p class="p-karteikarte_verben" id="italienisch_pronomen_<?= $i ?>"></p>
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_2" />
<p class="p-karteikarte_verben" id="italienisch_endung_2" />
<p class="p-karteikarte_verben" id="italienisch_suffix_2" />
</td>
</tr>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_3" />
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_3" />
<p class="p-karteikarte_verben" id="italienisch_endung_3" />
<p class="p-karteikarte_verben" id="italienisch_suffix_3" />
</td>
</tr>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_4" />
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_4" />
<p class="p-karteikarte_verben" id="italienisch_endung_4" />
<p class="p-karteikarte_verben" id="italienisch_suffix_4" />
</td>
</tr>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_5" />
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_5" />
<p class="p-karteikarte_verben" id="italienisch_endung_5" />
<p class="p-karteikarte_verben" id="italienisch_suffix_5" />
</td>
</tr>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_6" />
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_6" />
<p class="p-karteikarte_verben" id="italienisch_endung_6" />
<p class="p-karteikarte_verben" id="italienisch_suffix_6" />
</td>
</tr>
<tr>
<td class="td-pronomen">
<p class="p-karteikarte_verben" id="italienisch_pronomen_7" />
</td>
<td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_7" />
<p class="p-karteikarte_verben" id="italienisch_endung_7" />
<p class="p-karteikarte_verben" id="italienisch_suffix_7" />
<p class="p-karteikarte_verben" id="italienisch_wortstamm_<?= $i ?>"></p>
<p class="p-karteikarte_verben" id="italienisch_endung_<?= $i ?>"></p>
<p class="p-karteikarte_verben" id="italienisch_suffix_<?= $i ?>"></p>
</td>
</tr>
<?php
}
?>
</table>
</button>
<div class="menue" id="kartenNavigation">
@ -128,90 +80,83 @@
let items = [];
let index = 0;
let showResult = true;
let kategorieAuswahl = "<?= $kategorieAuswahl ?>";
let isVerben = false;
if(kategorieAuswahl == "Verben") isVerben = true;
fetch("data.php", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({ kategorieAuswahl: kategorieAuswahl })
})
.then(r => r.json())
.then(data => items = data);
.then(data => {
items = data;
showVorderseite();
});
document.getElementById("start").onclick = function() {
if(document.getElementById("start").innerText != "Neustart") {
document.getElementById("deutsch").style.display = "inline-block";
document.getElementById("start").innerText = "Neustart";
showVorderseite();
} else {
index = 0;
showVorderseite();
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
}
index = 0;
showResult = false;
showSeite(false);
};
document.getElementById("deutsch").onclick = function() {
buttonDeutsch();
showSeite();
}
document.getElementById("italienisch").onclick = function() {
buttonItalienisch();
showSeite();
}
document.getElementById("italienisch_verben").onclick = function() {
buttonItalienischVerben();
showSeite();
}
document.getElementById("button_kartenNavigationVorh").onclick = function() {
index > 0 ? index -= 1 : index = items.length - 1;
buttonDeutsch();
showVorderseite();
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
showResult = false;
showSeite(false);
}
document.getElementById("button_kartenNavigationNaech").onclick = function() {
index == items.length -1 ? index = 0 : index += 1;
buttonDeutsch();
showVorderseite();
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
showResult = false;
showSeite(false);
}
function buttonDeutsch() {
document.getElementById("deutsch").classList.add("disabled");
if(items[index].wortart != "Verben") {
document.getElementById("italienisch").style.display = "flex";
function showSeite(changeIndex = true) {
if(showResult) {
if(isVerben) {
document.getElementById("italienisch_verben").style.display = "inline-block";
} else {
document.getElementById("italienisch").style.display = "flex";
}
showRueckseite();
showResult = false;
} else {
document.getElementById("italienisch_verben").style.display = "inline-block";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("italienisch").style.display = "none";
if(changeIndex) {
index++;
if(index >= items.length) index = 0;
}
showVorderseite();
showResult = true;
}
showRueckseite();
};
function buttonItalienisch() {
document.getElementById("italienisch").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
index++;
if(index >= items.length) index = 0;
showVorderseite();
};
function buttonItalienischVerben() {
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
index++;
if(index >= items.length) index = 0;
showVorderseite();
};
}
function showVorderseite() {
resetWords();
let item = items[index];
document.getElementById("deutsch").style.display = "inline-block";
document.getElementById("deutsch").innerText = item.deutsch;
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
}

1
style.css
View File

@ -85,6 +85,7 @@ div.header{
#deutsch {
height: 250px;
display: inline-block;
}
#button_kartenNavigationVorh {