Karten für alle Wortarten designed
This commit is contained in:
p3t3rp1Lz
parent
89fcb86524
commit
6fa0e3ddca
91
data.php
91
data.php
@ -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;");*/
|
||||||
|
|
||||||
|
|
||||||
|
$stmt = $pdo->query("WITH zeile AS (SELECT d.id,
|
||||||
|
d.wort,
|
||||||
|
k.name,
|
||||||
|
i.wort AS italienisch,
|
||||||
|
COALESCE(f.farbe, 'black') AS farbe,
|
||||||
|
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
|
||||||
|
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
|
||||||
|
)
|
||||||
|
SELECT id,
|
||||||
|
wort AS deutsch,
|
||||||
|
name AS wortart,
|
||||||
|
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 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 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 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 pronomen END) AS pronomen_4,
|
||||||
|
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
|
||||||
|
GROUP BY id, wort, name
|
||||||
|
ORDER BY id;");
|
||||||
|
|
||||||
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
$karteikarten = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
/*WITH zeile AS (
|
|
||||||
SELECT d.id,
|
|
||||||
d.wort,
|
|
||||||
k.name,
|
|
||||||
i.wort AS italienisch,
|
|
||||||
i.farbe_id AS farbe,
|
|
||||||
ROW_NUMBER() OVER (PARTITION BY d.wort ORDER BY i.id) AS rn
|
|
||||||
FROM deutsch d
|
|
||||||
JOIN italienisch i ON i.deutsch_id = d.id
|
|
||||||
JOIN kategorie k ON k.id = d.kategorie_id
|
|
||||||
)
|
|
||||||
SELECT id,
|
|
||||||
wort,
|
|
||||||
name,
|
|
||||||
MAX(CASE WHEN rn = 1 THEN italienisch END) AS wort_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 = 2 THEN farbe END) AS farbe_2,
|
|
||||||
MAX(CASE WHEN rn = 3 THEN italienisch END) AS wort_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 = 4 THEN farbe END) AS farbe_4,
|
|
||||||
MAX(CASE WHEN rn = 5 THEN italienisch END) AS wort_5,
|
|
||||||
MAX(CASE WHEN rn = 5 THEN farbe END) AS farbe_5
|
|
||||||
FROM zeile
|
|
||||||
GROUP BY id, wort, name
|
|
||||||
ORDER BY wort;*/
|
|
||||||
|
|
||||||
echo json_encode($karteikarten);
|
echo json_encode($karteikarten);
|
||||||
248
index.php
248
index.php
@ -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,30 +145,158 @@
|
|||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 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 changeBackground() {
|
function resetWords() {
|
||||||
let item = items[index];
|
/*document.getElementsByClassName("p-karteikarte").textContent = "";
|
||||||
|
document.getElementsByClassName("p-karteikarte").style.color = "black";
|
||||||
if(item.farbe != "default") {
|
document.getElementsByClassName("p-karteikarte").style.display = "none";*/
|
||||||
document.getElementById("italienisch").style.color = item.farbe;
|
document.getElementById("italienisch_1").textContent = "";
|
||||||
} else {
|
document.getElementById("italienisch_1").style.color = "black";
|
||||||
document.getElementById("italienisch").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>
|
||||||
|
|||||||
39
style.css
39
style.css
@ -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,14 +90,20 @@ div.header{
|
|||||||
}
|
}
|
||||||
|
|
||||||
#italienisch {
|
#italienisch {
|
||||||
height: 750px;
|
height: 650px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#italienisch_verben {
|
||||||
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.inhalt {
|
div.inhalt {
|
||||||
margin-top: 150px;
|
margin-top: 150px;
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 80px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction:column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -118,4 +138,13 @@ a.menueLink {
|
|||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color:#14748A;
|
color:#14748A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-karteikarte {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-pronomen {
|
||||||
|
width: 30%;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user