Aibek/sozday-dlya-menya-kuiz-sayt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add user name login and show correct/wrong answers

Browse Source
This commit is contained in:
Aibek 2026-09-10 18:11:54 +00:00
parent 2ac7def524
commit db6533033a
1 changed files with 78 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
index.html
View File

@ -16,6 +16,8 @@
.option-btn { text-align: left; justify-content: flex-start; padding-left: var(--kt-ai-space-4); } .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::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[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; } .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-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; } .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-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-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); } .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> </style>
</head> </head>
<body> <body>
@ -37,6 +44,8 @@
<div class="kt-ai-wrap kt-ai-pagehead-in"> <div class="kt-ai-wrap kt-ai-pagehead-in">
<strong>🇰🇿 ҰБТ: Қазақстан тарихы</strong> <strong>🇰🇿 ҰБТ: Қазақстан тарихы</strong>
<span class="kt-ai-spacer"></span> <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> <button class="kt-ai-btn" data-variant="ghost" onclick="showStartScreen()">Қайта бастау</button>
</div> </div>
</header> </header>
@ -45,7 +54,17 @@
<div class="kt-ai-wrap"> <div class="kt-ai-wrap">
<h1>Қазақстан тарихынан ҰБТ-ға дайындық</h1> <h1>Қазақстан тарихынан ҰБТ-ға дайындық</h1>
<p class="kt-ai-hero-sub">Біліміңді тексер және ҰБТ-ға жақсылап дайындал</p> <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> <button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="startQuiz()">Тестілеуді бастау</button>
</div> </div>
</div> </div>
@ -67,6 +86,7 @@
<div class="kt-ai-card question-card fade-in"> <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> <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 class="options-grid" id="options-container"></div>
<div id="answer-feedback" class="answer-feedback hidden"></div>
</div> </div>
<div style="display: flex; gap: var(--kt-ai-space-3); justify-content: space-between; margin-top: var(--kt-ai-space-6);"> <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 quizStarted = false;
let timerInterval = null; let timerInterval = null;
let seconds = 0; 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() { function showStartScreen() {
document.getElementById('quiz-section').classList.add('hidden'); document.getElementById('quiz-section').classList.add('hidden');
@ -161,6 +194,7 @@ function showStartScreen() {
document.querySelector('.kt-ai-hero').classList.remove('hidden'); document.querySelector('.kt-ai-hero').classList.remove('hidden');
quizStarted = false; quizStarted = false;
stopTimer(); stopTimer();
checkLogin();
} }
function startTimer() { function startTimer() {
@ -190,6 +224,19 @@ function stopTimer() {
} }
function startQuiz() { 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.querySelector('.kt-ai-hero').classList.add('hidden');
document.getElementById('result-section').classList.add('hidden'); document.getElementById('result-section').classList.add('hidden');
document.getElementById('quiz-section').classList.remove('hidden'); document.getElementById('quiz-section').classList.remove('hidden');
@ -210,6 +257,10 @@ function showQuestion() {
const container = document.getElementById('options-container'); const container = document.getElementById('options-container');
container.innerHTML = ''; container.innerHTML = '';
const feedback = document.getElementById('answer-feedback');
feedback.className = 'answer-feedback hidden';
answered = answers[currentQuestion] !== undefined;
const letters = ['A', 'B', 'C', 'D']; const letters = ['A', 'B', 'C', 'D'];
q.options.forEach((opt, i) => { q.options.forEach((opt, i) => {
const btn = document.createElement('button'); const btn = document.createElement('button');
@ -217,21 +268,39 @@ function showQuestion() {
btn.setAttribute('data-selected', answers[currentQuestion] === i); btn.setAttribute('data-selected', answers[currentQuestion] === i);
btn.innerHTML = `<span style="font-weight: bold; margin-right: 8px;">${letters[i]})</span> ${opt}`; btn.innerHTML = `<span style="font-weight: bold; margin-right: 8px;">${letters[i]})</span> ${opt}`;
btn.onclick = () => selectAnswer(i); btn.onclick = () => selectAnswer(i);
if (answers[currentQuestion] === i) {
btn.style.borderColor = 'var(--kt-ai-primary)'; if (answered) {
btn.style.background = 'var(--kt-ai-bg-soft)'; btn.disabled = true;
if (i === q.correct) {
btn.classList.add('correct');
} else if (answers[currentQuestion] === i && i !== q.correct) {
btn.classList.add('wrong');
}
} else { } else {
btn.style.borderColor = 'var(--kt-ai-border)'; if (answers[currentQuestion] === i) {
btn.style.background = 'var(--kt-ai-card-bg)'; 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); 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(); updateProgress();
updateButtons(); updateButtons();
} }
function selectAnswer(index) { function selectAnswer(index) {
if (answered) return;
answers[currentQuestion] = index; answers[currentQuestion] = index;
showQuestion(); showQuestion();
} }
@ -248,6 +317,7 @@ function nextQuestion() {
function prevQuestion() { function prevQuestion() {
if (currentQuestion > 0) { if (currentQuestion > 0) {
currentQuestion--; currentQuestion--;
answered = false;
showQuestion(); showQuestion();
} }
} }
@ -299,6 +369,8 @@ document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') nextQuestion(); if (e.key === 'ArrowRight' || e.key === ' ') nextQuestion();
if (e.key === 'ArrowLeft') prevQuestion(); if (e.key === 'ArrowLeft') prevQuestion();
}); });
checkLogin();
</script> </script>
</body> </body>