216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="auto">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>ЕНТ: История Казахстана</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📚</text></svg>">
|
||
<style>
|
||
.kt-ai-hero { background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%); }
|
||
.question-card { margin-bottom: var(--kt-ai-space-6); }
|
||
.options-grid { display: grid; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-5); }
|
||
.option-btn { text-align: left; justify-content: flex-start; }
|
||
.option-btn[data-correct="true"] { background: var(--kt-ai-success); border-color: var(--kt-ai-success); color: white; }
|
||
.option-btn[data-wrong="true"] { background: var(--kt-ai-danger); border-color: var(--kt-ai-danger); color: white; }
|
||
.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; }
|
||
.hidden { display: none; }
|
||
.fade-in { animation: fadeIn 0.4s ease; }
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>📚 ЕНТ: История</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="showStartScreen()">Начать заново</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Подготовка к ЕНТ по истории Казахстана</h1>
|
||
<p class="kt-ai-hero-sub">Проверь свои знания и подготовься к экзамену</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="startQuiz()">Начать тест</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quiz-section" class="kt-ai-section hidden">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progress"></div>
|
||
</div>
|
||
|
||
<div class="kt-ai-card question-card fade-in">
|
||
<h3 id="question-number" style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-3)">Вопрос 1 из 20</h3>
|
||
<h2 id="question-text" style="margin-bottom: var(--kt-ai-space-5)">Текст вопроса</h2>
|
||
<div class="options-grid" id="options-container"></div>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: var(--kt-ai-space-3); justify-content: space-between; margin-top: var(--kt-ai-space-6)">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="prev-btn" onclick="prevQuestion()">← Назад</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="next-btn" onclick="nextQuestion()">Далее →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="result-section" class="kt-ai-section hidden">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div class="kt-ai-card" style="text-align: center">
|
||
<h2>Тест завершён!</h2>
|
||
<div class="score-display" id="score">0 из 20</div>
|
||
<p id="score-message" style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-6)"></p>
|
||
|
||
<div class="kt-ai-hero-actions">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="showStartScreen()">Пройти ещё раз</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 ЕНТ: История Казахстана</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Удачи на экзамене!</span>
|
||
</footer>
|
||
|
||
<script>
|
||
const QUESTIONS = [
|
||
{ q: "В каком году образовалось Казахское ханство?", options: ["1465 год", "1456 год", "1500 год", "1480 год"], correct: 0 },
|
||
{ q: "Кто основал Казахское ханство?", options: ["Абылай хан", "Керей и Жанибек", "Тауке хан", "Касым хан"], correct: 1 },
|
||
{ q: "В каком году был принят закон «О языке»?", options: ["1989 год", "1991 год", "1986 год", "1995 год"], correct: 0 },
|
||
{ q: "Кто был первым президентом Академии наук Казахской ССР?", options: ["К. Сатпаев", "А. Маргулан", "М. Ауэзов", "Ж. Шашкин"], correct: 0 },
|
||
{ q: "В каком году Казахстан объявил независимость?", options: ["1991 год, 16 декабря", "1990 год, 25 октября", "1993 год, 1 января", "1986 год, 17 декабря"], correct: 0 },
|
||
{ q: "Кто возглавил восстание 1836-1838 годов?", options: ["Кенесары Касымулы", "Исатай Тайманулы", "Сырым Датулы", "Махамбет Утемисулы"], correct: 1 },
|
||
{ q: "В каком году была образована Казахская АССР?", options: ["1920 год", "1925 год", "1936 год", "1917 год"], correct: 0 },
|
||
{ q: "Кто автор труда «Путь Абая»?", options: ["М. Ауэзов", "А. Байтурсынулы", "Ж. Аймауытов", "С. Сейфуллин"], correct: 0 },
|
||
{ q: "В каком году произошли события Желтоксана?", options: ["1986 год", "1989 год", "1991 год", "1985 год"], correct: 0 },
|
||
{ q: "Кто был последним казахским ханом?", options: ["Кенесары Касымулы", "Абылай хан", "Бокей хан", "Шергазы хан"], correct: 0 },
|
||
{ q: "В каком году Казахстан переехал в Астану?", options: ["1997 год", "1991 год", "2000 год", "1995 год"], correct: 0 },
|
||
{ q: "Кто написал гимн независимого Казахстана?", options: ["Ж. Нажимеденов, Н. Назарбаев", "М. Ауэзов", "А. Байтурсынулы", "Ж. Молдагалиев"], correct: 0 },
|
||
{ q: "В каком году была введена национальная валюта — тенге?", options: ["1993 год", "1991 год", "1995 год", "1999 год"], correct: 0 },
|
||
{ q: "Кто был первым космонавтом независимого Казахстана?", options: ["Т. Аубакиров", "Т. Мусабаев", "А. Аимбетов", "Ю. Гагарин"], correct: 0 },
|
||
{ q: "В каком году принята Конституция Республики Казахстан?", options: ["1995 год", "1993 год", "1991 год", "2000 год"], correct: 0 },
|
||
{ q: "Кто основал город Алматы (Верный)?", options: ["Казахское ханство", "Российская империя (1854)", "Золотая Орда", "Могулистан"], correct: 1 },
|
||
{ q: "В каком году произошло восстание под предводительством Сырыма Датулы?", options: ["1783-1797 годы", "1836-1838 годы", "1916 год", "1773-1775 годы"], correct: 0 },
|
||
{ q: "Кто такой Аль-Фараби?", options: ["Великий философ и учёный", "Казахский хан", "Батыр", "Поэт"], correct: 0 },
|
||
{ q: "В каком году Казахстан стал председателем ОБСЕ?", options: ["2010 год", "2005 год", "2015 год", "2000 год"], correct: 0 },
|
||
{ q: "Кто написал книгу «Казахстанский путь»?", options: ["Н. Назарбаев", "М. Ауэзов", "А. Байтурсынулы", "Ж. Аймауытов"], correct: 0 }
|
||
];
|
||
|
||
let currentQuestion = 0;
|
||
let answers = {};
|
||
let quizStarted = false;
|
||
|
||
function showStartScreen() {
|
||
document.getElementById('quiz-section').classList.add('hidden');
|
||
document.getElementById('result-section').classList.add('hidden');
|
||
document.querySelector('.kt-ai-hero').classList.remove('hidden');
|
||
quizStarted = false;
|
||
}
|
||
|
||
function startQuiz() {
|
||
document.querySelector('.kt-ai-hero').classList.add('hidden');
|
||
document.getElementById('result-section').classList.add('hidden');
|
||
document.getElementById('quiz-section').classList.remove('hidden');
|
||
quizStarted = true;
|
||
currentQuestion = 0;
|
||
answers = {};
|
||
showQuestion();
|
||
}
|
||
|
||
function showQuestion() {
|
||
const q = QUESTIONS[currentQuestion];
|
||
document.getElementById('question-number').textContent = `Вопрос ${currentQuestion + 1} из ${QUESTIONS.length}`;
|
||
document.getElementById('question-text').textContent = q.q;
|
||
|
||
const container = document.getElementById('options-container');
|
||
container.innerHTML = '';
|
||
|
||
q.options.forEach((opt, i) => {
|
||
const btn = document.createElement('button');
|
||
btn.className = 'kt-ai-btn option-btn';
|
||
btn.textContent = opt;
|
||
btn.onclick = () => selectAnswer(i);
|
||
if (answers[currentQuestion] === i) {
|
||
btn.style.borderColor = 'var(--kt-ai-primary)';
|
||
btn.style.background = 'var(--kt-ai-bg-soft)';
|
||
}
|
||
container.appendChild(btn);
|
||
});
|
||
|
||
updateProgress();
|
||
updateButtons();
|
||
}
|
||
|
||
function selectAnswer(index) {
|
||
answers[currentQuestion] = index;
|
||
showQuestion();
|
||
}
|
||
|
||
function nextQuestion() {
|
||
if (currentQuestion < QUESTIONS.length - 1) {
|
||
currentQuestion++;
|
||
showQuestion();
|
||
} else {
|
||
showResults();
|
||
}
|
||
}
|
||
|
||
function prevQuestion() {
|
||
if (currentQuestion > 0) {
|
||
currentQuestion--;
|
||
showQuestion();
|
||
}
|
||
}
|
||
|
||
function updateProgress() {
|
||
const progress = ((currentQuestion + 1) / QUESTIONS.length) * 100;
|
||
document.getElementById('progress').style.width = progress + '%';
|
||
}
|
||
|
||
function updateButtons() {
|
||
document.getElementById('prev-btn').style.visibility = currentQuestion === 0 ? 'hidden' : 'visible';
|
||
const nextBtn = document.getElementById('next-btn');
|
||
nextBtn.textContent = currentQuestion === QUESTIONS.length - 1 ? 'Завершить' : 'Далее →';
|
||
}
|
||
|
||
function showResults() {
|
||
let score = 0;
|
||
QUESTIONS.forEach((q, i) => {
|
||
if (answers[i] === q.correct) score++;
|
||
});
|
||
|
||
document.getElementById('quiz-section').classList.add('hidden');
|
||
document.getElementById('result-section').classList.remove('hidden');
|
||
document.getElementById('score').textContent = `${score} из ${QUESTIONS.length}`;
|
||
|
||
const percentage = (score / QUESTIONS.length) * 100;
|
||
let message = '';
|
||
if (percentage >= 90) message = 'Отлично! Вы готовы к ЕНТ 🎉';
|
||
else if (percentage >= 70) message = 'Хороший результат! 👍';
|
||
else if (percentage >= 50) message = 'Неплохо, но можно лучше 👌';
|
||
else message = 'Стоит ещё повторить материал 📚';
|
||
|
||
document.getElementById('score-message').textContent = message;
|
||
}
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (!quizStarted) return;
|
||
if (e.key === 'ArrowRight' || e.key === ' ') nextQuestion();
|
||
if (e.key === 'ArrowLeft') prevQuestion();
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|