Juan José Gutiérrez de Quevedo Pérez
b907866c85
Some checks failed
continuous-integration/drone/push Build is failing
- Integrate i18n translations for difficulty descriptions - Fix intermediate steps alignment in long multiplication display - Simplify spacing calculations for better layout consistency - Update translation files for all supported languages (en, es, el, sv)
86 lines
3 KiB
HTML
86 lines
3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Math Homework Helper - Multiplication Practice</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<!-- Language Selector -->
|
||
<div class="language-selector">
|
||
<div class="language-flags" id="language-flags"></div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1 id="title">🎓 Math Homework Helper</h1>
|
||
<p class="subtitle" id="subtitle">Multiplication Practice</p>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<!-- Difficulty Slider Section -->
|
||
<section class="difficulty-section">
|
||
<label for="difficulty-slider" class="difficulty-label">
|
||
Difficulty Level: <span id="difficulty-display">1</span>
|
||
</label>
|
||
<div class="slider-container">
|
||
<span class="difficulty-text">Easy</span>
|
||
<input
|
||
type="range"
|
||
id="difficulty-slider"
|
||
min="1"
|
||
max="5"
|
||
value="1"
|
||
class="slider"
|
||
>
|
||
<span class="difficulty-text">Hard</span>
|
||
</div>
|
||
<div class="difficulty-info">
|
||
<p id="difficulty-description">1 digit × 1 digit (e.g., 5 × 7)</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Problem Display Section -->
|
||
<section class="problem-section">
|
||
<div class="problem-display" id="problem-display">
|
||
<!-- Problem will be rendered here -->
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Check Answer Button -->
|
||
<section class="answer-section">
|
||
<button id="submit-btn" class="submit-btn" style="width: 100%;">Check Answer</button>
|
||
</section>
|
||
|
||
<!-- Feedback Section -->
|
||
<section class="feedback-section">
|
||
<div id="feedback" class="feedback"></div>
|
||
</section>
|
||
|
||
<!-- Score Section -->
|
||
<section class="score-section">
|
||
<div class="score-box">
|
||
<p class="score-label">Points:</p>
|
||
<p class="score-value" id="points-score">0/10</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- New Problem Button -->
|
||
<button id="new-problem-btn" class="new-problem-btn">New Problem</button>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Victory Modal -->
|
||
<div id="victory-modal" class="modal">
|
||
<div class="modal-content">
|
||
<h2>🎉 Congratulations! 🎉</h2>
|
||
<p>You've reached 20 points!</p>
|
||
<button id="play-again-btn" class="modal-btn">Play Again</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="translations.js"></script>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|