Make an HTML code that helps the math teacher
Here's a translation of the code and explanation:
HTML and JavaScript Code for a Math Exercise:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
}
.quiz-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: auto;
}
.question {
font-size: 24px;
margin-bottom: 20px;
}
.answer {
width: 100%;
padding: 10px;
font-size: 16px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.submit-btn:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="question" id="question"></div>
<input type="number" id="answer" class="answer" placeholder="Enter your answer here">
<button class="submit-btn" onclick="checkAnswer()">Submit Answer</button>
<div class="result" id="result"></div>
</div>
<script>
// Generate a random math question
let num1 = Math.floor(Math.random() * 100) + 1; // Random number between 1 and 100
let num2 = Math.floor(Math.random() * 100) + 1; // Random number between 1 and 100
let correctAnswer = num1 + num2;
// Display the question
document.getElementById("question").textContent = `What is ${num1} + ${num2}?`;
// Function to check the answer
function checkAnswer() {
let userAnswer = parseInt(document.getElementById("answer").value);
let resultElement = document.getElementById("result");
if (userAnswer === correctAnswer) {
resultElement.textContent = "Your answer is correct!";
resultElement.style.color = "green";
} else {
resultElement.textContent = "Your answer is incorrect. Try again.";
resultElement.style.color = "red";
}
}
</script>
</body>
</html>
Explanation of the Code:
- HTML:
- The page has an input field for the answer and a button to submit the answer.
- There's an element to display the generated math question.
- CSS:
- The page is styled simply, with a white background and shadows to make the display look more appealing.
- JavaScript:
- A random addition question is generated with two random numbers.
- After the student enters their answer and clicks the "Submit Answer" button, it checks whether the answer is correct or not and displays the result.
How it works:
- When the page loads, a random addition question is shown to the student.
- After entering the answer and clicking the "Submit Answer" button, the page will display whether the answer is correct or incorrect.
If you'd like to customize it further or add extra features, just let me know!
explain
Here’s a translation of the explanation:
1. HTML:
- Basic structure of the page:
It contains the following elements:
<div class="quiz-container">: This element contains all the contents of the quiz. It’s used to define the area where the question and answers will appear.<div class="question" id="question">: This is where the randomly generated math question will appear.<input type="number" id="answer" class="answer" placeholder="Enter your answer here">: This field allows students to enter their answer.<button class="submit-btn" onclick="checkAnswer()">Submit Answer</button>: The submit button. When clicked, it runs thecheckAnswer()function to check the answer.<div class="result" id="result"></div>: This is where the result of the answer (correct or incorrect) will be displayed.
2. CSS:
- Styling:
body: Sets the background and text styling to make the page more comfortable to read..quiz-container: Defines the white background with shadow and rounded corners to make the UI appealing..question: Font size for the question..answer: Styling for the input field where the answer is entered..submit-btn: Styling for the submit button, including a hover effect when the mouse pointer is over it..result: Styling for displaying the result (correct or incorrect) after submitting the answer.
3. JavaScript:
- Generating the random question:
- The code generates two random numbers between 1 and 100 using
Math.random(), and then adds them together to create a question like "What is 45 + 23?". - The correct answer is stored in the variable
correctAnswer. - The question is displayed in the element with the
id="question".
- The code generates two random numbers between 1 and 100 using
- Checking the answer:
- When the "Submit Answer" button is clicked, the
checkAnswer()function checks if the student's entered answer matches the correct answer. - If the answer is correct, the message "Your answer is correct!" is displayed in green.
- If the answer is incorrect, the message "Your answer is incorrect. Try again." is displayed in red.
- When the "Submit Answer" button is clicked, the
4. How to use:
- When the page loads, a random question like "What is 45 + 23?" appears.
- The student enters the answer in the input field and clicks "Submit Answer".
- The page will display whether the answer is correct or incorrect based on what was entered.
If you have any questions or need to modify the code to better suit your needs, feel free to let me know!
Posts
Comments
Post a Comment