407 lines
29 KiB
HTML
407 lines
29 KiB
HTML
<!-- no-design-system -->
|
||
<!DOCTYPE html>
|
||
<html lang="kk" 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; 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; }
|
||
.hidden { display: none; }
|
||
.fade-in { animation: fadeIn 0.4s ease; }
|
||
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||
.timer-badge { display: inline-flex; align-items: center; gap: var(--kt-ai-space-2); padding: var(--kt-ai-space-2) var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); font-weight: var(--kt-ai-weight-semibold); }
|
||
.timer-badge.warning { background: #fef3c7; color: #92400e; }
|
||
.timer-badge.danger { background: #fee2e2; color: #991b1b; }
|
||
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-6); }
|
||
.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>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<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>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="index.html">Басқа тест</a>
|
||
<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 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>
|
||
</section>
|
||
|
||
<section id="quiz-section" class="kt-ai-section hidden">
|
||
<div class="kt-ai-wrap" data-width="narrow">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--kt-ai-space-4);">
|
||
<div class="timer-badge" id="timer">
|
||
⏱️ <span id="timer-value">00:00</span>
|
||
</div>
|
||
<div style="color: var(--kt-ai-fg-muted);">Сұрақ <span id="q-current">1</span> / <span id="q-total">50</span></div>
|
||
</div>
|
||
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progress"></div>
|
||
</div>
|
||
|
||
<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);">
|
||
<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="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="correct-count">0</div>
|
||
<div class="stat-label">Дұрыс жауап</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="wrong-count">0</div>
|
||
<div class="stat-label">Қате жауап</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-value" id="percentage">0%</div>
|
||
<div class="stat-label">Нәтиже</div>
|
||
</div>
|
||
</div>
|
||
<div class="score-display" id="score">0 / 50</div>
|
||
<p id="score-message" style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-6); font-size: var(--kt-ai-text-lg);"></p>
|
||
|
||
<div class="kt-ai-hero-actions">
|
||
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="showStartScreen()">Қайта тапсыру</button>
|
||
<a class="kt-ai-btn" data-variant="ghost" data-size="lg" href="index.html" style="margin-left: var(--kt-ai-space-3);">Басқа тест</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>ҰБТ 2027 жыл | Айбек Бахытжанұлы</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Сәттілік тілейміз!</span>
|
||
</footer>
|
||
|
||
<script>
|
||
const QUESTIONS = [
|
||
{ q: "Қыпшақ этносы мен мемлекеттілігінің қалыптасуының алғашқы кезеңі қайсысы?", options: ["VII–VIII ғасырлар", "VIII–ХІ ғасырлар", "ХІ–ХІІІ ғасырлар", "ХІІ–ХІV ғасырлар"], correct: 0 },
|
||
{ q: "VII–VIII ғасырларда қыпшақтар қай мемлекеттің құрамында болды?", options: ["Қарахан мемлекеті", "Батыс Түрік қағанаты", "Қимақ қағанаты", "Хорезмшахтар мемлекеті"], correct: 1 },
|
||
{ q: "VIII–ХІ ғасырларда қыпшақтар қай мемлекеттің құрамында болды?", options: ["Қимақ қағанаты", "Батыс Түрік қағанаты", "Алтын Орда", "Қарахан мемлекеті"], correct: 0 },
|
||
{ q: "ХІ–ХІІІ ғасырларда қыпшақтар қандай мемлекет құрды?", options: ["Қимақ қағанаты", "Қарахан мемлекеті", "Дербес Қыпшақ хандығы", "Хорезмшахтар мемлекеті"], correct: 2 },
|
||
{ q: "«Қыпшақ» этнонимі алғаш рет қай ғасырдағы көне түркі руна ескерткішінде кездеседі?", options: ["VI ғасыр", "VII ғасыр", "VIII ғасыр", "IX ғасыр"], correct: 2 },
|
||
{ q: "Русьте қыпшақтар қалай аталды?", options: ["Командар", "Половецтер", "Қимақтар", "Оғыздар"], correct: 1 },
|
||
{ q: "Еуропада қыпшақтар қалай аталды?", options: ["Половецтер", "Командар", "Қарақытайлар", "Қимақтар"], correct: 1 },
|
||
{ q: "VIII–ХІ ғасырлар аралығында қыпшақтар тарихы қай тайпаның тарихымен тығыз байланысты болды?", options: ["Оғыздармен", "Қарлұқтармен", "Қимақтармен", "Наймандармен"], correct: 2 },
|
||
{ q: "Қыпшақтар Қимақ мемлекетінің қай қанатын құрады?", options: ["Шығыс қанатын", "Оңтүстік қанатын", "Солтүстік қанатын", "Батыс қанатын"], correct: 3 },
|
||
{ q: "Қимақ қағанаты қай ғасырдың басында құлады?", options: ["X ғасырдың басында", "XI ғасырдың басында", "XII ғасырдың басында", "XIII ғасырдың басында"], correct: 1 },
|
||
{ q: "Қимақ қағанаты құлағаннан кейін оның жері кімдердің қолына өтті?", options: ["Оғыз хандарының", "Қарахан билеушілерінің", "Қыпшақ хандарының", "Хорезмшахтардың"], correct: 2 },
|
||
{ q: "Қыпшақтар этнос ретінде қай аумақта VIII ғасырда қалыптасты?", options: ["Батыс және Оңтүстік Қазақстанда", "Орталық және Шығыс Қазақстанда", "Солтүстік және Батыс Қазақстанда", "Жетісу мен Сырдария бойында"], correct: 1 },
|
||
{ q: "XI ғасырдың ортасында қыпшақтар кімдерді Сырдария аймағы мен Каспий даласынан ығыстырды?", options: ["Қимақтарды", "Қарахандарды", "Оғыздарды", "Қарлұқтарды"], correct: 2 },
|
||
{ q: "Қыпшақтар батысқа жылжу барысында қай өзеннен өтті?", options: ["Ертіс", "Іле", "Есіл", "Еділ"], correct: 3 },
|
||
{ q: "Қыпшақтар батысқа жылжу барысында қай өзенге дейін жетті?", options: ["Әмударияға", "Дунайға", "Сырдарияға", "Жайыққа"], correct: 1 },
|
||
{ q: "Қыпшақтардың батысқа жылжуы нәтижесінде байланыс орнатқан халықтардың бірі?", options: ["Русь", "Жапондар", "Үнділер", "Қытайлар"], correct: 0 },
|
||
{ q: "XI ғасырда қыпшақтар қай аумаққа үстемдік етті?", options: ["Тек Жетісуға", "Тек Сырдария бойына", "Жетісумен қатар бүкіл Қазақстан жеріне", "Тек Батыс Қазақстанға"], correct: 2 },
|
||
{ q: "XI ғасырда қыпшақтар қандай аумақтағы ірі тайпалық одақ саналды?", options: ["Дунайдан Кавказға дейін", "Алтайдан Дунайға дейін", "Ертістен Үндістанға дейін", "Жетісудан Қытайға дейін"], correct: 1 },
|
||
{ q: "XI–XIII ғасырларда Еуразияның бүкіл далалық аймағы қалай аталды?", options: ["Моғолстан", "Дешті Қыпшақ", "Жетісу", "Түркістан"], correct: 1 },
|
||
{ q: "«Дешті Қыпшақ» атауының мағынасы қандай?", options: ["Қыпшақ елі", "Қыпшақ тауы", "Қыпшақ даласы", "Қыпшақ өзені"], correct: 2 },
|
||
{ q: "XII ғасырдың басында қыпшақтар қай аумақта үстемдік етті?", options: ["Ертістен Сырдарияға дейін", "Алтайдан Дунайға дейінгі Ұлы Далада", "Еділден Кавказға дейін", "Жетісудан Қара теңізге дейін"], correct: 1 },
|
||
{ q: "Дешті Қыпшақ даласы неше ірі бірлестікке бөлінді?", options: ["Екі", "Үш", "Төрт", "Бес"], correct: 0 },
|
||
{ q: "Батыс қыпшақ бірлестігі қай аумақты иеленді?", options: ["Еділден Алтайға дейін", "Дунайдан Еділге дейін", "Ертістен Дунайға дейін", "Сырдариядан Еділге дейін"], correct: 1 },
|
||
{ q: "Батыс қыпшақ бірлестігін қай әулеттік ру басқарды?", options: ["Елбөрілі", "Тоқсаба", "Қият", "Арғын"], correct: 1 },
|
||
{ q: "Шығыс қыпшақ бірлестігі қай аумақты қамтыды?", options: ["Дунайдан Еділге дейін", "Еділден Алтайға дейін", "Алтайдан Дунайға дейін", "Жайықтан Дунайға дейін"], correct: 1 },
|
||
{ q: "Шығыс қыпшақ бірлестігін қай ру басқарды?", options: ["Тоқсаба", "Елбөрілі", "Қоңырат", "Найман"], correct: 1 },
|
||
{ q: "Қыпшақ хандығы неше қанатқа бөлінді?", options: ["Бір", "Екі", "Үш", "Төрт"], correct: 1 },
|
||
{ q: "Қыпшақ хандығының оң қанатының ордасы қай қалада орналасты?", options: ["Сығанақ", "Сарайшық", "Отырар", "Баласағұн"], correct: 1 },
|
||
{ q: "Қыпшақ хандығының сол қанатының орталығы қай қала болды?", options: ["Сарайшық", "Тараз", "Сығанақ", "Түркістан"], correct: 2 },
|
||
{ q: "Қыпшақ хандығының қай қанаты ең қуатты болды?", options: ["Оң қанаты", "Батыс қанаты", "Сол қанаты", "Оңтүстік қанаты"], correct: 2 },
|
||
{ q: "Қыпшақ хандарының билігі қалай беріліп отырды?", options: ["Сайлау арқылы", "Тайпа ақсүйектерінің шешімімен", "Мұрагерлікпен әкеден балаға", "Әскери кеңес арқылы"], correct: 2 },
|
||
{ q: "Жекелеген қыпшақ руларының кімнен басқа өз билеушілері болды?", options: ["Қағаннан", "Жоғары ханнан", "Сұлтаннан", "Елбөрілі руынан"], correct: 1 },
|
||
{ q: "Қыпшақтардың саяси беделінің артуына байланысты басқа тайпалар не істеді?", options: ["Қыпшақтармен соғысты", "Қыпшақ жерінен көшіп кетті", "«Қыпшақ» этнонимін қабылдады", "Қимақ мемлекетіне қосылды"], correct: 2 },
|
||
{ q: "Қыпшақтар қазіргі қандай халықтардың ұлт ретінде қалыптасуына негіз қалады?", options: ["Қазақ, башқұрт, татар және басқалардың", "Қытай, моңғол, тибет халықтарының", "Парсы, араб, үнді халықтарының", "Орыс, украин, беларусь халықтарының"], correct: 0 },
|
||
{ q: "Қыпшақ қоғамындағы байлық немен өлшенді?", options: ["Жер көлемімен", "Алтын мөлшерімен", "Қала санымен", "Жылқы санымен"], correct: 3 },
|
||
{ q: "Малға жекеменшік қыпшақ қоғамында қандай құбылыстың негізін қалады?", options: ["Құлдықтың жойылуының", "Мүліктік теңсіздіктің", "Қалалардың көбеюінің", "Сауданың тоқтауын"], correct: 1 },
|
||
{ q: "Жайылымдарға билік ету және көшіп-қонуды реттеу құқығы кімдерге берілді?", options: ["Құлдарға", "Қарапайым малшыларға", "Қыпшақ хандары мен тайпа ақсүйектеріне", "Саудагерлерге"], correct: 2 },
|
||
{ q: "Қыпшақ қоғамында құқығы жоқ топ қалай аталды?", options: ["Яланкуг", "Коман", "Половец", "Елбөрілі"], correct: 0 },
|
||
{ q: "Қыпшақ қоғамындағы құлдардың саны негізінен қалай толықтырылды?", options: ["Сауда арқылы", "Әскери тұтқындар есебінен", "Салық төлеушілер есебінен", "Қоныс аударушылар есебінен"], correct: 1 },
|
||
{ q: "Қыпшақ хандығы қандай мемлекет болды?", options: ["Құл иеленушілік мемлекет", "Теократиялық мемлекет", "Ерте феодалдық мемлекет", "Демократиялық мемлекет"], correct: 2 },
|
||
{ q: "Хорезмшахтар бастапқыда қыпшақтарға қарсы жорықты қандай мақсатпен жүргізді?", options: ["Қыпшақтарды саудаға тарту үшін", "Исламды тарату мақсатында", "Қыпшақтармен одақ құру үшін", "Жайылымдарды кеңейту үшін"], correct: 1 },
|
||
{ q: "XII ғасырдың екінші жартысынан бастап хорезмдіктер қыпшақтарға қатысты қандай саясат жүргізе бастады?", options: ["Қыпшақтармен толық соғысты", "Қыпшақ жерінен көшіп кетті", "Қыпшақ ақсүйектерімен жақындасу саясатын", "Қыпшақтарды Руське қарсы қойды"], correct: 2 },
|
||
{ q: "Хорезмшахтар қыпшақ ақсүйектерімен жақындасу арқылы қандай мақсат көздеді?", options: ["Қыпшақтардың бүкіл ақсүйек қауымын ислам дініне енгізу", "Қыпшақтардың тәуелсіздігін күшейту", "Қыпшақ хандығын қалпына келтіру", "Қыпшақтарды Еуропаға көшіру"], correct: 0 },
|
||
{ q: "Қыпшақтар мен хорезмдіктердің күресін не тоқтатты?", options: ["Қарахан мемлекеті", "Оғыздардың шабуылы", "Моңғолдардың жаулап алушылық жорықтары", "Русьтің әскері"], correct: 2 },
|
||
{ q: "Орыс тіліндегі әскери іске байланысты көне түркі тілдерінен енген сөзді көрсетіңіз.", options: ["Колчан", "Парламент", "Республика", "Конституция"], correct: 0 },
|
||
{ q: "О. Сүлейменовтің қыпшақтар мен славяндар арасындағы байланысқа қатысты пікірі қай еңбегінде айтылды?", options: ["«Жолдар мен аймақтар»", "«Аз и Я»", "«Кодекс куманикус»", "«Дешті Қыпшақ»"], correct: 1 },
|
||
{ q: "ІХ ғасырдың ортасында «Жолдар мен аймақтар» еңбегін жазған ғалым кім?", options: ["Ибн Батута", "Махмұд Қашғари", "Ибн Хордадбек", "Плано Карпини"], correct: 2 },
|
||
{ q: "Ибн Хордадбек қыпшақтарға қатысты қандай мәлімет келтірді?", options: ["Қыпшақ хандарының шежіресін", "Қыпшақ тайпалары мен олардың 16 қаласы туралы", "Қыпшақтардың Русьпен соғыстарын", "Қыпшақтардың моңғолдармен соғысын"], correct: 1 },
|
||
{ q: "«Дешт» сөзінің түркі тіліндегі мағынасы қандай?", options: ["Қала", "Өзен", "Дала", "Таулар"], correct: 2 },
|
||
{ q: "Қыпшақ тілінің фольклор үлгілері сақталған ортағасырлық жазба ескерткіш қайсысы?", options: ["«Аз и Я»", "«Жолдар мен аймақтар»", "«Кодекс куманикус»", "«Диуани лұғат ат-түрік»"], correct: 2 }
|
||
];
|
||
|
||
let currentQuestion = 0;
|
||
let answers = {};
|
||
let quizStarted = false;
|
||
let timerInterval = null;
|
||
let seconds = 0;
|
||
let userName = '';
|
||
let answered = false;
|
||
let shuffledQuestions = [];
|
||
|
||
function shuffleArray(array) {
|
||
const shuffled = [...array];
|
||
for (let i = shuffled.length - 1; i > 0; i--) {
|
||
const j = Math.floor(Math.random() * (i + 1));
|
||
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||
}
|
||
return shuffled;
|
||
}
|
||
|
||
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');
|
||
document.getElementById('result-section').classList.add('hidden');
|
||
document.querySelector('.kt-ai-hero').classList.remove('hidden');
|
||
quizStarted = false;
|
||
stopTimer();
|
||
checkLogin();
|
||
}
|
||
|
||
function startTimer() {
|
||
seconds = 0;
|
||
timerInterval = setInterval(() => {
|
||
seconds++;
|
||
const mins = Math.floor(seconds / 60);
|
||
const secs = seconds % 60;
|
||
document.getElementById('timer-value').textContent =
|
||
(mins < 10 ? '0' : '') + mins + ':' + (secs < 10 ? '0' : '') + secs;
|
||
|
||
const badge = document.getElementById('timer');
|
||
if (seconds > 600) {
|
||
badge.className = 'timer-badge danger';
|
||
} else if (seconds > 300) {
|
||
badge.className = 'timer-badge warning';
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
function stopTimer() {
|
||
if (timerInterval) {
|
||
clearInterval(timerInterval);
|
||
timerInterval = null;
|
||
}
|
||
document.getElementById('timer').className = 'timer-badge';
|
||
}
|
||
|
||
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');
|
||
quizStarted = true;
|
||
currentQuestion = 0;
|
||
answers = {};
|
||
seconds = 0;
|
||
shuffledQuestions = shuffleArray(QUESTIONS);
|
||
startTimer();
|
||
document.getElementById('q-total').textContent = shuffledQuestions.length;
|
||
showQuestion();
|
||
}
|
||
|
||
function showQuestion() {
|
||
const q = shuffledQuestions[currentQuestion];
|
||
document.getElementById('q-current').textContent = currentQuestion + 1;
|
||
document.getElementById('question-text').textContent = q.q;
|
||
|
||
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');
|
||
btn.className = 'kt-ai-btn option-btn';
|
||
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)';
|
||
} 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();
|
||
}
|
||
|
||
function nextQuestion() {
|
||
if (currentQuestion < QUESTIONS.length - 1) {
|
||
currentQuestion++;
|
||
showQuestion();
|
||
} else {
|
||
showResults();
|
||
}
|
||
}
|
||
|
||
function prevQuestion() {
|
||
if (currentQuestion > 0) {
|
||
currentQuestion--;
|
||
answered = false;
|
||
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() {
|
||
stopTimer();
|
||
|
||
let correct = 0;
|
||
let wrong = 0;
|
||
shuffledQuestions.forEach((q, i) => {
|
||
if (answers[i] === q.correct) {
|
||
correct++;
|
||
} else {
|
||
wrong++;
|
||
}
|
||
});
|
||
|
||
const percentage = Math.round((correct / shuffledQuestions.length) * 100);
|
||
|
||
document.getElementById('quiz-section').classList.add('hidden');
|
||
document.getElementById('result-section').classList.remove('hidden');
|
||
document.getElementById('correct-count').textContent = correct;
|
||
document.getElementById('wrong-count').textContent = wrong;
|
||
document.getElementById('percentage').textContent = percentage + '%';
|
||
document.getElementById('score').textContent = `${correct} / ${QUESTIONS.length}`;
|
||
|
||
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.getElementById('timer-value').textContent;
|
||
}
|
||
|
||
document.addEventListener('keydown', (e) => {
|
||
if (!quizStarted) return;
|
||
if (e.key === 'ArrowRight' || e.key === ' ') nextQuestion();
|
||
if (e.key === 'ArrowLeft') prevQuestion();
|
||
});
|
||
|
||
checkLogin();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|