thomas.py/pyolingo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Karten für alle Wortarten designed

Browse Source
This commit is contained in:
p3t3rp1Lz 2026-04-04 19:31:36 +02:00
parent 89fcb86524
commit 6fa0e3ddca
3 changed files with 325 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
data.php
View File

@ -3,41 +3,72 @@
header('Content-Type: application/json'); header('Content-Type: application/json');
$stmt = $pdo->query("SELECT kk.id, /*$stmt = $pdo->query("SELECT kk.id,
vorderseite, vorderseite,
rueckseite, rueckseite,
farbe, farbe,
name name
FROM karteikarte kk FROM karteikarte kk
JOIN kategorie k ON k.id = kk.kategorie_id;"); JOIN kategorie k ON k.id = kk.kategorie_id;");*/
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
/*WITH zeile AS (
SELECT d.id, $stmt = $pdo->query("WITH zeile AS (SELECT d.id,
d.wort, d.wort,
k.name, k.name,
i.wort AS italienisch, i.wort AS italienisch,
i.farbe_id AS farbe, COALESCE(f.farbe, 'black') AS farbe,
ROW_NUMBER() OVER (PARTITION BY d.wort ORDER BY i.id) AS rn p.pronomen,
i.wortstamm,
i.suffix,
ROW_NUMBER() OVER (PARTITION BY d.wort ORDER BY i.personalpronomen_id NULLS FIRST, i.id) AS rn
FROM deutsch d FROM deutsch d
JOIN italienisch i ON i.deutsch_id = d.id JOIN italienisch i ON i.deutsch_id = d.id
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 JOIN kategorie k ON k.id = d.kategorie_id
) )
SELECT id, SELECT id,
wort, wort AS deutsch,
name, name AS wortart,
MAX(CASE WHEN rn = 1 THEN italienisch END) AS wort_1, MAX(CASE WHEN rn = 1 THEN italienisch END) AS italienisch_1,
MAX(CASE WHEN rn = 1 THEN farbe END) AS farbe_1, MAX(CASE WHEN rn = 1 THEN farbe END) AS farbe_1,
MAX(CASE WHEN rn = 2 THEN italienisch END) AS wort_2, MAX(CASE WHEN rn = 1 THEN pronomen END) AS pronomen_1,
MAX(CASE WHEN rn = 1 THEN wortstamm END) AS wortstamm_1,
MAX(CASE WHEN rn = 1 THEN suffix END) AS suffix_1,
MAX(CASE WHEN rn = 2 THEN italienisch END) AS italienisch_2,
MAX(CASE WHEN rn = 2 THEN farbe END) AS farbe_2, MAX(CASE WHEN rn = 2 THEN farbe END) AS farbe_2,
MAX(CASE WHEN rn = 3 THEN italienisch END) AS wort_3, MAX(CASE WHEN rn = 2 THEN pronomen END) AS pronomen_2,
MAX(CASE WHEN rn = 2 THEN wortstamm END) AS wortstamm_2,
MAX(CASE WHEN rn = 2 THEN suffix END) AS suffix_2,
MAX(CASE WHEN rn = 3 THEN italienisch END) AS italienisch_3,
MAX(CASE WHEN rn = 3 THEN farbe END) AS farbe_3, MAX(CASE WHEN rn = 3 THEN farbe END) AS farbe_3,
MAX(CASE WHEN rn = 4 THEN italienisch END) AS wort_4, MAX(CASE WHEN rn = 3 THEN pronomen END) AS pronomen_3,
MAX(CASE WHEN rn = 3 THEN wortstamm END) AS wortstamm_3,
MAX(CASE WHEN rn = 3 THEN suffix END) AS suffix_3,
MAX(CASE WHEN rn = 4 THEN italienisch END) AS italienisch_4,
MAX(CASE WHEN rn = 4 THEN farbe END) AS farbe_4, MAX(CASE WHEN rn = 4 THEN farbe END) AS farbe_4,
MAX(CASE WHEN rn = 5 THEN italienisch END) AS wort_5, MAX(CASE WHEN rn = 4 THEN pronomen END) AS pronomen_4,
MAX(CASE WHEN rn = 5 THEN farbe END) AS farbe_5 MAX(CASE WHEN rn = 4 THEN wortstamm END) AS wortstamm_4,
MAX(CASE WHEN rn = 4 THEN suffix END) AS suffix_4,
MAX(CASE WHEN rn = 5 THEN italienisch END) AS italienisch_5,
MAX(CASE WHEN rn = 5 THEN farbe END) AS farbe_5,
MAX(CASE WHEN rn = 5 THEN pronomen END) AS pronomen_5,
MAX(CASE WHEN rn = 5 THEN wortstamm END) AS wortstamm_5,
MAX(CASE WHEN rn = 5 THEN suffix END) AS suffix_5,
MAX(CASE WHEN rn = 6 THEN italienisch END) AS italienisch_6,
MAX(CASE WHEN rn = 6 THEN farbe END) AS farbe_6,
MAX(CASE WHEN rn = 6 THEN pronomen END) AS pronomen_6,
MAX(CASE WHEN rn = 6 THEN wortstamm END) AS wortstamm_6,
MAX(CASE WHEN rn = 6 THEN suffix END) AS suffix_6,
MAX(CASE WHEN rn = 7 THEN italienisch END) AS italienisch_7,
MAX(CASE WHEN rn = 7 THEN farbe END) AS farbe_7,
MAX(CASE WHEN rn = 7 THEN pronomen END) AS pronomen_7,
MAX(CASE WHEN rn = 7 THEN wortstamm END) AS wortstamm_7,
MAX(CASE WHEN rn = 7 THEN suffix END) AS suffix_7
FROM zeile FROM zeile
GROUP BY id, wort, name GROUP BY id, wort, name
ORDER BY wort;*/ ORDER BY id;");
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($karteikarten); echo json_encode($karteikarten);

244
index.php
View File

@ -3,7 +3,7 @@
$system = getenv('POSTGRES_SYSTEM') ?? 'test'; $system = getenv('POSTGRES_SYSTEM') ?? 'test';
$stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl $stmt = $pdo -> query("SELECT COUNT(*) AS gesamtanzahl
FROM karteikarte;"); FROM deutsch;");
$row = $stmt->fetch(PDO::FETCH_ASSOC); $row = $stmt->fetch(PDO::FETCH_ASSOC);
$gesamtanzahl = $row ? $row['gesamtanzahl'] : 0; $gesamtanzahl = $row ? $row['gesamtanzahl'] : 0;
@ -24,7 +24,86 @@
Leg´ los Leg´ los
</button> </button>
<button class="button-karteikarte" id="deutsch" /> <button class="button-karteikarte" id="deutsch" />
<button class="button-karteikarte" id="italienisch" /> <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_suffix" 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_suffix" 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_suffix" 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_suffix" 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_suffix" 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_suffix" 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_suffix" id="italienisch_suffix_7" />
</td>
</tr>
</table>
</button>
<script> <script>
let items = []; let items = [];
let index = 0; let index = 0;
@ -33,26 +112,31 @@
.then(r => r.json()) .then(r => r.json())
.then(data => items = data); .then(data => items = data);
items.sort(() => Math.random() - 0.5);
document.getElementById("start").onclick = function() { document.getElementById("start").onclick = function() {
if(document.getElementById("start").innerText != "Neustart") { if(document.getElementById("start").innerText != "Neustart") {
changeBackground()
document.getElementById("deutsch").style.display = "inline-block"; document.getElementById("deutsch").style.display = "inline-block";
document.getElementById("start").innerText = "Neustart"; document.getElementById("start").innerText = "Neustart";
showVorderseite(); showVorderseite();
} else { } else {
items.sort(() => Math.random() - 0.5); items.sort(() => Math.random() - 0.5);
index = 0; index = 0;
changeBackground();
showVorderseite(); showVorderseite();
document.getElementById("italienisch").style.display = "none"; 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").onclick = function() {
document.getElementById("italienisch").style.display = "inline-block";
document.getElementById("deutsch").classList.add("disabled"); 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(); showRueckseite();
changeBackground()
}; };
document.getElementById("italienisch").onclick = function() { document.getElementById("italienisch").onclick = function() {
@ -61,31 +145,159 @@
index++; index++;
if(index >= items.length) index = 0; if(index >= items.length) index = 0;
showVorderseite(); showVorderseite();
changeBackground() };
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() { function showVorderseite() {
resetWords();
let item = items[index]; let item = items[index];
document.getElementById("deutsch").innerText = item.vorderseite; document.getElementById("deutsch").innerText = item.deutsch;
document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length; document.getElementById("wortZaehler").innerText = (index + 1) + " / " + items.length;
} }
function showRueckseite() { function showRueckseite() {
let item = items[index]; let item = items[index];
document.getElementById("italienisch").innerText = item.rueckseite; 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;
switch(item.wortart) {
case("Allgemein"): {
document.getElementById("italienisch_1").style.display = "inline-block";
break;
}
case("Eigennamen"): {
document.getElementById("italienisch_1").style.display = "inline-block";
break;
}
case("Substantive"): {
document.getElementById("italienisch_1").style.display = "inline-block";
document.getElementById("italienisch_2").style.display = "inline-block";
break;
}
case("Adjektive"): {
document.getElementById("italienisch_1").style.display = "inline-block";
document.getElementById("italienisch_2").style.display = "inline-block";
document.getElementById("italienisch_3").style.display = "inline-block";
document.getElementById("italienisch_4").style.display = "inline-block";
document.getElementById("italienisch_5").style.display = "inline-block";
document.getElementById("italienisch_1").style.textDecoration = "underline";
break;
}
} }
function changeBackground() {
let item = items[index];
if(item.farbe != "default") {
document.getElementById("italienisch").style.color = item.farbe;
} else { } else {
document.getElementById("italienisch").style.color = "black"; // Grundform
document.getElementById("italienisch_wortstamm_1").style.display = "inline-block";
document.getElementById("italienisch_wortstamm_1").style.textDecoration = "underline";
document.getElementById("italienisch_verben_1").style.display = "inline-block";
document.getElementById("italienisch_verben_1").style.textDecoration = "underline";
document.getElementById("italienisch_suffix_1").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_1").textContent = item.suffix_1;
// gebeugte Formen
document.getElementById("italienisch_pronomen_2").textContent = item.pronomen_2;
document.getElementById("italienisch_wortstamm_2").style.display = "inline-block";
document.getElementById("italienisch_verben_2").style.display = "inline-block";
document.getElementById("italienisch_suffix_2").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_2").textContent = item.suffix_2;
document.getElementById("italienisch_pronomen_3").textContent = item.pronomen_3;
document.getElementById("italienisch_wortstamm_3").style.display = "inline-block";
document.getElementById("italienisch_verben_3").style.display = "inline-block";
document.getElementById("italienisch_suffix_3").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_3").textContent = item.suffix_3;
document.getElementById("italienisch_pronomen_4").textContent = item.pronomen_4;
document.getElementById("italienisch_wortstamm_4").style.display = "inline-block";
document.getElementById("italienisch_verben_4").style.display = "inline-block";
document.getElementById("italienisch_suffix_4").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_4").textContent = item.suffix_4;
document.getElementById("italienisch_pronomen_5").textContent = item.pronomen_5;
document.getElementById("italienisch_wortstamm_5").style.display = "inline-block";
document.getElementById("italienisch_verben_5").style.display = "inline-block";
document.getElementById("italienisch_suffix_5").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_5").textContent = item.suffix_5;
document.getElementById("italienisch_pronomen_6").textContent = item.pronomen_6;
document.getElementById("italienisch_wortstamm_6").style.display = "inline-block";
document.getElementById("italienisch_verben_6").style.display = "inline-block";
document.getElementById("italienisch_suffix_6").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_6").textContent = item.suffix_6;
document.getElementById("italienisch_pronomen_7").textContent = item.pronomen_7;
document.getElementById("italienisch_wortstamm_7").style.display = "inline-block";
document.getElementById("italienisch_verben_7").style.display = "inline-block";
document.getElementById("italienisch_suffix_7").style.display = "inline-block";
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;
document.getElementById("italienisch_suffix_7").textContent = item.suffix_7;
} }
} }
function resetWords() {
/*document.getElementsByClassName("p-karteikarte").textContent = "";
document.getElementsByClassName("p-karteikarte").style.color = "black";
document.getElementsByClassName("p-karteikarte").style.display = "none";*/
document.getElementById("italienisch_1").textContent = "";
document.getElementById("italienisch_1").style.color = "black";
document.getElementById("italienisch_1").style.display = "none";
document.getElementById("italienisch_1").style.textDecoration = "none";
document.getElementById("italienisch_2").textContent = "";
document.getElementById("italienisch_2").style.color = "black";
document.getElementById("italienisch_2").style.display = "none";
document.getElementById("italienisch_3").textContent = "";
document.getElementById("italienisch_3").style.color = "black";
document.getElementById("italienisch_3").style.display = "none";
document.getElementById("italienisch_4").textContent = "";
document.getElementById("italienisch_4").style.color = "black";
document.getElementById("italienisch_4").style.display = "none";
document.getElementById("italienisch_5").textContent = "";
document.getElementById("italienisch_5").style.color = "black";
document.getElementById("italienisch_5").style.display = "none";
document.getElementById("italienisch_6").textContent = "";
document.getElementById("italienisch_6").style.color = "black";
document.getElementById("italienisch_6").style.display = "none";
document.getElementById("italienisch_7").textContent = "";
document.getElementById("italienisch_7").style.color = "black";
document.getElementById("italienisch_7").style.display = "none";
}
</script> </script>
</div> </div>
<div class="menue"> <div class="menue">

37
style.css
View File

@ -1,5 +1,5 @@
html { html {
font-size: 26px; font-size: 24px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
@ -54,9 +54,9 @@ div.header{
.button-karteikarte { .button-karteikarte {
display: none; display: none;
font-size: 96px; font-size: 40px;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
width: 75%; width: 85%;
margin-top: 25px; margin-top: 25px;
padding: 25px 40px; padding: 25px 40px;
color: black; color: black;
@ -66,6 +66,20 @@ div.header{
0 4px 8px rgba(0,0,0,0.3); 0 4px 8px rgba(0,0,0,0.3);
} }
.p-karteikarte {
display: none;
margin: 0px;
}
.p-karteikarte_verben {
margin: 0px;
}
.p-karteikarte_verben_suffix {
margin: 0px;
margin-left: 15px;
}
#deutsch { #deutsch {
height: 250px; height: 250px;
} }
@ -76,7 +90,13 @@ div.header{
} }
#italienisch { #italienisch {
height: 750px; height: 650px;
flex-direction: column;
align-items: center;
}
#italienisch_verben {
height: 500px;
} }
div.inhalt { div.inhalt {
@ -119,3 +139,12 @@ a.menueLink {
a:visited { a:visited {
color:#14748A; color:#14748A;
} }
.table-karteikarte {
width: 100%;
text-align: left;
}
.td-pronomen {
width: 30%;
}