423 lines
23 KiB
HTML
423 lines
23 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>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.phrase-block { margin-bottom: var(--kt-ai-space-6); }
|
||
.phrase-block h3 { margin-bottom: var(--kt-ai-space-4); color: var(--kt-ai-primary); }
|
||
.phrase-table { width: 100%; border-collapse: collapse; margin-top: var(--kt-ai-space-3); }
|
||
.phrase-table th, .phrase-table td {
|
||
text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
|
||
border-bottom: 1px solid var(--kt-ai-divider);
|
||
font-size: var(--kt-ai-text-sm);
|
||
}
|
||
.phrase-table th { font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg-muted); }
|
||
.phrase-table td:first-child { color: var(--kt-ai-fg-muted); width: 45%; }
|
||
.phrase-table td:last-child { font-weight: var(--kt-ai-weight-medium); }
|
||
.topic-toggle { cursor: pointer; user-select: none; }
|
||
.topic-toggle::after { content: " ▾"; font-size: 0.8em; color: var(--kt-ai-fg-muted); }
|
||
.topic-toggle.open::after { content: " ▴"; }
|
||
.topic-content { display: none; }
|
||
.topic-content.show { display: block; }
|
||
.tip-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-5);
|
||
margin-bottom: var(--kt-ai-space-4); }
|
||
.tip-card h4 { margin-bottom: var(--kt-ai-space-2); }
|
||
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-6); }
|
||
@media (max-width: 640px) { .doc-grid { grid-template-columns: 1fr; } }
|
||
.doc-card { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-5); }
|
||
.doc-card h4 { margin-bottom: var(--kt-ai-space-3); }
|
||
.doc-card p { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm); line-height: 1.6; }
|
||
.doc-card .ru { color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-xs); margin-top: var(--kt-ai-space-2); }
|
||
.search-box { width: 100%; max-width: 500px; padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
|
||
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg);
|
||
background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-size: var(--kt-ai-text-base);
|
||
margin-bottom: var(--kt-ai-space-6); }
|
||
.search-box::placeholder { color: var(--kt-ai-fg-faint); }
|
||
.quiz-section { margin-top: var(--kt-ai-space-8); }
|
||
.quiz-q { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border);
|
||
border-radius: var(--kt-ai-radius-lg); padding: var(--kt-ai-space-5);
|
||
margin-bottom: var(--kt-ai-space-4); }
|
||
.quiz-q h4 { margin-bottom: var(--kt-ai-space-3); }
|
||
.quiz-opts button { display: block; width: 100%; text-align: left; padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
|
||
border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-md);
|
||
background: var(--kt-ai-bg); color: var(--kt-ai-fg); font-size: var(--kt-ai-text-sm);
|
||
margin-bottom: var(--kt-ai-space-2); cursor: pointer; transition: border-color .2s; }
|
||
.quiz-opts button:hover { border-color: var(--kt-ai-primary); }
|
||
.quiz-opts button.correct { border-color: #22c55e; background: rgba(34,197,94,.1); }
|
||
.quiz-opts button.wrong { border-color: #ef4444; background: rgba(239,68,68,.1); }
|
||
.quiz-opts button:disabled { cursor: default; opacity: .85; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>🛂 Migration English</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#phrases">Фразы</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#documents">Документы</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#quiz">Тест</a>
|
||
</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">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#phrases">Начать учить</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#quiz">Проверить себя</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="phrases" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Ключевые фразы по ситуациям</h2>
|
||
<p>Нажмите на тему, чтобы раскрыть фразы. Используйте поиск, чтобы найти нужную фразу.</p>
|
||
</div>
|
||
<input type="text" class="search-box" id="searchInput" placeholder="🔍 Поиск фразы на русском или английском...">
|
||
|
||
<div id="phrasesList">
|
||
|
||
<div class="phrase-block" data-topic="airport">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">🛫 В аэропорту (At the Airport)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>Где регистрация?</td><td>Where is the check-in desk?</td></tr>
|
||
<tr><td>Я хочу зарегистрироваться онлайн</td><td>I'd like to check in online</td></tr>
|
||
<tr><td>Вот мой паспорт и билет</td><td>Here is my passport and ticket</td></tr>
|
||
<tr><td>У меня ручная кладь</td><td>I have carry-on luggage</td></tr>
|
||
<tr><td>Мне нужно сдать багаж</td><td>I need to check in my luggage</td></tr>
|
||
<tr><td>Где мой выход на посадку?</td><td>Where is my boarding gate?</td></tr>
|
||
<tr><td>Какой выход на посадку?</td><td>Which boarding gate?</td></tr>
|
||
<tr><td>Посадка началась?</td><td>Has boarding started?</td></tr>
|
||
<tr><td>Мой рейс задерживается?</td><td>Is my flight delayed?</td></tr>
|
||
<tr><td>Где получить багаж?</td><td>Where can I collect my luggage?</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phrase-block" data-topic="border">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">🛂 Пограничный контроль (Border Control)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>Здравствуйте</td><td>Hello</td></tr>
|
||
<tr><td>Вот мой паспорт</td><td>Here is my passport</td></tr>
|
||
<tr><td>Вот моя виза</td><td>Here is my visa</td></tr>
|
||
<tr><td>Вот приглашение</td><td>Here is the invitation letter</td></tr>
|
||
<tr><td>Я прибыл(а) из Казахстана</td><td>I have arrived from Kazakhstan</td></tr>
|
||
<tr><td>Я прибыл(а) из России</td><td>I have arrived from Russia</td></tr>
|
||
<tr><td>Я здесь по работе</td><td>I am here on business</td></tr>
|
||
<tr><td>Я здесь как турист</td><td>I am here as a tourist</td></tr>
|
||
<tr><td>Я еду к родственникам</td><td>I am visiting my relatives</td></tr>
|
||
<tr><td>Я планирую оставаться на две недели</td><td>I plan to stay for two weeks</td></tr>
|
||
<tr><td>Я живу в отеле</td><td>I am staying at a hotel</td></tr>
|
||
<tr><td>Я остановлюсь у друга</td><td>I will stay at a friend's place</td></tr>
|
||
<tr><td>Вот адрес проживания</td><td>Here is my address</td></tr>
|
||
<tr><td>Я собираюсь вернуться домой</td><td>I intend to return home</td></tr>
|
||
<tr><td>Я уже был(а) здесь раньше</td><td>I have been here before</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phrase-block" data-topic="customs">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">📦 Таможня (Customs)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>У меня нет товаров для декларирования</td><td>I have nothing to declare</td></tr>
|
||
<tr><td>У меня есть товары для декларирования</td><td>I have goods to declare</td></tr>
|
||
<tr><td>Это подарки</td><td>These are gifts</td></tr>
|
||
<tr><td>Это личные вещи</td><td>These are personal belongings</td></tr>
|
||
<tr><td>Стоимость — ... долларов</td><td>The value is ... dollars</td></tr>
|
||
<tr><td>Я купил(а) это для себя</td><td>I bought this for personal use</td></tr>
|
||
<tr><td>Это для продажи</td><td>This is for commercial purposes</td></tr>
|
||
<tr><td>У меня есть лекарства с рецептом</td><td>I have prescription medication</td></tr>
|
||
<tr><td>Я не перевожу наличные сверх лимита</td><td>I am not carrying cash above the limit</td></tr>
|
||
<tr><td>Это мой первый визит в эту страну</td><td>This is my first visit to this country</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phrase-block" data-topic="documents">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">📋 Заполнение документов (Filling in Forms)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>Как заполнить эту форму?</td><td>How do I fill out this form?</td></tr>
|
||
<tr><td>Где я могу получить форму?</td><td>Where can I get a form?</td></tr>
|
||
<tr><td>Мне нужна помощь с заполнением</td><td>I need help filling this out</td></tr>
|
||
<tr><td>Можно ручку, пожалуйста?</td><td>Could I have a pen, please?</td></tr>
|
||
<tr><td>Что означает это поле?</td><td>What does this field mean?</td></tr>
|
||
<tr><td>Мой адрес проживания</td><td>My residential address</td></tr>
|
||
<tr><td>Мой адрес прописки</td><td>My registration address</td></tr>
|
||
<tr><td>Мой номер телефона</td><td>My phone number</td></tr>
|
||
<tr><td>Мой адрес электронной почты</td><td>My email address</td></tr>
|
||
<tr><td>Место рождения</td><td>Place of birth</td></tr>
|
||
<tr><td>Дата рождения</td><td>Date of birth</td></tr>
|
||
<tr><td>Номер паспорта</td><td>Passport number</td></tr>
|
||
<tr><td>Дата выдачи паспорта</td><td>Date of issue (passport)</td></tr>
|
||
<tr><td>Срок действия паспорта</td><td>Passport expiry date</td></tr>
|
||
<tr><td>Национальность</td><td>Nationality</td></tr>
|
||
<tr><td>Семейное положение</td><td>Marital status</td></tr>
|
||
<tr><td>Цель визита</td><td>Purpose of visit</td></tr>
|
||
<tr><td>Подпись</td><td>Signature</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phrase-block" data-topic="hotel">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">🏨 В отеле (At the Hotel)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>Я хочу забронировать номер</td><td>I would like to book a room</td></tr>
|
||
<tr><td>У меня есть бронирование</td><td>I have a reservation</td></tr>
|
||
<tr><td>Вот мой паспорт</td><td>Here is my passport</td></tr>
|
||
<tr><td>На кого забронировано?</td><td>Under what name is the reservation?</td></tr>
|
||
<tr><td>Сколько ночей вы будете?</td><td>How many nights will you stay?</td></tr>
|
||
<tr><td>Я останусь на три ночи</td><td>I will stay for three nights</td></tr>
|
||
<tr><td>Во сколько выезд?</td><td>What time is checkout?</td></tr>
|
||
<tr><td>Можно позже выехать?</td><td>Can I have a late checkout?</td></tr>
|
||
<tr><td>Где завтрак?</td><td>Where is breakfast served?</td></tr>
|
||
<tr><td>ГдеWi-Fi?</td><td>Where is the Wi-Fi?</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phrase-block" data-topic="emergency">
|
||
<h3 class="topic-toggle" onclick="toggleTopic(this)">🆘 В экстренной ситуации (Emergency)</h3>
|
||
<div class="topic-content">
|
||
<table class="phrase-table">
|
||
<tr><th>Русский</th><th>English</th></tr>
|
||
<tr><td>Помогите, пожалуйста!</td><td>Please help me!</td></tr>
|
||
<tr><td>Мне нужна медицинская помощь</td><td>I need medical assistance</td></tr>
|
||
<tr><td>Вызовите полицию</td><td>Please call the police</td></tr>
|
||
<tr><td>Я потерял(а) паспорт</td><td>I lost my passport</td></tr>
|
||
<tr><td>Где ближайшее посольство Казахстана?</td><td>Where is the nearest embassy of Kazakhstan?</td></tr>
|
||
<tr><td>Где ближайшее посольство России?</td><td>Where is the nearest embassy of Russia?</td></tr>
|
||
<tr><td>Я не говорю по-английски</td><td>I don't speak English</td></tr>
|
||
<tr><td>Говорите медленнее, пожалуйста</td><td>Could you speak slower, please?</td></tr>
|
||
<tr><td>Не могли бы вы повторить?</td><td>Could you repeat that, please?</td></tr>
|
||
<tr><td>Я не понимаю</td><td>I don't understand</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="documents" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Заполнение документов на английском</h2>
|
||
<p>Какие поля встречаются в анкетах и как их заполнять правильно</p>
|
||
</div>
|
||
<div class="doc-grid">
|
||
<div class="doc-card">
|
||
<h4>🛂 Arrival / Departure Card</h4>
|
||
<p><strong>Surname</strong> — Фамилия<br>
|
||
<strong>First name</strong> — Имя<br>
|
||
<strong>Date of birth</strong> — Дата рождения (ДД.ММ.ГГГГ)<br>
|
||
<strong>Nationality</strong> — Гражданство (Kazakhstan / Russia)<br>
|
||
<strong>Passport number</strong> — Номер паспорта<br>
|
||
<strong>Purpose of visit</strong> — Цель визита (Tourism / Business / Transit)<br>
|
||
<strong>Length of stay</strong> — Срок пребывания<br>
|
||
<strong>Address in country</strong> — Адрес проживания в стране</p>
|
||
<div class="ru">Заполняется ПРОПИСНЫМИ латинскими буквами, как в паспорте</div>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h4>📋 Customs Declaration</h4>
|
||
<p><strong>Goods to declare</strong> — Товары для декларирования<br>
|
||
<strong>Total value of goods</strong> — Общая стоимость товаров<br>
|
||
<strong>Currency</strong> — Валюта<br>
|
||
<strong>Amount of cash</strong> — Сумма наличных<br>
|
||
<strong>Food items</strong> — Продукты питания<br>
|
||
<strong>Alcohol / Tobacco</strong> — Алкоголь / Табак<br>
|
||
<strong>Medication</strong> — Лекарства<br>
|
||
<strong>Commercial samples</strong> — Коммерческие образцы</p>
|
||
<div class="ru">Если не уверены — лучше указать «Yes» и ответить на вопросы</div>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h4>🏠 Hotel Registration</h4>
|
||
<p><strong>Full name</strong> — Полное имя<br>
|
||
<strong>Passport number</strong> — Номер паспорта<br>
|
||
<strong>Date of birth</strong> — Дата рождения<br>
|
||
<strong>Nationality</strong> — Гражданство<br>
|
||
<strong>Check-in date</strong> — Дата заезда<br>
|
||
<strong>Check-out date</strong> — Дата выезда<br>
|
||
<strong>Signature</strong> — Подпись</p>
|
||
<div class="ru">Паспорт при заселении — обязателен</div>
|
||
</div>
|
||
<div class="doc-card">
|
||
<h4>✈️ Boarding Pass</h4>
|
||
<p><strong>Passenger name</strong> — Имя пассажира<br>
|
||
<strong>Flight number</strong> — Номер рейса<br>
|
||
<strong>From</strong> — Откуда<br>
|
||
<strong>To</strong> — Куда<br>
|
||
<strong>Date</strong> — Дата<br>
|
||
<strong>Gate</strong> — Выход на посадку<br>
|
||
<strong>Seat</strong> — Место<br>
|
||
<strong>Boarding time</strong> — Время посадки</p>
|
||
<div class="ru">Имя на билете должно совпадать с паспортом</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quiz" class="kt-ai-section quiz-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Проверьте себя</h2>
|
||
<p>Ответьте на вопросы, чтобы закрепить материал</p>
|
||
</div>
|
||
<div id="quizList"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Готовы к перелёту?</h2>
|
||
<p>Запомните ключевые фразы и вы будете чувствовать себя уверенно на любом миграционном контроле. Удачи!</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#phrases">Вернуться к фразам</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Migration English</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Английский для миграционного контроля</span>
|
||
</footer>
|
||
|
||
<script>
|
||
function toggleTopic(el) {
|
||
el.classList.toggle("open");
|
||
var content = el.nextElementSibling;
|
||
content.classList.toggle("show");
|
||
}
|
||
|
||
var searchInput = document.getElementById("searchInput");
|
||
searchInput.addEventListener("input", function() {
|
||
var q = this.value.toLowerCase().trim();
|
||
var blocks = document.querySelectorAll(".phrase-block");
|
||
blocks.forEach(function(block) {
|
||
var rows = block.querySelectorAll(".phrase-table tr");
|
||
var anyVisible = false;
|
||
for (var i = 1; i < rows.length; i++) {
|
||
var ru = rows[i].cells[0].textContent.toLowerCase();
|
||
var en = rows[i].cells[1].textContent.toLowerCase();
|
||
if (!q || ru.indexOf(q) !== -1 || en.indexOf(q) !== -1) {
|
||
rows[i].style.display = "";
|
||
anyVisible = true;
|
||
} else {
|
||
rows[i].style.display = "none";
|
||
}
|
||
}
|
||
block.style.display = anyVisible || !q ? "" : "none";
|
||
if (q && anyVisible) {
|
||
block.querySelector(".topic-content").classList.add("show");
|
||
block.querySelector(".topic-toggle").classList.add("open");
|
||
}
|
||
});
|
||
});
|
||
|
||
var quizData = [
|
||
{
|
||
q: "Как вы скажете «Цель визита» по-английски?",
|
||
opts: ["Purpose of visit", "Reason of travel", "Visit goal", "Travel aim"],
|
||
correct: 0
|
||
},
|
||
{
|
||
q: "Что значит «boarding gate»?",
|
||
opts: ["Регистрация", "Выход на посадку", "Выход из аэропорта", "Получение багажа"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как спросить «Где получить багаж?»",
|
||
opts: ["Where is my luggage?", "Where can I collect my luggage?", "Give me my bag", "I need my suitcase"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как сказать «Я здесь по работе»?",
|
||
opts: ["I work here", "I am here on business", "I am working", "Business trip"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Что такое «Date of birth»?",
|
||
opts: ["Дата выдачи", "Дата рождения", "Дата истечения", "Дата прибытия"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как сказать «У меня нет товаров для декларирования»?",
|
||
opts: ["I don't have bags", "I have nothing to declare", "No goods here", "Nothing to say"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как попросить ручку на английском?",
|
||
opts: ["Give me pen", "Could I have a pen, please?", "Pen please", "I need writing"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как сказать «Срок действия паспорта»?",
|
||
opts: ["Passport end date", "Passport expiry date", "Passport valid until", "Passport finish date"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Как сказать «Я потерял(а) паспорт»?",
|
||
opts: ["Passport gone", "I lost my passport", "No passport", "Passport is missing"],
|
||
correct: 1
|
||
},
|
||
{
|
||
q: "Какой правильный порядок заполнения Arrival Card: Фамилия → Имя?",
|
||
opts: ["First name → Surname", "Name → Family", "Surname → First name", "Family → Given name"],
|
||
correct: 2
|
||
}
|
||
];
|
||
|
||
var quizList = document.getElementById("quizList");
|
||
quizData.forEach(function(item, qi) {
|
||
var div = document.createElement("div");
|
||
div.className = "quiz-q";
|
||
div.innerHTML = "<h4>" + (qi + 1) + ". " + item.q + "</h4><div class='quiz-opts' id='q" + qi + "'></div>";
|
||
quizList.appendChild(div);
|
||
var optsDiv = div.querySelector(".quiz-opts");
|
||
item.opts.forEach(function(opt, oi) {
|
||
var btn = document.createElement("button");
|
||
btn.textContent = opt;
|
||
btn.onclick = function() {
|
||
var btns = optsDiv.querySelectorAll("button");
|
||
btns.forEach(function(b, i) {
|
||
b.disabled = true;
|
||
if (i === item.correct) b.classList.add("correct");
|
||
else if (i === oi && oi !== item.correct) b.classList.add("wrong");
|
||
});
|
||
};
|
||
optsDiv.appendChild(btn);
|
||
});
|
||
});
|
||
|
||
var hash = window.location.hash;
|
||
if (hash) {
|
||
var el = document.querySelector(hash);
|
||
if (el) setTimeout(function() { el.scrollIntoView({ behavior: "smooth" }); }, 300);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|