Tables de multiplication
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
form {
margin-top: 30px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 10px;
}
input[type=”text”],
input[type=”number”] {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#score {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
Tables de multiplication
const form = document.getElementById(‘quizForm’);
const questionText = document.getElementById(‘question’);
const answerInput = document.getElementById(‘answer’);
const scoreDiv = document.getElementById(‘score’);
let score = 0;
let timer = 60;
let timerInterval;
function generateQuestion() {
const num1 = Math.floor(Math.random() * 10) + 1;
const num2 = Math.floor(Math.random() * 10) + 1;
return `${num1} x ${num2}`;
}
function displayQuestion() {
const question = generateQuestion();
questionText.textContent = question;
answerInput.value = ”;
answerInput.focus();
}
function updateScore(isCorrect) {
if (isCorrect) {
score += 2;
} else {
score -= 1;
}
scoreDiv.textContent = `Score: ${score}`;
}
function handleSubmit(event) {
event.preventDefault();
const userAnswer = parseInt(answerInput.value, 10);
const [num1, num2] = questionText.textContent.split(‘ x ‘);
const correctAnswer = parseInt(num1, 10) * parseInt(num2, 10);
const isCorrect = userAnswer === correctAnswer;
updateScore(isCorrect);
displayQuestion();
}
timerInterval = setInterval(() => {
timer–;
if (timer === 0) {
clearInterval(timerInterval);
form.removeEventListener(‘submit’, handleSubmit);
form.style.display = ‘none’;
scoreDiv.textContent = `Score final: ${score}`;
}
}, 1000);
form.addEventListener(‘submit’, handleSubmit);
displayQuestion();
