100 lines
2.7 KiB
PHP
100 lines
2.7 KiB
PHP
<?php
|
||
require_once __DIR__ . '/includes/db_connect.php';
|
||
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
|
||
|
||
$stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl
|
||
FROM karteikarte;");
|
||
$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" />
|
||
<script>
|
||
let items = [];
|
||
let index = 0;
|
||
|
||
fetch("data.php")
|
||
.then(r => r.json())
|
||
.then(data => items = data);
|
||
|
||
document.getElementById("start").onclick = function() {
|
||
if(document.getElementById("start").innerText != "Neustart") {
|
||
changeBackground()
|
||
document.getElementById("deutsch").style.display = "inline-block";
|
||
document.getElementById("start").innerText = "Neustart";
|
||
showVorderseite();
|
||
} else {
|
||
items.sort(() => Math.random() - 0.5);
|
||
index = 0;
|
||
changeBackground();
|
||
showVorderseite();
|
||
document.getElementById("italienisch").style.display = "none";
|
||
}
|
||
};
|
||
|
||
document.getElementById("deutsch").onclick = function() {
|
||
document.getElementById("italienisch").style.display = "inline-block";
|
||
document.getElementById("deutsch").classList.add("disabled");
|
||
showRueckseite();
|
||
changeBackground()
|
||
};
|
||
|
||
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();
|
||
changeBackground()
|
||
};
|
||
|
||
function showVorderseite() {
|
||
let item = items[index];
|
||
|
||
document.getElementById("deutsch").innerText = item.vorderseite;
|
||
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
|
||
}
|
||
|
||
function showRueckseite() {
|
||
let item = items[index];
|
||
|
||
document.getElementById("italienisch").innerText = item.rueckseite;
|
||
}
|
||
|
||
function changeBackground() {
|
||
let item = items[index];
|
||
|
||
if(item.farbe != "default") {
|
||
document.getElementById("italienisch").style.color = item.farbe;
|
||
} else {
|
||
document.getElementById("italienisch").style.color = "black";
|
||
}
|
||
}
|
||
</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>
|