A Pen by Наргиз Нуриева on CodePen.
Created
May 13, 2025 21:38
-
-
Save nnd-afk/ef738fcd635b0d535c14757148220485 to your computer and use it in GitHub Desktop.
math-game.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Формулы сложения | Математическая игра</title> | |
| <style> | |
| :root { | |
| --primary-dark: #1a2e1a; | |
| --primary-light: #d1e7d1; | |
| --accent-green: #5a8f5a; | |
| --accent-light: #e8f5e8; | |
| --black: #121212; | |
| --white: #f8f8f8; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |
| --easy: #4caf50; | |
| --medium: #ff9800; | |
| --hard: #f44336; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--black); | |
| color: var(--white); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| background-image: radial-gradient(circle at 10% 20%, var(--primary-dark) 0%, var(--black) 90%); | |
| } | |
| header { | |
| background-color: rgba(26, 46, 26, 0.9); | |
| padding: 1.5rem; | |
| text-align: center; | |
| box-shadow: var(--shadow); | |
| border-bottom: 1px solid var(--accent-green); | |
| backdrop-filter: blur(5px); | |
| } | |
| h1 { | |
| font-size: 2.2rem; | |
| margin-bottom: 0.5rem; | |
| background: linear-gradient(to right, var(--accent-green), var(--primary-light)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .subtitle { | |
| color: var(--primary-light); | |
| font-size: 1rem; | |
| opacity: 0.8; | |
| } | |
| main { | |
| max-width: 800px; | |
| margin: 2rem auto; | |
| padding: 0 1.5rem; | |
| flex: 1; | |
| width: 100%; | |
| } | |
| .game-container { | |
| background-color: rgba(26, 46, 26, 0.7); | |
| border-radius: 12px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| border: 1px solid var(--accent-green); | |
| backdrop-filter: blur(5px); | |
| } | |
| .category-selector { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .category-btn { | |
| background-color: rgba(90, 143, 90, 0.2); | |
| border: 1px solid var(--accent-green); | |
| color: var(--primary-light); | |
| padding: 0.7rem 1.2rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .category-btn.active { | |
| background-color: var(--accent-green); | |
| color: var(--black); | |
| font-weight: bold; | |
| } | |
| .category-btn:hover:not(.active) { | |
| background-color: rgba(90, 143, 90, 0.4); | |
| } | |
| .difficulty-selector { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .difficulty-btn { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border: none; | |
| color: var(--white); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 0.9rem; | |
| } | |
| .difficulty-btn.easy { | |
| border: 1px solid var(--easy); | |
| } | |
| .difficulty-btn.medium { | |
| border: 1px solid var(--medium); | |
| } | |
| .difficulty-btn.hard { | |
| border: 1px solid var(--hard); | |
| } | |
| .difficulty-btn.active { | |
| font-weight: bold; | |
| } | |
| .difficulty-btn.easy.active { | |
| background-color: var(--easy); | |
| color: var(--black); | |
| } | |
| .difficulty-btn.medium.active { | |
| background-color: var(--medium); | |
| color: var(--black); | |
| } | |
| .difficulty-btn.hard.active { | |
| background-color: var(--hard); | |
| color: var(--black); | |
| } | |
| .question-container { | |
| margin-bottom: 2rem; | |
| } | |
| .question { | |
| font-size: 1.4rem; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.5; | |
| color: var(--primary-light); | |
| } | |
| .formula { | |
| font-family: 'Cambria Math', serif; | |
| font-size: 1.6rem; | |
| text-align: center; | |
| margin: 1.5rem 0; | |
| padding: 1rem; | |
| background-color: rgba(90, 143, 90, 0.2); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--accent-green); | |
| } | |
| .options { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 1rem; | |
| } | |
| .option { | |
| background-color: rgba(216, 245, 216, 0.1); | |
| border: 1px solid var(--accent-green); | |
| border-radius: 8px; | |
| padding: 1rem; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--white); | |
| font-size: 1.1rem; | |
| } | |
| .option:hover { | |
| background-color: rgba(90, 143, 90, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .option.selected { | |
| background-color: var(--accent-green); | |
| color: var(--black); | |
| font-weight: bold; | |
| } | |
| .option.correct { | |
| background-color: #4caf50; | |
| color: white; | |
| } | |
| .option.incorrect { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .hint-btn { | |
| background-color: transparent; | |
| border: 1px solid var(--accent-green); | |
| color: var(--accent-green); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| margin-top: 1rem; | |
| transition: all 0.3s ease; | |
| font-size: 0.9rem; | |
| } | |
| .hint-btn:hover { | |
| background-color: rgba(90, 143, 90, 0.2); | |
| } | |
| .hint-text { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background-color: rgba(90, 143, 90, 0.1); | |
| border-radius: 8px; | |
| border-left: 3px solid var(--accent-green); | |
| display: none; | |
| color: var(--primary-light); | |
| } | |
| .next-btn { | |
| background-color: var(--accent-green); | |
| color: var(--black); | |
| border: none; | |
| padding: 0.8rem 2rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| margin-top: 2rem; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| display: none; | |
| width: 100%; | |
| } | |
| .next-btn:hover { | |
| background-color: #6ba56b; | |
| transform: translateY(-2px); | |
| } | |
| .score-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(90, 143, 90, 0.5); | |
| } | |
| .score { | |
| font-size: 1.2rem; | |
| color: var(--primary-light); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: rgba(90, 143, 90, 0.3); | |
| border-radius: 3px; | |
| margin-top: 0.5rem; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| height: 100%; | |
| background-color: var(--accent-green); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| .result-container { | |
| text-align: center; | |
| display: none; | |
| } | |
| .result-title { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| color: var(--primary-light); | |
| } | |
| .final-score { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| color: var(--white); | |
| } | |
| .restart-btn { | |
| background-color: var(--accent-green); | |
| color: var(--black); | |
| border: none; | |
| padding: 1rem 2.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .restart-btn:hover { | |
| background-color: #6ba56b; | |
| transform: translateY(-2px); | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 1.5rem; | |
| margin-top: auto; | |
| background-color: rgba(26, 46, 26, 0.7); | |
| font-size: 0.9rem; | |
| color: var(--primary-light); | |
| border-top: 1px solid var(--accent-green); | |
| } | |
| @media (max-width: 600px) { | |
| h1 { | |
| font-size: 1.8rem; | |
| } | |
| .game-container { | |
| padding: 1.5rem; | |
| } | |
| .question { | |
| font-size: 1.2rem; | |
| } | |
| .formula { | |
| font-size: 1.3rem; | |
| } | |
| .category-selector { | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .difficulty-selector { | |
| flex-wrap: wrap; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Формулы сложения</h1> | |
| <p class="subtitle">Проверь свои знания математических формул</p> | |
| </header> | |
| <main> | |
| <div class="game-container"> | |
| <div class="category-selector" id="category-selector"> | |
| <button class="category-btn active" data-category="formulas">Формулы</button> | |
| <button class="category-btn" data-category="problems">Задачи</button> | |
| </div> | |
| <div class="difficulty-selector" id="difficulty-selector" style="display: none;"> | |
| <button class="difficulty-btn easy active" data-difficulty="easy">Легкий</button> | |
| <button class="difficulty-btn medium" data-difficulty="medium">Средний</button> | |
| <button class="difficulty-btn hard" data-difficulty="hard">Сложный</button> | |
| </div> | |
| <div class="score-container"> | |
| <div class="score">Вопрос: <span id="current-question">1</span>/<span id="total-questions">10</span></div> | |
| <div class="score">Очки: <span id="score">0</span></div> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress" id="progress"></div> | |
| </div> | |
| <div id="quiz-container"> | |
| <div class="question-container"> | |
| <div class="question" id="question-text">Загрузка вопроса...</div> | |
| <div class="formula" id="formula"></div> | |
| </div> | |
| <div class="options" id="options-container"> | |
| <!-- Варианты ответов будут здесь --> | |
| </div> | |
| <button class="hint-btn" id="hint-btn">Показать подсказку</button> | |
| <div class="hint-text" id="hint-text">Подсказка будет здесь</div> | |
| <button class="next-btn" id="next-btn">Следующий вопрос</button> | |
| </div> | |
| <div class="result-container" id="result-container"> | |
| <h2 class="result-title">Тест завершен!</h2> | |
| <div class="final-score" id="final-score">Твой результат: 0/10</div> | |
| <button class="restart-btn" id="restart-btn">Начать заново</button> | |
| </div> | |
| </div> | |
| </main> | |
| <footer> | |
| © Нуриева Наргиз. 2025 Математическая игра "Формулы сложения" | |
| </footer> | |
| <script> | |
| // Данные для вопросов | |
| const questionsData = { | |
| formulas: [ | |
| { | |
| question: "Какая формула выражает синус суммы двух углов?", | |
| formula: "sin(α + β) = ?", | |
| options: [ | |
| "sinα cosβ + cosα sinβ", | |
| "sinα cosβ - cosα sinβ", | |
| "cosα cosβ - sinα sinβ", | |
| "cosα cosβ + sinα sinβ" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Запомните: синус суммы - это 'синус косина плюс косинус синус'." | |
| }, | |
| { | |
| question: "Какая формула выражает косинус суммы двух углов?", | |
| formula: "cos(α + β) = ?", | |
| options: [ | |
| "cosα cosβ + sinα sinβ", | |
| "cosα cosβ - sinα sinβ", | |
| "sinα cosβ + cosα sinβ", | |
| "sinα cosβ - cosα sinβ" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Косинус суммы - это 'косинус косинус минус синус синус'." | |
| }, | |
| { | |
| question: "Как выглядит формула тангенса суммы?", | |
| formula: "tan(α + β) = ?", | |
| options: [ | |
| "(tanα + tanβ) / (1 - tanα tanβ)", | |
| "(tanα - tanβ) / (1 + tanα tanβ)", | |
| "(tanα + tanβ) / (1 + tanα tanβ)", | |
| "(tanα - tanβ) / (1 - tanα tanβ)" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Тангенс суммы - числитель это сумма, знаменатель 1 минус произведение." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы логарифмов?", | |
| formula: "logₐ(b) + logₐ(c) = ?", | |
| options: [ | |
| "logₐ(b + c)", | |
| "logₐ(b × c)", | |
| "logₐ(b) × logₐ(c)", | |
| "logₐ(b) + c" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Сумма логарифмов с одинаковыми основаниями равна логарифму произведения." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы квадратов?", | |
| formula: "a² + b² = ?", | |
| options: [ | |
| "(a + b)²", | |
| "(a + b)(a - b)", | |
| "(a + b)² - 2ab", | |
| "Не упрощается дальше" | |
| ], | |
| correctAnswer: 3, | |
| hint: "Сумма квадратов не имеет стандартной формулы сокращения, в отличие от разности квадратов." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы кубов?", | |
| formula: "a³ + b³ = ?", | |
| options: [ | |
| "(a + b)³", | |
| "(a + b)(a² - ab + b²)", | |
| "(a - b)(a² + ab + b²)", | |
| "Не упрощается дальше" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Сумма кубов раскладывается на произведение суммы оснований и неполного квадрата разности." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы арифметической прогрессии?", | |
| formula: "Sₙ = ?", | |
| options: [ | |
| "n(a₁ + aₙ)/2", | |
| "a₁ + (n-1)d", | |
| "a₁(1 - rⁿ)/(1 - r)", | |
| "a₁ × rⁿ⁻¹" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Сумма арифметической прогрессии - это среднее первого и последнего членов, умноженное на количество членов." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы геометрической прогрессии?", | |
| formula: "Sₙ = ? (для |r| < 1)", | |
| options: [ | |
| "a₁(1 - rⁿ)/(1 - r)", | |
| "n(a₁ + aₙ)/2", | |
| "a₁ + (n-1)d", | |
| "a₁/(1 - r)" | |
| ], | |
| correctAnswer: 3, | |
| hint: "Для бесконечной геометрической прогрессии с |r|<1 сумма равна первому члену, деленному на (1 - знаменатель)." | |
| }, | |
| { | |
| question: "Как выглядит формула суммы углов многоугольника?", | |
| formula: "Сумма внутренних углов n-угольника = ?", | |
| options: [ | |
| "180° × n", | |
| "180° × (n - 1)", | |
| "180° × (n - 2)", | |
| "360°" | |
| ], | |
| correctAnswer: 2, | |
| hint: "Сумма углов n-угольника равна 180° умноженное на (количество сторон минус два)." | |
| }, | |
| { | |
| question: "Как выглядит формула бинома Ньютона?", | |
| formula: "(a + b)ⁿ = ?", | |
| options: [ | |
| "Σ C(n,k) aⁿ⁻ᵏ bᵏ (k=0 to n)", | |
| "Σ C(n,k) aᵏ bᵏ (k=0 to n)", | |
| "Σ C(n,k) aⁿ⁻ᵏ bⁿ⁻ᵏ (k=0 to n)", | |
| "aⁿ + bⁿ" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Бином Ньютона раскладывается в сумму сочетаний, где степени a уменьшаются, а степени b увеличиваются." | |
| } | |
| ], | |
| problems: { | |
| easy: [ | |
| { | |
| question: "Вычислите sin75°, используя формулу sin(45° + 30°)", | |
| formula: "sin(45° + 30°) = sin45°cos30° + cos45°sin30°", | |
| options: [ | |
| "(√6 + √2)/4", | |
| "(√6 - √2)/4", | |
| "(√2 + √3)/2", | |
| "(√2 - √3)/2" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Подставьте известные значения: sin45°=√2/2, cos30°=√3/2, cos45°=√2/2, sin30°=1/2" | |
| }, | |
| { | |
| question: "Вычислите cos15°, используя формулу cos(45° - 30°)", | |
| formula: "cos(45° - 30°) = cos45°cos30° + sin45°sin30°", | |
| options: [ | |
| "(√6 + √2)/4", | |
| "(√6 - √2)/4", | |
| "(√2 + √3)/2", | |
| "(√2 - √3)/2" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Подставьте известные значения: cos45°=√2/2, cos30°=√3/2, sin45°=√2/2, sin30°=1/2" | |
| }, | |
| { | |
| question: "Упростите выражение: log₅2 + log₅12.5", | |
| formula: "logₐb + logₐc = logₐ(b × c)", | |
| options: [ | |
| "1", | |
| "2", | |
| "3", | |
| "4" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Объедините логарифмы: log₅(2 × 12.5) = log₅25 = 2, так как 5² = 25" | |
| }, | |
| { | |
| question: "Найдите сумму первых 10 членов арифметической прогрессии, где a₁=3, d=2", | |
| formula: "Sₙ = n(a₁ + aₙ)/2", | |
| options: [ | |
| "100", | |
| "110", | |
| "120", | |
| "130" | |
| ], | |
| correctAnswer: 2, | |
| hint: "Сначала найдите 10-й член: a₁₀ = a₁ + 9d = 3 + 18 = 21. Затем сумма: S₁₀ = 10(3 + 21)/2 = 120" | |
| }, | |
| { | |
| question: "Найдите сумму 1 + 2 + 4 + 8 + ... + 512 (10 членов)", | |
| formula: "Sₙ = a₁(1 - rⁿ)/(1 - r)", | |
| options: [ | |
| "1023", | |
| "1024", | |
| "2047", | |
| "2048" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Это геометрическая прогрессия с a₁=1, r=2, n=10. S₁₀ = (1 - 2¹⁰)/(1 - 2) = (1 - 1024)/(-1) = 1023" | |
| } | |
| ], | |
| medium: [ | |
| { | |
| question: "Вычислите sin(arctan(3/4) + arccos(5/13))", | |
| formula: "Используйте формулы сложения для синуса", | |
| options: [ | |
| "56/65", | |
| "33/65", | |
| "63/65", | |
| "16/65" | |
| ], | |
| correctAnswer: 2, | |
| hint: "Найдите sin и cos каждого угла: arctan(3/4) имеет sin=3/5, cos=4/5; arccos(5/13) имеет sin=12/13, cos=5/13" | |
| }, | |
| { | |
| question: "Упростите выражение: (tan25° + tan20°)/(1 - tan25°tan20°)", | |
| formula: "tan(α + β) = (tanα + tanβ)/(1 - tanαtanβ)", | |
| options: [ | |
| "tan45°", | |
| "tan5°", | |
| "tan25°", | |
| "tan20°" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Это формула для tan(25° + 20°) = tan45° = 1" | |
| }, | |
| { | |
| question: "Решите уравнение: log₂(x) + log₂(x - 2) = 3", | |
| formula: "logₐb + logₐc = logₐ(b × c)", | |
| options: [ | |
| "4", | |
| "-2", | |
| "4 и -2", | |
| "4 (только это решение подходит)" | |
| ], | |
| correctAnswer: 3, | |
| hint: "Объедините логарифмы: log₂(x(x-2)) = 3 ⇒ x² - 2x = 8. Решения x=4 и x=-2, но x>0 и x-2>0" | |
| }, | |
| { | |
| question: "Сумма первых n членов арифметической прогрессии равна 3n² + 5n. Найдите 10-й член.", | |
| formula: "aₙ = Sₙ - Sₙ₋₁", | |
| options: [ | |
| "58", | |
| "62", | |
| "66", | |
| "70" | |
| ], | |
| correctAnswer: 1, | |
| hint: "a₁₀ = S₁₀ - S₉ = (3×100 + 50) - (3×81 + 45) = 350 - 288 = 62" | |
| }, | |
| { | |
| question: "Найдите сумму бесконечной геометрической прогрессии: 1 - 1/3 + 1/9 - 1/27 + ...", | |
| formula: "S = a₁/(1 - r) (при |r| < 1)", | |
| options: [ | |
| "2/3", | |
| "3/4", | |
| "4/5", | |
| "5/6" | |
| ], | |
| correctAnswer: 1, | |
| hint: "a₁=1, r=-1/3. S = 1/(1 - (-1/3)) = 1/(4/3) = 3/4" | |
| } | |
| ], | |
| hard: [ | |
| { | |
| question: "Вычислите sin(2arctan(1/3) + cos(arctan(2))", | |
| formula: "Используйте формулы двойного угла и сложения", | |
| options: [ | |
| "1", | |
| "0", | |
| "1/2", | |
| "√2/2" | |
| ], | |
| correctAnswer: 0, | |
| hint: "Для первого слагаемого: sin(2α) = 2tanα/(1 + tan²α). Для второго: cos(arctanx) = 1/√(1 + x²)" | |
| }, | |
| { | |
| question: "Докажите тождество: (sinα + sinβ)/(cosα + cosβ) = tan((α + β)/2)", | |
| formula: "Используйте формулы преобразования суммы в произведение", | |
| options: [ | |
| "Используйте sinα + sinβ = 2sin((α+β)/2)cos((α-β)/2)", | |
| "Используйте cosα + cosβ = 2cos((α+β)/2)cos((α-β)/2)", | |
| "Разделите первое выражение на второе", | |
| "Все вышеперечисленное верно" | |
| ], | |
| correctAnswer: 3, | |
| hint: "Числитель: sinα + sinβ = 2sin((α+β)/2)cos((α-β)/2). Знаменатель: cosα + cosβ = 2cos((α+β)/2)cos((α-β)/2). После сокращения получится tan((α+β)/2)" | |
| }, | |
| { | |
| question: "Решите систему: log₂x + log₄y = 4, x²y = 64", | |
| formula: "Используйте свойства логарифмов", | |
| options: [ | |
| "x=4, y=4", | |
| "x=2, y=16", | |
| "x=8, y=1", | |
| "x=√2, y=32" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Преобразуйте первое уравнение: log₂x + (log₂y)/2 = 4 ⇒ 2log₂x + log₂y = 8 ⇒ log₂(x²y) = 8 ⇒ x²y = 256. Но из второго уравнения x²y=64. Проверьте варианты." | |
| }, | |
| { | |
| question: "Арифметическая и геометрическая прогрессии имеют первые члены равные 2. Их третьи члены совпадают. Второй член арифметической прогрессии на 1 больше второго члена геометрической. Найдите возможные прогрессии.", | |
| formula: "Используйте формулы для членов прогрессий", | |
| options: [ | |
| "AP: 2, 3, 4; GP: 2, 2, 2", | |
| "AP: 2, 4, 6; GP: 2, 2√2, 4", | |
| "AP: 2, 5, 8; GP: 2, 4, 8", | |
| "AP: 2, 3.5, 5; GP: 2, √6, 3" | |
| ], | |
| correctAnswer: 2, | |
| hint: "Пусть AP: 2, 2+d, 2+2d; GP: 2, 2r, 2r². Условия: 2+2d = 2r² и 2+d = 2r+1. Решите систему." | |
| }, | |
| { | |
| question: "Найдите сумму: sin²1° + sin²2° + ... + sin²89°", | |
| formula: "Используйте sin²α + sin²(90°-α) = 1", | |
| options: [ | |
| "44", | |
| "44.5", | |
| "45", | |
| "45.5" | |
| ], | |
| correctAnswer: 1, | |
| hint: "Сгруппируйте sin²1° + sin²89° = sin²1° + cos²1° = 1. Таких пар 44 (от 1° до 44° и от 46° до 89°), плюс sin²45° = 0.5" | |
| } | |
| ] | |
| } | |
| }; | |
| // Элементы DOM | |
| const questionText = document.getElementById('question-text'); | |
| const formulaElement = document.getElementById('formula'); | |
| const optionsContainer = document.getElementById('options-container'); | |
| const hintBtn = document.getElementById('hint-btn'); | |
| const hintText = document.getElementById('hint-text'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const currentQuestionElement = document.getElementById('current-question'); | |
| const totalQuestionsElement = document.getElementById('total-questions'); | |
| const scoreElement = document.getElementById('score'); | |
| const progressElement = document.getElementById('progress'); | |
| const quizContainer = document.getElementById('quiz-container'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const finalScoreElement = document.getElementById('final-score'); | |
| const restartBtn = document.getElementById('restart-btn'); | |
| const categorySelector = document.getElementById('category-selector'); | |
| const difficultySelector = document.getElementById('difficulty-selector'); | |
| const categoryButtons = document.querySelectorAll('.category-btn'); | |
| const difficultyButtons = document.querySelectorAll('.difficulty-btn'); | |
| // Переменные игры | |
| let currentQuestionIndex = 0; | |
| let score = 0; | |
| let selectedOption = null; | |
| let answered = false; | |
| let currentCategory = 'formulas'; | |
| let currentDifficulty = 'easy'; | |
| let questions = []; | |
| // Инициализация игры | |
| function initGame() { | |
| // Установка обработчиков событий | |
| categoryButtons.forEach(btn => { | |
| btn.addEventListener('click', selectCategory); | |
| }); | |
| difficultyButtons.forEach(btn => { | |
| btn.addEventListener('click', selectDifficulty); | |
| }); | |
| hintBtn.addEventListener('click', toggleHint); | |
| nextBtn.addEventListener('click', nextQuestion); | |
| restartBtn.addEventListener('click', restartGame); | |
| // Загрузка первых вопросов | |
| selectCategory({ target: document.querySelector('.category-btn.active') }); | |
| } | |
| // Выбор категории | |
| function selectCategory(e) { | |
| // Обновляем активную кнопку | |
| categoryButtons.forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| e.target.classList.add('active'); | |
| // Устанавливаем текущую категорию | |
| currentCategory = e.target.dataset.category; | |
| // Показываем/скрываем выбор сложности | |
| if (currentCategory === 'problems') { | |
| difficultySelector.style.display = 'flex'; | |
| selectDifficulty({ target: document.querySelector('.difficulty-btn.active') }); | |
| } else { | |
| difficultySelector.style.display = 'none'; | |
| questions = questionsData.formulas; | |
| totalQuestionsElement.textContent = questions.length; | |
| resetGame(); | |
| loadQuestion(); | |
| } | |
| } | |
| // Выбор сложности | |
| function selectDifficulty(e) { | |
| // Обновляем активную кнопку | |
| difficultyButtons.forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| e.target.classList.add('active'); | |
| // Устанавливаем текущую сложность | |
| currentDifficulty = e.target.dataset.difficulty; | |
| // Загружаем соответствующие вопросы | |
| questions = questionsData.problems[currentDifficulty]; | |
| totalQuestionsElement.textContent = questions.length; | |
| resetGame(); | |
| loadQuestion(); | |
| } | |
| // Загрузка вопроса | |
| function loadQuestion() { | |
| answered = false; | |
| selectedOption = null; | |
| const question = questions[currentQuestionIndex]; | |
| // Обновляем информацию о вопросе | |
| questionText.textContent = question.question; | |
| formulaElement.textContent = question.formula || ''; | |
| currentQuestionElement.textContent = currentQuestionIndex + 1; | |
| // Очищаем и добавляем варианты ответов | |
| optionsContainer.innerHTML = ''; | |
| question.options.forEach((option, index) => { | |
| const optionElement = document.createElement('div'); | |
| optionElement.classList.add('option'); | |
| optionElement.textContent = option; | |
| optionElement.dataset.index = index; | |
| optionElement.addEventListener('click', selectOption); | |
| optionsContainer.appendChild(optionElement); | |
| }); | |
| // Сбрасываем состояние кнопок и подсказки | |
| hintText.style.display = 'none'; | |
| hintText.textContent = question.hint; | |
| nextBtn.style.display = 'none'; | |
| // Обновляем прогресс бар | |
| updateProgress(); | |
| } | |
| // Выбор варианта ответа | |
| function selectOption(e) { | |
| if (answered) return; | |
| const selectedElement = e.target; | |
| const optionIndex = parseInt(selectedElement.dataset.index); | |
| const question = questions[currentQuestionIndex]; | |
| // Удаляем выделение со всех вариантов | |
| document.querySelectorAll('.option').forEach(opt => { | |
| opt.classList.remove('selected'); | |
| }); | |
| // Добавляем выделение к выбранному варианту | |
| selectedElement.classList.add('selected'); | |
| selectedOption = optionIndex; | |
| // Проверяем ответ | |
| answered = true; | |
| if (optionIndex === question.correctAnswer) { | |
| selectedElement.classList.add('correct'); | |
| score++; | |
| scoreElement.textContent = score; | |
| } else { | |
| selectedElement.classList.add('incorrect'); | |
| // Показываем правильный ответ | |
| document.querySelectorAll('.option')[question.correctAnswer].classList.add('correct'); | |
| } | |
| // Показываем кнопку "Далее" | |
| nextBtn.style.display = 'block'; | |
| } | |
| // Показать/скрыть подсказку | |
| function toggleHint() { | |
| if (hintText.style.display === 'block') { | |
| hintText.style.display = 'none'; | |
| hintBtn.textContent = 'Показать подсказку'; | |
| } else { | |
| hintText.style.display = 'block'; | |
| hintBtn.textContent = 'Скрыть подсказку'; | |
| } | |
| } | |
| // Следующий вопрос | |
| function nextQuestion() { | |
| currentQuestionIndex++; | |
| if (currentQuestionIndex < questions.length) { | |
| loadQuestion(); | |
| } else { | |
| showResults(); | |
| } | |
| } | |
| // Показать результаты | |
| function showResults() { | |
| quizContainer.style.display = 'none'; | |
| resultContainer.style.display = 'block'; | |
| finalScoreElement.textContent = `Твой результат: ${score}/${questions.length}`; | |
| } | |
| // Начать заново | |
| function restartGame() { | |
| resetGame(); | |
| quizContainer.style.display = 'block'; | |
| resultContainer.style.display = 'none'; | |
| loadQuestion(); | |
| } | |
| // Сброс игры | |
| function resetGame() { | |
| currentQuestionIndex = 0; | |
| score = 0; | |
| scoreElement.textContent = score; | |
| } | |
| // Обновить прогресс бар | |
| function updateProgress() { | |
| const progress = ((currentQuestionIndex) / questions.length) * 100; | |
| progressElement.style.width = `${progress}%`; | |
| } | |
| // Запускаем игру при загрузке страницы | |
| window.onload = initGame; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment