264 lines
11 KiB
PHP
264 lines
11 KiB
PHP
<?php
|
|
require_once __DIR__ . '/includes/db_connect.php';
|
|
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
|
|
|
|
$kategorieAuswahl = $_POST['kategorieAuswahl'] ?? 'Substantive';
|
|
|
|
$stmt = $pdo->prepare("SELECT id
|
|
FROM kategorie
|
|
WHERE name = :kategorie;");
|
|
$stmt->execute(['kategorie' => $kategorieAuswahl]);
|
|
|
|
$kategorie_id = $stmt->fetchColumn();
|
|
|
|
$stmt = $pdo->prepare("SELECT COUNT(*) AS gesamtanzahl
|
|
FROM deutsch
|
|
WHERE kategorie_id = :kategorie_id;");
|
|
$stmt->execute(['kategorie_id' => $kategorie_id]);
|
|
|
|
$row = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
|
|
$gesamtanzahl = $row ? $row['gesamtanzahl'] : 0;
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
|
<h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
|
|
</div>
|
|
<div class="inhalt">
|
|
<button class="button-ellipsoid" id="start">
|
|
Neustart
|
|
</button>
|
|
<button class="button-karteikarte" id="deutsch" />
|
|
<button class="button-karteikarte" id="italienisch">
|
|
<?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><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_<?= $i ?>"></p>
|
|
</td>
|
|
<td>
|
|
<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">
|
|
<button class="button-ellipsoid" id="button_kartenNavigationVorh">
|
|
<< vorheriges Wort
|
|
</button>
|
|
<button class="button-ellipsoid" id="button_kartenNavigationNaech">
|
|
nächstes Wort >>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
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;
|
|
showVorderseite();
|
|
});
|
|
|
|
document.getElementById("start").onclick = function() {
|
|
index = 0;
|
|
showResult = false;
|
|
showSeite(false);
|
|
};
|
|
|
|
document.getElementById("deutsch").onclick = function() {
|
|
showSeite();
|
|
}
|
|
|
|
document.getElementById("italienisch").onclick = function() {
|
|
showSeite();
|
|
}
|
|
|
|
document.getElementById("italienisch_verben").onclick = function() {
|
|
showSeite();
|
|
}
|
|
|
|
document.getElementById("button_kartenNavigationVorh").onclick = function() {
|
|
index > 0 ? index -= 1 : index = items.length - 1;
|
|
showResult = false;
|
|
showSeite(false);
|
|
}
|
|
|
|
document.getElementById("button_kartenNavigationNaech").onclick = function() {
|
|
index == items.length -1 ? index = 0 : index += 1;
|
|
showResult = false;
|
|
showSeite(false);
|
|
}
|
|
|
|
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 = "none";
|
|
document.getElementById("italienisch").style.display = "none";
|
|
|
|
if(changeIndex) {
|
|
index++;
|
|
if(index >= items.length) index = 0;
|
|
}
|
|
|
|
showVorderseite();
|
|
showResult = true;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function showRueckseite() {
|
|
let item = items[index];
|
|
//TODO auf isVerben ändern
|
|
//TODO
|
|
//TODO const pElemente = document.querySelectorAll("#italienisch .p-karteikarte");
|
|
//TODO pElemente.forEach((element, index) => {
|
|
//TODO element.textContent = texte[index];
|
|
//TODO });
|
|
if(item.wortart != "Verben") {
|
|
document.getElementById("italienisch_1").textContent = item.italienisch_1;
|
|
document.getElementById("italienisch_1").style.color = item.farbe_1;
|
|
document.getElementById("italienisch_2").textContent = item.italienisch_2;
|
|
document.getElementById("italienisch_2").style.color = item.farbe_2;
|
|
document.getElementById("italienisch_3").textContent = item.italienisch_3;
|
|
document.getElementById("italienisch_3").style.color = item.farbe_3;
|
|
document.getElementById("italienisch_4").textContent = item.italienisch_4;
|
|
document.getElementById("italienisch_4").style.color = item.farbe_4;
|
|
document.getElementById("italienisch_5").textContent = item.italienisch_5;
|
|
document.getElementById("italienisch_5").style.color = item.farbe_5;
|
|
document.getElementById("italienisch_6").textContent = item.italienisch_6;
|
|
document.getElementById("italienisch_6").style.color = item.farbe_6;
|
|
document.getElementById("italienisch_7").textContent = item.italienisch_7;
|
|
document.getElementById("italienisch_7").style.color = item.farbe_7;
|
|
for(var i = 0; i < document.getElementsByClassName("p-karteikarte").length; i++) {
|
|
document.getElementsByClassName("p-karteikarte")[i].style.display = "inline-block";
|
|
}
|
|
if(item.wortart == "Adjektive") document.getElementById("italienisch_1").style.textDecoration = "underline";
|
|
} else {
|
|
// Grundform
|
|
document.getElementById("italienisch_wortstamm_1").style.textDecoration = "underline";
|
|
document.getElementById("italienisch_endung_1").style.textDecoration = "underline";
|
|
|
|
document.getElementById("italienisch_wortstamm_1").textContent = item.italienisch_1;
|
|
document.getElementById("italienisch_endung_1").textContent = item.endung_1;
|
|
document.getElementById("italienisch_endung_1").style.color = item.farbe_1;
|
|
if(item.suffix_1 != null) {
|
|
document.getElementById("italienisch_suffix_1").textContent = item.suffix_1;
|
|
document.getElementById("italienisch_suffix_1").style.textDecoration = "underline";
|
|
} else {
|
|
document.getElementById("italienisch_suffix_1").textContent = null;
|
|
}
|
|
|
|
// gebeugte Formen
|
|
document.getElementById("italienisch_pronomen_2").textContent = item.pronomen_2;
|
|
document.getElementById("italienisch_wortstamm_2").textContent = item.italienisch_2;
|
|
document.getElementById("italienisch_endung_2").textContent = item.endung_2;
|
|
document.getElementById("italienisch_endung_2").style.color = item.farbe_2;
|
|
if(item.suffix_2 != null) document.getElementById("italienisch_suffix_2").textContent = " " + item.suffix_2;
|
|
else document.getElementById("italienisch_suffix_2").textContent = null;
|
|
|
|
document.getElementById("italienisch_pronomen_3").textContent = item.pronomen_3;
|
|
document.getElementById("italienisch_wortstamm_3").textContent = item.italienisch_3;
|
|
document.getElementById("italienisch_endung_3").textContent = item.endung_3;
|
|
document.getElementById("italienisch_endung_3").style.color = item.farbe_3;
|
|
if(item.suffix_3 != null) document.getElementById("italienisch_suffix_3").textContent = " " + item.suffix_3;
|
|
else document.getElementById("italienisch_suffix_3").textContent = null;
|
|
|
|
document.getElementById("italienisch_pronomen_4").textContent = item.pronomen_4;
|
|
document.getElementById("italienisch_wortstamm_4").textContent = item.italienisch_4;
|
|
document.getElementById("italienisch_endung_4").textContent = item.endung_4;
|
|
document.getElementById("italienisch_endung_4").style.color = item.farbe_4;
|
|
if(item.suffix_4 != null) document.getElementById("italienisch_suffix_4").textContent = " " + item.suffix_4;
|
|
else document.getElementById("italienisch_suffix_4").textContent = null;
|
|
|
|
document.getElementById("italienisch_pronomen_5").textContent = item.pronomen_5;
|
|
document.getElementById("italienisch_wortstamm_5").textContent = item.italienisch_5;
|
|
document.getElementById("italienisch_endung_5").textContent = item.endung_5;
|
|
document.getElementById("italienisch_endung_5").style.color = item.farbe_5;
|
|
if(item.suffix_5 != null) document.getElementById("italienisch_suffix_5").textContent = " " + item.suffix_5;
|
|
else document.getElementById("italienisch_suffix_5").textContent = null;
|
|
|
|
document.getElementById("italienisch_pronomen_6").textContent = item.pronomen_6;
|
|
document.getElementById("italienisch_wortstamm_6").textContent = item.italienisch_6;
|
|
document.getElementById("italienisch_endung_6").textContent = item.endung_6;
|
|
document.getElementById("italienisch_endung_6").style.color = item.farbe_6;
|
|
if(item.suffix_6 != null) document.getElementById("italienisch_suffix_6").textContent = " " + item.suffix_6;
|
|
else document.getElementById("italienisch_suffix_6").textContent = null;
|
|
|
|
document.getElementById("italienisch_pronomen_7").textContent = item.pronomen_7;
|
|
document.getElementById("italienisch_wortstamm_7").textContent = item.italienisch_7;
|
|
document.getElementById("italienisch_endung_7").textContent = item.endung_7;
|
|
document.getElementById("italienisch_endung_7").style.color = item.farbe_7;
|
|
if(item.suffix_7 != null) document.getElementById("italienisch_suffix_7").textContent = " " + item.suffix_7;
|
|
else document.getElementById("italienisch_suffix_7").textContent = null;
|
|
|
|
for(var i = 0; i < document.getElementsByClassName("p-karteikarte_verben").length; i++) {
|
|
document.getElementsByClassName("p-karteikarte_verben")[i].style.display = "inline-block";
|
|
}
|
|
}
|
|
}
|
|
|
|
function resetWords() {
|
|
for(var i = 0; i < document.getElementsByClassName("p-karteikarte").length; i++) {
|
|
document.getElementsByClassName("p-karteikarte")[i].textContent = "";
|
|
document.getElementsByClassName("p-karteikarte")[i].style.color = "black";
|
|
document.getElementsByClassName("p-karteikarte")[i].style.display = "none";
|
|
document.getElementsByClassName("p-karteikarte")[i].style.textDecoration = "none";
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|