need help finishing this code in html/javascript directions: You must write at l
ID: 3737840 • 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.
next to the answer the user selected please have it say "incorrect" or "correct" next to the option the user has selected
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="mr" name="question3" value="bread"> bread <br>
<input type="checkbox" id="mr" name="question3" value="cheese"> cheese <br>
<input type="checkbox" id="mr" name="question3" value="peanut butter"> peanut butter <br>
<input type="checkbox" id="mr" name="question3" value="jelly"> jelly <br>
<input type="checkbox" id="mr" 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
- Kindly follow following code as you requested in HTML/JavaScript.
- It will be more flexible if we use jqury
- Change the code as per your requirements
<!DOCTYPE html>
<html lang="en">
<head>
<style>.item {
display: block;
width: 300px;
}
p {
display: inline;
}
input[type=checkbox] {
display: inline;
}
</style>
<script>
</script>
<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>
<div><input id="textbox" type="text" name="question1"> <p id="textans"></p></div>
<p>what is one ingrediant of peanut butter and jelly sandwich?</p>
<div class="item"><input type="radio" id="mc" name="question2" value="cheeserd"> cheese <p id="cheeserd"></p><br>
</div>
<div class="item">
<input type="radio" id="mc" name="question2" value="baconrd"> bacon <p id="baconrd"></p><br>
</div>
<div class="item">
<input type="radio" id="mc" name="question2" value="jellyrd"> jelly <p id="jellyrd"></p><br>
</div>
<p>which of the following are correct ingredients required to make a Peanut Butter and Jelly sandwich?</p>
<div class="item">
<input type="checkbox" id="breadck" name="question3" value="breadck"> bread <p id="breadckp"></p><br>
</div>
<div class="item">
<input type="checkbox" id="cheeseck" name="question3" value="cheeseck"> cheese <p id="cheeseckp"></p><br>
</div>
<div class="item">
<input type="checkbox" id="peanutbutterck" name="question3" value="peanutbutterck"> peanut butter <p id="peanutbutterckp"> </p> <br>
</div>
<div class="item">
<input type="checkbox" id="jellyck" name="question3" value="jellyck"> jelly <p id="jellyckp"></p><br>
</div>
<div>
<input type="checkbox" id="toothpasteck" name="question3" value="toothpasteck"> toothpaste <p id="toothpasteckp"></p><br>
</div>
<br>
<input id="button1" type="button" name="submit" value="check quiz">
<br>
</form>
</main>
<footer>
</footer>
</body>
</html>
<script>
var submit = document.getElementById("button1");
submit.addEventListener("click", 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") {
document.getElementById("cheeserd").innerHTML = "correct";
correct++;
} else {
document.getElementById("cheeserd").innerHTML = "incorrect";
/*alert("incorrect");*/
incorrect++;
}
if (question2 == "jellyrd") {
document.getElementById("jellyrd").innerHTML = "correct";correct++;
document.getElementById("cheeserd").innerHTML = "incorrect";
document.getElementById("baconrd").innerHTML = "incorrect";
} else {
document.getElementById("jellyrd").innerHTML = "incorrect";
document.getElementById("cheeserd").innerHTML = "incorrect";
document.getElementById("baconrd").innerHTML = "incorrect";incorrect++;
incorrect++;
}
/*
if (question3 == "breadck" || "jellyck" || "peanutbutterck") {
*/
if(document.getElementById("breadck").checked){
document.getElementById("breadckp").innerHTML = "correct";correct++
}else{
document.getElementById("breadckp").innerHTML = "incorrect";
incorrect++;
}
if(document.getElementById("jellyck").checked){
document.getElementById("jellyckp").innerHTML = "correct";correct++
}
else{
document.getElementById("jellyckp").innerHTML = "incorrect";
incorrect++;
}
if(document.getElementById("peanutbutterck").checked){
document.getElementById("peanutbutterckp").innerHTML = "correct";correct++
}
else{
document.getElementById("peanutbutterckp").innerHTML = "incorrect";
incorrect++;
}
/*
}
*/
}
</script>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.