210 lines
10 KiB
HTML
210 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Развивайка - Игра для развития речи</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<h1>🎈 Развивайка</h1>
|
||
<p class="subtitle">Игра для развития речи у детей</p>
|
||
</header>
|
||
|
||
<main class="game-container">
|
||
<!-- Меню игр -->
|
||
<section id="menu" class="menu-section">
|
||
<h2>Выбери игру:</h2>
|
||
<div class="game-cards">
|
||
<button class="game-card" data-game="cards">
|
||
<span class="card-icon">🖼️</span>
|
||
<span class="card-title">Карточки со словами</span>
|
||
<span class="card-desc">Учим слова по картинкам</span>
|
||
</button>
|
||
<button class="game-card" data-game="sounds">
|
||
<span class="card-icon">🔊</span>
|
||
<span class="card-title">Звуки и буквы</span>
|
||
<span class="card-desc">Учимся произносить звуки</span>
|
||
</button>
|
||
<button class="game-card" data-game="animals">
|
||
<span class="card-icon">🐾</span>
|
||
<span class="card-title">Кто как говорит?</span>
|
||
<span class="card-desc">Угадай животное по звуку</span>
|
||
</button>
|
||
<button class="game-card" data-game="story">
|
||
<span class="card-icon">📖</span>
|
||
<span class="card-title">Составь историю</span>
|
||
<span class="card-desc">Собираем рассказ из картинок</span>
|
||
</button>
|
||
<button class="game-card" data-game="find">
|
||
<span class="card-icon">🔍</span>
|
||
<span class="card-title">Найди лишнее</span>
|
||
<span class="card-desc">Ищем предмет, который не подходит</span>
|
||
</button>
|
||
<button class="game-card" data-game="match">
|
||
<span class="card-icon">🎯</span>
|
||
<span class="card-title">Найди пару</span>
|
||
<span class="card-desc">Игра на память и внимание</span>
|
||
</button>
|
||
<button class="game-card" data-game="firstletter">
|
||
<span class="card-icon">🔤</span>
|
||
<span class="card-title">Первая буква</span>
|
||
<span class="card-desc">Учим первые буквы слов</span>
|
||
</button>
|
||
<button class="game-card" data-game="syllables">
|
||
<span class="card-icon">📝</span>
|
||
<span class="card-title">Слоги</span>
|
||
<span class="card-desc">Составляем слова из слогов</span>
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 1: Карточки со словами -->
|
||
<section id="game-cards" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Карточки со словами</h2>
|
||
<div class="category-selector">
|
||
<button class="category-btn active" data-category="animals">Животные</button>
|
||
<button class="category-btn" data-category="fruits">Фрукты</button>
|
||
<button class="category-btn" data-category="transport">Транспорт</button>
|
||
<button class="category-btn" data-category="colors">Цвета</button>
|
||
</div>
|
||
<div class="flashcard-container">
|
||
<div class="flashcard" id="flashcard">
|
||
<div class="flashcard-front">
|
||
<div class="flashcard-image" id="card-image">🐱</div>
|
||
<div class="flashcard-word" id="card-word">Кот</div>
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="prevCard()">← Назад</button>
|
||
<button class="control-btn primary" onclick="speakWord()">🔊 Произнести</button>
|
||
<button class="control-btn" onclick="nextCard()">Вперёд →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 2: Звуки и буквы -->
|
||
<section id="game-sounds" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Звуки и буквы</h2>
|
||
<div class="sound-exercise">
|
||
<div class="letter-display" id="letter-display">А</div>
|
||
<p class="exercise-text" id="exercise-text">Повтори звук: "А-а-а"</p>
|
||
<div class="mouth-animation" id="mouth-animation">
|
||
<div class="mouth"></div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn primary" onclick="playSoundExample()">🔊 Послушать</button>
|
||
<button class="control-btn" onclick="nextSound()">Следующий звук →</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 3: Кто как говорит? -->
|
||
<section id="game-animals" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Кто как говорит?</h2>
|
||
<p class="instruction">Послушай звук и угадай, какое животное его издаёт!</p>
|
||
<div class="quiz-container">
|
||
<div class="quiz-question">
|
||
<button class="listen-btn" onclick="playAnimalSound()">🔊 Послушать звук</button>
|
||
</div>
|
||
<div class="quiz-options" id="quiz-options">
|
||
<!-- Кнопки с вариантами -->
|
||
</div>
|
||
<div class="feedback" id="feedback"></div>
|
||
<button class="control-btn primary hidden" id="next-question-btn" onclick="nextQuestion()">Следующий вопрос →</button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Игра 4: Составь историю -->
|
||
<section id="game-story" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Составь историю</h2>
|
||
<p class="instruction">Расставь картинки в правильном порядке, чтобы получилась история!</p>
|
||
<div class="story-container">
|
||
<div class="story-slots" id="story-slots">
|
||
<div class="story-slot" data-slot="0">1</div>
|
||
<div class="story-slot" data-slot="1">2</div>
|
||
<div class="story-slot" data-slot="2">3</div>
|
||
</div>
|
||
<div class="story-pieces" id="story-pieces">
|
||
<!-- Перетаскиваемые картинки -->
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="resetStory()">🔄 Начать заново</button>
|
||
<button class="control-btn primary" onclick="checkStory()">✓ Проверить</button>
|
||
</div>
|
||
<div class="feedback" id="story-feedback"></div>
|
||
</section>
|
||
|
||
<!-- Игра 5: Найди лишнее -->
|
||
<section id="game-find" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Найди лишнее</h2>
|
||
<p class="instruction">Какой предмет здесь лишний? Нажми на него!</p>
|
||
<div class="find-container">
|
||
<div class="find-items" id="find-items"></div>
|
||
</div>
|
||
<div class="feedback" id="find-feedback"></div>
|
||
<button class="control-btn primary hidden" id="next-find-btn" onclick="nextFindQuestion()">Следующее задание →</button>
|
||
</section>
|
||
|
||
<!-- Игра 6: Найди пару -->
|
||
<section id="game-match" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Найди пару</h2>
|
||
<p class="instruction">Найди все пары одинаковых картинок!</p>
|
||
<div class="match-stats">
|
||
<span>Ходы: <b id="match-moves">0</b></span>
|
||
<span>Пары: <b id="match-pairs">0/6</b></span>
|
||
</div>
|
||
<div class="match-grid" id="match-grid"></div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="initMatch()">🔄 Начать заново</button>
|
||
</div>
|
||
<div class="feedback" id="match-feedback"></div>
|
||
</section>
|
||
|
||
<!-- Игра 7: Первая буква -->
|
||
<section id="game-firstletter" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Первая буква</h2>
|
||
<p class="instruction">Какая первая буква у этого слова?</p>
|
||
<div class="firstletter-container">
|
||
<div class="word-display" id="word-display"></div>
|
||
<div class="letter-options" id="letter-options"></div>
|
||
</div>
|
||
<div class="feedback" id="firstletter-feedback"></div>
|
||
<button class="control-btn primary hidden" id="next-firstletter-btn" onclick="nextFirstLetterQuestion()">Следующее слово →</button>
|
||
</section>
|
||
|
||
<!-- Игра 8: Слоги -->
|
||
<section id="game-syllables" class="game-section hidden">
|
||
<button class="back-btn" onclick="showMenu()">← Назад в меню</button>
|
||
<h2>Слоги</h2>
|
||
<p class="instruction">Собери слово из слогов!</p>
|
||
<div class="syllable-container">
|
||
<div class="syllable-target" id="syllable-target"></div>
|
||
<div class="syllable-pieces" id="syllable-pieces"></div>
|
||
<div class="syllable-slots" id="syllable-slots"></div>
|
||
</div>
|
||
<div class="controls">
|
||
<button class="control-btn" onclick="resetSyllable()">🔄 Начать заново</button>
|
||
<button class="control-btn primary" onclick="checkSyllable()">✓ Проверить</button>
|
||
</div>
|
||
<div class="feedback" id="syllable-feedback"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<p>🌟 Молодец! Продолжай учиться!</p>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|