diff --git a/index.html b/index.html index e0dbbc0..01663a1 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,8 @@ .option-btn { text-align: left; justify-content: flex-start; padding-left: var(--kt-ai-space-4); } .option-btn::before { content: ''; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--kt-ai-fg-muted); margin-right: var(--kt-ai-space-3); flex-shrink: 0; display: inline-block; vertical-align: middle; } .option-btn[data-selected="true"]::before { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); } + .option-btn.correct { background: #dcfce7 !important; border-color: #22c55e !important; color: #166534; } + .option-btn.wrong { background: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b; } .score-display { font-size: var(--kt-ai-text-3xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); margin: var(--kt-ai-space-6) 0; } .progress-bar { height: 8px; background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-full); overflow: hidden; margin-bottom: var(--kt-ai-space-5); } .progress-fill { height: 100%; background: var(--kt-ai-primary); transition: width 0.3s ease; } @@ -29,6 +31,11 @@ .stat-card { text-align: center; padding: var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-xl); } .stat-value { font-size: var(--kt-ai-text-2xl); font-weight: var(--kt-ai-weight-bold); color: var(--kt-ai-primary); } .stat-label { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); } + .welcome-text { font-size: var(--kt-ai-text-lg); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-3); } + .name-input { max-width: 400px; margin: var(--kt-ai-space-6) auto; } + .answer-feedback { margin-top: var(--kt-ai-space-4); padding: var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-lg); font-weight: var(--kt-ai-weight-medium); } + .answer-feedback.correct { background: #dcfce7; color: #166534; } + .answer-feedback.wrong { background: #fee2e2; color: #991b1b; } @@ -37,6 +44,8 @@
🇰🇿 ҰБТ: Қазақстан тарихы + +
@@ -45,7 +54,17 @@

Қазақстан тарихынан ҰБТ-ға дайындық

Біліміңді тексер және ҰБТ-ға жақсылап дайындал

-
+ +
+
+ + +
+ +
+ +
@@ -67,6 +86,7 @@

Сұрақ мәтіні

+
@@ -154,6 +174,19 @@ let answers = {}; let quizStarted = false; let timerInterval = null; let seconds = 0; +let userName = ''; +let answered = false; + +function checkLogin() { + const savedName = localStorage.getItem('ebtUserName'); + if (savedName) { + userName = savedName; + document.getElementById('login-section').classList.add('hidden'); + document.getElementById('welcome-section').classList.remove('hidden'); + document.getElementById('user-display-name').textContent = userName; + document.getElementById('header-user-name').textContent = userName; + } +} function showStartScreen() { document.getElementById('quiz-section').classList.add('hidden'); @@ -161,6 +194,7 @@ function showStartScreen() { document.querySelector('.kt-ai-hero').classList.remove('hidden'); quizStarted = false; stopTimer(); + checkLogin(); } function startTimer() { @@ -190,6 +224,19 @@ function stopTimer() { } function startQuiz() { + const nameInput = document.getElementById('user-name'); + if (nameInput && nameInput.value.trim()) { + userName = nameInput.value.trim(); + localStorage.setItem('ebtUserName', userName); + document.getElementById('user-display-name').textContent = userName; + document.getElementById('header-user-name').textContent = userName; + } + + if (!userName) { + alert('Аты-жөніңізді енгізіңіз!'); + return; + } + document.querySelector('.kt-ai-hero').classList.add('hidden'); document.getElementById('result-section').classList.add('hidden'); document.getElementById('quiz-section').classList.remove('hidden'); @@ -210,6 +257,10 @@ function showQuestion() { const container = document.getElementById('options-container'); container.innerHTML = ''; + const feedback = document.getElementById('answer-feedback'); + feedback.className = 'answer-feedback hidden'; + answered = answers[currentQuestion] !== undefined; + const letters = ['A', 'B', 'C', 'D']; q.options.forEach((opt, i) => { const btn = document.createElement('button'); @@ -217,21 +268,39 @@ function showQuestion() { btn.setAttribute('data-selected', answers[currentQuestion] === i); btn.innerHTML = `${letters[i]}) ${opt}`; btn.onclick = () => selectAnswer(i); - if (answers[currentQuestion] === i) { - btn.style.borderColor = 'var(--kt-ai-primary)'; - btn.style.background = 'var(--kt-ai-bg-soft)'; + + if (answered) { + btn.disabled = true; + if (i === q.correct) { + btn.classList.add('correct'); + } else if (answers[currentQuestion] === i && i !== q.correct) { + btn.classList.add('wrong'); + } } else { - btn.style.borderColor = 'var(--kt-ai-border)'; - btn.style.background = 'var(--kt-ai-card-bg)'; + if (answers[currentQuestion] === i) { + btn.style.borderColor = 'var(--kt-ai-primary)'; + btn.style.background = 'var(--kt-ai-bg-soft)'; + } else { + btn.style.borderColor = 'var(--kt-ai-border)'; + btn.style.background = 'var(--kt-ai-card-bg)'; + } } container.appendChild(btn); }); + if (answered) { + const isCorrect = answers[currentQuestion] === q.correct; + feedback.textContent = isCorrect ? '✅ Дұрыс!' : '❌ Қате! Дұрыс жауап: ' + letters[q.correct] + ') ' + q.options[q.correct]; + feedback.className = 'answer-feedback ' + (isCorrect ? 'correct' : 'wrong'); + feedback.classList.remove('hidden'); + } + updateProgress(); updateButtons(); } function selectAnswer(index) { + if (answered) return; answers[currentQuestion] = index; showQuestion(); } @@ -248,6 +317,7 @@ function nextQuestion() { function prevQuestion() { if (currentQuestion > 0) { currentQuestion--; + answered = false; showQuestion(); } } @@ -299,6 +369,8 @@ document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === ' ') nextQuestion(); if (e.key === 'ArrowLeft') prevQuestion(); }); + +checkLogin();