<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Német Melléknévragozás Kvíz - Végleges</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.container {
background-color: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 700px;
width: 100%;
}
h1, h2 {
color: #1d3557;
text-align: center;
}
.grammar-summary {
background-color: #eef2f7;
padding: 20px;
border-radius: 8px;
margin-bottom: 25px;
border-left: 5px solid #457b9d;
}
.grammar-summary blockquote {
border-left: 3px solid #6c757d;
padding-left: 15px;
margin-left: 0;
font-style: italic;
color: #495057;
}
ul {
list-style-type: '→ ';
padding-left: 20px;
}
.question-block {
margin-bottom: 20px;
}
.question-text {
font-weight: bold;
margin-bottom: 10px;
}
label {
display: block;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
margin-bottom: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
label:hover {
background-color: #f7f7f7;
}
input[type="radio"] {
margin-right: 10px;
}
button {
display: block;
width: 100%;
padding: 15px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: #457b9d;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
margin-top: 20px;
}
button:hover {
background-color: #1d3557;
}
#restart-button {
background-color: #6c757d;
}
#restart-button:hover {
background-color: #495057;
}
#quiz-container {
display: none;
}
#result-summary {
text-align: center;
font-size: 22px;
font-weight: bold;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.correct-summary { background-color: #d4edda; color: #155724; }
.incorrect-summary { background-color: #f8d7da; color: #721c24; }
.feedback-item {
border: 1px solid #ddd;
padding: 15px;
margin-top: 10px;
border-radius: 8px;
}
.feedback-incorrect { border-left: 5px solid #e63946; background-color: #fef2f2; }
.feedback-explanation { font-style: italic; color: #555; margin-top: 8px; border-top: 1px dashed #ccc; padding-top: 8px; }
</style>
</head>
<body>
<div class="container">
<h1>Német Melléknévragozás Kvíz</h1>
<div id="grammar-page">
<div class="grammar-summary">
<h2>Gyors Emlékeztető</h2>
<p>A német melléknévragozás kulcsa a kérdés: <strong>Mi áll a melléknév előtt?</strong></p>
<h4>1. Gyenge ragozás (Határozott névelő után)</h4>
<p>Ha a melléknév előtt <strong>der, die, das, dem, den...</strong> áll, a névelő már mindent elárul. A melléknév "gyenge", a végződése leggyakrabban <strong>-en</strong> vagy <strong>-e</strong>.</p>
<blockquote>
<p>Alanyeset (Nominativ): <strong>der</strong> gut<strong>e</strong> Mann (A jó férfi itt áll.)<br>
Tárgyeset (Akkusativ): <strong>den</strong> gut<strong>en</strong> Mann (Látom a jó férfit.)<br>
Részes eset (Dativ): <strong>dem</strong> gut<strong>en</strong> Mann (Segítek a jó férfinak.)</p>
</blockquote>
<h4>2. Erős ragozás (Névelő nélkül)</h4>
<p>Ha a melléknév előtt <strong>nincs semmi</strong>, neki kell "erősnek" lennie. A végződése átveszi a határozott névelő végződését:</p>
<ul>
<li><strong>der</strong> helyett → <strong>-er</strong></li>
<li><strong>das</strong> helyett → <strong>-es</strong></li>
<li><strong>dem</strong> helyett → <strong>-em</strong></li>
<li><strong>den</strong> helyett → <strong>-en</strong></li>
<li><strong>die</strong> helyett → <strong>-e</strong></li>
</ul>
<blockquote>
<p>Gut<strong>er</strong> Wein schmeckt gut.<br>
Ich kaufe gut<strong>en</strong> Wein.<br>
Mit gut<strong>em</strong> Wein.</p>
</blockquote>
</div>
<button onclick="startQuiz()">Kvíz indítása!</button>
</div>
<div id="quiz-container">
<form id="quiz-form"></form>
<button id="submit-button" onclick="calculateScore()">Kiértékelés</button>
<div id="result-container" style="display: none;">
<div id="result-summary"></div>
<div id="detailed-feedback"></div>
<button id="restart-button" onclick="restartQuiz()">Újra</button>
</div>
</div>
</div>
<script>
const quizData = [
{ question: "1. Der ______ Mann liest eine Zeitung.", options: { a: "alte", b: "alten", c: "alter" }, correct: "a", explanation: "Gyenge ragozás. Hímnem, alanyeset (Nominativ), 'der' után a melléknév '-e' végződést kap." },
{ question: "2. Ich trinke gern ______ Wasser.", options: { a: "kaltes", b: "kalte", c: "kalten" }, correct: "a", explanation: "Erős ragozás (nincs névelő). Semleges nem (das Wasser), tárgyeset (Akkusativ), a melléknév átveszi a 'das' végződését: '-es'." },
{ question: "3. Er hilft dem ______ Kind.", options: { a: "kleinen", b: "kleines", c: "kleinem" }, correct: "a", explanation: "Gyenge ragozás. A 'dem' névelő (részes eset, Dativ) után a melléknév szinte mindig '-en' végződést kap." },
{ question: "4. Sie kauft eine ______ Tasche.", options: { a: "rot", b: "rote", c: "roten" }, correct: "b", explanation: "Vegyes ragozás (határozatlan névelő után). Nőnem (die Tasche), tárgyeset (Akkusativ), 'eine' után a melléknév '-e' végződést kap." },
{ question: "5. Mit ______ Freunden macht alles mehr Spaß.", options: { a: "gut", b: "guten", c: "guter" }, correct: "b", explanation: "Erős ragozás. A 'mit' elöljáró részes esetet (Dativ) vonz. Többes szám, részes esetben a melléknév '-en' végződést kap." },
{ question: "6. Das ist das Auto meines ______ Bruders.", options: { a: "alten", b: "alter", c: "altem" }, correct: "a", explanation: "Gyenge ragozás. Birtokos névmás (meines) után, birtokos esetben (Genitiv) a melléknév '-en' végződést kap." },
{ question: "7. Wir essen frisch______ Brot zum Frühstück.", options: { a: "frischem", b: "frisches", c: "frischen" }, correct: "b", explanation: "Erős ragozás (nincs névelő). Semleges nem (das Brot), tárgyeset (Akkusativ), a melléknév átveszi a 'das' végződését: '-es'." },
{ question: "8. Die ______ Frau geht in den Park.", options: { a: "junge", b: "jungen", c: "junger" }, correct: "a", explanation: "Gyenge ragozás. Nőnem, alanyeset (Nominativ), 'die' után a melléknév '-e' végződést kap." },
{ question: "9. Ich sehe den ______ Baum.", options: { a: "große", b: "großen", c: "großer" }, correct: "b", explanation: "Gyenge ragozás. A 'den' névelő (tárgyeset, Akkusativ) után a melléknév '-en' végződést kap." },
{ question: "10. Das Geschenk ist für meine ______ Schwester.", options: { a: "liebe", b: "lieben", c: "lieber" }, correct: "a", explanation: "Gyenge ragozás (birtokos névmás után). A 'für' elöljáró tárgyesetet (Akkusativ) vonz. Nőnem, 'meine' után a melléknév '-e' végződést kap." }
];
function renderQuiz() {
const form = document.getElementById('quiz-form');
let html = '';
quizData.forEach((item, index) => {
html += `<div class="question-block">
<p class="question-text">${item.question}</p>`;
for (const key in item.options) {
html += `<label><input type="radio" name="q${index}" value="${key}"> ${item.options[key]}</label>`;
}
html += `</div>`;
});
form.innerHTML = html;
}
function startQuiz() {
document.getElementById('grammar-page').style.display = 'none';
document.getElementById('quiz-container').style.display = 'block';
renderQuiz();
}
function calculateScore() {
let score = 0;
let feedbackHtml = '<h2>Részletes kiértékelés:</h2>';
quizData.forEach((item, index) => {
const selectedOption = document.querySelector(`input[name="q${index}"]:checked`);
if (selectedOption) {
if (selectedOption.value === item.correct) {
score++;
} else {
feedbackHtml += `<div class="feedback-item feedback-incorrect"><strong>${item.question.replace('______', '...')}</strong><br>Te válaszod: <span style="color: red; font-weight: bold;">${item.options[selectedOption.value]}</span><br>Helyes válasz: <span style="color: green; font-weight: bold;">${item.options[item.correct]}</span><div class="feedback-explanation"><strong>Miért?</strong> ${item.explanation}</div></div>`;
}
} else {
feedbackHtml += `<div class="feedback-item feedback-incorrect"><strong>${item.question.replace('______', '...')}</strong><br>Erre a kérdésre nem válaszoltál.<br>Helyes válasz: <span style="color: green; font-weight: bold;">${item.options[item.correct]}</span><div class="feedback-explanation"><strong>Miért?</strong> ${item.explanation}</div></div>`;
}
});
const resultSummaryDiv = document.getElementById('result-summary');
let summaryText = `Eredményed: ${score} / ${quizData.length}<br>`;
if (score >= 8) {
resultSummaryDiv.className = 'correct-summary';
summaryText += "Szuper munka! Gratulálok!";
} else {
resultSummaryDiv.className = 'incorrect-summary';
summaryText += "Gyakorolj még egy kicsit, menni fog!";
}
resultSummaryDiv.innerHTML = summaryText;
if (score < quizData.length) {
document.getElementById('detailed-feedback').innerHTML = feedbackHtml;
} else {
document.getElementById('detailed-feedback').innerHTML = '';
}
document.getElementById('quiz-form').style.display = 'none';
document.getElementById('submit-button').style.display = 'none';
document.getElementById('result-container').style.display = 'block';
}
function restartQuiz() {
document.getElementById('result-container').style.display = 'none';
document.getElementById('detailed-feedback').innerHTML = '';
document.getElementById('quiz-form').reset();
document.getElementById('quiz-form').style.display = 'block';
document.getElementById('submit-button').style.display = 'block';
document.getElementById('quiz-container').style.display = 'none';
document.getElementById('grammar-page').style.display = 'block';
}
</script>
</body>
</html>