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

kazakh language EBT style quiz

Browse Source
This commit is contained in:
Aibek 2026-09-10 18:07:44 +00:00
parent e14c4d002d
commit 31e432a8ec
1 changed files with 129 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
index.html
View File

@ -1,64 +1,77 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru" data-theme="auto"> <html lang="kk" data-theme="auto">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>ЕНТ: История Казахстана</title> <title>ҰБТ: Қазақстан тарихы</title>
<link rel="stylesheet" href="design-system/kt-ai-fonts.css"> <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-tokens.css">
<link rel="stylesheet" href="design-system/kt-ai-components.css"> <link rel="stylesheet" href="design-system/kt-ai-components.css">
<link rel="stylesheet" href="design-system/kt-ai-page.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>"> <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> <style>
.kt-ai-hero { background: linear-gradient(135deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%); } .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); } .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); } .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 { text-align: left; justify-content: flex-start; padding-left: var(--kt-ai-space-4); }
.option-btn[data-correct="true"] { background: var(--kt-ai-success); border-color: var(--kt-ai-success); color: white; } .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-wrong="true"] { background: var(--kt-ai-danger); border-color: var(--kt-ai-danger); color: white; } .option-btn[data-selected="true"]::before { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); }
.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; }
.hidden { display: none; } .hidden { display: none; }
.fade-in { animation: fadeIn 0.4s ease; } .fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @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); }
</style> </style>
</head> </head>
<body> <body>
<header class="kt-ai-pagehead"> <header class="kt-ai-pagehead">
<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>
<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>
<section class="kt-ai-hero" data-align="center"> <section class="kt-ai-hero" data-align="center">
<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 class="kt-ai-hero-actions">
<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>
</section> </section>
<section id="quiz-section" class="kt-ai-section hidden"> <section id="quiz-section" class="kt-ai-section hidden">
<div class="kt-ai-wrap" data-width="narrow"> <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">20</span></div>
</div>
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-fill" id="progress"></div> <div class="progress-fill" id="progress"></div>
</div> </div>
<div class="kt-ai-card question-card fade-in"> <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); font-size: var(--kt-ai-text-xl);">Сұрақ мәтіні</h2>
<h2 id="question-text" style="margin-bottom: var(--kt-ai-space-5)">Текст вопроса</h2>
<div class="options-grid" id="options-container"></div> <div class="options-grid" id="options-container"></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);">
<button class="kt-ai-btn" data-variant="ghost" id="prev-btn" onclick="prevQuestion()">← Назад</button> <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> <button class="kt-ai-btn" data-variant="primary" id="next-btn" onclick="nextQuestion()">Алға →</button>
</div> </div>
</div> </div>
</section> </section>
@ -66,56 +79,99 @@
<section id="result-section" class="kt-ai-section hidden"> <section id="result-section" class="kt-ai-section hidden">
<div class="kt-ai-wrap" data-width="narrow"> <div class="kt-ai-wrap" data-width="narrow">
<div class="kt-ai-card" style="text-align: center"> <div class="kt-ai-card" style="text-align: center">
<h2>Тест завершён!</h2> <h2>Тестілеу аяқталды!</h2>
<div class="score-display" id="score">0 из 20</div> <div class="stats-grid">
<p id="score-message" style="color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-6)"></p> <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 / 20</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"> <div class="kt-ai-hero-actions">
<button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="showStartScreen()">Пройти ещё раз</button> <button class="kt-ai-btn" data-variant="primary" data-size="lg" onclick="showStartScreen()">Қайта тапсыру</button>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<footer class="kt-ai-wrap kt-ai-pagefoot"> <footer class="kt-ai-wrap kt-ai-pagefoot">
<span>© 2026 ЕНТ: История Казахстана</span> <span>© 2026 ҰБТ: Қазақстан тарихы</span>
<span class="kt-ai-spacer"></span> <span class="kt-ai-spacer"></span>
<span>Удачи на экзамене!</span> <span>Сәттілік тілейміз!</span>
</footer> </footer>
<script> <script>
const QUESTIONS = [ const QUESTIONS = [
{ q: "В каком году образовалось Казахское ханство?", options: ["1465 год", "1456 год", "1500 год", "1480 год"], correct: 0 }, { q: "Қазақ хандығы қай жылы құрылды?", options: ["1465 жыл", "1456 жыл", "1500 жыл", "1480 жыл"], correct: 0 },
{ q: "Кто основал Казахское ханство?", options: ["Абылай хан", "Керей и Жанибек", "Тауке хан", "Касым хан"], correct: 1 }, { q: "Қазақ хандығының негізін қалағандар?", options: ["Абылай хан", "Керей мен Жәнібек", "Тәуке хан", "Қасым хан"], correct: 1 },
{ q: "В каком году был принят закон «О языке»?", options: ["1989 год", "1991 год", "1986 год", "1995 год"], correct: 0 }, { q: "«Тіл туралы» заң қай жылы қабылданды?", options: ["1989 жыл", "1991 жыл", "1986 жыл", "1995 жыл"], correct: 0 },
{ q: "Кто был первым президентом Академии наук Казахской ССР?", options: ["К. Сатпаев", "А. Маргулан", "М. Ауэзов", "Ж. Шашкин"], correct: 0 }, { q: "Қазақ КСР Ғылым Академиясының тұңғыш президенті кім?", options: ["Қ. Сәтпаев", "Ә. Марғұлан", "М. Әуезов", "Ж. Шашкин"], correct: 0 },
{ q: "В каком году Казахстан объявил независимость?", options: ["1991 год, 16 декабря", "1990 год, 25 октября", "1993 год, 1 января", "1986 год, 17 декабря"], correct: 0 }, { q: "Қазақстан қай жылы тәуелсіздік алды?", options: ["1991 жыл, 16 желтоқсан", "1990 жыл, 25 қазан", "1993 жыл, 1 қаңтар", "1986 жыл, 17 желтоқсан"], correct: 0 },
{ q: "Кто возглавил восстание 1836-1838 годов?", options: ["Кенесары Касымулы", "Исатай Тайманулы", "Сырым Датулы", "Махамбет Утемисулы"], correct: 1 }, { q: "1836-1838 жылдардағы көтерілісті кім басқарды?", options: ["Кенесары Қасымұлы", "Исатай Тайманұлы", "Сырым Датұлы", "Махамбет Өтемісұлы"], correct: 1 },
{ q: "В каком году была образована Казахская АССР?", options: ["1920 год", "1925 год", "1936 год", "1917 год"], correct: 0 }, { q: "Қазақ АКСР-і қай жылы құрылды?", options: ["1920 жыл", "1925 жыл", "1936 жыл", "1917 жыл"], correct: 0 },
{ q: "Кто автор труда «Путь Абая»?", options: ["М. Ауэзов", "А. Байтурсынулы", "Ж. Аймауытов", "С. Сейфуллин"], correct: 0 }, { q: "«Абай жолы» романының авторы кім?", options: ["М. Әуезов", "А. Байтұрсынұлы", "Ж. Аймауытов", "С. Сейфуллин"], correct: 0 },
{ q: "В каком году произошли события Желтоксана?", options: ["1986 год", "1989 год", "1991 год", "1985 год"], correct: 0 }, { q: "Желтоқсан оқиғасы қай жылы болды?", options: ["1986 жыл", "1989 жыл", "1991 жыл", "1985 жыл"], correct: 0 },
{ q: "Кто был последним казахским ханом?", options: ["Кенесары Касымулы", "Абылай хан", "Бокей хан", "Шергазы хан"], correct: 0 }, { q: "Соңғы қазақ ханы кім?", options: ["Кенесары Қасымұлы", "Абылай хан", "Бөкей хан", "Шерғазы хан"], correct: 0 },
{ q: "В каком году Казахстан переехал в Астану?", options: ["1997 год", "1991 год", "2000 год", "1995 год"], correct: 0 }, { q: "Қазақстан астанасын қай жылы көшірді?", options: ["1997 жыл", "1991 жыл", "2000 жыл", "1995 жыл"], correct: 0 },
{ q: "Кто написал гимн независимого Казахстана?", options: ["Ж. Нажимеденов, Н. Назарбаев", "М. Ауэзов", "А. Байтурсынулы", "Ж. Молдагалиев"], correct: 0 }, { q: "Қазақстан әнұранының авторлары кімдер?", options: ["Ж. Нәжімеденов, Н. Назарбаев", "М. Әуезов", "А. Байтұрсынұлы", "Ж. Молдағалиев"], correct: 0 },
{ q: "В каком году была введена национальная валюта — тенге?", options: ["1993 год", "1991 год", "1995 год", "1999 год"], correct: 0 }, { q: "Ұлттық валюта – теңге қай жылы енгізілді?", options: ["1993 жыл", "1991 жыл", "1995 жыл", "1999 жыл"], correct: 0 },
{ q: "Кто был первым космонавтом независимого Казахстана?", options: ["Т. Аубакиров", "Т. Мусабаев", "А. Аимбетов", "Ю. Гагарин"], correct: 0 }, { q: "Тәуелсіз Қазақстанның тұңғыш ғарышкері кім?", options: ["Т. Әубәкіров", "Т. Мұсабаев", "А. Айымбетов", "Ю. Гагарин"], correct: 0 },
{ q: "В каком году принята Конституция Республики Казахстан?", options: ["1995 год", "1993 год", "1991 год", "2000 год"], correct: 0 }, { q: "Қазақстан Республикасының Конституциясы қай жылы қабылданды?", options: ["1995 жыл", "1993 жыл", "1991 жыл", "2000 жыл"], correct: 0 },
{ q: "Кто основал город Алматы (Верный)?", options: ["Казахское ханство", "Российская империя (1854)", "Золотая Орда", "Могулистан"], correct: 1 }, { q: "Алматы қаласын (Верный) кім негізінде қалады?", options: ["Қазақ хандығы", "Ресей империясы (1854)", "Алтын Орда", "Моғолстан"], correct: 1 },
{ q: "В каком году произошло восстание под предводительством Сырыма Датулы?", options: ["1783-1797 годы", "1836-1838 годы", "1916 год", "1773-1775 годы"], correct: 0 }, { q: "Сырым Датұлы бастаған көтеріліс қай жылдары болды?", options: ["1783-1797 жылдар", "1836-1838 жылдар", "1916 жыл", "1773-1775 жылдар"], correct: 0 },
{ q: "Кто такой Аль-Фараби?", options: ["Великий философ и учёный", "Казахский хан", "Батыр", "Поэт"], correct: 0 }, { q: "Әл-Фараби кім?", options: ["Ұлы философ және ғалым", "Қазақ ханы", "Батыр", "Ақын"], correct: 0 },
{ q: "В каком году Казахстан стал председателем ОБСЕ?", options: ["2010 год", "2005 год", "2015 год", "2000 год"], correct: 0 }, { q: "Қазақстан ОБСЕ-ге төрағалық еткен жыл?", options: ["2010 жыл", "2005 жыл", "2015 жыл", "2000 жыл"], correct: 0 },
{ q: "Кто написал книгу «Казахстанский путь»?", options: ["Н. Назарбаев", "М. Ауэзов", "А. Байтурсынулы", "Ж. Аймауытов"], correct: 0 } { q: "«Қазақстан жолы» кітабының авторы кім?", options: ["Н. Назарбаев", "М. Әуезов", "А. Байтұрсынұлы", "Ж. Аймауытов"], correct: 0 }
]; ];
let currentQuestion = 0; let currentQuestion = 0;
let answers = {}; let answers = {};
let quizStarted = false; let quizStarted = false;
let timerInterval = null;
let seconds = 0;
function showStartScreen() { function showStartScreen() {
document.getElementById('quiz-section').classList.add('hidden'); document.getElementById('quiz-section').classList.add('hidden');
document.getElementById('result-section').classList.add('hidden'); document.getElementById('result-section').classList.add('hidden');
document.querySelector('.kt-ai-hero').classList.remove('hidden'); document.querySelector('.kt-ai-hero').classList.remove('hidden');
quizStarted = false; quizStarted = false;
stopTimer();
}
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() { function startQuiz() {
@ -125,25 +181,33 @@ function startQuiz() {
quizStarted = true; quizStarted = true;
currentQuestion = 0; currentQuestion = 0;
answers = {}; answers = {};
seconds = 0;
startTimer();
document.getElementById('q-total').textContent = QUESTIONS.length;
showQuestion(); showQuestion();
} }
function showQuestion() { function showQuestion() {
const q = QUESTIONS[currentQuestion]; const q = QUESTIONS[currentQuestion];
document.getElementById('question-number').textContent = `Вопрос ${currentQuestion + 1} из ${QUESTIONS.length}`; document.getElementById('q-current').textContent = currentQuestion + 1;
document.getElementById('question-text').textContent = q.q; document.getElementById('question-text').textContent = q.q;
const container = document.getElementById('options-container'); const container = document.getElementById('options-container');
container.innerHTML = ''; container.innerHTML = '';
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');
btn.className = 'kt-ai-btn option-btn'; btn.className = 'kt-ai-btn option-btn';
btn.textContent = opt; 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); btn.onclick = () => selectAnswer(i);
if (answers[currentQuestion] === i) { if (answers[currentQuestion] === i) {
btn.style.borderColor = 'var(--kt-ai-primary)'; btn.style.borderColor = 'var(--kt-ai-primary)';
btn.style.background = 'var(--kt-ai-bg-soft)'; 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);
}); });
@ -181,27 +245,38 @@ function updateProgress() {
function updateButtons() { function updateButtons() {
document.getElementById('prev-btn').style.visibility = currentQuestion === 0 ? 'hidden' : 'visible'; document.getElementById('prev-btn').style.visibility = currentQuestion === 0 ? 'hidden' : 'visible';
const nextBtn = document.getElementById('next-btn'); const nextBtn = document.getElementById('next-btn');
nextBtn.textContent = currentQuestion === QUESTIONS.length - 1 ? 'Завершить' : 'Далее →'; nextBtn.textContent = currentQuestion === QUESTIONS.length - 1 ? 'Аяқтау' : 'Алға →';
} }
function showResults() { function showResults() {
let score = 0; stopTimer();
let correct = 0;
let wrong = 0;
QUESTIONS.forEach((q, i) => { QUESTIONS.forEach((q, i) => {
if (answers[i] === q.correct) score++; if (answers[i] === q.correct) {
correct++;
} else {
wrong++;
}
}); });
const percentage = Math.round((correct / QUESTIONS.length) * 100);
document.getElementById('quiz-section').classList.add('hidden'); document.getElementById('quiz-section').classList.add('hidden');
document.getElementById('result-section').classList.remove('hidden'); document.getElementById('result-section').classList.remove('hidden');
document.getElementById('score').textContent = `${score} из ${QUESTIONS.length}`; document.getElementById('correct-count').textContent = correct;
document.getElementById('wrong-count').textContent = wrong;
document.getElementById('percentage').textContent = percentage + '%';
document.getElementById('score').textContent = `${correct} / ${QUESTIONS.length}`;
const percentage = (score / QUESTIONS.length) * 100;
let message = ''; let message = '';
if (percentage >= 90) message = 'Отлично! Вы готовы к ЕНТ 🎉'; if (percentage >= 90) message = 'Өте жақсы! ҰБТ-ға дайынсың 🎉';
else if (percentage >= 70) message = 'Хороший результат! 👍'; else if (percentage >= 70) message = 'Жақсы нәтиже! 👍';
else if (percentage >= 50) message = 'Неплохо, но можно лучше 👌'; else if (percentage >= 50) message = 'Жаман емес, бірақ жақсартуға болады 👌';
else message = 'Стоит ещё повторить материал 📚'; else message = 'Әлі де дайындалу керек 📚';
document.getElementById('score-message').textContent = message; document.getElementById('score-message').textContent = message + ` | Уақыт: ${document.getElementById('timer-value').textContent}`;
} }
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {