magan-pravaga-tapsyramyn-kaz/index.html

432 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="kk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Жол Ережелері - Тест</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); min-height: 100vh; color: #fff; }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
header { text-align: center; padding: 40px 20px; }
header h1 { font-size: clamp(28px, 5vw, 42px); margin-bottom: 10px; background: linear-gradient(90deg, #00d9ff, #00ff88); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
header p { color: #a0a0b0; font-size: 18px; }
.stats { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.stat-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px 25px; text-align: center; min-width: 140px; }
.stat-card .num { font-size: 28px; font-weight: bold; color: #00ff88; }
.stat-card .label { font-size: 14px; color: #a0a0b0; margin-top: 5px; }
.category-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.cat-btn { padding: 10px 18px; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: #fff; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
.cat-btn:hover, .cat-btn.active { background: #00d9ff; border-color: #00d9ff; color: #1a1a2e; }
.question-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); border-radius: 16px; padding: 25px; margin: 20px 0; border: 1px solid rgba(255,255,255,0.1); }
.question-num { display: inline-block; background: #00d9ff; color: #1a1a2e; padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 14px; margin-bottom: 12px; }
.question-text { font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.option { padding: 15px 20px; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1); border-radius: 10px; cursor: pointer; transition: all 0.3s; font-size: 16px; }
.option:hover { background: rgba(0,217,255,0.1); border-color: #00d9ff; }
.option.correct { background: rgba(0,255,136,0.2); border-color: #00ff88; }
.option.wrong { background: rgba(255,82,82,0.2); border-color: #ff5252; }
.result-box { background: rgba(0,255,136,0.15); border: 2px solid #00ff88; border-radius: 12px; padding: 20px; margin-top: 20px; text-align: center; }
.result-box h3 { font-size: 24px; margin-bottom: 10px; }
.result-box .score { font-size: 42px; font-weight: bold; color: #00ff88; }
.explanation { background: rgba(255,193,7,0.1); border-left: 4px solid #ffc107; padding: 15px; margin-top: 15px; border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.6; }
.explanation strong { color: #ffc107; }
.controls { display: flex; gap: 10px; justify-content: center; margin: 30px 0; }
.btn { padding: 12px 30px; border: none; border-radius: 25px; cursor: pointer; font-size: 16px; font-weight: bold; transition: all 0.3s; }
.btn-primary { background: linear-gradient(90deg, #00d9ff, #00ff88); color: #1a1a2e; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(0,217,255,0.4); }
.btn-secondary { background: rgba(255,255,255,0.1); color: #fff; border: 2px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { background: rgba(255,255,255,0.2); }
.progress-bar { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; margin: 20px 0; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #00d9ff, #00ff88); transition: width 0.3s; }
.search-box { margin: 20px 0; text-align: center; }
.search-box input { width: 100%; max-width: 400px; padding: 12px 20px; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); border-radius: 25px; color: #fff; font-size: 16px; }
.search-box input:focus { outline: none; border-color: #00d9ff; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>🚦 Жол Қозғалысы Ережелері</h1>
<p>2025 жылғы айыппұлдар кестесі бойынша тест</p>
</header>
<div class="stats">
<div class="stat-card">
<div class="num" id="totalQuestions">0</div>
<div class="label">Барлық сұрақ</div>
</div>
<div class="stat-card">
<div class="num" id="answeredCount">0</div>
<div class="label">Жауап берілген</div>
</div>
<div class="stat-card">
<div class="num" id="correctCount">0</div>
<div class="label">Дұрыс</div>
</div>
<div class="stat-card">
<div class="num" id="scorePercent">0%</div>
<div class="label">Нәтиже</div>
</div>
</div>
<div class="search-box">
<input type="text" id="searchInput" placeholder="🔍 Сұрақтарды іздеу...">
</div>
<div class="category-filter" id="categoryFilter"></div>
<div class="progress-bar">
<div class="progress-fill" id="progressBar" style="width: 0%"></div>
</div>
<div id="questionsContainer"></div>
<div class="controls">
<button class="btn btn-primary" onclick="checkAllAnswers()">✅ Жауаптарды тексеру</button>
<button class="btn btn-secondary" onclick="resetTest()">🔄 Қайта бастау</button>
</div>
<div class="result-box" id="resultBox" style="display: none;">
<h3>📊 Сіздің нәтижеңіз</h3>
<div class="score" id="finalScore"></div>
<p id="finalMessage"></p>
</div>
</div>
<script>
const questions = [
{
category: "Жылдамдық",
question: "Жылдамдықты 10-нан 20 км/сағ-қа дейін арттырғанда айыппұл мөлшері қандай?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 0,
explanation: "ӘҚБтК 592 б.1 - 5 АЕК = 19 660 теңге"
},
{
category: "Жылдамдық",
question: "Жылдамдықты 20-дан 40 км/сағ-қа дейін арттырғанда айыппұл қанша?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 592 б.2 - 10 АЕК = 39 320 теңге"
},
{
category: "Жылдамдық",
question: "Жылдамдықты 40 км/сағ-тан асырып арттырғанда жауапкершілік қандай?",
options: ["10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)"],
correct: 2,
explanation: "ӘҚБтК 592 б.3 - 20 АЕК = 78 640 теңге"
},
{
category: "Қиылыс",
question: "Бағдаршамның тыйым салатын сигналына қарамай өткенде айыппұл мөлшері?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 599 б.1 - 10 АЕК = 39 320 теңге, қайта бұзғанда 58 980 теңге + қайта тапсыру"
},
{
category: "Қиылыс",
question: "Көше қиылысында кептеліс пайда болғанда жол қиылысына шыққанда жаза қандай?",
options: ["3 АЕК (11 796 теңге)", "5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)"],
correct: 0,
explanation: "ӘҚБтК 594 б.1 - 3 АЕК = 11 796 теңге"
},
{
category: "Қиылыс",
question: "Жол қиылыстарынан өтуде басымдық құқығын пайдаланатын КҚ-ға жол бермегенде айыппұл?",
options: ["10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)"],
correct: 1,
explanation: "ӘҚБтК 594 б.2 - 15 АЕК = 58 980 теңге"
},
{
category: "Қиылыс",
question: "Жаяу жүргіншіге жол бермегенде айыппұл қанша?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 600 б.1 - 10 АЕК = 39 320 теңге, қайта бұзғанда 58 980 теңге + қайта тапсыру"
},
{
category: "Қиылыс",
question: "Жедел және арнайы қызметтер көлігіне басымдық бермегенде айыппұл?",
options: ["5 АЕК (19 660 теңге)", "7 АЕК (27 524 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)"],
correct: 1,
explanation: "ӘҚБтК 598 б.1 - 7 АЕК = 27 524 теңге"
},
{
category: "Қиылыс",
question: "Теміржол өтпесінде тоқтап тұрғанда жауапкершілік қандай?",
options: ["10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "6 айға құқықтан айыру"],
correct: 0,
explanation: "ӘҚБтК 607 б.1 - 10 АЕК = 39 320 теңге, қайта бұзғанда 6 айға құқықтан айыру"
},
{
category: "Маневр",
question: "Бұрылу алдында сигнал бермегенде айыппұл қанша?",
options: ["3 АЕК (11 796 теңге)", "5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)"],
correct: 1,
explanation: "ӘҚБтК 595 б.1 - 5 АЕК = 19 660 теңге"
},
{
category: "Маневр",
question: "Кері бұрылуға тыйым салынған жерде кері бұрылғанда айыппұл?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 595 б.2 - 10 АЕК = 39 320 теңге, қайта бұзғанда 78 640 теңге"
},
{
category: "Орналасу",
question: "Қарсы бағытта жүруге арналған жолаққа шыққанда жаза қандай?",
options: ["15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)", "6 айға құқықтан айыру"],
correct: 3,
explanation: "ӘҚБтК 596 б.3 - 6 айға құқықтан айыру"
},
{
category: "Орналасу",
question: "Жаяу жүргіншілер жолымен жүргенде айыппұл қанша?",
options: ["10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)"],
correct: 1,
explanation: "ӘҚБтК 596 б.1 - 15 АЕК = 58 980 теңге, қайта бұзғанда 117 960 теңге + қайта тапсыру"
},
{
category: "Тоқтау",
question: "Тоқтау ережелерін бұзғанда (жалпы жағдайда) айыппұл қанша?",
options: ["3 АЕК (11 796 теңге)", "5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)"],
correct: 1,
explanation: "ӘҚБтК 597 б.1 - 5 АЕК = 19 660 теңге"
},
{
category: "Тоқтау",
question: "Тротуарда тоқтағанда айыппұл мөлшері?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 597 б.2 - 10 АЕК = 39 320 теңге + МТНБ"
},
{
category: "Тоқтау",
question: "Мүгедектерге арналған орынға тоқтағанда айыппұл?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)"],
correct: 1,
explanation: "ӘҚБтК 597 б.4 - 10 АЕК = 39 320 теңге + АЙ.Т"
},
{
category: "Тоқтау",
question: "Тұрақ ақысын төлемегенде айыппұл қанша?",
options: ["3 АЕК (11 796 теңге)", "5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)"],
correct: 0,
explanation: "ӘҚБтК 597 б.4-1 - 3 АЕК = 11 796 теңге"
},
{
category: "Полиция",
question: "Полиция қызметкерінің тоқтату туралы заңды талабын орындамағанда айыппұл?",
options: ["15 АЕК (58 980 теңге)", "20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)", "50 АЕК (196 600 теңге)"],
correct: 2,
explanation: "ӘҚБтК 613 б.1 - 30 АЕК = 117 960 теңге, қайта бұзғанда 6 айға құқықтан айыру"
},
{
category: "Полиция",
question: "Масаң күйге сараптамадан өтуден бас тартқанда жаза қандай?",
options: ["30 АЕК (117 960 теңге)", "50 АЕК (196 600 теңге)", "15 күнге қамау + құқықтан айыру", "200 АЕК (786 400 теңге)"],
correct: 2,
explanation: "ӘҚБтК 613 б.4 - 15 күнге қамауға алу және құқықтан айыру"
},
{
category: "Авария",
question: "ЖКО жасау (басқаларды жылдамдықты күрт өзгертуге мәжбүр ету) айыппұлы?",
options: ["5 АЕК (19 660 теңге)", "10 АЕК (39 320 теңге)", "15 АЕК (58 980 теңге)", "6 айға құқықтан айыру"],
correct: 1,
explanation: "ӘҚБтК 606 б.1 - 10 АЕК = 39 320 теңге, қайта бұзғанда 6 айға құқықтан айыру"
},
{
category: "Авария",
question: "Жарақатсыз ЖКО жасағанда жаза қандай?",
options: ["20 АЕК (78 640 теңге)", "40 АЕК (157 280 теңге)", "6 айға құқықтан айыру", "20 АЕК немесе 6 айға құқықтан айыру"],
correct: 3,
explanation: "ӘҚБтК 610 б.1 - 20 АЕК = 78 640 теңге немесе 6 айға құқықтан айыру + МТНБ"
},
{
category: "Авария",
question: "Жеңіл дене жарақатымен ЖКО жасағанда айыппұл?",
options: ["20 АЕК (78 640 теңге)", "40 АЕК (157 280 теңге)", "60 АЕК (235 920 теңге)", "100 АЕК (393 200 теңге)"],
correct: 1,
explanation: "ӘҚБтК 610 б.2 - 40 АЕК = 157 280 теңге немесе 6 айдан 9 айға дейін құқықтан айыру + МТНБ"
},
{
category: "Авария",
question: "ЖКО орнын қалдырғанда айыппұл қанша?",
options: ["20 АЕК (78 640 теңге)", "50 АЕК (196 600 теңге)", "100 АЕК (393 200 теңге)", "200 АЕК (786 400 теңге)"],
correct: 1,
explanation: "ӘҚБтК 611 б.2 - 50 АЕК = 196 600 теңге немесе 1 жылға бас бостандығынан айыру + МТНБ"
},
{
category: "Масаң күй",
question: "Мас күйінде көлік басқарғанда жаза қандай?",
options: ["15 күнге қамау + 7 жылға дейін құқықтан айыру", "20 күнге қамау + 9 жылға дейін", "200 АЕК (786 400 теңге)", "50 АЕК (196 600 теңге)"],
correct: 0,
explanation: "ӘҚБтК 608 б.1 - 15 күнге қамауға алу және 7 жылға дейін құқықтан айыру + АЙ.Т"
},
{
category: "Масаң күй",
question: "Мас күйінде ЖКО жасап, зардап шеккендерсіз болса жаза?",
options: ["15 күнге қамау", "20 күнге қамау + 9 жылға дейін құқықтан айыру", "40 АЕК (157 280 теңге)", "60 АЕК (235 920 теңге)"],
correct: 1,
explanation: "ӘҚБтК 608 б.3 - 20 күнге қамауға алу және 9 жылға дейін құқықтан айыру + АЙ.Т"
},
{
category: "Масаң күй",
question: "Мас күйінде 2 адамның қаза болуына әкеп соққанда жаза?",
options: ["5 жылдан 10 жылға дейін бас бостандығынан айыру", "7 жылдан 10 жылға дейін бас бостандығынан айыру", "10 жылға дейін бас бостандығынан айыру", "Өмір бойы құқықтан айыру"],
correct: 1,
explanation: "ҚК 345-1 б.4 - 7 жылдан 10 жылға дейін бас бостандығынан айыру + өмір бойы құқықтан айыру"
},
{
category: "Құқық жоқ",
question: "Көлік жүргізу құқығы жоқ адам қарсы жолаққа шыққанда айыппұл?",
options: ["20 АЕК (78 640 теңге)", "30 АЕК (117 960 теңге)", "50 АЕК (196 600 теңге)", "200 АЕК (786 400 теңге)"],
correct: 2,
explanation: "ӘҚБтК 596 б.5 - 50 АЕК = 196 600 теңге"
},
{
category: "Құқық жоқ",
question: "Құқығы жоқ адам мас күйінде көлік басқарса жаза?",
options: ["20 күнге қамау + АЙ.Т", "30 тәулікке қамау + АЙ.Т", "200 АЕК (786 400 теңге)", "15 күнге қамау"],
correct: 0,
explanation: "ӘҚБтК 608 б.6 - 20 күнге қамауға алу + АЙ.Т"
},
{
category: "Құқық жоқ",
question: "Құқығы жоқ адам мас күйінде басқарып, ЖКО жасаса (жеңіл жарақат)?",
options: ["20 күнге қамау", "30 тәулікке қамау", "4 жылдан 6 жылға дейін бас бостандығынан айыру", "6 жылдан 8 жылға дейін бас бостандығынан айыру"],
correct: 2,
explanation: "ҚК 346 б.2 - 4 жылдан 6 жылға дейін бас бостандығынан айыру + өмір бойы құқықтан айыру"
}
];
let currentCategory = "Барлығы";
let answered = {};
function getCategories() {
const cats = [...new Set(questions.map(q => q.category))];
return ["Барлығы", ...cats];
}
function renderCategories() {
const container = document.getElementById("categoryFilter");
const categories = getCategories();
container.innerHTML = categories.map(cat =>
`<button class="cat-btn ${cat === currentCategory ? "active" : ""}" onclick="filterCategory('${cat}')">${cat}</button>`
).join("");
}
function filterCategory(cat) {
currentCategory = cat;
renderCategories();
renderQuestions();
}
function renderQuestions() {
const container = document.getElementById("questionsContainer");
const filtered = currentCategory === "Барлығы"
? questions
: questions.filter(q => q.category === currentCategory);
document.getElementById("totalQuestions").textContent = filtered.length;
container.innerHTML = filtered.map((q, idx) => {
const realIdx = questions.indexOf(q);
const userAnswer = answered[realIdx];
let optionsHtml = q.options.map((opt, optIdx) => {
let className = "option";
if (userAnswer !== undefined) {
if (optIdx === q.correct) className += " correct";
else if (optIdx === userAnswer) className += " wrong";
}
return `<div class="${className}" onclick="selectAnswer(${realIdx}, ${optIdx})">${opt}</div>`;
}).join("");
let explanationHtml = "";
if (userAnswer !== undefined) {
explanationHtml = `<div class="explanation"><strong>Түсініктеме:</strong> ${q.explanation}</div>`;
}
return `
<div class="question-card">
<span class="question-num">Сұрақ ${idx + 1}</span>
<div class="question-text">${q.question}</div>
<div class="options">${optionsHtml}</div>
${explanationHtml}
</div>
`;
}).join("");
updateStats();
}
function selectAnswer(qIdx, optIdx) {
if (answered[qIdx] !== undefined) return;
answered[qIdx] = optIdx;
renderQuestions();
}
function updateStats() {
const total = questions.length;
const answeredCount = Object.keys(answered).length;
const correctCount = Object.keys(answered).filter(k => answered[k] === questions[k].correct).length;
const percent = answeredCount > 0 ? Math.round((correctCount / answeredCount) * 100) : 0;
document.getElementById("answeredCount").textContent = answeredCount;
document.getElementById("correctCount").textContent = correctCount;
document.getElementById("scorePercent").textContent = percent + "%";
document.getElementById("progressBar").style.width = (answeredCount / total * 100) + "%";
}
function checkAllAnswers() {
const total = questions.length;
const answeredCount = Object.keys(answered).length;
if (answeredCount === 0) {
alert("Алдымен сұрақтарға жауап беріңіз!");
return;
}
const correctCount = Object.keys(answered).filter(k => answered[k] === questions[k].correct).length;
const percent = Math.round((correctCount / answeredCount) * 100);
document.getElementById("finalScore").textContent = correctCount + " / " + answeredCount + " (" + percent + "%)";
let message = "";
if (percent >= 90) message = "🎉 Керемет! Сіз жол ережелерін жақсы білесіз!";
else if (percent >= 70) message = "👍 Жақсы нәтиже! Бірақ әлі де қайталау керек.";
else if (percent >= 50) message = "😐 Орташа нәтиже. Ережелерді қайталаңыз.";
else message = "😓 Төмен нәтиже. Ережелерді мұқият оқып шығыңыз.";
document.getElementById("finalMessage").textContent = message;
document.getElementById("resultBox").style.display = "block";
renderQuestions();
}
function resetTest() {
answered = {};
currentCategory = "Барлығы";
document.getElementById("resultBox").style.display = "none";
renderCategories();
renderQuestions();
}
document.getElementById("searchInput").addEventListener("input", function(e) {
const term = e.target.value.toLowerCase();
const cards = document.querySelectorAll(".question-card");
cards.forEach((card, idx) => {
const q = questions[idx];
const match = q.question.toLowerCase().includes(term) ||
q.options.some(o => o.toLowerCase().includes(term));
card.style.display = match ? "block" : "none";
});
});
renderCategories();
renderQuestions();
</script>
</body>
</html>