Kategorieauswahl für quiz, Menüüberarbeitung
This commit is contained in:
parent
241a7c2897
commit
29372b8200
@ -21,7 +21,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h2 class="seitentitel">pyolingo</h2>
|
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="inhalt">
|
<div class="inhalt">
|
||||||
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
||||||
|
|||||||
10
data.php
10
data.php
@ -1,9 +1,13 @@
|
|||||||
<?php
|
<?php
|
||||||
require_once __DIR__ . '/includes/db_connect.php';
|
require_once __DIR__ . '/includes/db_connect.php';
|
||||||
|
|
||||||
header('Content-Type: application/json');
|
$data = json_decode(file_get_contents("php://input"), true);
|
||||||
|
|
||||||
$stmt = $pdo->query("WITH zeile AS (
|
$kategorie = $data['kategorieAuswahl'] ?? 'Substantive';
|
||||||
|
|
||||||
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare("WITH zeile AS (
|
||||||
SELECT d.id,
|
SELECT d.id,
|
||||||
d.wort,
|
d.wort,
|
||||||
k.name,
|
k.name,
|
||||||
@ -18,6 +22,7 @@
|
|||||||
LEFT OUTER JOIN personalpronomen p ON p.id = i.personalpronomen_id
|
LEFT OUTER JOIN personalpronomen p ON p.id = i.personalpronomen_id
|
||||||
LEFT OUTER JOIN farbe f ON f.id = i.farbe_id
|
LEFT OUTER JOIN farbe f ON f.id = i.farbe_id
|
||||||
JOIN kategorie k ON k.id = d.kategorie_id
|
JOIN kategorie k ON k.id = d.kategorie_id
|
||||||
|
WHERE k.name = :kategorie
|
||||||
)
|
)
|
||||||
SELECT id,
|
SELECT id,
|
||||||
wort AS deutsch,
|
wort AS deutsch,
|
||||||
@ -60,6 +65,7 @@
|
|||||||
FROM zeile
|
FROM zeile
|
||||||
GROUP BY id, wort, name
|
GROUP BY id, wort, name
|
||||||
ORDER BY id;");
|
ORDER BY id;");
|
||||||
|
$stmt->execute(['kategorie' => $kategorie]);
|
||||||
|
|
||||||
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
|||||||
13
img/home.svg
Normal file
13
img/home.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||||
|
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg fill="#14748A" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
width="800px" height="800px" viewBox="0 0 547.596 547.596"
|
||||||
|
xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path d="M540.76,254.788L294.506,38.216c-11.475-10.098-30.064-10.098-41.386,0L6.943,254.788
|
||||||
|
c-11.475,10.098-8.415,18.284,6.885,18.284h75.964v221.773c0,12.087,9.945,22.108,22.108,22.108h92.947V371.067
|
||||||
|
c0-12.087,9.945-22.108,22.109-22.108h93.865c12.239,0,22.108,9.792,22.108,22.108v145.886h92.947
|
||||||
|
c12.24,0,22.108-9.945,22.108-22.108v-221.85h75.965C549.021,272.995,552.081,264.886,540.76,254.788z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 867 B |
1
img/plus.svg
Normal file
1
img/plus.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg id="Layer_1" data-name="Layer 1" fill="#14748A" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.cls-1{fill-rule:evenodd;}</style></defs><title>add-plus</title><path class="cls-1" d="M61.44,0A61.44,61.44,0,1,1,0,61.44,61.44,61.44,0,0,1,61.44,0ZM93.79,55.21V67.66a4.63,4.63,0,0,1-4.62,4.62H72.28V89.17a4.63,4.63,0,0,1-4.62,4.62H55.21a4.63,4.63,0,0,1-4.61-4.62V72.28H33.7a4.63,4.63,0,0,1-4.61-4.62V55.21A4.63,4.63,0,0,1,33.7,50.6H50.6V33.7a4.63,4.63,0,0,1,4.61-4.61H67.66a4.63,4.63,0,0,1,4.62,4.61V50.6H89.17a4.63,4.63,0,0,1,4.62,4.61Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 576 B |
300
index.php
300
index.php
@ -1,12 +1,6 @@
|
|||||||
<?php
|
<?php
|
||||||
require_once __DIR__ . '/includes/db_connect.php';
|
require_once __DIR__ . '/includes/db_connect.php';
|
||||||
$system = getenv('POSTGRES_SYSTEM') ?? 'test';
|
$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>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
@ -16,291 +10,19 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h2 class="seitentitel">pyolingo</h2>
|
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||||
<h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
|
<a href="neueKarte.php" id="neueKarte">
|
||||||
|
<img src="img/plus.svg" style="width:50px; height:50px"/>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="inhalt">
|
<div class="inhalt">
|
||||||
<button class="button-ellipsoid" id="start">
|
<form id="kategorieAuswahl" action="quiz.php" method="post">
|
||||||
Leg´ los
|
<input type="submit" name="kategorieAuswahl" value="Substantive">
|
||||||
</button>
|
<input type="submit" name="kategorieAuswahl" value="Adjektive">
|
||||||
<button class="button-karteikarte" id="deutsch" />
|
<input type="submit" name="kategorieAuswahl" value="Allgemein">
|
||||||
<button class="button-karteikarte" id="italienisch">
|
<input type="submit" name="kategorieAuswahl" value="Eigennamen">
|
||||||
<p class="p-karteikarte" id="italienisch_1" />
|
<input type="submit" name="kategorieAuswahl" value="Verben">
|
||||||
<p class="p-karteikarte" id="italienisch_2" />
|
</form>
|
||||||
<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_endung_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_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" />
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</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;
|
|
||||||
|
|
||||||
fetch("data.php")
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(data => items = data);
|
|
||||||
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
document.getElementById("deutsch").onclick = function() {
|
|
||||||
buttonDeutsch();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("italienisch").onclick = function() {
|
|
||||||
buttonItalienisch();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("italienisch_verben").onclick = function() {
|
|
||||||
buttonItalienischVerben();
|
|
||||||
}
|
|
||||||
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
|
|
||||||
function buttonDeutsch() {
|
|
||||||
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();
|
|
||||||
};
|
|
||||||
|
|
||||||
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").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_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>
|
|
||||||
<div class="menue">
|
|
||||||
<a href="neueKarte.php" class="menueLink">
|
|
||||||
< neue Karte >
|
|
||||||
</a>
|
|
||||||
<a href="neueKarte.php" class="menueLink">
|
|
||||||
< Kartenansicht >
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h2 class="seitentitel">pyolingo</h2>
|
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="inhalt">
|
<div class="inhalt">
|
||||||
<form action="allgemein.php">
|
<form action="allgemein.php">
|
||||||
@ -25,10 +25,5 @@
|
|||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="menue">
|
|
||||||
<a href="index.php" class="menueLink">
|
|
||||||
< home >
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
316
quiz.php
Normal file
316
quiz.php
Normal file
@ -0,0 +1,316 @@
|
|||||||
|
<?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">
|
||||||
|
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_endung_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_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" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</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 kategorieAuswahl = "<?= $kategorieAuswahl ?>";
|
||||||
|
|
||||||
|
fetch("data.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {"Content-Type": "application/json"},
|
||||||
|
body: JSON.stringify({ kategorieAuswahl: kategorieAuswahl })
|
||||||
|
})
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(data => items = data);
|
||||||
|
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.getElementById("deutsch").onclick = function() {
|
||||||
|
buttonDeutsch();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("italienisch").onclick = function() {
|
||||||
|
buttonItalienisch();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("italienisch_verben").onclick = function() {
|
||||||
|
buttonItalienischVerben();
|
||||||
|
}
|
||||||
|
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
|
||||||
|
function buttonDeutsch() {
|
||||||
|
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();
|
||||||
|
};
|
||||||
|
|
||||||
|
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").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_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>
|
||||||
32
style.css
32
style.css
@ -8,6 +8,10 @@ body {
|
|||||||
color: #14748A;
|
color: #14748A;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
}
|
}
|
||||||
@ -278,3 +282,31 @@ a:visited {
|
|||||||
bottom: 200px;
|
bottom: 200px;
|
||||||
background-color: rgb(122, 122, 122);
|
background-color: rgb(122, 122, 122);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=submit] {
|
||||||
|
font-size: 26px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
height: 100px;
|
||||||
|
width: 300px;
|
||||||
|
margin-top: 25px;
|
||||||
|
padding: 25px 40px;
|
||||||
|
color: black;
|
||||||
|
background: radial-gradient(ellipse at center, #14748A 0%, #169ab7 70%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 180px / 130px;
|
||||||
|
box-shadow: inset 0 3px 6px rgba(255,255,255,0.4),
|
||||||
|
0 4px 8px rgba(0,0,0,0.3);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#homeButton {
|
||||||
|
margin-left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#neueKarte {
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
@ -21,7 +21,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h2 class="seitentitel">pyolingo</h2>
|
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="inhalt">
|
<div class="inhalt">
|
||||||
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user