add user name login and show correct/wrong answers
This commit is contained in:
parent
2ac7def524
commit
db6533033a
74
index.html
74
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; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -37,6 +44,8 @@
|
||||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||||
<strong>🇰🇿 ҰБТ: Қазақстан тарихы</strong>
|
||||
<span class="kt-ai-spacer"></span>
|
||||
<span id="header-user-name" style="color: var(--kt-ai-primary); font-weight: var(--kt-ai-weight-semibold);"></span>
|
||||
<span class="kt-ai-spacer"></span>
|
||||
<button class="kt-ai-btn" data-variant="ghost" onclick="showStartScreen()">Қайта бастау</button>
|
||||
</div>
|
||||
</header>
|
||||
@ -45,7 +54,17 @@
|
||||
<div class="kt-ai-wrap">
|
||||
<h1>Қазақстан тарихынан ҰБТ-ға дайындық</h1>
|
||||
<p class="kt-ai-hero-sub">Біліміңді тексер және ҰБТ-ға жақсылап дайындал</p>
|
||||
<div class="kt-ai-hero-actions">
|
||||
|
||||
<div id="login-section" style="max-width: 400px; margin: var(--kt-ai-space-6) auto;">
|
||||
<div class="kt-ai-field">
|
||||
<label>Аты-жөніңізді енгізіңіз:</label>
|
||||
<input class="kt-ai-input" id="user-name" placeholder="Мысалы: Алиев Арман" type="text">
|
||||
</div>
|
||||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="startQuiz()" style="margin-top: var(--kt-ai-space-4);">Тестілеуді бастау</button>
|
||||
</div>
|
||||
|
||||
<div id="welcome-section" class="hidden">
|
||||
<p class="welcome-text">Қош келдіңіз, <strong id="user-display-name" style="color: var(--kt-ai-primary); font-weight: var(--kt-ai-weight-bold);"></strong>!</p>
|
||||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="startQuiz()">Тестілеуді бастау</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -67,6 +86,7 @@
|
||||
<div class="kt-ai-card question-card fade-in">
|
||||
<h2 id="question-text" style="margin-bottom: var(--kt-ai-space-5); font-size: var(--kt-ai-text-xl);">Сұрақ мәтіні</h2>
|
||||
<div class="options-grid" id="options-container"></div>
|
||||
<div id="answer-feedback" class="answer-feedback hidden"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: var(--kt-ai-space-3); justify-content: space-between; margin-top: var(--kt-ai-space-6);">
|
||||
@ -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,6 +268,15 @@ function showQuestion() {
|
||||
btn.setAttribute('data-selected', answers[currentQuestion] === i);
|
||||
btn.innerHTML = `<span style="font-weight: bold; margin-right: 8px;">${letters[i]})</span> ${opt}`;
|
||||
btn.onclick = () => selectAnswer(i);
|
||||
|
||||
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 {
|
||||
if (answers[currentQuestion] === i) {
|
||||
btn.style.borderColor = 'var(--kt-ai-primary)';
|
||||
btn.style.background = 'var(--kt-ai-bg-soft)';
|
||||
@ -224,14 +284,23 @@ function showQuestion() {
|
||||
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();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user