Эвристический квест «Оборона Брестской крепости»
by GoldenFalcon58356 lines21.0 KB
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Эвристический квест «Оборона Брестской крепости»</title>
<style>
* {
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #2b3b2a 0%, #1a2a18 100%);
font-family: 'Segoe UI', 'Roboto', 'Times New Roman', serif;
margin: 0;
padding: 20px;
color: #f0f0e0;
}
.quest-container {
max-width: 1100px;
margin: 0 auto;
background: #fdf8ed;
background-image: radial-gradient(circle at 10% 20%, rgba(130, 100, 60, 0.08) 2%, transparent 2.2%);
background-size: 28px 28px;
border-radius: 48px;
box-shadow: 0 20px 35px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,245,200,0.8);
padding: 20px 24px 35px;
color: #2d2b1f;
}
h1 {
text-align: center;
font-family: 'Georgia', serif;
font-size: 2.1rem;
margin: 0 0 5px;
color: #6b3c1c;
text-shadow: 2px 2px 0 #e9dbbd;
}
.sub {
text-align: center;
font-style: italic;
border-bottom: 2px solid #b48c5c;
display: inline-block;
width: 100%;
padding-bottom: 12px;
margin-bottom: 20px;
font-weight: 500;
color: #5a3a22;
}
.team-bar {
background: #2c4028;
border-radius: 60px;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-bottom: 25px;
color: #f7efcb;
}
.team-select {
background: #e2cfaa;
border: none;
padding: 6px 14px;
border-radius: 40px;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
}
.score {
background: #1f2a17;
padding: 6px 18px;
border-radius: 40px;
font-weight: bold;
font-size: 1.4rem;
font-family: monospace;
}
.stage-card {
background: rgba(255, 250, 235, 0.95);
border-radius: 32px;
padding: 18px 22px;
margin-bottom: 28px;
box-shadow: 0 8px 18px rgba(0,0,0,0.2);
border-left: 12px solid #b97f44;
}
.stage-title {
font-size: 1.7rem;
font-weight: bold;
display: flex;
gap: 12px;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 12px;
color: #4e2e18;
}
.stage-number {
background: #5b3a1e;
color: #ffe2b5;
border-radius: 60px;
padding: 0 14px;
font-size: 1.2rem;
}
.legend {
background: #efe2cc;
padding: 12px 16px;
border-radius: 24px;
margin: 15px 0;
font-size: 0.9rem;
color: #2d3e22;
border-left: 6px solid #b6843a;
}
.question {
font-weight: 700;
font-size: 1.2rem;
margin: 16px 0 12px;
}
input, textarea {
width: 100%;
padding: 12px 16px;
border-radius: 36px;
border: 1px solid #b48b54;
background: #fffcf5;
font-size: 1rem;
margin: 10px 0;
}
button {
background: #5a7a48;
border: none;
padding: 10px 24px;
border-radius: 40px;
font-weight: bold;
font-size: 1rem;
color: white;
cursor: pointer;
margin: 6px 6px 0 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
button:hover {
background: #3f5a31;
transform: scale(0.98);
}
.feedback {
background: #e3d5bd;
border-radius: 24px;
padding: 10px 18px;
margin-top: 14px;
font-size: 0.9rem;
color: #2c2b1c;
border-left: 6px solid #c47d3a;
}
.final-panel {
background: #d9c9ac;
border-radius: 32px;
padding: 20px;
text-align: center;
margin-top: 20px;
}
.final-btn {
background: #b4662c;
font-size: 1.2rem;
padding: 12px 28px;
}
@media (max-width: 650px) {
.quest-container { padding: 16px; }
.stage-title { font-size: 1.3rem; }
}
</style>
</head>
<body>
<div class="quest-container" id="questApp">
<h1>🏰 Эвристический квест<br>«Оборона Брестской крепости»</h1>
<div class="sub">Беларусь, 22 июня – июль 1941 года · Героизм и стойкость защитников</div>
<div class="team-bar">
<span>⚔️ Команда:</span>
<select id="teamSelect" class="team-select">
<option value="Отважные">🛡️ Отважные</option>
<option value="Неуловимые">⚡ Неуловимые</option>
<option value="Смелые">💪 Смелые</option>
<option value="Решительные">🎯 Решительные</option>
</select>
<div class="score">🏆 Баллы: <span id="scoreValue">0</span></div>
</div>
<!-- Этап 1. Хронология и силы -->
<div class="stage-card" id="stage1Card">
<div class="stage-title"><span class="stage-number">Этап 1</span> ⏳ Хронология: первый удар</div>
<div class="legend">📜 22 июня 1941 года, 4:15 утра. Брестская крепость приняла на себя массированный артиллерийский удар. Немецкая 45-я пехотная дивизия (около 17 000 человек) штурмует крепость. Гарнизон насчитывал около 8 000 советских воинов, включая членов семей командиров.</div>
<div class="question">❓ Сколько дней продолжалась организованная оборона крепости? (Впишите число дней, которое признаётся историками как этап активного сопротивления основного гарнизона, до 30 июня).</div>
<input type="number" id="daysAnswer" placeholder="Число дней">
<button id="checkDaysBtn">✅ Проверить</button>
<div id="daysFeedback" class="feedback"></div>
</div>
<!-- Этап 2. Условия обороны (вода, еда, боеприпасы) -->
<div class="stage-card" id="stage2Card">
<div class="stage-title"><span class="stage-number">Этап 2</span> 💧 Проблема воды в цитадели</div>
<div class="legend">🚰 В крепости почти сразу вышли из строя водопроводные трубы, а река Мухавец простреливалась снайперами и пулемётами. Защитники страдали от жажды.</div>
<div class="question">🧠 Опишите минимум ДВА способа, которыми бойцы Брестской крепости добывали воду в условиях осады. Проявите эвристическое мышление.</div>
<textarea id="waterAnswer" rows="2" placeholder="Например: собирали дождевую воду через ..."></textarea>
<button id="checkWaterBtn">💧 Проверить решение</button>
<div id="waterFeedback" class="feedback"></div>
</div>
<!-- Этап 3. Легендарные надписи -->
<div class="stage-card" id="stage3Card">
<div class="stage-title"><span class="stage-number">Этап 3</span> ✍️ Надписи героев</div>
<div class="legend">📝 В 1952 году при разборе руин крепости нашли знаменитую надпись одного из защитников. Она стала символом мужества.</div>
<div class="question">❓ Восстановите (напишите) точный текст этой надписи, которая начинается со слов: «Я умираю, но не сдаюсь! Прощай, Родина...». Продолжите. (Если не помните дословно — напишите максимально близко по смыслу, а потом получите историческую справку).</div>
<textarea id="inscriptionAnswer" rows="3" placeholder="Текст надписи..."></textarea>
<button id="checkInscriptionBtn">🖋️ Проверить и получить баллы</button>
<div id="inscriptionFeedback" class="feedback"></div>
</div>
<!-- Этап 4. Эвакуация и помощь: логистическая задача -->
<div class="stage-card" id="stage4Card">
<div class="stage-title"><span class="stage-number">Этап 4</span> 🚑 Логистика прорыва</div>
<div class="legend">🎯 Представьте, что вы командир группы из 12 бойцов, укрывшихся в подвале казармы. У вас 3 автомата (осталось 120 патронов), 2 гранаты, 1 радиостанция (села батарея — её хватит на 15 минут связи) и раненый командир. До своих 4 км через двор крепости, занятый противником.</div>
<div class="question">💡 Какое решение примете? Выберите наиболее реальный сценарий и кратко обоснуйте (опираясь на исторические примеры обороны Бреста).</div>
<textarea id="breakoutAnswer" rows="2" placeholder="Ваш план действий..."></textarea>
<button id="checkBreakoutBtn">⭐ Принять решение</button>
<div id="breakoutFeedback" class="feedback"></div>
</div>
<!-- Этап 5. Символ памяти -->
<div class="stage-card" id="stage5Card">
<div class="stage-title"><span class="stage-number">Этап 5</span> 🔥 Эвристический финал: Мемориал</div>
<div class="question">🕯️ Сегодня Брестская крепость — мемориальный комплекс «Брестская крепость-герой». Как вы думаете, почему для Республики Беларусь память о Брестской крепости имеет особое значение? Напишите одно глубокое размышление.</div>
<textarea id="memoryAnswer" rows="3" placeholder="Почему это важно для Беларуси? ..."></textarea>
<button id="memoryBtn">📜 Записать и получить баллы</button>
<div id="memoryFeedback" class="feedback"></div>
</div>
<div class="final-panel">
<button id="finalResetBtn" class="final-btn">🔄 СБРОСИТЬ ВСЕ БАЛЛЫ (для новой команды)</button>
<p style="margin-top:12px;">⭐ Максимум 25 баллов. Оценивается историческая точность, логика и глубина ответов.</p>
</div>
</div>
<script>
let currentTeam = localStorage.getItem("brest_team") || "Отважные";
const teamSelect = document.getElementById('teamSelect');
const scoreSpan = document.getElementById('scoreValue');
let stageCompleted = {stage1: false, stage2: false, stage3: false, stage4: false, stage5: false};
function loadTeamData() {
const savedScore = localStorage.getItem(`score_brest_${currentTeam}`);
let score = savedScore ? parseInt(savedScore) : 0;
scoreSpan.innerText = score;
for (let i = 1; i <= 5; i++) {
let status = localStorage.getItem(`brest_stage_${currentTeam}_${i}`);
stageCompleted[`stage${i}`] = (status === 'true');
}
}
function saveScore(scoreToAdd, stageId) {
if (stageCompleted[stageId]) return false;
let currentScore = parseInt(localStorage.getItem(`score_brest_${currentTeam}`)) || 0;
let newScore = currentScore + scoreToAdd;
localStorage.setItem(`score_brest_${currentTeam}`, newScore);
stageCompleted[stageId] = true;
localStorage.setItem(`brest_stage_${currentTeam}_${stageId.replace('stage','')}`, 'true');
scoreSpan.innerText = newScore;
return true;
}
function setTeam(team) {
currentTeam = team;
localStorage.setItem("brest_team", team);
loadTeamData();
document.querySelectorAll('.feedback').forEach(fb => fb.innerHTML = '');
}
teamSelect.addEventListener('change', (e) => setTeam(e.target.value));
// Этап 1: активных дней около 9 (с 22 по 30 июня основные бои)
document.getElementById('checkDaysBtn').addEventListener('click', () => {
if (stageCompleted.stage1) { document.getElementById('daysFeedback').innerHTML = 'Этап уже пройден.'; return; }
let days = parseInt(document.getElementById('daysAnswer').value);
if (days === 8 || days === 9 || days === 10) {
if(saveScore(4, 'stage1')) document.getElementById('daysFeedback').innerHTML = '✅ +4 балла! Организованная оборона крепости продолжалась 9 дней (22–30 июня), но отдельные очаги сопротивления держались до 20–23 июля 1941 года.';
else document.getElementById('daysFeedback').innerHTML = 'Уже засчитано.';
} else {
document.getElementById('daysFeedback').innerHTML = '❌ Неточно. Основной этап активной обороны — 9 дней (до 30 июня). Но отдельные защитники сражались дольше. Попробуйте ещё.';
}
});
// Этап 2: способы добычи воды.
document.getElementById('checkWaterBtn').addEventListener('click', () => {
if (stageCompleted.stage2) { document.getElementById('waterFeedback').innerHTML = 'Выполнено.'; return; }
let answer = document.getElementById('waterAnswer').value.toLowerCase();
let ways = ['дождь', 'роса', 'сырая стена', 'конденсат', 'кирпич', 'подвал', 'тряпка', 'выжимали', 'капли', 'Мухавец', 'ночью'];
let found = ways.filter(w => answer.includes(w)).length;
if (found >= 2 && answer.length > 15) {
if(saveScore(5, 'stage2')) document.getElementById('waterFeedback').innerHTML = '💧 +5 баллов! Исторические способы: собирали дождевую воду плащ-палатками, выжимали влагу из сырых стен подвалов, ночью ходили к реке Мухавец под огнём.';
else document.getElementById('waterFeedback').innerHTML = 'Баллы уже начислены.';
} else {
document.getElementById('waterFeedback').innerHTML = 'Укажите как минимум два способа (дождевая вода, сбор конденсата, ночные вылазки к реке). Проявите эвристику.';
}
});
// Этап 3: знаменитая надпись
document.getElementById('checkInscriptionBtn').addEventListener('click', () => {
if (stageCompleted.stage3) { document.getElementById('inscriptionFeedback').innerHTML = 'Уже выполнено.'; return; }
let text = document.getElementById('inscriptionAnswer').value.toLowerCase();
let key = ['умираю', 'не сдаюсь', 'прощай', 'родина', '20.vii.41'];
let matches = key.filter(k => text.includes(k)).length;
if (matches >= 3 || (text.includes('умираю') && text.includes('сдаюсь'))) {
if(saveScore(6, 'stage3')) document.getElementById('inscriptionFeedback').innerHTML = '⭐ +6 баллов! Правильно: «Я умираю, но не сдаюсь! Прощай, Родина. 20.VII.41 г.» — одна из самых известных надписей, найденных в крепости.';
else document.getElementById('inscriptionFeedback').innerHTML = 'Уже засчитано.';
} else {
document.getElementById('inscriptionFeedback').innerHTML = 'Попробуйте точнее. Известная надпись: "Я умираю, но не сдаюсь! Прощай, Родина. 20.VII.41". Напишите близко к этому тексту.';
}
});
// Этап 4: логистика прорыва
document.getElementById('checkBreakoutBtn').addEventListener('click', () => {
if (stageCompleted.stage4) { document.getElementById('breakoutFeedback').innerHTML = 'Этап завершён.'; return; }
let plan = document.getElementById('breakoutAnswer').value.toLowerCase();
let valid = ['ночь', 'темно', 'прорыв', 'группами', 'отвлекающий', 'раненый', 'связь', 'радио', 'патроны', 'граната', 'разведка', 'засада'];
let score = valid.filter(v => plan.includes(v)).length;
if (score >= 2 && plan.length > 25) {
if(saveScore(6, 'stage4')) document.getElementById('breakoutFeedback').innerHTML = '🎖️ +6 баллов! Разумный план (использовать ночь, разбиться на группы, помощь раненому). Именно так поступали защитники Брестской крепости, пытаясь пробиться к своим.';
else document.getElementById('breakoutFeedback').innerHTML = 'Уже начислено.';
} else {
document.getElementById('breakoutFeedback').innerHTML = 'Опишите более детально: использование темноты, экономия боеприпасов, роль раненого командира. Исторические примеры помогут.';
}
});
// Этап 5. Рефлексия о Беларуси
document.getElementById('memoryBtn').addEventListener('click', () => {
if (stageCompleted.stage5) { document.getElementById('memoryFeedback').innerHTML = 'Открытие уже записано.'; return; }
let val = document.getElementById('memoryAnswer').value.trim();
if (val.length < 25) {
document.getElementById('memoryFeedback').innerHTML = 'Напишите более содержательную мысль о роли Брестской крепости в исторической памяти Беларуси.';
return;
}
if(saveScore(4, 'stage5')) document.getElementById('memoryFeedback').innerHTML = '📖 +4 балла! Брестская крепость стала символом стойкости белорусского народа. Её оборона — пример единства, мужества и любви к Отчизне.';
else document.getElementById('memoryFeedback').innerHTML = 'Уже зачтено.';
});
// Сброс
document.getElementById('finalResetBtn').addEventListener('click', () => {
if(confirm('Сбросить прогресс команды?')) {
localStorage.setItem(`score_brest_${currentTeam}`, '0');
for(let i=1;i<=5;i++) localStorage.setItem(`brest_stage_${currentTeam}_${i}`, 'false');
loadTeamData();
document.querySelectorAll('.feedback').forEach(fb => fb.innerHTML = '');
document.querySelectorAll('input, textarea').forEach(el => el.value = '');
alert(`Прогресс команды ${currentTeam} сброшен.`);
}
});
setTeam(currentTeam);
</script>
</body>
</html>Game Source: Эвристический квест «Оборона Брестской крепости»
Creator: GoldenFalcon58
Libraries: none
Complexity: complex (356 lines, 21.0 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -goldenfalcon58-mph0vd48" to link back to the original. Then publish at arcadelab.ai/publish.