I have create a simple web-based quiz. Using HTML, CSS, JavaScript, and jQuery.
ID: 659753 • Letter: I
Question
I have create a simple web-based quiz. Using HTML, CSS, JavaScript, and jQuery. I am having trouble trying to get the questions marked correct independently and the background changes color. I have it so it does it when all the questions are answered correctly, but trying to get it to do it for each one. Here is what I have for my code so far
if(jQuery){
var checkAnswers = function(){
var answerString = "";
var answers = $(":checked");
answers.each(function(i){
answerString = answerString + answers[i].value;
});
$(":checked").each(function(i){
var answerString = answerString + answers[i].value;
});
checkIfCorrect(answerString);
};
var checkIfCorrect = function(theString){
if(parseInt(theString, 16) === 811124566973){
$("body").addClass("correct");
$("h1").text("You Win!");
$("canvas").show();
}
};
$("#question1").show();
};
if(impress){
$("#question2").show();
};
if(atom){
$("#question3").show();
};
if(createjs){
$("#question4").show();
};
if(me){
$("#question5").show();
};
if(require){
$("#question6").show();
};
if($().playground){
$("#question7").show();
};
if(jaws){
$("#question8").show();
};
if(enchant){
$("#question9").show();
};
if(Crafty){
$("#question10").show();
};
Explanation / Answer
HTML CODE:
<!-- <!DOCTYPE html> -->
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Quiz</h1>
<div id="Quiz">
<div id="question1">
<div class="question">Which is not a main file type that we use to make websites?</div>
<input type="radio" name="question1" value="a"/>
<label>.html</label>
<input type="radio" name="question1" value="b"/>
<label>.exe</label>
<input type="radio" name="question1" value="c"/>
<label>.js</label>
<input type="radio" name="question1" value="d"/>
<label>.css</label>
</div>
<br />
<div id="question2">
<div class="question">A JavaScript object is wrapped by what charaters?</div>
<input type="radio" name="question2" value="a"/>
<label>[]</label>
<input type="radio" name="question2" value="b"/>
<label>;;</label>
<input type="radio" name="question2" value="c"/>
<label>{}</label>
<input type="radio" name="question2" value="d"/>
<label>()</label>
</div>
<br />
<div id="question3">
<div class="question">Moles are which of the following?</div>
<input type="radio" name="question3" value="a"/>
<label>Omniverous</label>
<input type="radio" name="question3" value="b"/>
<label>Adorable</label>
<input type="radio" name="question3" value="c"/>
<label>Whackable</label>
<input type="radio" name="question3" value="d"/>
<label>All of the above</label>
</div>
<br />
<div id="question4">
<div class="question">In Japanese "?" is prounounced...</div>
<input type="radio" name="question4" value="a"/>
<label>ka</label>
<input type="radio" name="question4" value="b"/>
<label>ko</label>
<input type="radio" name="question4" value="c"/>
<label>ke</label>
<input type="radio" name="question4" value="d"/>
<label>ki</label>
</div>
<br />
<div id="question5">
<div class="question">The gravitational constant on earth is approximately...</div>
<input type="radio" name="question5" value="a"/>
<label>10m/s^2</label>
<input type="radio" name="question5" value="b"/>
<label>.809m/s^2</label>
<input type="radio" name="question5" value="c"/>
<label>9.81m/s^2</label>
<input type="radio" name="question5" value="d"/>
<label>84.4m/s^2</label>
</div>
<br />
<div id="question6">
<div class="question">45 (in base 10) is what in binary (base 2)?</div>
<input type="radio" name="question6" value="a"/>
<label>101101</label>
<input type="radio" name="question6" value="b"/>
<label>110011</label>
<input type="radio" name="question6" value="c"/>
<label>011101</label>
<input type="radio" name="question6" value="d"/>
<label>101011</label>
</div>
<br />
<div id="question7">
<div class="question">4 << 2 = ...</div>
<input type="radio" name="question7" value="a"/>
<label>16</label>
<input type="radio" name="question7" value="b"/>
<label>4</label>
<input type="radio" name="question7" value="c"/>
<label>2</label>
<input type="radio" name="question7" value="d"/>
<label>8</label>
</div>
<br />
<div id="question8">
<div class="question">Given the lengths of two sides of a right triangle (one with a 90 degree angle), how would you find the hypotenuse?</div>
<input type="radio" name="question8" value="a"/>
<label>Pi*Radius^2</label>
<input type="radio" name="question8" value="b"/>
<label>Pythagorean Theorem</label>
<input type="radio" name="question8" value="c"/>
<label>Calculator?</label>
<input type="radio" name="question8" value="d"/>
<label>Sin(side1 + side2)</label>
</div>
<br />
<div id="question9">
<div class="question">True or False: All games must run at at least 60 frames per second to be any good.</div>
<input type="radio" name="question9" value="a"/>
<label>True</label>
<input type="radio" name="question9" value="b"/>
<label>False</label>
</div>
<br />
<div id="question10">
<div class="question">Using a server can help you to...</div>
<input type="radio" name="question10" value="a"/>
<label>hide your code.</label>
<input type="radio" name="question10" value="b"/>
<label>have a performant game.</label>
<input type="radio" name="question10" value="c"/>
<label>create shared experiences for players.</label>
<input type="radio" name="question10" value="d"/>
<label>all of the above.</label>
</div>
</div>
</body>
</html>
CSS CODE:
body{
margin-left:50px;
}
#question1, #question2, #question3, #question4, #question5, #question6, #question7, #question8, #question9, #question10{
display:all;
}
canvas{
display:none;
}
.correct{
background-color:#24399f;
color:white;
}
JAVASCRIPT:
//alert('Hello World');
//console.log('Hello World');
if (jQuery){
var checkAnswers = function(){
var answerString = "";
var answers = $(":checked");
answers.each(function(i) {
answerString = answerString + answers[i].value;
});
$(":checked").each(function(i){
var answerString = answerString + answers[i].value;
});
checkIfCorrect(answerString);
};
var checkIfCorrect = function(theString){
if (parseInt(theString, 16) === 811124566973){
$("body").addClass("correct");
$("h1").text("You Win!");
$("canvas").show();
}
};
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.