HomeworkLib
Question

Create a web page that will help students practice math - Addition, Subtraction, Multiplication and Division....

Create a web page that will help students practice math - Addition, Subtraction, Multiplication and Division. The page should generate and display a math problem using 2 random numbers from 1 to 12.

Addition:

[1 - 12] + [1 - 12] = [2 - 24]<-Calculated

Subtraction:

[2 - 24]<-Calculated - [1 - 12] = [1 - 12]

Multiplication:

[1 - 12] * [1 - 12] = [1 - 144]<-Calculated

Division:

[1 - 144]<-Calculated / [1 - 12] = [1 - 12]

The page should allow the user to enter an answer to the problem and then check the answer. Display appropriate pictures and messages for correct and incorrect answers. If the user is correct automatically generate and display another problem. If the answer is incorrect, let the user try again.

Include a result area that tells the user how many correct and incorrect answers they have and also the percent they have gotten correct.

Use radio buttons to be able to switch between Addition, Subtraction, Multiplication and Division questions.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Ans:

<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<style>
body {
margin: 20px;
font-size: 20px;
}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<script>
// Create a global object to track details
window.result = {
presentOperations: "+",
operand1: getRandomValue(),
operand2: getRandomValue()
};
// To track error attempts
window.wrongAttempts = 0;
// Function to get next operation
function updateOperation(){
var next="";
switch(window.result.presentOperations){
case "+":
next = '-'
break;
case "-":
next = '*'
break;
case "*":
next = '/'
break;
case "/":
next = "+"
renderResult();
break;
}
window.result.presentOperations = next;
}
// Function to get random values between 1 and 12
function getRandomValue(){
var max = 12, min = 1;
return Math.floor(
Math.random() * (max - min) + min
);
}
// Update next question operands
function answerSecond(){
window.result.operand1 = calculateSum();
window.result.operand2 = getRandomValue();
updateOperation();
renderQuestion();
}
//Display wrong answer if you you enter wrong
function wrongAnswer(){
document.getElementsByClassName("result")[0].style.display = "block";
document.getElementById("result-text").innerHTML = "wrong answer try again";
document.getElementById("image").src = "/wrong.jpg"
}
// Display when you enter correct answer
function correctAnswer(){
document.getElementsByClassName("result")[0].style.display = "block";
document.getElementById("result-text").innerHTML = "correct answer solve next question";
document.getElementById("image").src = "/correct.jpg";
}
// Display results after four operations
function renderResult(){
window.result.operand1 = getRandomValue();
window.result.operand2 = getRandomValue();
document.getElementById("result-text").innerHTML = "Wrong attenmpts :"+window.wrongAttempts+"<br>"+ "Winnig percentage :"+( (4 - window.wrongAttempts) / 4 ) * 100+" %"+"<br>keep practicing..";
document.getElementById("image").src = "/correct.jpg";
}
function calculateSum(){
return eval(window.result.operand1 + window.result.presentOperations + window.result.operand2);
}
function calculate(){
var input = document.getElementById("answer");
var error = document.getElementById("error");
error.innerHTML = "";
var inputValue = input.value;
if(inputValue){
if(typeof parseInt(inputValue) == "number"){
var value = parseInt(inputValue);
var correctAns = parseInt( calculateSum());
if(correctAns == value){
answerSecond();
if(window.result.presentOperations != "+")
correctAnswer();
}else{
window.wrongAttempts ++ ;
wrongAnswer();
}
}else{
error.innerHTML = "Worng input";
}
}else{
error.innerHTML = "Enter input";
}
input.value="";
}
function renderQuestion(){
document.getElementById("question").innerHTML = (window.result.operand1 +" "+ window.result.presentOperations +" " + window.result.operand2)
}
</script>
</head>
<body>
<div class="container">
<div class="header">
Welcome to Match Practice
</div>
<div class="question" id="question">

</div>
<div class="answer">
<input placeholder="Enter your answser" id="answer" />
<input type="submit" onclick="calculate()" /> <span id="error" style="font-size: 15px;color: red;"></span>
</div>
<div class="result" style="display: none;">
<img width="50" height="50" src="" id="image" />
<p id="result-text"></p>
</div>
</div>
<script>
renderQuestion();
</script>
</body>
</html>

For displaying image add two images with names as ....wrong.jpg and correct.jpg.....

Thank you...

0 0
Add a comment
Know the answer?
Add Answer to:
Create a web page that will help students practice math - Addition, Subtraction, Multiplication and Division....
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • This week we looked at an example math program that would display the answer to a...

    This week we looked at an example math program that would display the answer to a random math problem. Enhance this assignment to prompt the user to enter the solution to the displayed problem. After the user has entered their answer, the program should display a message indicating if the answer is correct or incorrect. If the answer is incorrect, it should display the correct answer. The division section should use Real data types instead of Integer data types. Keep...

  • Problem 3 (35) Design a calculator that performs four operations: addition, multiplication, division and subtraction with...

    Problem 3 (35) Design a calculator that performs four operations: addition, multiplication, division and subtraction with 2 integer type numbers a) Ask user what type of operation to perform (+, , * or/) a. If the user inputs 'none' then the program terminates. Otherwise it will keep continuing the calculation. (hint: use while) b) Ask user to provide 2 integer number inputs c) Perform operation (whatever operation they mentioned in a) d) Print result e) In division operation, perform a...

  • Integer Math Create an application that uses random integers to test the user’s knowledge of arithmetic....

    Integer Math Create an application that uses random integers to test the user’s knowledge of arithmetic. Let the user choose from addition, subtraction, multiplication, and division. The integers used in the problems should range from 20 to 120. When giving feedback, use color to differentiate between a correct answer response, versus an incorrect answer response. Also check for non-integer input. Preparing division problems requires special consideration because the quotient must be an integer. Therefore, you can use a loop to...

  • Integer Math- Console based---uses Windows Form in Visual Basic   Create an application that uses random integers...

    Integer Math- Console based---uses Windows Form in Visual Basic   Create an application that uses random integers to test the user’s knowledge of arithmetic. Let the user choose from addition, subtraction, multiplication, and division. The integers used in the problems should range from 20 to 120. When giving feedback, use color to differentiate between a correct answer response, versus an incorrect answer response. Also check for non-integer input. Preparing division problems requires special consideration because the quotient must be an integer....

  • Instructions Basically, you will modify the mathq program to make it satisfy a different set of...

    Instructions Basically, you will modify the mathq program to make it satisfy a different set of requirements, and fix what is not working in it. Specifically, imagine that the client for whom we created the mathq program for would now like some changes. To be exact: Part 1: They want it to provide addition and subtraction problems as well as multiplication and division. They still want the choice to be random, as before, but now the problem is randomly multiplication,...

  • The assignment In this assignment you will take the Matrix addition and subtraction code and modify...

    The assignment In this assignment you will take the Matrix addition and subtraction code and modify it to utilize the following 1. Looping user input with menus in an AskUserinput function a. User decides which operation to use (add, subtract) on MatrixA and MatrixB b. User decides what scalar to multiply MatrixC by c. User can complete more than one operation or cancel. Please select the matrix operation 1- Matrix Addition A+ B 2-Matrix Subtraction A-B 3Scalar Multiplication sC 4-Cancel...

  • You are asked to prepare a software for kids to learn addition, subtraction and multiplication for...

    You are asked to prepare a software for kids to learn addition, subtraction and multiplication for numbers from 1 to 10. Ensure that the answer is always positive. The software will prepare objective questions with four choices. The answer provided by the kid will be checked by the software. After the session is over, the software will provide a summary. Number of questions answered will depend on the kid. The questions are generated randomly. The multiple choices are also generated...

  • I am learning programming in JAVA. Please help me with this programming assignment. Your lab assignment...

    I am learning programming in JAVA. Please help me with this programming assignment. Your lab assignment this week is to build a little math program to help kids practice their addition and subtraction. You will create a menu and have the kid select what kind of math problem they want to solve. Once the kid selects what kind of problem. Randomly generate two numbers, display the problem and allow the kid to enter the answer. If the answer is correct....

  • Write a program which gets user choice for addition, subtraction, multiplication and division with characters ’+’,...

    Write a program which gets user choice for addition, subtraction, multiplication and division with characters ’+’, ’-’, ’*’, and ’/’ respectively. This program should keep asking for two numbers and a choice to perform such operations inside a loop which can be only stopped by entering ’q’. I've been working out of code blocks and now I'm not sure how to go about this iew Search Project Build Debug Fortran wwSmith Tools Tools+ Plugins DoxyBlocks Settings Help maino: int -NM...

  • Python please Create a menu-driven modular program so user can take a 10-question math quiz, Addition...

    Python please Create a menu-driven modular program so user can take a 10-question math quiz, Addition or subtraction, at specified difficulty level. Easy(1-digit), Intermediate(2-digit), and Hard(3-digit). After a quiz, display the quiz type and level, and number of correct questions user answered.

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT