Juan José Gutiérrez de Quevedo Pérez
f9558008e1
Some checks reported errors
continuous-integration/drone Build encountered an error
79 lines
No EOL
2.9 KiB
HTML
79 lines
No EOL
2.9 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 Result Input</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>🎓 Math Homework Helper</h1>
|
||
<p class="subtitle">Test: Result Input (Left-to-Right)</p>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<!-- Problem Display Section -->
|
||
<section class="problem-section">
|
||
<div class="problem-display" id="problem-display">
|
||
<div class="multiplication-horizontal">
|
||
<span class="number">8</span>
|
||
<span class="operator">×</span>
|
||
<span class="number">5</span>
|
||
<span class="operator">=</span>
|
||
<div class="line" style="justify-content: flex-end; gap: 2px;">
|
||
<input type="text" class="digit-input result-input" maxlength="1" data-pos="0" />
|
||
<input type="text" class="digit-input result-input" maxlength="1" data-pos="1" />
|
||
</div>
|
||
</div>
|
||
</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/20</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
// Test the result digit input functionality
|
||
const resultInputs = document.querySelectorAll('.result-input');
|
||
|
||
resultInputs.forEach((input, index) => {
|
||
input.addEventListener('input', (e) => {
|
||
// Only allow digits
|
||
if (!/^\d?$/.test(e.target.value)) {
|
||
e.target.value = '';
|
||
return;
|
||
}
|
||
|
||
// Move to LEFT if digit entered
|
||
if (e.target.value) {
|
||
if (index > 0) {
|
||
// Move to previous input (left)
|
||
resultInputs[index - 1].focus();
|
||
} else if (index === 0) {
|
||
console.log('At leftmost position');
|
||
}
|
||
}
|
||
});
|
||
|
||
input.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Backspace' && !e.target.value && index < resultInputs.length - 1) {
|
||
resultInputs[index + 1].focus();
|
||
}
|
||
});
|
||
});
|
||
|
||
// Focus rightmost input on load
|
||
window.addEventListener('load', () => {
|
||
resultInputs[resultInputs.length - 1].focus();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |