<голова> <мета-кодировка="UTF-8"> <стиль> * {размер коробки: border-box; маржа: 0; заполнение: 0; } тело {семейство шрифтов: Arial, без засечек; фон: #f5f5f5; дисплей: гибкий; оправдание-содержание: центр; отступы: 2рем 1рем; минимальная высота: 100vh; } .quiz-wrap { максимальная ширина: 660 пикселей; ширина: 100%; фон: #fff; радиус границы: 16 пикселей; отступ: 2рем; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } h1 {размер шрифта: 20 пикселей; вес шрифта: 500; цвет: #1a1a1a; нижняя граница: 1,5 рем; } .progress-bar-bg { высота: 4 пикселя; фон: #e0e0e0; радиус границы: 2 пикселя; нижняя граница: 1,5 рем; } .progress-bar-fill { высота: 4 пикселя; фон: #534AB7; радиус границы: 2 пикселя; переход: ширина 0,4 с, легкость; } .q-counter { размер шрифта: 13 пикселей; цвет: #777; нижняя граница поля: 0,5рем; } .q-text {размер шрифта: 17 пикселей; вес шрифта: 500; цвет: #1a1a1a; высота строки: 1,5; нижняя граница: 1,25 рем; } .options { display: flex; гибкое направление: столбец; разрыв: 10 пикселей; } .opt-btn { выравнивание текста: по левому краю; заполнение: 0,75 рем 1 рем; радиус границы: 12 пикселей; граница: 1 пиксель, сплошная #ddd; фон: #fff; курсор: указатель; размер шрифта: 15 пикселей; цвет: #1a1a1a; переход: фон 0,15 с, цвет рамки 0,15 с; семейство шрифтов: Arial, без засечек; } .opt-btn:hover:not(:disabled) {background: #f5f5f5; цвет границы: #aaa; } .opt-btn.correct { фон: #EAF3DE; цвет границы: #639922; цвет: #3B6D11; } .opt-btn.wrong { фон: #FCEBEB; цвет границы: #A32D2D; цвет: #791F1F; } .opt-btn.reveal {background: #EAF3DE; цвет границы: #639922; цвет: #3B6D11; } .opt-btn:disabled {курсор: по умолчанию; } .feedback {margin-top: 1rem; размер шрифта: 14 пикселей; высота строки: 1,6; цвет: #555; минимальная высота: 2,5рем; } .next-btn {margin-top: 1.25rem; заполнение: 0,6рем 1,5рем; радиус границы: 8 пикселей; граница: 1 пиксель, сплошная #ddd; фон: #fff; курсор: указатель; размер шрифта: 15 пикселей; цвет: #1a1a1a; дисплей: нет; семейство шрифтов: Arial, без засечек; } .next-btn:hover {background: #f5f5f5; } .score-card { text-align: center; отступы: 2рем 1рем; } .score-num { размер шрифта: 52px; вес шрифта: 500; цвет: #534AB7; высота строки: 1; нижняя граница поля: 0,5рем; } .score-label { размер шрифта: 16 пикселей; цвет: #777; нижняя граница: 1,5 рем; } .score-msg { размер шрифта: 15 пикселей; цвет: #1a1a1a; нижняя граница: 1,5 рем; высота строки: 1,6; максимальная ширина: 420 пикселей; поле слева: авто; поле справа: авто; } .restart-btn { дополнение: 0,65рем 1,75рем; радиус границы: 8 пикселей; граница: 1 пиксель, сплошная #ddd; фон: #fff; курсор: указатель; размер шрифта: 15 пикселей; цвет: #1a1a1a; семейство шрифтов: Arial, без засечек; } .restart-btn:hover {background: #f5f5f5; } .icon-inline { размер шрифта: 16 пикселей; вертикальное выравнивание: -2px; поле справа: 6 пикселей; } <тело> <скрипт> константные вопросы = [ { вопрос: «Сколько примерно ядерных боеголовок существует сегодня в мире?», варианты: ["~2500", "~12500", "~35000", "~500"], правильно: 1, обратная связь: «В девяти странах имеется около 12 500 ядерных боеголовок. Крупномасштабный обмен может спровоцировать «ядерную зиму», которая продлится несколько лет». }, { вопрос: «Какой советский офицер в 1983 году проигнорировал спутниковое предупреждение о приближающихся американских ракетах, потенциально предотвращающих ядерную войну?», варианты: ["Михаил Горбачев", "Юрий Андропов", "Станислав Петров", "Василий Архипов"], правильно: 2, отзыв: «Станислав Петров решил не сообщать о тревоге как о реальном нападении. Его решение в ту единственную ночь, возможно, спасло цивилизацию». }, { вопрос: «При нынешних траекториях, какой уровень глобального повышения температуры ожидает планету к концу столетия?», варианты: ["0,5–1°C", "1–1,5°C", "2–3°C", "5–6°C"], правильно: 2, обратная связь: «Планета движется к потеплению на 2–3°C. За пределами 3°C опасные петли обратной связи — такие как таяние вечной мерзлоты с выделением метана — могут значительно ускорить потепление». }, { вопрос: «Что делает биологическое оружие особенно тревожным по сравнению с ядерным оружием в современную эпоху?», opts: ["Они более смертоносны", "Барьер для входа быстро падает из-за удешевления лабораторных технологий и искусственного интеллекта", "Они требуют ресурсов государственного уровня", "Их невозможно обнаружить"], правильно: 1, отзыв: «В отличие от ядерного оружия, биотехнологии становятся дешевле и доступнее. Инструменты искусственного интеллекта могут еще больше снизить уровень знаний, необходимых для создания опасных патогенов». }, { вопрос: «Какое событие впервые доказало, что человечество может отклонить приближающийся астероид?», opts: ["Миссия по возвращению образцов Hayabusa2", "Миссия НАСА DART в 2022 году", "Миссия ЕКА Гера в 2024 году", "Ответ на Челябинский метеорит в 2013 году"], правильно: 1, отзыв: «Миссия НАСА DART в 2022 году успешно изменила орбиту астероида, врезавшись в него космическим кораблем — первое настоящее испытание человечества на планетарную защиту». }, { вопрос: «Что из этого является примером использования ИИ в качестве ЗАЩИТНОГО инструмента от экзистенциальных угроз?», варианты: [«Создание дипфейковой пропаганды», «Ускорение открытия лекарств и выявления пандемий», «Разработка автономного оружия», «Снижение барьера для создания патогенов»], правильно: 1, обратная связь: «ИИ используется для ускорения разработки лекарств, улучшения обнаружения пандемий посредством глобального наблюдения за болезнями и улучшения моделирования климата — все это защитные приложения». }, { вопрос: «Что такое «несогласованный ИИ» в контексте экзистенциального риска?», opts: [«ИИ, который предвзято относится к группам меньшинств», «ИИ, который часто дает сбой или дает сбой», «ИИ, который преследует цели, слегка противоречащие человеческим ценностям», «ИИ, который используется враждебными правительствами»], правильно: 2, обратная связь: «Несогласованность означает риск того, что продвинутый ИИ преследует цели катастрофическими для людей способами — даже если перед ними стоят, казалось бы, простые цели — потому что его ценности не глубоко совпадают с нашими». }, { в: «В статье описывается «ядерная зима» как следствие крупномасштабной ядерной войны. Что ее вызывает?», варианты: [«Радиационное отравление сельскохозяйственных культур», «Сажа от огненных бурь на годы блокирует солнечный свет», «Химическое оружие загрязняет грунтовые воды», «Электромагнитные импульсы останавливают сельское хозяйство»], правильно: 1, отзыв: «Мощные огненные бури от ядерных взрывов выбрасывают сажу в стратосферу, блокируя солнечный свет на годы и разрушая сельское хозяйство во всем мире, потенциально убивая миллиарды людей от голода». }, { вопрос: «Согласно статье, насколько упали затраты на солнечную энергию за последнее десятилетие?», opts: ["Около 30%", "Около 50%", "Более 70%", "Более 90%"], правильно: 3, отзыв: «За последнее десятилетие стоимость солнечной энергии упала более чем на 90% — замечательный сдвиг, который делает переход к экологически чистой энергии экономически жизнеспособным в больших масштабах». }, { вопрос: «Согласно статье, каков основной аргумент в пользу оптимизма относительно способности человечества пережить экзистенциальные угрозы?», opts: ["ИИ решит все проблемы автоматически", "Мы избежали ядерной войны, ликвидировали оспа и начали бороться с климатом, продемонстрировав коллективную способность справляться с угрозами", "У правительств теперь есть совершенные системы координации", "Экзистенциальные риски статистически очень маловероятны"], правильно: 1, отзыв: «В статье указываются на реальные исторические победы: предотвращение ядерной войны во время холодной войны, ликвидация оспы и начало энергетического перехода — свидетельство того, что человеческая изобретательность и сотрудничество в своих лучших проявлениях замечательны». } ]; пусть текущий = 0, оценка = 0, ответ = ложь; функция рендеринга() { const area = document.getElementById('quiz-area'); if (current >= questions.length) { showScore(area); возвращаться; } const q = вопросы [текущий]; document.getElementById('progress').style.width = ((current/questions.length) * 100) + '%'; ответил = ложь; area.innerHTML = ` ${current < questions.length - 1 ? «Следующий вопрос →» : «Посмотреть результаты →» `; } функция выбирает(я) { если (ответили) вернуться; ответил = правда; const q = вопросы [текущий]; const btns = document.querySelectorAll('.opt-btn'); btns.forEach(b => b.disabled = true); if (i === q.correct) { btns[i].classList.add('правильно'); оценка++; document.getElementById('fb').innerHTML = ' ✅ ' + q.feedback; } еще { btns[i].classList.add('неправильно'); btns[q.correct].classList.add('показать'); document.getElementById('fb').innerHTML = '❌' + q.feedback; } document.getElementById('next-btn').style.display = 'inline-block'; } функция next() { current++; оказывать(); } функция showScore(область) { document.getElementById('прогресс').style.width = '100%'; const pct = Math.round((оценка / вопросы.длина) * 100); пусть сообщение; if (pct >= 90) msg ​​= "Отлично. Вы четко понимаете экзистенциальные риски, с которыми сталкивается человечество, и инструменты, которые мы создаем для их устранения."; else if (pct >= 70) msg ​​= "Твердые знания. Вы понимаете основные угрозы и средства защиты — продолжайте читать, чтобы уточнить детали."; else if (pct >= 50) msg ​​= "Хорошее начало. Ставки высоки — прочтите статью еще раз, чтобы глубже понять эти важные темы."; else msg = "Самые большие проблемы мира заслуживают вашего внимания. Перечитайте статью и возвращайтесь — эти знания важны."; area.innerHTML = ` `; } функция перезапуска () {текущий = 0; оценка = 0; оказывать(); } оказывать();