Joc de vocabular germană – Deutschzentrum
#german-game {
max-width: 850px;
margin: 20px auto;
padding: 24px;
font-family: Arial, sans-serif;
background: #f5f7f2;
color: #1e2b25;
border-radius: 18px;
box-sizing: border-box;
}
#game-header {
background: #174a3a;
color: white;
text-align: center;
padding: 24px 16px;
border-radius: 14px;
}
#game-header h2 {
margin: 8px 0;
font-size: 30px;
}
#game-header p {
line-height: 1.5;
}
#game-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin: 18px 0;
font-weight: bold;
}
#progress-track {
width: 100%;
height: 10px;
background: #d8e1da;
border-radius: 10px;
overflow: hidden;
margin-bottom: 18px;
}
#progress-bar {
width: 0;
height: 100%;
background: #f4c95d;
transition: width .3s;
}
#game-card {
background: white;
border: 1px solid #dde5df;
border-radius: 16px;
padding: 24px 18px;
text-align: center;
}
#german-word {
font-size: clamp(28px, 6vw, 46px);
font-weight: bold;
margin: 20px 0 8px;
overflow-wrap: anywhere;
}
#translation {
font-size: 24px;
font-weight: bold;
margin: 18px 0;
}
#game-hint {
min-height: 24px;
color: #617067;
line-height: 1.5;
}
.game-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 18px 0;
}
#german-game button {
border: none;
border-radius: 10px;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
line-height: 1.4;
}
#german-game button:focus-visible {
outline: 3px solid #e59a32;
outline-offset: 3px;
}
#speak-btn, #restart-btn {
background: #f4c95d;
color: #17251f;
font-weight: bold;
}
#reveal-btn, #next-btn {
background: #e8eee9;
color: #20362b;
}
#next-btn {
background: #174a3a;
color: white;
}
#answer-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
#german-game .answer-btn {
background: #f0f4f0;
color: #20362b;
border: 2px solid transparent;
min-height: 55px;
}
#german-game .answer-btn.correct {
background: #e0f5e8;
border-color: #26835c;
}
#german-game .answer-btn.wrong {
background: #fbe7e7;
border-color: #c84d4d;
}
#game-feedback {
min-height: 28px;
font-weight: bold;
margin-top: 16px;
}
#vocabulary-list {
margin-top: 22px;
background: white;
border-radius: 12px;
padding: 16px;
}
#vocabulary-list summary {
cursor: pointer;
font-weight: bold;
line-height: 1.5;
}
#word-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px;
margin-top: 16px;
}
.word-item {
background: #f0f4f0;
border-radius: 8px;
padding: 8px 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.word-item span {
overflow-wrap: anywhere;
}
#german-game .word-item button {
padding: 6px 10px;
flex-shrink: 0;
}
#game-footer {
text-align: center;
font-size: 13px;
margin-top: 18px;
line-height: 1.5;
color: #617067;
}
@media(max-width: 520px) {
#german-game {
padding: 12px;
}
#answer-options {
grid-template-columns: 1fr;
}
#game-card {
padding: 18px 12px;
}
#game-header h2 {
font-size: 25px;
}
}
Cuvântul 1 din 50
Scor: 0 / 0
🔊 Ascultă și alege traducerea corectă!
Hallo
Apasă „Ascultă cuvântul” pentru a auzi pronunția germană.
📚 Vezi lista completă a celor 50 de cuvinte
(function () {
const root = document.getElementById("german-game");
if (!root || root.dataset.initialized === "true") return;
root.dataset.initialized = "true";
const words = [
["Hallo", "salut"],
["Guten Morgen", "bună dimineața"],
["Guten Abend", "bună seara"],
["Auf Wiedersehen", "la revedere"],
["Bitte", "te rog / poftim"],
["Danke", "mulțumesc"],
["Ja", "da"],
["Nein", "nu"],
["Entschuldigung", "scuze"],
["Wie geht's?", "Ce mai faci?"],
["das Haus", "casa"],
["die Wohnung", "apartamentul"],
["das Zimmer", "camera"],
["die Küche", "bucătăria"],
["das Bad", "baia"],
["die Tür", "ușa"],
["das Fenster", "fereastra"],
["der Tisch", "masa"],
["der Stuhl", "scaunul"],
["das Bett", "patul"],
["die Familie", "familia"],
["die Mutter", "mama"],
["der Vater", "tatăl"],
["das Kind", "copilul"],
["der Freund", "prietenul"],
["die Freundin", "prietena"],
["die Schule", "școala"],
["der Lehrer", "profesorul"],
["das Buch", "cartea"],
["der Bleistift", "creionul"],
["das Wasser", "apa"],
["das Brot", "pâinea"],
["der Apfel", "mărul"],
["die Milch", "laptele"],
["der Käse", "brânza"],
["das Frühstück", "micul dejun"],
["der Kaffee", "cafeaua"],
["der Tee", "ceaiul"],
["die Banane", "banana"],
["die Schokolade", "ciocolata"],
["gehen", "a merge"],
["kommen", "a veni"],
["lernen", "a învăța"],
["sprechen", "a vorbi"],
["lesen", "a citi"],
["schreiben", "a scrie"],
["essen", "a mânca"],
["trinken", "a bea"],
["spielen", "a se juca"],
["schlafen", "a dormi"]
];
const $ = id => root.querySelector("#" + id);
let order = [];
let index = 0;
let score = 0;
let answered = 0;
let locked = false;
let finished = false;
function shuffle(array) {
const result = array.slice();
for (let i = result.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[result[i], result[j]] = [result[j], result[i]];
}
return result;
}
function speakGerman(text) {
if (!("speechSynthesis" in window)) {
$("game-hint").textContent =
"Browserul nu acceptă pronunția audio. Poți consulta lista de cuvinte.";
return;
}
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = "de-DE";
utterance.rate = 0.82;
const voices = window.speechSynthesis.getVoices();
const germanVoice = voices.find(voice =>
voice.lang.toLowerCase().startsWith("de")
);
if (germanVoice) {
utterance.voice = germanVoice;
}
window.speechSynthesis.speak(utterance);
$("game-hint").textContent =
"Ascultă și repetă cuvântul în limba germană!";
}
function updateScore() {
$("game-score").textContent = "Scor: " + score + " / " + answered;
}
function renderQuestion() {
locked = false;
finished = false;
const wordIndex = order[index];
const current = words[wordIndex];
$("question-number").textContent =
"Cuvântul " + (index + 1) + " din " + words.length;
$("progress-bar").style.width =
(index / words.length * 100) + "%";
updateScore();
$("german-word").textContent = current[0];
$("translation").textContent = current[1];
$("translation").hidden = true;
$("game-hint").textContent =
"Apasă „Ascultă cuvântul” pentru pronunție.";
$("game-feedback").textContent = "";
$("next-btn").disabled = true;
$("reveal-btn").disabled = false;
$("speak-btn").textContent = "🔊 Ascultă cuvântul";
const distractors = shuffle(
words
.map((word, i) => ({ meaning: word[1], index: i }))
.filter(item =>
item.index !== wordIndex &&
item.meaning !== current[1]
)
).slice(0, 3);
const options = shuffle([
{ meaning: current[1], correct: true },
...distractors.map(item => ({
meaning: item.meaning,
correct: false
}))
]);
const container = $("answer-options");
container.replaceChildren();
options.forEach(option => {
const button = document.createElement("button");
button.type = "button";
button.className = "answer-btn";
button.textContent = option.meaning;
button.addEventListener("click", function () {
chooseAnswer(button, option.correct, current[1]);
});
container.appendChild(button);
});
$("speak-btn").onclick = () => speakGerman(current[0]);
}
function chooseAnswer(button, correct, meaning) {
if (locked || finished) return;
locked = true;
answered++;
if (correct) {
score++;
button.classList.add("correct");
$("game-feedback").textContent = "Bravo! Răspuns corect! 🎉";
} else {
button.classList.add("wrong");
$("game-feedback").textContent =
"Răspunsul corect este: " + meaning;
Array.from($("answer-options").children).forEach(option => {
if (option.textContent === meaning) {
option.classList.add("correct");
}
});
}
updateScore();
$("next-btn").disabled = false;
$("reveal-btn").disabled = true;
}
function showTranslation() {
$("translation").hidden = false;
$("game-hint").textContent =
"Repetă cuvântul în germană și traducerea în română.";
}
function finishGame() {
finished = true;
$("german-word").textContent = "Fertig! 🎉";
$("translation").hidden = false;
$("translation").textContent =
"Scor final: " + score + " din " + answered;
$("game-hint").textContent =
"Ai terminat jocul! Poți începe o rundă nouă.";
$("game-feedback").textContent =
score === words.length
? "Excelent! Ai răspuns corect la toate întrebările!"
: "Bravo pentru participare! Mai joacă o rundă pentru a exersa.";
$("answer-options").replaceChildren();
$("next-btn").disabled = true;
$("reveal-btn").disabled = true;
$("progress-bar").style.width = "100%";
$("question-number").textContent = "Joc terminat";
$("speak-btn").textContent = "🔄 Joacă din nou";
$("speak-btn").onclick = startGame;
}
function startGame() {
if ("speechSynthesis" in window) {
window.speechSynthesis.cancel();
}
order = shuffle(words.map((word, i) => i));
index = 0;
score = 0;
answered = 0;
finished = false;
renderQuestion();
}
$("reveal-btn").addEventListener("click", showTranslation);
$("next-btn").addEventListener("click", function () {
if (finished || !locked) return;
if (index {
const item = document.createElement("div");
item.className = "word-item";
const label = document.createElement("span");
label.textContent = german + " — " + romanian;
const button = document.createElement("button");
button.type = "button";
button.className = "reveal-btn";
button.textContent = "🔊";
button.setAttribute("aria-label", "Ascultă " + german);
button.addEventListener("click", () => speakGerman(german));
item.append(label, button);
list.appendChild(item);
});
startGame();
})();