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>
<div class="inhalt"> <div class="inhalt">
<button class="button-ellipsoid" id="start"> <button class="button-ellipsoid" id="start">
Leg´ los Neustart
</button> </button>
<button class="button-karteikarte" id="deutsch" /> <button class="button-karteikarte" id="deutsch" />
<button class="button-karteikarte" id="italienisch"> <button class="button-karteikarte" id="italienisch">
<p class="p-karteikarte" id="italienisch_1" /> <?php
<p class="p-karteikarte" id="italienisch_2" /> for($i = 1; $i <= 7; $i++) echo '<p class="p-karteikarte" id="italienisch_' . $i . '" ></p>';
<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" />
</button> </button>
<button class="button-karteikarte" id="italienisch_verben"> <button class="button-karteikarte" id="italienisch_verben">
<table class="table-karteikarte"> <table class="table-karteikarte">
<tr> <tr>
<td colspan="2"> <td colspan="2">
<p class="p-karteikarte_verben" id="italienisch_wortstamm_1" /> <p class="p-karteikarte_verben" id="italienisch_wortstamm_1"></p>
<p class="p-karteikarte_verben" id="italienisch_endung_1" /> <p class="p-karteikarte_verben" id="italienisch_endung_1"></p>
<p class="p-karteikarte_verben" id="italienisch_suffix_1" /> <p class="p-karteikarte_verben" id="italienisch_suffix_1"></p>
</td> </td>
</tr> </tr>
<?php
for($i = 2; $i <= 7; $i++) {
?>
<tr> <tr>
<td class="td-pronomen"> <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>
<td> <td>
<p class="p-karteikarte_verben" id="italienisch_wortstamm_2" /> <p class="p-karteikarte_verben" id="italienisch_wortstamm_<?= $i ?>"></p>
<p class="p-karteikarte_verben" id="italienisch_endung_2" /> <p class="p-karteikarte_verben" id="italienisch_endung_<?= $i ?>"></p>
<p class="p-karteikarte_verben" id="italienisch_suffix_2" /> <p class="p-karteikarte_verben" id="italienisch_suffix_<?= $i ?>"></p>
</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" />
</td> </td>
</tr> </tr>
<?php
}
?>
</table> </table>
</button> </button>
<div class="menue" id="kartenNavigation"> <div class="menue" id="kartenNavigation">
@ -128,90 +80,83 @@
let items = []; let items = [];
let index = 0; let index = 0;
let showResult = true;
let kategorieAuswahl = "<?= $kategorieAuswahl ?>"; let kategorieAuswahl = "<?= $kategorieAuswahl ?>";
let isVerben = false;
if(kategorieAuswahl == "Verben") isVerben = true;
fetch("data.php", { fetch("data.php", {
method: "POST", method: "POST",
headers: {"Content-Type": "application/json"}, headers: {"Content-Type": "application/json"},
body: JSON.stringify({ kategorieAuswahl: kategorieAuswahl }) body: JSON.stringify({ kategorieAuswahl: kategorieAuswahl })
}) })
.then(r => r.json()) .then(r => r.json())
.then(data => items = data); .then(data => {
items = data;
showVorderseite();
});
document.getElementById("start").onclick = function() { document.getElementById("start").onclick = function() {
if(document.getElementById("start").innerText != "Neustart") { index = 0;
document.getElementById("deutsch").style.display = "inline-block"; showResult = false;
document.getElementById("start").innerText = "Neustart"; showSeite(false);
showVorderseite();
} else {
index = 0;
showVorderseite();
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
}
}; };
document.getElementById("deutsch").onclick = function() { document.getElementById("deutsch").onclick = function() {
buttonDeutsch(); showSeite();
} }
document.getElementById("italienisch").onclick = function() { document.getElementById("italienisch").onclick = function() {
buttonItalienisch(); showSeite();
} }
document.getElementById("italienisch_verben").onclick = function() { document.getElementById("italienisch_verben").onclick = function() {
buttonItalienischVerben(); showSeite();
} }
document.getElementById("button_kartenNavigationVorh").onclick = function() { document.getElementById("button_kartenNavigationVorh").onclick = function() {
index > 0 ? index -= 1 : index = items.length - 1; index > 0 ? index -= 1 : index = items.length - 1;
buttonDeutsch(); showResult = false;
showVorderseite(); showSeite(false);
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
} }
document.getElementById("button_kartenNavigationNaech").onclick = function() { document.getElementById("button_kartenNavigationNaech").onclick = function() {
index == items.length -1 ? index = 0 : index += 1; index == items.length -1 ? index = 0 : index += 1;
buttonDeutsch(); showResult = false;
showVorderseite(); showSeite(false);
document.getElementById("italienisch").style.display = "none";
document.getElementById("italienisch_verben").style.display = "none";
document.getElementById("deutsch").classList.remove("disabled");
} }
function buttonDeutsch() { function showSeite(changeIndex = true) {
document.getElementById("deutsch").classList.add("disabled"); if(showResult) {
if(items[index].wortart != "Verben") { if(isVerben) {
document.getElementById("italienisch").style.display = "flex"; document.getElementById("italienisch_verben").style.display = "inline-block";
} else {
document.getElementById("italienisch").style.display = "flex";
}
showRueckseite();
showResult = false;
} else { } 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() { function showVorderseite() {
resetWords(); resetWords();
let item = items[index]; let item = items[index];
document.getElementById("deutsch").style.display = "inline-block";
document.getElementById("deutsch").innerText = item.deutsch; document.getElementById("deutsch").innerText = item.deutsch;
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length; document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
} }

1
style.css
View File

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