Juan José Gutiérrez de Quevedo Pérez
f9558008e1
Some checks reported errors
continuous-integration/drone Build encountered an error
97 lines
No EOL
3.5 KiB
HTML
97 lines
No EOL
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Test Intermediate Steps</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>🎓 Math Homework Helper</h1>
|
||
<p class="subtitle">Test: Vertical Multiplication</p>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<!-- Problem Display Section -->
|
||
<section class="problem-section">
|
||
<div class="problem-display" id="problem-display">
|
||
<div class="multiplication-vertical">
|
||
<div class="line">
|
||
<span>23</span>
|
||
</div>
|
||
<div class="line">
|
||
<span class="operator">×</span>
|
||
<span>7</span>
|
||
</div>
|
||
<div class="separator"></div>
|
||
<div id="intermediate-steps">
|
||
<div class="line" style="justify-content: flex-end; gap: 2px;">
|
||
<input type="text" class="digit-input" maxlength="1" />
|
||
<input type="text" class="digit-input" maxlength="1" />
|
||
<input type="text" class="digit-input" maxlength="1" />
|
||
</div>
|
||
</div>
|
||
<div class="separator"></div>
|
||
<div class="line" style="min-height: 2em; color: #2563eb;">
|
||
<span>?</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Answer Input Section -->
|
||
<section class="answer-section">
|
||
<input
|
||
type="number"
|
||
id="answer-input"
|
||
class="answer-input"
|
||
placeholder="Enter your answer"
|
||
autocomplete="off"
|
||
>
|
||
<button id="submit-btn" class="submit-btn">Check Answer</button>
|
||
</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/20</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// Test the digit input functionality
|
||
const digitInputs = document.querySelectorAll('.digit-input');
|
||
|
||
digitInputs.forEach((input, index) => {
|
||
input.addEventListener('input', (e) => {
|
||
// Only allow digits
|
||
if (!/^\d?$/.test(e.target.value)) {
|
||
e.target.value = '';
|
||
return;
|
||
}
|
||
|
||
// Move to next input if digit entered
|
||
if (e.target.value && index < digitInputs.length - 1) {
|
||
digitInputs[index + 1].focus();
|
||
}
|
||
});
|
||
|
||
input.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Backspace' && !e.target.value && index > 0) {
|
||
digitInputs[index - 1].focus();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Focus first input on load
|
||
window.addEventListener('load', () => {
|
||
digitInputs[0].focus();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |