#dzwinter-game {
--navy: #173b69;
--blue: #268ee8;
--ice: #eaf8ff;
font-family: Arial, sans-serif;
color: #173b69;
background: linear-gradient(145deg, #e8f8ff, #f7f1ff 55%, #fff9e9);
border-radius: 24px;
padding: 24px;
max-width: 1000px;
margin: 20px auto;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
#dzwinter-game * { box-sizing: border-box; }
#dzwinter-game .dz-hero {
text-align: center;
padding: 12px 8px 20px;
}
#dzwinter-game .dz-brand {
display: inline-block;
background: #173b69;
color: white;
padding: 8px 18px;
border-radius: 30px;
font-size: 13px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 12px;
}
#dzwinter-game h2 {
font-size: clamp(25px, 5vw, 39px);
color: #173b69;
line-height: 1.2;
margin: 4px 0 12px;
}
#dzwinter-game .dz-subtitle {
color: #4c6684;
font-size: 16px;
line-height: 1.6;
margin: 0 auto;
max-width: 600px;
}
#dzwinter-game .dz-decor {
font-size: 34px;
margin: 12px 0 0;
letter-spacing: 8px;
}
#dzwinter-game .dz-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
#dzwinter-game .dz-stat {
text-align: center;
background: white;
padding: 12px 5px;
border-radius: 15px;
box-shadow: 0 4px 12px #173b6910;
}
#dzwinter-game .dz-stat strong {
display: block;
font-size: 23px;
color: #1688de;
margin-bottom: 4px;
}
#dzwinter-game .dz-stat span {
font-size: 12px;
color: #60748c;
}
#dzwinter-game .dz-instruction {
text-align: center;
background: #d8efff;
padding: 13px;
border-radius: 14px;
font-weight: 700;
line-height: 1.5;
margin-bottom: 20px;
}
#dzwinter-game .dz-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: start;
}
#dzwinter-game .dz-panel {
background: #ffffffd9;
border: 2px solid #d8ecfa;
border-radius: 19px;
padding: 15px;
min-width: 0;
}
#dzwinter-game .dz-panel h3 {
font-size: 17px;
margin: 2px 0 5px;
text-align: center;
color: #173b69;
}
#dzwinter-game .dz-hint {
text-align: center;
color: #6b8095;
font-size: 12px;
margin: 0 0 14px;
}
#dzwinter-game .dz-words,
#dzwinter-game .dz-targets {
display: grid;
gap: 9px;
}
#dzwinter-game .dz-word {
min-height: 49px;
padding: 11px 8px;
border: 2px solid #b9ddfb;
border-radius: 12px;
background: #eff8ff;
color: #174b80;
font-weight: 800;
font-size: 15px;
text-align: center;
cursor: grab;
user-select: none;
touch-action: manipulation;
transition: transform .15s, background .15s, border-color .15s;
}
#dzwinter-game .dz-word:hover {
background: #d9efff;
transform: translateY(-2px);
}
#dzwinter-game .dz-word.dz-selected {
background: #ffe9a8;
border-color: #f0ae24;
box-shadow: 0 0 0 3px #f0ae2433;
}
#dzwinter-game .dz-word.dz-used {
opacity: .4;
cursor: default;
border-style: dashed;
}
#dzwinter-game .dz-target {
min-height: 64px;
border: 2px dashed #c4d9ed;
border-radius: 12px;
background: #fbfdff;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 5px;
transition: background .15s, border-color .15s;
}
#dzwinter-game .dz-target.dz-over {
background: #d9f7e8;
border-color: #26ad77;
}
#dzwinter-game .dz-target.dz-correct {
background: #dff9e9;
border: 2px solid #31b879;
}
#dzwinter-game .dz-target.dz-wrong {
background: #fff0e8;
border: 2px solid #f29a76;
}
#dzwinter-game .dz-ro {
font-weight: 800;
font-size: 14px;
color: #244765;
}
#dzwinter-game .dz-answer {
color: #178253;
font-size: 13px;
font-weight: 800;
overflow-wrap: anywhere;
}
#dzwinter-game .dz-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 12px;
}
#dzwinter-game .dz-btn {
border: 0;
border-radius: 30px;
padding: 13px 22px;
font-weight: 800;
font-size: 14px;
cursor: pointer;
font-family: inherit;
transition: transform .15s;
}
#dzwinter-game .dz-btn:hover { transform: translateY(-2px); }
#dzwinter-game .dz-check {
background: #167fdb;
color: white;
box-shadow: 0 5px 12px #167fdb30;
}
#dzwinter-game .dz-reset {
background: white;
color: #173b69;
border: 2px solid #d3e5f5;
}
#dzwinter-game .dz-message {
text-align: center;
font-weight: 700;
font-size: 15px;
line-height: 1.6;
padding: 12px;
border-radius: 14px;
min-height: 44px;
}
#dzwinter-game .dz-footer {
text-align: center;
color: #617b98;
font-size: 12px;
margin-top: 14px;
}
#dzwinter-game .dz-snow {
color: #55b5f4;
}
@media(max-width: 600px) {
#dzwinter-game { padding: 13px; border-radius: 17px; }
#dzwinter-game .dz-columns { grid-template-columns: 1fr; gap: 12px; }
#dzwinter-game .dz-panel { padding: 12px; }
#dzwinter-game .dz-word { font-size: 14px; min-height: 45px; }
#dzwinter-game .dz-stat strong { font-size: 20px; }
#dzwinter-game .dz-stat span { font-size: 11px; }
#dzwinter-game .dz-btn { padding: 12px 16px; }
}
DEUTSCHZENTRUM
❄️ Winterspaß! ⛸️
Hai să învățăm limba germană! Potrivește fiecare cuvânt german cu traducerea corectă în română.
☃️ ❄️ ⛸️ 🧤
0/12
Perechi corecte
0%
Progres
0
Încercări
👇 Trage cuvântul german peste traducerea română potrivită.
Pe telefon, atinge cuvântul german, apoi traducerea română.
🇩🇪 Wörter auf Deutsch
Cuvintele în limba germană
🇷🇴 Traduceri în română
Alege locul potrivit pentru fiecare cuvânt
Mult succes! Fiecare cuvânt nou te apropie de nivelul următor! ⭐
Deutschzentrum · Învață germană cu bucurie! 💙
(function() {
const root = document.getElementById('dzwinter-game');
if (!root || root.dataset.initialized === 'true') return;
root.dataset.initialized = 'true';
const pairs = [
{ de: 'der Schnee', ro: 'zăpada' },
{ de: 'der Winter', ro: 'iarna' },
{ de: 'das Eis', ro: 'gheața' },
{ de: 'die Schlittschuhe', ro: 'patinele' },
{ de: 'Schlittschuh laufen', ro: 'a patina' },
{ de: 'der Schneemann', ro: 'omul de zăpadă' },
{ de: 'die Schneeflocke', ro: 'fulgul de zăpadă' },
{ de: 'der Schlitten', ro: 'sania' },
{ de: 'der Schal', ro: 'fularul' },
{ de: 'die Handschuhe', ro: 'mănușile' },
{ de: 'die Mütze', ro: 'căciula' },
{ de: 'kalt', ro: 'frig / rece' }
];
const wordList = root.querySelector('#dz-word-list');
const targetList = root.querySelector('#dz-target-list');
const pointsEl = root.querySelector('#dz-points');
const progressEl = root.querySelector('#dz-progress');
const movesEl = root.querySelector('#dz-moves');
const messageEl = root.querySelector('#dz-message');
let selected = null;
let moves = 0;
let checked = false;
let board = [];
function shuffle(arr) {
const result = arr.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 updateStats() {
const correct = board.filter(p => p.correct).length;
pointsEl.textContent = correct + '/' + pairs.length;
progressEl.textContent = Math.round(correct / pairs.length * 100) + '%';
movesEl.textContent = moves;
}
function clearSelection() {
selected = null;
wordList.querySelectorAll('.dz-word').forEach(el => {
el.classList.remove('dz-selected');
});
}
function chooseWord(id) {
const item = board.find(p => p.id === id);
if (!item || item.correct || checked) return;
if (selected === id) {
clearSelection();
return;
}
clearSelection();
selected = id;
const el = wordList.querySelector('[data-id="' + id + '"]');
if (el) el.classList.add('dz-selected');
messageEl.textContent = 'Acum atinge traducerea în română potrivită! 👇';
}
function placeWord(id, targetId) {
if (checked) return;
const item = board.find(p => p.id === id);
if (!item || item.correct) return;
moves++;
item.placed = targetId;
item.correct = item.ro === targetId;
clearSelection();
renderBoard();
if (item.correct) {
messageEl.textContent = 'Sehr gut! Bravo! Ai găsit traducerea corectă! ⭐';
} else {
messageEl.textContent = 'Mai încearcă! Poți muta cuvântul într-o altă căsuță. 💪';
}
updateStats();
if (board.every(p => p.correct)) finishGame();
}
function renderBoard() {
wordList.innerHTML = '';
targetList.innerHTML = '';
shuffle(board).forEach(item => {
const word = document.createElement('button');
word.type = 'button';
word.className = 'dz-word' + (item.correct ? ' dz-used' : '');
word.textContent = item.de;
word.draggable = !item.correct && !checked;
word.dataset.id = item.id;
word.setAttribute('aria-label', 'Cuvânt german: ' + item.de);
word.addEventListener('click', () => chooseWord(item.id));
word.addEventListener('dragstart', event => {
if (item.correct || checked) {
event.preventDefault();
return;
}
selected = item.id;
event.dataTransfer.setData('text/plain', item.id);
event.dataTransfer.effectAllowed = 'move';
});
wordList.appendChild(word);
});
shuffle(board).forEach(item => {
const target = document.createElement('div');
target.className = 'dz-target';
if (item.correct) target.classList.add('dz-correct');
target.dataset.ro = item.ro;
target.setAttribute('role', 'button');
target.setAttribute('tabindex', checked ? '-1' : '0');
target.setAttribute('aria-label', 'Traducere română: ' + item.ro);
const translation = document.createElement('div');
translation.className = 'dz-ro';
translation.textContent = item.ro;
target.appendChild(translation);
if (item.correct) {
const answer = document.createElement('div');
answer.className = 'dz-answer';
answer.textContent = '✓ ' + item.de;
target.appendChild(answer);
} else if (item.placed && checked) {
const answer = document.createElement('div');
answer.className = 'dz-answer';
answer.style.color = '#b34c29';
answer.textContent = 'Răspuns corect: ' + item.de;
target.appendChild(answer);
}
target.addEventListener('dragover', event => {
if (checked) return;
event.preventDefault();
target.classList.add('dz-over');
});
target.addEventListener('dragleave', () => {
target.classList.remove('dz-over');
});
target.addEventListener('drop', event => {
event.preventDefault();
target.classList.remove('dz-over');
const id = event.dataTransfer.getData('text/plain');
if (id) placeWord(id, item.ro);
});
target.addEventListener('click', () => {
if (selected !== null) placeWord(selected, item.ro);
});
target.addEventListener('keydown', event => {
if ((event.key === 'Enter' || event.key === ' ') && selected !== null) {
event.preventDefault();
placeWord(selected, item.ro);
}
});
targetList.appendChild(target);
});
}
function finishGame() {
checked = true;
clearSelection();
renderBoard();
messageEl.textContent =
'🎉 Wunderbar! Ai reușit! Toate cele 12 perechi sunt corecte. Ești un campion al iernii! ❄️';
updateStats();
}
function newGame() {
board = shuffle(pairs).map((p, i) => ({
id: String(i),
de: p.de,
ro: p.ro,
placed: null,
correct: false
}));
selected = null;
moves = 0;
checked = false;
messageEl.textContent =
'Mult succes! Potrivește toate cele 12 cuvinte și devino campionul iernii! ⭐';
renderBoard();
updateStats();
}
root.querySelector('#dz-check').addEventListener('click', () => {
const correct = board.filter(p => p.correct).length;
const remaining = pairs.length - correct;
if (remaining === 0) {
finishGame();
return;
}
checked = true;
clearSelection();
renderBoard();
messageEl.textContent =
'Ai găsit ' + correct + ' din ' + pairs.length +
' perechi. Mai ai de învățat ' + remaining +
' cuvinte. Apasă „Joc nou” pentru o nouă rundă! 💙';
updateStats();
});
root.querySelector('#dz-reset').addEventListener('click', newGame);
newGame();
})();