From cb1634796a24967ad5b4145273b67888a40e11d5 Mon Sep 17 00:00:00 2001
From: p3t3rp1Lz <psycopy@gmx.de>
Date: Tue, 12 May 2026 16:23:10 +0200
Subject: [PATCH] =?UTF-8?q?LegLos=20Button=20abgeschafft,=20Klick-Logik=20?=
 =?UTF-8?q?im=20quiz=20ge=C3=A4ndert,=20Refactoring-Start?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 quiz.php  | 173 +++++++++++++++++++-----------------------------------
 style.css |   1 +
 2 files changed, 60 insertions(+), 114 deletions(-)

diff --git a/quiz.php b/quiz.php
index 8c9685c..e8399a6 100644
--- a/quiz.php
+++ b/quiz.php
@@ -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;
 			}
diff --git a/style.css b/style.css
index 943aae4..1452444 100644
--- a/style.css
+++ b/style.css
@@ -85,6 +85,7 @@ div.header{
 
 #deutsch {
     height: 250px;
+    display: inline-block;
 }
 
 #button_kartenNavigationVorh {