need help finishing this code in html/javascript directions: You must write at l
ID: 3737640 • Letter: N
Question
need help finishing this code in html/javascript
directions: You must write at least three questions for your quiz. One must be multiple choice using radio buttons for the answers; another must be one where multiple answers are correct using check boxes; and a third must be short answer where the the answer will be input as a single word.
There must be a “Check quiz” button that, when clicked, will indicate whether each of the user’s answers are correct or incorrect, as follows:
1. Multiple choice: display “correct” or “incorrect” next to the user’s choice
2. Multiple options: display “correct” or “incorrect” next to each selected option. Also, display “incorrect” next to each non-selected option that should have been selected.
3. Short answer: be sure that any form of upper- or lowercase the user enters is acceptable. Indicate “correct” or “incorrect” next to the question.
here is the code I have so far,
I need help with making the javascript code work properly as according to the directions
*****************quiz.html**********
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to make a proper Peanut Butter and Jelly
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="scripts/main.js"></script>
</head>
<body>
<header>
</header>
<main>
<form id="quiz" name="quiz">
<p>what item do you use to spread peanut butter on the bread?</p>
<input id="textbox" type="text" name="question1">
<p>what is one ingrediant of peanut butter and jelly sandwich?</p>
<input type="radio" id="mc" name="question2" value="cheese"> cheese <br>
<input type="radio" id="mc" name="question2" value="bacon"> bacon <br>
<input type="radio" id="mc" name="question2" value="jelly"> jelly <br>
<p>which of the following are correct ingredients required to make a Peanut Butter and Jelly sandwich?</p>
<input type="checkbox" id="mc" name="question3" value="bread"> bread <br>
<input type="checkbox" id="mc" name="question3" value="cheese"> cheese <br>
<input type="checkbox" id="mc" name="question3" value="peanut butter"> peanut butter <br>
<input type="checkbox" id="mc" name="question3" value="jelly"> jelly <br>
<input type="checkbox" id="mc" name="question3" value="toothpaste"> toothpaste <br>
<br>
<input id="button" type="button" name="submit" value="check quiz">
<br>
</form>
</main>
<footer>
</footer>
</body>
</html>
****end of quiz.hmtl*********
javascript code: ********main.js*******
var submit = document.getElementById("button");
submit.addEventListener("onclick", src);
function src() {
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
var incorrect = 0;
if (question1 == "knife") {
alert("correct!");
correct++;
} else {
alert("incorrect");
incorrect++;
}
if (question2 == "jelly") {
alert("correct!");
correct++;
} else {
alert("incorrect");
incorrect++;
}
if (question3 == "bread" || "jelly" || "peanut butter") {
alert("correct!");
correct++
} else {
alert("incorrect");
incorrect++;
}
}
***end of main.js****************
Explanation / Answer
Modified code of quiz.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to make a proper Peanut Butter and Jelly
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="main.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
</header>
<main>
<form id="quiz" name="quiz">
<p>what item do you use to spread peanut butter on the bread?</p>
<input id="textbox" type="text" name="question1">
<p id="question1" class="text-danger"></p>
<p>what is one ingrediant of peanut butter and jelly sandwich?</p>
<input type="radio" id="mc" name="question2" value="cheese"> cheese <br>
<input type="radio" id="mc" name="question2" value="bacon"> bacon <br>
<input type="radio" id="mc" name="question2" value="jelly"> jelly <br>
<p id="question2" class="text-danger"></p>
<p>which of the following are correct ingredients required to make a Peanut Butter and Jelly sandwich?</p>
<input type="checkbox" id="mc" name="question3" value="bread"> bread <br>
<input type="checkbox" id="mc" name="question3" value="cheese"> cheese <br>
<input type="checkbox" id="mc" name="question3" value="peanut butter"> peanut butter <br>
<input type="checkbox" id="mc" name="question3" value="jelly"> jelly <br>
<input type="checkbox" id="mc" name="question3" value="toothpaste"> toothpaste <br>
<p id="question3" class="text-danger"></p>
<br>
<button type="button">check quiz</button>
<br>
</form>
</main>
<footer>
</footer>
</body>
</html>
Modified code of main.js:
function src()
{
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
// var question3 = document.quiz.question3.value;
var question3=[];
for(var i=0;i<5;i++)
{
if(document.quiz.question3[i].checked)
question3[i]=document.quiz.question3[i].value;
}
var correct = 0;
var incorrect = 0;
if (question1 == "knife") {
//alert("correct!");
document.getElementById("question1").innerHTML = "Correct Answer";
correct++;
} else {
//alert("incorrect");
document.getElementById("question1").innerHTML = "Incorrect Answer";
incorrect++;
}
if (question2 == "jelly") {
//alert("correct!");
document.getElementById("question2").innerHTML = "Correct Answer";
correct++;
} else {
//alert("incorrect");
document.getElementById("question2").innerHTML = "Incorrect Answer";
incorrect++;
}
var boolval;
for(var i=0;i<5;i++)
{
if (question3[i] == "bread" || question3[i] == "jelly" || question3[i] == "peanut butter")
{
boolval=true;
correct++
break;
}else
{
boolval=false;
incorrect++;
}
}
if(boolval==true)
document.getElementById("question3").innerHTML = "Correct Answer";
else if(boolval==false)
document.getElementById("question3").innerHTML = "Incorrect Answer";
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.