#winter-ski-quiz {
--ws-blue: #0754a5;
--ws-dark: #12356b;
--ws-orange: #f0a426;
max-width: 780px;
margin: 24px auto;
overflow: hidden;
border: 4px solid var(--ws-blue);
border-radius: 22px;
background: #fff;
color: #172b46;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 10px 30px rgba(12, 52, 90, .15);
}
#winter-ski-quiz * { box-sizing: border-box; }
#winter-ski-quiz .ws-header {
padding: 25px 16px;
text-align: center;
color: #fff;
background: linear-gradient(130deg, #0754a5, #0b8bc5);
}
#winter-ski-quiz .ws-decor { font-size: 38px; }
#winter-ski-quiz .ws-header h2 {
margin: 9px 0;
color: #fff;
font-size: clamp(25px, 5vw, 39px);
line-height: 1.2;
}
#winter-ski-quiz .ws-header p {
margin: 8px 0 0;
line-height: 1.5;
}
#winter-ski-quiz .ws-main { padding: 24px; }
#winter-ski-quiz .ws-stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
color: var(--ws-blue);
font-weight: bold;
}
#winter-ski-quiz .ws-track {
height: 10px;
margin: 15px 0 22px;
overflow: hidden;
border-radius: 20px;
background: #e4edf6;
}
#winter-ski-quiz .ws-bar {
height: 100%;
width: 0;
background: var(--ws-orange);
transition: width .25s;
}
#winter-ski-quiz .ws-label {
display: inline-block;
padding: 7px 12px;
border-radius: 20px;
background: #e9f5ff;
color: var(--ws-blue);
font-weight: bold;
font-size: 13px;
}
#winter-ski-quiz .ws-instruction {
text-align: center;
color: #58677b;
line-height: 1.5;
}
#winter-ski-quiz .ws-question {
margin: 20px 0 8px;
color: var(--ws-dark);
font-size: clamp(25px, 5vw, 35px);
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
}
#winter-ski-quiz .ws-answers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 22px;
}
#winter-ski-quiz .ws-answer {
display: block;
width: 100%;
min-height: 62px;
margin: 0;
padding: 14px 10px;
border: 2px solid #cbdced;
border-radius: 13px;
background: #f8fbff;
color: #172b46;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
white-space: normal;
cursor: pointer;
}
#winter-ski-quiz .ws-answer:hover:not(:disabled) {
border-color: var(--ws-blue);
background: #eaf5ff;
}
#winter-ski-quiz .ws-answer:disabled { cursor: default; opacity: 1; }
#winter-ski-quiz .ws-answer.ws-correct {
border-color: #278348;
background: #dcf5e3;
color: #15592d;
}
#winter-ski-quiz .ws-answer.ws-wrong {
border-color: #c83434;
background: #ffe5e2;
color: #8b2020;
}
#winter-ski-quiz .ws-feedback {
min-height: 52px;
padding: 15px 2px 3px;
text-align: center;
font-weight: bold;
line-height: 1.5;
overflow-wrap: anywhere;
}
#winter-ski-quiz .ws-center { text-align: center; }
#winter-ski-quiz .ws-button {
display: inline-block;
margin: 8px 3px;
padding: 13px 22px;
border: 0;
border-radius: 11px;
background: #0754a5;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
cursor: pointer;
}
#winter-ski-quiz .ws-button:hover { filter: brightness(.92); }
#winter-ski-quiz .ws-hidden { display: none !important; }
#winter-ski-quiz .ws-result {
text-align: center;
line-height: 1.7;
}
#winter-ski-quiz .ws-result h3 {
color: var(--ws-dark);
font-size: 28px;
}
#winter-ski-quiz .ws-big { font-size: 54px; }
#winter-ski-quiz .ws-words {
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid #dce7f1;
text-align: left;
}
#winter-ski-quiz .ws-words summary {
color: var(--ws-blue);
font-weight: bold;
line-height: 1.5;
cursor: pointer;
}
#winter-ski-quiz .ws-words li {
margin: 9px 0;
line-height: 1.5;
}
@media (max-width: 520px) {
#winter-ski-quiz .ws-main { padding: 16px; }
#winter-ski-quiz .ws-answers { grid-template-columns: 1fr; }
#winter-ski-quiz .ws-answer { min-height: 53px; }
}
(function () {
const root = document.getElementById('winter-ski-quiz');
if (!root || root.dataset.wsInitialized === 'yes') return;
root.dataset.wsInitialized = 'yes';
const words = [
{ de: 'der Winter', ro: 'iarna' },
{ de: 'der Schnee', ro: 'zăpada' },
{ de: 'die Schneeflocke', ro: 'fulgul de nea' },
{ de: 'der Berg', ro: 'muntele' },
{ de: 'der Skifahrer', ro: 'schiorul' },
{ de: 'die Skifahrerin', ro: 'schioara' },
{ de: 'die Skier', ro: 'schiurile' },
{ de: 'der Skistock', ro: 'bățul de schi' },
{ de: 'die Skipiste', ro: 'pârtia de schi' },
{ de: 'der Skilift', ro: 'teleschiul' },
{ de: 'der Helm', ro: 'casca' },
{ de: 'der Schal', ro: 'fularul' },
{ de: 'die Handschuhe', ro: 'mănușile' },
{ de: 'die Skibrille', ro: 'ochelarii de schi' },
{ de: 'die Schneeballschlacht', ro: 'bătaia cu bulgări de zăpadă' }
];
const find = selector => root.querySelector(selector);
let questions = [];
let current = 0;
let points = 0;
let locked = 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 startGame() {
questions = shuffle(words);
current = 0;
points = 0;
find('.ws-game').classList.remove('ws-hidden');
find('.ws-result').classList.add('ws-hidden');
renderQuestion();
}
function renderQuestion() {
locked = false;
const item = questions[current];
find('.ws-counter').textContent =
'Întrebarea ' + (current + 1) + ' din ' + questions.length;
find('.ws-score').textContent = 'Scor: ' + points;
find('.ws-bar').style.width =
(current / questions.length * 100) + '%';
find('.ws-question').textContent = item.de;
find('.ws-feedback').textContent = '';
find('.ws-next').classList.add('ws-hidden');
const wrongAnswers = shuffle(
words.filter(word => word.de !== item.de)
).slice(0, 3).map(word => word.ro);
const options = shuffle([item.ro].concat(wrongAnswers));
const answerBox = find('.ws-answers');
answerBox.replaceChildren();
options.forEach(option => {
const button = document.createElement('button');
button.type = 'button';
button.className = 'ws-answer';
button.textContent = option;
button.addEventListener('click', function () {
checkAnswer(button, option, item);
});
answerBox.appendChild(button);
});
}
function checkAnswer(button, choice, item) {
if (locked) return;
locked = true;
Array.from(find('.ws-answers').children).forEach(answer => {
answer.disabled = true;
if (answer.textContent === item.ro) {
answer.classList.add('ws-correct');
}
});
const feedback = find('.ws-feedback');
if (choice === item.ro) {
points++;
feedback.textContent = '✅ Richtig! Corect! Foarte bine!';
feedback.style.color = '#176039';
} else {
button.classList.add('ws-wrong');
feedback.textContent =
'Răspuns corect: ' + item.de + ' = ' + item.ro;
feedback.style.color = '#b51d2a';
}
find('.ws-score').textContent = 'Scor: ' + points;
find('.ws-bar').style.width =
((current + 1) / questions.length * 100) + '%';
find('.ws-next').textContent =
current === questions.length - 1
? 'Vezi rezultatul 🏆'
: 'Următoarea întrebare →';
find('.ws-next').classList.remove('ws-hidden');
}
function showResult() {
find('.ws-game').classList.add('ws-hidden');
find('.ws-result').classList.remove('ws-hidden');
const percent = Math.round(points / words.length * 100);
find('.ws-big').textContent =
percent >= 80 ? '🏆' : percent >= 50 ? '⭐' : '❄️';
let message;
if (percent >= 80) {
message = 'Fantastisch! Te descurci excelent!';
} else if (percent >= 50) {
message = 'Sehr gut! Mai repetă puțin vocabularul!';
} else {
message = 'Weiter üben! Exersează și încearcă din nou!';
}
find('.ws-result-text').textContent =
'Ai obținut ' + points + ' din 15 puncte (' +
percent + '%). ' + message;
const list = find('.ws-word-list');
list.replaceChildren();
words.forEach(word => {
const li = document.createElement('li');
const strong = document.createElement('strong');
strong.textContent = word.de;
li.appendChild(strong);
li.appendChild(document.createTextNode(' — ' + word.ro));
list.appendChild(li);
});
}
find('.ws-next').addEventListener('click', function () {
current++;
if (current < questions.length) {
renderQuestion();
} else {
showResult();
}
});
find('.ws-restart').addEventListener('click', startGame);
startGame();
})();
❄️ ⛷️ 🏔️ 🎿
Quiz: Winter und Skifahren
15 cuvinte în germană cu traducere în română
Ești pregătit pentru provocarea de iarnă?
Întrebarea 1 din 15
Scor: 0
❄️ Vocabular de iarnă și schi
der Winter
Alege traducerea corectă în limba română!
🏆