Kategorieauswahl für quiz, Menüüberarbeitung
This commit is contained in:
parent
241a7c2897
commit
29372b8200
@ -21,7 +21,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h2 class="seitentitel">pyolingo</h2>
|
||||
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||
</div>
|
||||
<div class="inhalt">
|
||||
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
||||
|
||||
8
data.php
8
data.php
@ -1,9 +1,13 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/includes/db_connect.php';
|
||||
|
||||
$data = json_decode(file_get_contents("php://input"), true);
|
||||
|
||||
$kategorie = $data['kategorieAuswahl'] ?? 'Substantive';
|
||||
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$stmt = $pdo->query("WITH zeile AS (
|
||||
$stmt = $pdo->prepare("WITH zeile AS (
|
||||
SELECT d.id,
|
||||
d.wort,
|
||||
k.name,
|
||||
@ -18,6 +22,7 @@
|
||||
LEFT OUTER JOIN personalpronomen p ON p.id = i.personalpronomen_id
|
||||
LEFT OUTER JOIN farbe f ON f.id = i.farbe_id
|
||||
JOIN kategorie k ON k.id = d.kategorie_id
|
||||
WHERE k.name = :kategorie
|
||||
)
|
||||
SELECT id,
|
||||
wort AS deutsch,
|
||||
@ -60,6 +65,7 @@
|
||||
FROM zeile
|
||||
GROUP BY id, wort, name
|
||||
ORDER BY id;");
|
||||
$stmt->execute(['kategorie' => $kategorie]);
|
||||
|
||||
$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
|
||||
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>
|
||||
@ -16,291 +10,19 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h2 class="seitentitel">pyolingo</h2>
|
||||
<h2 id="wortZaehler"><?= $gesamtanzahl ?></h2>
|
||||
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||
<a href="neueKarte.php" id="neueKarte">
|
||||
<img src="img/plus.svg" style="width:50px; height:50px"/>
|
||||
</a>
|
||||
</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;
|
||||
|
||||
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>
|
||||
<form id="kategorieAuswahl" action="quiz.php" method="post">
|
||||
<input type="submit" name="kategorieAuswahl" value="Substantive">
|
||||
<input type="submit" name="kategorieAuswahl" value="Adjektive">
|
||||
<input type="submit" name="kategorieAuswahl" value="Allgemein">
|
||||
<input type="submit" name="kategorieAuswahl" value="Eigennamen">
|
||||
<input type="submit" name="kategorieAuswahl" value="Verben">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -11,7 +11,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h2 class="seitentitel">pyolingo</h2>
|
||||
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||
</div>
|
||||
<div class="inhalt">
|
||||
<form action="allgemein.php">
|
||||
@ -25,10 +25,5 @@
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="menue">
|
||||
<a href="index.php" class="menueLink">
|
||||
< home >
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</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;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
@ -278,3 +282,31 @@ a:visited {
|
||||
bottom: 200px;
|
||||
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>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h2 class="seitentitel">pyolingo</h2>
|
||||
<h2 class="seitentitel"><a href="index.php" id="homeButton">pyolingo</a></h2>
|
||||
</div>
|
||||
<div class="inhalt">
|
||||
<form id="form_hinzufuegenkarte" action="forms/hinzufuegenKarte.php" method="post">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user