PBT3H24AKH/LerningCSW
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grundfunktion zur Erstellung und Darstellung von Flashcards implementiert

Browse Source
This commit is contained in:
Stanislav Kharchenko
2026-01-28 15:04:13 +01:00
parent 4c70efcc64
commit 5db3c93046
3 changed files with 286 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
WoerterLernen.html
View File

@@ -7,29 +7,38 @@
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
<h1>Flashcards Generator</h1> <header class="main-header">
<h1>Flashcards Generator</h1>
</header>
<div class="main-wrapper">
<div class="section-title">
<div class="content">
<label for="inputText" class="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
</div>
<div id="aufgabe_fuer_gpt">
<pre id="formatText">
Bitte formatiere meine Wortliste exakt nach folgendem Schema.
Jeder Eintrag muss durch eine Leerzeile getrennt sein.
<label for="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label> Englisches Wort
[IPA-Transkription]
Beispielsatz auf Englisch
Deutsche Übersetzung des Wortes
Beispielsatz auf Deutsch
</pre>
<button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
</div>
<div class="content">
<label for="inputText" class="section-title">Füge deinen Text hier ein</label>
<textarea id="inputText" placeholder="Hier Text einfügen..."></textarea>
</div>
</div>
<button id="kartenErstellen">Karten erstellen</button>
<div id="aufgabe_fuer_gpt"> <div id="kartenContainer"></div>
<pre id="formatText">
Bitte formatiere meine Wortliste exakt nach folgendem Schema.
Jeder Eintrag muss durch eine Leerzeile getrennt sein.
Englisches Wort <div id="flashcards-container"></div>
[IPA-Transkription] <script src="js/eigenerCode.js"></script>
Beispielsatz auf Englisch
Deutsche Übersetzung des Wortes
Beispielsatz auf Deutsch
</pre>
<button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
</div> </div>
<textarea id="inputText" rows="10" cols="50" placeholder="Hier Text einfügen..."></textarea>
<div id="kartenContainer"></div>
<button id="kartenErstellen">Karten erstellen</button>
<div id="flashcards-container"></div>
<script src="js/eigenerCode.js"></script>
</body> </body>
</html> </html>

211
css/style.css
View File

@@ -1,31 +1,192 @@
#aufgabe_fuer_gpt { body {
position: relative; margin: 0;
border: 1px solid #ccc; padding: 0;
padding: 10px; font-family: "Arial", sans-serif;
border-radius: 5px; background-color: #f4f6fb;
width: 500px; color: #333;
background: #f9f9f9; }
h1 {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.main-header {
position: relative;
top: 0;
width: 100%;
background-color: #005b5b;
color: white;
padding: 18px 0;
text-align: center;
z-index: 1000;
}
.main-header h1 {
margin: 0;
font-size: 46px;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
}
.main-wrapper {
max-width: 900px;
margin: 0 auto;
margin-top: 10px;
padding: 20px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.input-section {
margin-bottom: 30px;
}
.input-section h2 {
margin-bottom: 10px;
}
.hint-text {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}
#aufgabe_fuer_gpt {
position: relative;
background-color: #f0f3ff;
border: 1px dashed #9aa5ff;
border-radius: 8px;
padding: 12px;
margin: 20px;
margin-top: 0;
}
#aufgabe_fuer_gpt pre {
margin: 0;
font-size: 13px;
white-space: pre-wrap;
}
#copyButton {
position: absolute;
top: 8px;
right: 8px;
background: white;
border: 1px solid #ccc;
border-radius: 6px;
cursor: pointer;
padding: 4px 6px;
}
.content {
max-width: 900px;
margin: 0 auto;
padding: 30px 20px;
}
.section-title {
display: block;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
}
#inputText {
width: 100%;
min-height: 220px;
padding: 14px;
font-size: 16px;
line-height: 1.5;
border-radius: 6px;
border: 1px solid #ccc;
resize: vertical;
box-sizing: border-box;
} }
#kartenContainer { #kartenContainer {
display: flex; margin-top: 30px;
gap: 15px; display: none;
flex-wrap: wrap; flex-direction: column;
justify-content: center; gap: 40px;
align-items: center;
} }
.karte { .page {
width: 120px; width: 210mm;
height: 180px; height: 297mm;
border: 2px solid #333; /* border: px solid #005b5b; */
border-radius: 10px; padding: 0;
background-color: white; box-sizing: border-box;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1); background: white;
display: flex;
align-items: center; display: grid;
justify-content: center; grid-template-columns: repeat(2, 1fr);
font-size: 24px; grid-template-rows: repeat(4, 1fr);
cursor: pointer; }
user-select: none;
transition: transform 0.2s; .page-back {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
direction: rtl;
}
.page-back .card {
direction: ltr;
}
.card {
position: relative;
overflow: hidden;
border: 1px dashed #333;
border-radius: 0;
padding: 25px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
font-family: Arial, sans-serif;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10mm;
}
.card-en::before {
background-color: #f4c430;
}
.card-de::before {
background-color: #ccc;
}
.card h2 {
margin: 0;
margin-bottom: 6px;
font-size: 22px;
}
.card .ipa {
font-size: 14px;
color: #666;
/* margin-bottom: 80px; */
}
.card .example {
margin-top: 80px;
font-size: 14px;
color: #333;
} }

95
js/eigenerCode.js
View File

@@ -1,4 +1,6 @@
document.getElementById('copyButton').addEventListener('click', () => { let parsedArray = [];
document.getElementById('copyButton').addEventListener('click', () => {
const text = document.getElementById('formatText').innerText; const text = document.getElementById('formatText').innerText;
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
@@ -6,10 +8,31 @@
}).catch(err => { }).catch(err => {
console.error('Konnte nicht kopieren: ', err); console.error('Konnte nicht kopieren: ', err);
}); });
for (let i = 0; i < parsedArray.length; i += 8) {
const pageFront = document.createElement("div");
pageFront.className = "page_front";
const pageBack = document.createElement("div");
pageBack.className = "page_back";
const currentSlice = parsedArray.slice(i, i + 8);
currentSlice.forEach(karte => {
const frontCard = document.createElement("div");
frontCard.className = "card";
frontCard.innerHTML = `<h2>${karte.englisch}</h2><div>${karte.ipa}</div><p>${karte.beispielEN}</p>`;
pageFront.appendChild(frontCard);
const backCard = document.createElement("div");
backCard.className = "card";
backCard.innerHTML = `<h2>${karte.deutsch}</h2><p>${karte.beispielDE}</p>`;
pageBack.appendChild(backCard);
});
container.appendChild(pageFront);
container.appendChild(pageBack);
}
}); });
const inputText = document.getElementById("inputText").value;
const cards = parseWordText(inputText);
function parseWordText(inputText) { function parseWordText(inputText) {
const wortBlocks = inputText.trim().split("\n\n"); const wortBlocks = inputText.trim().split("\n\n");
const wortListe = []; const wortListe = [];
@@ -31,35 +54,59 @@ function parseWordText(inputText) {
}; };
wortListe.push(wortObj); wortListe.push(wortObj);
console.log(wortObj);
} }
return wortListe; return wortListe;
} }
function createPagePair() {
const frontPage = document.createElement("div");
frontPage.className = "page page-front";
const backPage = document.createElement("div");
backPage.className = "page page-back";
return { frontPage, backPage };
}
const button = document.getElementById("kartenErstellen"); const button = document.getElementById("kartenErstellen");
const container = document.getElementById("kartenContainer"); const onlineContainer = document.getElementById("kartenContainer");
const frontPage = document.querySelector(".page_front");
const backPage = document.querySelector(".page_back");
button.addEventListener("click", () => { button.addEventListener("click", () => {
container.innerHTML = ""; const inputText = document.getElementById("inputText").value;
parsedArray.forEach((karte, index) => { parsedArray = parseWordText(inputText);
const karteDiv = document.createElement("div");
karteDiv.classList.add("karte");
karteDiv.innerHTML = ` kartenContainer.innerHTML = "";
<div class="karte-inhalt"> kartenContainer.style.display = "flex";
<div class="karte-vorderseite"> kartenContainer.style.flexDirection = "column";
<h2>${karte.englisch}</h2>
<p><em>${karte.ipa}</em></p>
<p>Beispiel: ${karte.beispielEN}</p>
</div>
<div class="karte-rückseite">
<h2>${karte.deutsch}</h2>
<p>Beispiel: ${karte.beispielDE}</p>
</div>
</div>
`;
container.appendChild(karteDiv);
}); for (let i = 0; i < parsedArray.length; i += 8) {
const { frontPage, backPage } = createPagePair();
parsedArray.slice(i, i + 8).forEach((karte) => {
const frontCard = document.createElement("div");
frontCard.className = "card card-en";
frontCard.innerHTML = `
<h2>${karte.englisch}</h2>
<div class="ipa">${karte.ipa}</div>
<div class="example">${karte.beispielEN}</div>
`;
frontPage.appendChild(frontCard);
const backCard = document.createElement("div");
backCard.className = "card card-de";
backCard.innerHTML = `
<h2>${karte.deutsch}</h2>
<div class="example">${karte.beispielDE}</div>
`;
backPage.appendChild(backCard);
});
kartenContainer.appendChild(frontPage);
kartenContainer.appendChild(backPage);
}
}); });