Nishita
dc9985bbc8
Word Search Stories At Eduspire, we believe learning English should be fun, interactive, and creative. That’s why we developed Word Search Stories – a playful and educational game designed for students from grades 3 to 6. This game helps children enhance their vocabulary, spelling, reading comprehension, and pattern recognition while enjoying engaging, themed stories. In Word Search Stories, students first select their grade level and a theme, such as Farm Life, Animals, or Space Adventure. The game then presents a colorful and interactive letter grid where children must find hidden words related to the selected theme. Words can appear horizontally, vertically, or diagonally, making the game challenging yet fun. A real-time progress tracker shows how many words have been found, while the Hint button allows students to briefly highlight one of the remaining words, encouraging learning without frustration. Once all words are found, a short story related to the theme is unlocked. This story is presented in a playful pop-up animation, helping students connect the vocabulary they discovered with real language in context. The game is designed to be vibrant, visually appealing, and intuitive, featuring colorful cells, easy drag-and-select controls, and responsive layout that works on both desktop and touch devices. Tech Stack: HTML – structures the game, grid, buttons, and story popups. CSS – adds vibrant colors, animations, and kid-friendly design. JavaScript – handles word placement, grid logic, selection tracking, hints, and story reveal. Optional Enhancements: Three.js for 3D effects, Web Audio API for future sound and voice-over support. The game is fully iframe compatible, meaning it can easily be embedded into any website or digital learning platform. Its modular design separates structure (index.html), styles (style.css), and logic (script.js) for maintainability and easy collaboration.
105 lines
3.9 KiB
HTML
105 lines
3.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||
<title>Story Word-Search — Learn English (Grades 3–6)</title>
|
||
|
||
<!-- CSS file -->
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app" role="application" aria-label="Word search story game">
|
||
<!-- HEADER with title and controls -->
|
||
<header>
|
||
<h1>📚 Story Word-Search — Grades 3–6</h1>
|
||
<div class="controls">
|
||
<!-- Grade dropdown -->
|
||
<div style="display:flex;gap:8px;align-items:center">
|
||
<label class="label">Grade</label>
|
||
<select id="gradeSelect" aria-label="grade choice">
|
||
<option value="3">Grade 3</option>
|
||
<option value="4">Grade 4</option>
|
||
<option value="5">Grade 5</option>
|
||
<option value="6" selected>Grade 6</option>
|
||
</select>
|
||
</div>
|
||
<!-- New Game button -->
|
||
<button id="newBtn" class="btn" title="Generate new puzzle">🔁 New Game</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- LEFT PANEL (words list + settings) -->
|
||
<div class="left panel">
|
||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||
<strong>Words to find</strong>
|
||
<span id="progress">0 / 0</span>
|
||
</div>
|
||
<div class="wordlist" id="wordList" aria-live="polite"></div>
|
||
|
||
<!-- Hint + Show Story -->
|
||
<div style="display:flex;gap:8px;margin-top:8px">
|
||
<button id="hintBtn" class="small">💡 Hint</button>
|
||
<button id="showStoryBtn" class="small">📖 Show Story</button>
|
||
</div>
|
||
|
||
<!-- Settings (theme, grid size, sound) -->
|
||
<div style="margin-top:12px">
|
||
<div class="settings panel">
|
||
<div class="row"><span class="label">Theme</span>
|
||
<select id="themeSelect" aria-label="theme">
|
||
<option value="farm">Farm Friends</option>
|
||
<option value="space">Space Adventure</option>
|
||
<option value="forest">Forest Tale</option>
|
||
</select>
|
||
</div>
|
||
<div class="row"><span class="label">Grid size</span>
|
||
<select id="sizeSelect">
|
||
<option>10</option>
|
||
<option>12</option>
|
||
<option selected>14</option>
|
||
<option>16</option>
|
||
</select>
|
||
</div>
|
||
<div class="row"><span class="label">Sound</span>
|
||
<input id="soundToggle" type="checkbox" checked>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT PANEL (grid) -->
|
||
<div class="panel" style="padding:14px;">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
|
||
<strong>Find the words in the grid!</strong>
|
||
<div style="font-size:13px;color:#666">Tap and drag to select — works with mouse/touch.</div>
|
||
</div>
|
||
<div class="gridwrap" id="gridWrap" aria-hidden="false">
|
||
<div id="grid" class="grid" role="grid" aria-label="letter grid"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">Made with ❤️ for curious kids — find all words to unlock the story and hear it aloud.</div>
|
||
</div>
|
||
|
||
<!-- STORY POPUP (shown after game success) -->
|
||
<div id="overlay" class="overlay" role="dialog" aria-hidden="true">
|
||
<canvas id="confetti" class="confetti-canvas"></canvas>
|
||
<div class="storybox panel" role="document" aria-live="assertive">
|
||
<div style="display:flex;justify-content:space-between;align-items:center">
|
||
<h2 id="storyTitle" style="margin:0">Story</h2>
|
||
<button id="closeStory" class="small">✖</button>
|
||
</div>
|
||
<p class="story-text" id="storyText"></p>
|
||
<div style="display:flex;gap:8px;justify-content:center">
|
||
<button id="replayVoice" class="btn">🔊 Replay Voice</button>
|
||
<button id="againBtn" class="small">Play Again</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript file -->
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|