216 lines
6.3 KiB
PHP
216 lines
6.3 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) {
|
|
const verben = document.getElementById("italienisch_verben");
|
|
const italienisch = document.getElementById("italienisch");
|
|
if(showResult) {
|
|
if(isVerben) {
|
|
verben.style.display = "inline-block";
|
|
} else {
|
|
italienisch.style.display = "flex";
|
|
}
|
|
|
|
showRueckseite();
|
|
showResult = false;
|
|
} else {
|
|
verben.style.display = "none";
|
|
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];
|
|
|
|
if(!isVerben) {
|
|
const karten = document.getElementsByClassName("p-karteikarte");
|
|
for (let i = 0; i < 7; i++) {
|
|
karten[i].textContent = item[`italienisch_${i + 1}`];
|
|
karten[i].style.color = item[`farbe_${i + 1}`];
|
|
karten[i].style.display = "inline-block";
|
|
}
|
|
if(item.wortart == "Adjektive") document.getElementById("italienisch_1").style.textDecoration = "underline";
|
|
} else {
|
|
for (let i = 1; i <= 7; i++) {
|
|
const wortstamm = document.getElementById(`italienisch_wortstamm_${i}`);
|
|
const endung = document.getElementById(`italienisch_endung_${i}`);
|
|
const suffix = document.getElementById(`italienisch_suffix_${i}`);
|
|
|
|
wortstamm.textContent = item[`italienisch_${i}`];
|
|
wortstamm.style.display = "inline-block";
|
|
|
|
endung.textContent = item[`endung_${i}`];
|
|
endung.style.color = item[`farbe_${i}`];
|
|
endung.style.display = "inline-block";
|
|
|
|
suffix.textContent = item[`suffix_${i}`];
|
|
suffix.style.display = "inline-block";
|
|
|
|
if(i == 1) {
|
|
wortstamm.style.textDecoration = "underline";
|
|
endung.style.textDecoration = "underline";
|
|
suffix.style.textDecoration = "underline";
|
|
} else {
|
|
const pronomen = document.getElementById(`italienisch_pronomen_${i}`);
|
|
|
|
pronomen.textContent = item[`pronomen_${i}`];
|
|
pronomen.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>
|