Requirements
For quiz must meet the following requirements:
Extra Challenges
Consider the follow additions for a snazzier quiz:
HTML CODE
Control Examples
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
Control Examples
What is your favorite color?
Blue
Red
What is your favorite flavors?
Vanilla
Chocolate
Kiwi
Results
<br />
JAVA CODE
$(function() {
var attemptCount;
attemptCount = 0;
$("#checkButton").click(function() {
var count;
count = 0;
attemptCount = attemptCount + 1;
// clear results box
// document.getElementById("results").value = "";
$("#results").val("");
// check if Blue is checked
if ($('#blueItem').prop("checked")) {
count = count + 1;
$('#results').val(
$('#results').val() + "Blue is checked" + "\n"
);
}
else {
count = count - 10;
}
// check if Kiwi is selected
if ($('#kiwiItem').prop("checked")) {
count = count + 1;
}
if ($('#ElevenItem').prop("checked")) {
count = count + 1;
}
$('#results').val(
$('#results').val() + "You got " + count + " correct." + "\n"
);
$('#results').val(
$('#results').val() + "Number of attempts: " + attemptCount +
"\n"
);
});
});
Here is code:
<!DOCTYPE html>
<html>
<head>
<title>Do you know?</title>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script>
function findAnswer(question,answer,choice) {
if(choice === answer){
$("input[name='"+question+"']").not("input[value='"+ answer +"']").parent().hide();
$("input[value='"+ answer +"']").parent().css("color","green");
return 10;
}else{
$("input[name='"+question+"']").not("input[value='"+answer+"']").parent().hide();
$("input[value='"+ answer +"']").parent().css("color","red");
return -5;
}
}
function checkQuiz(){
var totalScore = 0; //default the score to zero points
var answer1 =$("input[name='question1']:checked").val()
var answer2 =$("input[name='question2']:checked").val()
var answer3 =$("input[name='question3']:checked").val()
var answer4 =$("input[name='question4']:checked").val()
var answer5 =$("input[name='question5']:checked").val()
if(answer1 == null || answer2 == null || answer3 == null|| answer4 == null|| answer5 == null){
alert("Please select the answers")
return;
}else{
//Award points based on which answer is true
totalScore += findAnswer("question1","Ireland",answer1);
totalScore += findAnswer("question2","November",answer2);
totalScore += findAnswer("question3","12",answer3);
totalScore += findAnswer("question4","Blue",answer4);
totalScore += findAnswer("question5","Kiwi",answer5);
//Output the score to the user
document.getElementById("score").innerHTML = "Your total score is " + totalScore;
}
}
var hint = [
"Dublin is capital of it",
"Its 10th month",
"Its a sequence number ",
"Color of sky",
"Its a bird name also",
]
function giveHint(id) {
$("#spHint" + id).text(hint[id]);
}
</script>
</head>
<body>
<p>
Dublin is the capital of which country? <br>
<div> <input type="radio" name="question1" value="Iceland" id="q1_1"> Iceland </div>
<div> <input type="radio" name="question1" value="United Kingdom" id="q1_2"> United Kingdom </div>
<div> <input type="radio" name="question1" value="France" id="q1_3"> France </div>
<div> <input type="radio" name="question1" value="Ireland" id="q1_4"> Ireland </div>
</p>
<div><button onclick="giveHint(0)">Hint</button>
<span id="spHint0"></span>
</div>
<p>
Halloween is in which month? <br>
<div><input type="radio" name="question2" value="September" id="q1_2"> September </div>
<div><input type="radio" name="question2" value="October" id="q1_3"> October </div>
<div><input type="radio" name="question2" value="November" id="q1_1"> November </div>
<div><input type="radio" name="question2" value="January" id="q1_4"> January </div>
</p>
<div><button onclick="giveHint(1)">Hint</button>
<span id="spHint1"></span>
</div>
<p>
What is the square root of 144? <br>
<div><input type="radio" name="question3" value="14" id="q1_2"> 14 </div>
<div><input type="radio" name="question3" value="12" id="q1_1"> 12 </div>
<div><input type="radio" name="question3" value="11" id="q1_3"> 11 </div>
<div><input type="radio" name="question3" value="4" id="q1_4"> 4 </div>
</p>
<div><button onclick="giveHint(2)">Hint</button>
<span id="spHint2"></span>
</div>
<p>
What is your favorite color? <br>
<div> <input type="radio" name="question4" value="Blue" id="q1_1"> Blue </div>
<div> <input type="radio" name="question4" value="Red" id="q1_2"> Red </div>
</p>
<div><button onclick="giveHint(3)">Hint</button>
<span id="spHint3"></span>
</div>
<p>
What is your favorite flavors? <br>
<div> <input type="radio" name="question5" value="Vanilla" id="q2_1"> Vanilla </div>
<div> <input type="radio" name="question5" value="Chocolate" id="q2_2"> Chocolate </div>
<div> <input type="radio" name="question5" value="Kiwi" id="q2_3"> Kiwi </div>
</p>
<div><button onclick="giveHint(4)">Hint</button>
<span id="spHint4"></span>
</div>
<p>
<input type="submit" value="Check Answers" OnClick="checkQuiz()">
</p>
<h1 id="score">Ready to Play?</h1>
</body>
</html>
Output:


Requirements For quiz must meet the following requirements: At least 5 questions, such as with radio...