271 lines
12 KiB
PHP
271 lines
12 KiB
PHP
<?php
|
||
require_once __DIR__ . '/includes/db_connect.php';
|
||
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
|
||
|
||
$stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl
|
||
FROM deutsch;");
|
||
$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">pyolingo</h2>
|
||
<h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
|
||
</div>
|
||
<div class="inhalt">
|
||
<button class="button-ellipsoid" id="start">
|
||
Leg´ los
|
||
</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" />
|
||
</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_verben_1" />
|
||
<p class="p-karteikarte_verben" id="italienisch_suffix_1" />
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="td-pronomen">
|
||
<p class="p-karteikarte_verben" id="italienisch_pronomen_2" />
|
||
</td>
|
||
<td>
|
||
<p class="p-karteikarte_verben" id="italienisch_wortstamm_2" />
|
||
<p class="p-karteikarte_verben" id="italienisch_verben_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_verben_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_verben_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_verben_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_verben_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_verben_7" />
|
||
<p class="p-karteikarte_verben" id="italienisch_suffix_7" />
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</button>
|
||
<script>
|
||
let items = [];
|
||
let index = 0;
|
||
|
||
fetch("data.php")
|
||
.then(r => r.json())
|
||
.then(data => items = data);
|
||
|
||
items.sort(() => Math.random() - 0.5);
|
||
|
||
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 {
|
||
items.sort(() => Math.random() - 0.5);
|
||
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").classList.add("disabled");
|
||
if(items[index].wortart != "Verben") {
|
||
document.getElementById("italienisch").style.display = "flex";
|
||
} else {
|
||
document.getElementById("italienisch_verben").style.display = "inline-block";
|
||
}
|
||
showRueckseite();
|
||
};
|
||
|
||
document.getElementById("italienisch").onclick = function() {
|
||
document.getElementById("italienisch").style.display = "none";
|
||
document.getElementById("deutsch").classList.remove("disabled");
|
||
index++;
|
||
if(index >= items.length) index = 0;
|
||
showVorderseite();
|
||
};
|
||
|
||
document.getElementById("italienisch_verben").onclick = function() {
|
||
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").innerText = item.deutsch;
|
||
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
|
||
}
|
||
|
||
function showRueckseite() {
|
||
let item = items[index];
|
||
|
||
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_verben_1").style.textDecoration = "underline";
|
||
|
||
document.getElementById("italienisch_wortstamm_1").textContent = item.wortstamm_1;
|
||
document.getElementById("italienisch_verben_1").textContent = item.italienisch_1;
|
||
document.getElementById("italienisch_verben_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.wortstamm_2;
|
||
document.getElementById("italienisch_verben_2").textContent = item.italienisch_2;
|
||
document.getElementById("italienisch_verben_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.wortstamm_3;
|
||
document.getElementById("italienisch_verben_3").textContent = item.italienisch_3;
|
||
document.getElementById("italienisch_verben_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.wortstamm_4;
|
||
document.getElementById("italienisch_verben_4").textContent = item.italienisch_4;
|
||
document.getElementById("italienisch_verben_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.wortstamm_5;
|
||
document.getElementById("italienisch_verben_5").textContent = item.italienisch_5;
|
||
document.getElementById("italienisch_verben_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.wortstamm_6;
|
||
document.getElementById("italienisch_verben_6").textContent = item.italienisch_6;
|
||
document.getElementById("italienisch_verben_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.wortstamm_7;
|
||
document.getElementById("italienisch_verben_7").textContent = item.italienisch_7;
|
||
document.getElementById("italienisch_verben_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>
|
||
<div class="menue">
|
||
<a href="neueKarte.php" class="menueLink">
|
||
< + neue Karte >
|
||
</a>
|
||
<a href="neueKarte.php" class="menueLink">
|
||
< Kartenansicht >
|
||
</a>
|
||
</div>
|
||
</body>
|
||
</html>
|