187 lines
9.5 KiB
PHP
187 lines
9.5 KiB
PHP
<?php
|
||
declare(strict_types=1);
|
||
@ini_set('display_errors', '1');
|
||
@error_reporting(E_ALL);
|
||
@date_default_timezone_set('UTC');
|
||
|
||
$now = date('Y-m-d H:i:s');
|
||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||
?>
|
||
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Викторина «Что я знаю о Беларуси»</title>
|
||
<?php if ($projectDescription): ?>
|
||
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||
<?php endif; ?>
|
||
<?php if ($projectImageUrl): ?>
|
||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||
<?php endif; ?>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="assets/css/custom.css?v=<?= time(); ?>" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<header class="border-bottom bg-white sticky-top tv-extra">
|
||
<nav class="navbar navbar-expand-lg navbar-light container py-3">
|
||
<a class="navbar-brand fw-semibold" href="/">Викторина «Беларусь»</a>
|
||
<div class="ms-auto d-flex gap-3 small text-muted">
|
||
<span class="d-none d-md-inline">Режим: ведущий</span>
|
||
<span>Обновлено: <?= htmlspecialchars($now) ?> (UTC)</span>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main class="container my-4 my-lg-5">
|
||
<section class="hero-card mb-4 mb-lg-5 tv-extra">
|
||
<div class="row g-4 align-items-center">
|
||
<div class="col-lg-7">
|
||
<p class="text-uppercase small text-muted mb-2">Интерактив для 5‑го класса</p>
|
||
<h1 class="display-6 fw-bold mb-3">Что я знаю о Беларуси</h1>
|
||
<p class="text-muted mb-4">
|
||
Быстрый сценарий для учителя: вопросы на экране, варианты ответов,
|
||
затем правильный ответ и короткий факт. Никаких аккаунтов и подготовки.
|
||
</p>
|
||
<div class="d-flex flex-wrap gap-2">
|
||
<button id="startQuizBtn" class="btn btn-primary btn-lg">Начать викторину</button>
|
||
<a href="#guide" class="btn btn-outline-secondary btn-lg">Как проводить</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-5">
|
||
<div class="stat-stack p-4">
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
|
||
<span class="text-muted">Вопросов</span>
|
||
<span class="fw-semibold" id="totalQuestions">12</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center border-bottom pb-3 mb-3">
|
||
<span class="text-muted">Темы</span>
|
||
<span class="fw-semibold">символы • география • культура</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="text-muted">Длительность</span>
|
||
<span class="fw-semibold">15–25 минут</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="quiz" class="quiz-card mb-4 mb-lg-5 d-none">
|
||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3 quiz-meta">
|
||
<div>
|
||
<p class="text-muted small mb-1">Прогресс</p>
|
||
<h2 class="h5 mb-0" id="questionProgress">Вопрос 1 из 12</h2>
|
||
</div>
|
||
<div class="score-badge">
|
||
<span class="text-muted small">Счёт класса</span>
|
||
<span class="fs-4 fw-semibold" id="classScore">0</span>
|
||
</div>
|
||
</div>
|
||
<div class="quiz-progress-wrap mb-3" aria-live="polite">
|
||
<div class="d-flex justify-content-between align-items-center gap-2 mb-2">
|
||
<span class="small text-muted">Пройдено</span>
|
||
<span class="small fw-semibold" id="progressLabel">0 из 12</span>
|
||
</div>
|
||
<div class="quiz-progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Прогресс по вопросам">
|
||
<div class="quiz-progress-fill" id="progressFill"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="question-area">
|
||
<div class="question-label text-uppercase small text-muted mb-2">Вопрос</div>
|
||
<h3 class="h4 mb-3" id="questionText">Готовы?</h3>
|
||
<ul class="list-unstyled option-list" id="optionList"></ul>
|
||
</div>
|
||
|
||
<div class="answer-area mt-4 d-none" id="answerArea">
|
||
<div class="alert alert-light border" role="status">
|
||
<div class="d-flex flex-column flex-lg-row gap-3 align-items-start">
|
||
<figure class="answer-figure mb-0">
|
||
<button type="button" class="answer-image-trigger" id="answerImageTrigger" aria-label="Открыть изображение на весь экран">
|
||
<img id="answerImage" src="" alt="" class="answer-image" loading="lazy" width="560" height="320">
|
||
<span class="zoom-hint">Нажмите на картинку, чтобы открыть на весь экран</span>
|
||
</button>
|
||
</figure>
|
||
<div class="w-100">
|
||
<div class="answer-pill mb-2">Правильный ответ</div>
|
||
<p class="mb-1 fw-semibold" id="correctAnswer"></p>
|
||
<p class="mb-2 text-muted">Интересные факты:</p>
|
||
<ul class="fact-list mb-0" id="factList"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="mt-3 mb-0 fw-semibold" id="answerResult"></p>
|
||
</div>
|
||
|
||
<div class="d-flex flex-wrap gap-2 mt-4 quiz-actions">
|
||
<button class="btn btn-dark" id="revealBtn">Показать ответ</button>
|
||
<button class="btn btn-outline-dark d-none" id="nextBtn">Следующий вопрос</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="summary" class="quiz-card d-none">
|
||
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-3">
|
||
<div>
|
||
<p class="text-muted small mb-1">Итоги викторины</p>
|
||
<h2 class="h4 mb-0">Класс набрал <span id="finalScore">0</span> баллов</h2>
|
||
</div>
|
||
<button class="btn btn-outline-primary" id="restartBtn">Пройти ещё раз</button>
|
||
</div>
|
||
<div class="alert alert-light border" role="status">
|
||
<p class="mb-2 fw-semibold">Правильные ответы и факты</p>
|
||
<div id="summaryList" class="summary-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="guide" class="mb-5 tv-extra">
|
||
<div class="row g-4">
|
||
<div class="col-lg-6">
|
||
<article class="info-card">
|
||
<h2 class="h5 fw-semibold mb-3">Сценарий для учителя</h2>
|
||
<ol class="text-muted">
|
||
<li>Нажмите «Начать викторину» и выводите вопросы на экран.</li>
|
||
<li>Дайте детям 20–30 секунд на обсуждение.</li>
|
||
<li>Выберите вариант ответа — карточка с правильным ответом откроется сразу.</li>
|
||
<li>В конце покажите итоги и обсудите факты.</li>
|
||
</ol>
|
||
</article>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<article class="info-card">
|
||
<h2 class="h5 fw-semibold mb-3">Подсказки</h2>
|
||
<ul class="text-muted mb-0">
|
||
<li>Можно вести счёт по рядам или командам, используя «Счёт класса».</li>
|
||
<li>Если нужно, остановите викторину и обсудите факт дня.</li>
|
||
<li>Вопросы можно заменить прямо в <code>assets/js/main.js</code>.</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="border-top bg-white tv-extra">
|
||
<div class="container py-4 small text-muted d-flex flex-wrap justify-content-between gap-2">
|
||
<span>Викторина для показа на экране.</span>
|
||
<span>Сделано для урока в 5‑м классе.</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="image-lightbox d-none" id="imageLightbox" role="dialog" aria-modal="true" aria-label="Увеличенное изображение">
|
||
<button class="image-lightbox-close" id="closeImageLightbox" type="button" aria-label="Закрыть увеличенное изображение">×</button>
|
||
<img id="lightboxImage" src="" alt="" class="image-lightbox-img" loading="lazy" width="1400" height="900">
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script>
|
||
<script src="assets/js/main.js?v=<?= time(); ?>" defer></script>
|
||
</body>
|
||
</html>
|