We Keep Coding

How can I highlight correct and incorrect answers to an online quiz?

I am creating a simple quiz about country capitals and would like to have the website highlight the correct answers (in green) for each question after the user hits the submit button as well as highlight any incorrect answers chosen (in red). I have searched on this site under similar questions, but the answers provided confused me.
I would like to have the background colors activated along with the alert message that gives the percentage of correct answers. Currently, the alert works perfectly fine, but I would like assistance for the background colors.
function check() {
var q1 = document.quiz.q1.value;
var q2 = document.quiz.q2.value;
var q3 = document.quiz.q3.value;
var q4 = document.quiz.q4.value;
var q5 = document.quiz.q5.value;
var count = 0;
if (q1 == "c") {
count++;
}
if (q2 == "d") {
count++;
}
if (q3 == "c") {
count++;
}
if (q4 == "b") {
count++;
}
if (q5 == "d") {
count++;
}
var final = (count / 5) * 100
alert("Your got " + final + "% correct!");
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
color: rgb(0, 0, 0);
font-size: 100%;
font-weight: bold;
}
body {
text-align: left;
padding-left: 25px;
background-color: rgb(255, 253, 208);
}
h1 {
color: rgb(0, 0, 0);
}
.Correct {
background-color: lawngreen;
}
.Incorrect {
background-color: red;
}
<form id="quiz" name="quiz">
<p>What is the capital of the USA?</p>
<br>
<input type="radio" name="q1" value="a" class="Incorrect">Chicago <br>
<input type="radio" name="q1" value="b" class="Incorrect">Maimi<br>
<input type="radio" name="q1" value="c" class="Correct">Washington DC <br>
<input type="radio" name="q1" value="d" class="Incorrect">Vegas<br>
<br>
<p>What is the current capital of Brazil?</p>
<br>
<input type="radio" name="q2" value="a" class="Incorrect">Salvador
<br>
<input type="radio" name="q2" value="b" class="Incorrect">Rio de Janero <br>
<input type="radio" name="q2" value="c" class="Incorrect">Sao Paulo
<br>
<input type="radio" name="q2" value="d" class="Correct">Brasilia
<br>
<br>
<p>What is the capital of Japan?</p>
<br>
<input type="radio" name="q3" value="a" class="Incorrect">Osaka <br>
<input type="radio" name="q3" value="b" class="Incorrect">Kyoto <br>
<input type="radio" name="q3" value="c" class="Correct">Tokyo<br>
<input type="radio" name="q3" value="d" class="Incorrect">Sapporo<br> <br>
<p>What is the capital of Germany?</p>
<input type="radio" name="q4" value="a" class="Incorrect">Munich<br>
<input type="radio" name="q4" value="b" class="Correct">Berlin<br>
<input type="radio" name="q4" value="c" class="Incorrect">Cologne<br>
<input type="radio" name="q4" value="d" class="Incorrect">Hamburg<br>
<p>What is the capital of South Korea? </p>
<input type="radio" name="q5" value="a" class="Incorrect">Busan<br>
<input type="radio" name="q5" value="b" class="Incorrect">Incheon<br>
<input type="radio" name="q5" value="c" class="Incorrect">Jeju<br>
<input type="radio" name="q5" value="d" class="Correct">Seoul<br>
<br/>
<input type="button" value="submit" onclick="check()">
</form>

You're currently trying to style the input radio button (the clickable circle), but are expecting the text to be styled instead. Traditionally, you should have the text and input for each choice wrapped in a <label> tag. Then apply the css style to each label. I did the first one for you in your code below.
Also, add for="..." to each label, so that when the text is clicked, that corresponding input box is also selected. You will also need to add an id="..." to each input for this to work.
// js truncated, no changes
.Incorrect {
background-color: red;
}
// css truncated, no changes
<form id="quiz" name="quiz">
<p>What is the capital of the USA?</p>
<br>
<label for="q1a" class="Incorrect">
<input type="radio" name="q1" id="q1a" value="a">
Chicago
</label> <br>
<input type="radio" name="q1" value="b" class="Incorrect">Maimi<br>
<input type="radio" name="q1" value="c" class="Correct">Washington DC <br>
<input type="radio" name="q1" value="d" class="Incorrect">Vegas<br>
<br>
<input type="button" value="submit" onclick="check()">
</form>

Additionally to chadiusvt Answer you can add some Lines like this:
This at the End of CSS Area(just next to your .Incorrect part):
.nocolor {
background-color: rgb(255, 253, 208);
}
This at the End of JS Area(after Alert, but inside of the function):
var elem = document.getElementsByClassName("nocolor");
while (elem.length)
elem[0].className = elem[0].className.replace(/\bnocolor\b/g, "");
Now add the class 'nocolor' to all Label-Elements. Looks like this e.g.
<label class="Incorrect nocolor" ><input type="radio" name="q1" value="a">Chicago</label><br>
<label class="Incorrect nocolor" ><input type="radio" name="q1" value="b">Maimi</label><br>
<label class="Correct nocolor" ><input type="radio" name="q1" value="c">Washington D.C.</label><br>
This new class 'nocolor' will hide the backgroundcolors until you click the Button.
This need to be after .Correct and .Incorrect so it will overwrite the red/green Background temporary!
The three Lines of JS:
1. Line looks for all Elements with class 'nocolor'
2. Line goes through the Elements and
3. Line removes all of the nocolor-classes on each Element.
= the red/green Backgrounds will be visible again(after clicking the Button).

Adding values of checked radio boxes in javaScript?

I am new to javaScript and am confused on how I should get the total from the checked radio boxes. Also I am trying to add a submit button for the user, so that the total will only be revealed after they click submit. I feel as though I may not be parsing the values properly?
Appreciate the help
Thanks!
<html>
<head>
<script>
function calculateTotal() {
var score = 0;
q1 = new Array(1,2,3,4,5);
q2 = new Array(1,2,3,4,5);
q3 = new Array(1,2,3,4,5);
q4 = new Array(1,2,3,4,5);
q5 = new Array(1,2,3,4,5);
for (var i = 0; i < q1.length; i++ ) {
if(q1[i].checked){
score += parseFloat(q1[i].value);
}
for(var c = 0; c < q2.length; c++){
if(q2[i].checked){
score += parseFloat(q2[i].value);
}
for(var c = 0; c < q3.length; c++){
if(q3[i].checked){
score += parseFloat(q3[i].value);
}
for(var c = 0; c < q4.length; c++){
if(q4[i].checked){
score += parseFloat(q4[i].value);
}
for(var c = 0; c < q5.length; c++){
if(q5[i].checked){
score += parseFloat(q5[i].value);
}
}
}
}
}
}
}
</script>
</head>
<p class="question">1. Rate your family life?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to
energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<script>
alert("Your overall score is " + calculateTotal());
</script>

What you want to do is to get your checkboxes as arrays, not create some unrelated arrays yourself. That can be done using document.getElementsByName("q1");
function calculateTotal() {
var score = 0;
q1 = document.getElementsByName("q1");
q2 = document.getElementsByName("q2");
q3 = document.getElementsByName("q3");
q4 = document.getElementsByName("q4");
q5 = document.getElementsByName("q5");
for (var i = 0; i < q1.length; i++ ) {
if(q1[i].checked){
score += parseFloat(q1[i].value);
}
for(var c = 0; c < q2.length; c++){
if(q2[i].checked){
score += parseFloat(q2[i].value);
}
for(var c = 0; c < q3.length; c++){
if(q3[i].checked){
score += parseFloat(q3[i].value);
}
for(var c = 0; c < q4.length; c++){
if(q4[i].checked){
score += parseFloat(q4[i].value);
}
for(var c = 0; c < q5.length; c++){
if(q5[i].checked){
score += parseFloat(q5[i].value);
}
}
}
}
}
}
}
EDIT: Oh, and for the button to calculate the checked values by the user, you can do really easy something like:
<div onClick="calculateTotal();"> Calculate total </div>

You add a button, attach an event handler to that button, and calculate the total
document.getElementById('total').addEventListener('click', calculateTotal);
function calculateTotal() {
var els = document.querySelectorAll('input[type=radio][name^=q]:checked');
var val = [].map.call(els, function(el) {
return "abcde".split('').indexOf(el.value) + 1;
});
var tot = val.reduce(function(a, b) {
return a + b
});
alert(tot);
}
<p class="question">1. Rate your family life?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="e" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="e" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="e" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="e" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="a" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="b" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="c" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="d" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="d" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<button id="total">Total</button>

Here is a working example. You will want to change the value="" to the value you want to add. the document.getElementsByNames("").value will get this value. Also your for loops are all nested which you don't want to do.
You can add a button with an onclick method to call the method you want. since all the values have the same length you can get away with just one for loop. You also probably want to add a tag for your html body.
function calculateTotal() {
var score = 0;
q1 = document.getElementsByName("q1");
q2 = document.getElementsByName("q2");
q3 = document.getElementsByName("q3");
q4 = document.getElementsByName("q4");
q5 = document.getElementsByName("q5");
for (var i = 0; i < q1.length; i++) {
if (q1[i].checked) {
score += parseFloat(q1[i].value);
}
if (q2[i].checked) {
score += parseFloat(q2[i].value);
}
if (q3[i].checked) {
score += parseFloat(q3[i].value);
}
if (q4[i].checked) {
score += parseFloat(q4[i].value);
}
if (q5[i].checked) {
score += parseFloat(q5[i].value);
}
}
return score;
}
Here is what one of the radio buttons should look like.
1. Rate your family life?
<ul class="answers">
<input type="radio" name="q1" value="1" id="q1a"><label for="q1a">1</label>
<br/>
<input type="radio" name="q1" value="2" id="q1b"><label for="q1b">2</label>
<br/>
<input type="radio" name="q1" value="3" id="q1c"><label for="q1c">3</label>
<br/>
<input type="radio" name="q1" value="4" id="q1d"><label for="q1d">4</label>
<br/>
<input type="radio" name="q1" value="5" id="q1e"><label for="q1e">5</label>
<br/>
</ul>
<p class="question">2. Rate your romantic life?</p>
<ul class="answers">
<input type="radio" name="q2" value="1" id="q2a"><label for="q2a">1</label>
<br/>
<input type="radio" name="q2" value="2" id="q2b"><label for="q2b">2</label>
<br/>
<input type="radio" name="q2" value="3" id="q2c"><label for="q2c">3</label>
<br/>
<input type="radio" name="q2" value="4" id="q2d"><label for="q2d">4</label>
<br/>
<input type="radio" name="q2" value="5" id="q2e"><label for="q2e">5</label>
<br/>
</ul>
<p class="question">3. Rate your social life?</p>
<ul class="answers">
<input type="radio" name="q3" value="1" id="q3a"><label for="q3a">1</label>
<br/>
<input type="radio" name="q3" value="2" id="q3b"><label for="q3b">2</label>
<br/>
<input type="radio" name="q3" value="3" id="q3c"><label for="q3c">3</label>
<br/>
<input type="radio" name="q3" value="4" id="q3d"><label for="q3d">4</label>
<br/>
<input type="radio" name="q3" value="5" id="q3e"><label for="q3e">5</label>
<br/>
</ul>
<p class="question">4. Rate your career/academic life?</p>
<ul class="answers">
<input type="radio" name="q4" value="1" id="q4a"><label for="q4a">1</label>
<br/>
<input type="radio" name="q4" value="2" id="q4b"><label for="q4b">2</label>
<br/>
<input type="radio" name="q4" value="3" id="q4c"><label for="q4c">3</label>
<br/>
<input type="radio" name="q4" value="4" id="q4d"><label for="q4d">4</label>
<br/>
<input type="radio" name="q4" value="5" id="q4e"><label for="q4e">5</label>
<br/>
</ul>
<p class="question">5. Rate how you physically feel (e.g. lethargic 1 to energetic 5)?</p>
<ul class="answers">
<input type="radio" name="q5" value="1" id="q5a"><label for="q5a">1</label>
<br/>
<input type="radio" name="q5" value="2" id="q5b"><label for="q5b">2</label>
<br/>
<input type="radio" name="q5" value="3" id="q5c"><label for="q5c">3</label>
<br/>
<input type="radio" name="q5" value="4" id="q5d"><label for="q5d">4</label>
<br/>
<input type="radio" name="q5" value="5" id="q5e"><label for="q5e">5</label>
<br/>
</ul>
<button type="submit" onclick="alert(calculateTotal())">Submit</button>

The main reason your provided code didn't work was because you forgot to return the calculated score from your function:
function calculateScore() {
// your code...
return score;
}
You also need to make sure each of your loops is closed, with a curly brace, before starting the next one.
However, the most readable way to get the value of a group of radio boxes is to use a form element like so:
function calculateScore() {
var formElement = document.getElementById("the-form"),
score = 0;
score += parseInt(formElement.q1.value);
score += parseInt(formElement.q2.value);
return score;
}
function displayScore() {
document.getElementById("the-score").innerText = calculateScore();
}
<form id="the-form">
<input type="radio" name="q1" value=1 id="q1-a1"><label for="q1-a1">1</label>
<input type="radio" name="q1" value=2 id="q1-a2"><label for="q1-a2">2</label>
<input type="radio" name="q1" value=3 id="q1-a3"><label for="q1-a3">3</label>
<input type="radio" name="q1" value=4 id="q1-a4"><label for="q1-a4">4</label>
<input type="radio" name="q1" value=5 id="q1-a5"><label for="q1-a5">5</label>
<br>
<br>
<input type="radio" name="q2" value=1 id="q2-a1"><label for="q2-a1">1</label>
<input type="radio" name="q2" value=2 id="q2-a2"><label for="q2-a2">2</label>
<input type="radio" name="q2" value=3 id="q2-a3"><label for="q2-a3">3</label>
<input type="radio" name="q2" value=4 id="q2-a4"><label for="q2-a4">4</label>
<input type="radio" name="q2" value=5 id="q2-a5"><label for="q2-a5">5</label>
</form>
<button onclick="displayScore()">Calculate Score</button>
<br>
<output id="the-score"></output>
The form element contains properties named after the name tags of each of the inputs within the form and their values can be accessed with the value property.
By changing the values from a..e to 1..5 the code can be simpler.

Select radio button and display correct

I am a bit new to JS and HTML5. I am creating a simple quiz, just for the heck of it. I know need to make it possible for each question to be marked "correct" independently of the others. How can I do that through JS, or even CSS/HTML5? I have a feeling I need to change the jquery file, but I am a little stuck on how to do it. The quiz works perfect, just the way I want, but as a user selects an answer, I'd like to display correct or wrong. Thank you!
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!");
}
};
$("#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();
};
body {
margin-left: 50px;
}
#question1,
#question2,
#question3,
#question4,
#question5,
#question6,
#question7,
#question8,
#question9,
#question10 {
display: none;
}
canvas {
display: none;
}
.correct {
background-color: #24399f;
color: white;
}
#question1 {
background-color: #EBF5D1;
}
#question2 {
background-color: #E0F0D4;
}
#question3 {
background-color: #D6EBD6;
}
#question4 {
background-color: #CCE6D9;
}
#question5 {
background-color: #C2E0DB;
}
#question6 {
background-color: #B8DBDE;
}
#question7 {
background-color: #ADD6E0;
}
#question8 {
background-color: #A3D1E3;
}
#question9 {
background-color: #99CCE6;
}
#question10 {
background-color: #8FC7E8;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body onclick="checkAnswers();">
<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>
<script src="jquery.js"></script>
<script src="impress.js"></script>
<!-- atom needs this to run -->
<canvas></canvas>
<script src="atom.js"></script>
<script src="easel.js"></script>
<script src="melon.js"></script>
<script src="yabble.js"></script>
<script src="jquery.gamequery.js"></script>
<script src="jaws.js"></script>
<script src="enchant.js"></script>
<script src="crafty.js"></script>
<script src="game.js"></script>
</body>
</html>

I don't know if I understand well but did you try it with onChange event? At first I recommend to create JSON file with your correct answers, and after every checkbox must be answer element. Something like this:
jQuery('your-form your-input').on('change', function(e) {
e.preventDefault();
var actualAnswer = (jQuery(this).val() == 'your-correct-answer-in-json') ? 'Correct' : 'Incorrect';
/* add actualAnswer to element, for example with parent and find answer element to actual input */
});

Add a button in HTML

I want to make a questionnaire that asks questions then has a button at the end of the page called "display answers" which will show the user which answers they got correct.
If I were to use this question for example:
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>
How would I go about creating a button for this code that when pressed, tells if the answer is correct or not?

<p class="question">1. What is the answer to this question?</p>
<ul id="answers" class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
<input type="button" value="submit" onClick="showAnswer()" />
</ul>
<span id="info"></span>
Then add a script above that piece of code:
<script>
function showAnswer(){
if(document.getElementById('q1a').checked){
document.getElementById('info').innerHTML = "Correct!";
}else{
document.getElementById('info').innerHTML = "Incorrect!";
}
}
</script>
I don't know the answer to your quiz, so answer 1 is correct in this case.

Two .addEventListeners()
One on the container that holds all of the questions and answers (e.g. #QA1)
The other on the button used when finished with the quiz (e.g. #btn1)
When the user picks an answer, #QA1 will listen for any clicks on any radio button (e.g. .answers). Using a single event listener for multiple event.targets (i.e. the element clicked) is far more efficient than adding one on each radio button. Through comparing what was actually clicked (radio button) and what was the element with the listener, we'll can get the radio button's id. See this article for details.
Once the id of the clicked radio button is determined (see previous reference), it's pushed to an array (e.g. answers[]).
When the user is done, he/she clicks the "DONE" button, triggering the click event of #btn1.
A for loop is used to iterate over the answer[] and key[] arrays. On each iteration (i.e.loop,) the two are compared for matching elements.
The results are printed on #out1 which is an <output> element nested in an ordered list (<ol>).
Snippet
var qa = document.getElementById('QA1');
var btn1 = document.getElementById('btn1');
var answers = [];
var key = ['q1c', 'q2a', 'q3d'];
qa.addEventListener('click', function(event) {
if (event.target != event.currentTarget) {
var choice = event.target.id;
answers.push(choice);
}
event.stopPropagation();
}, false);
btn1.addEventListener('click', function(event) {
event.preventDefault();
var qList = document.getElementsByClassName('question');
var out1 = document.getElementById('out1');
for (var i = 0; i < qList.length; i++) {
if (answers[i] === key[i]) {
out1.innerHTML += '<li>' + answers[i] + ' is correct</li>';
} else {
out1.innerHTML += '<li>' + answers[i] + ' is incorrect, the correct answer is ' + key[i] + '</li>';
}
}
}, false);
body {
font: 400 16px/1.45'Verdana';
}
* {
font: inherit;
}
.question {
margin-bottom: 15px;
}
.answers {
list-style: none;
}
.answers li {
margin-left: -15px;
}
input[type="radio"] {
position: relative;
top: 2.25px;
}
#btn1 a {
text-decoration: none;
}
#out1 {
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<ol id="QA1" class="QA">
<li id="q1" class="question">What is the answer to this question?
<ol class="answers">
<li>a.
<input type="radio" name="q1" value="a" id="q1a" />
<label for="q1a">Answer</label>
</li>
<li>b.
<input type="radio" name="q1" value="b" id="q1b" />
<label for="q1b">Answer</label>
</li>
<li>c.
<input type="radio" name="q1" value="c" id="q1c" />
<label for="q1c">Answer</label>
</li>
<li>d.
<input type="radio" name="q1" value="d" id="q1d" />
<label for="q1d">Answer</label>
</li>
</ol>
<!--answers-->
</li>
<!--question-->
<li id="q2" class="question">What is the answer to this question?
<ol class="answers">
<li>a.
<input type="radio" name="q2" value="a" id="q2a" />
<label for="q2a">Answer</label>
</li>
<li>b.
<input type="radio" name="q2" value="b" id="q2b" />
<label for="q2b">Answer</label>
</li>
<li>c.
<input type="radio" name="q2" value="c" id="q2c" />
<label for="q2c">Answer</label>
</li>
<li>d.
<input type="radio" name="q2" value="d" id="q2d" />
<label for="q2d">Answer</label>
</li>
</ol>
<!--answers-->
</li>
<!--question-->
<li id="q3" class="question">What is the answer to this question?
<ol class="answers">
<li>a.
<input type="radio" name="q3" value="a" id="q3a" />
<label for="q3a">Answer</label>
</li>
<li>b.
<input type="radio" name="q3" value="b" id="q3b" />
<label for="q3b">Answer</label>
</li>
<li>c.
<input type="radio" name="q3" value="c" id="q3c" />
<label for="q3c">Answer</label>
</li>
<li>d.
<input type="radio" name="q3" value="d" id="q3d" />
<label for="q3d">Answer</label>
</li>
</ol>
<!--answers-->
</li>
<!--question-->
</ol>
<!--QA-->
<button id="btn1">DONE
</button>
<ol>
<output id="out1"></output>
</ol>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Questionare</title>
</head>
<body>
<p>1. What is the answer to this question?</p>
<ul onclick="man()">
<input type="radio" name="q1" value="a">Answer 1<br/> <input type="radio" name="q1" value="b">Answer 2<br/>
<input type="radio" name="q1" value="c">Answer 3<br/>
<input type="radio" name="q1" value="d">Answer 4<br/>
</ul>
<p id="m"></p>
<script>
var man = function(){
document.getElementById("m").innerHTML = 'The correct answer is: Answer 1';
}
</script>
</body>
</html>
Here is what u want, done in simplest way, using CSS Document object model, for reference go here HTML CSS DOM

How to highlight the content if same attribute values are equal using Javascript?

If the same attribute values are presenting in the html file, how can do find and highlight the content.
For e.g.:
<p>Quiz 1 </p>
<input class="radioclass" id="q1a" value="a" name="question[q1correct]" type="radio">1</input>
<input class="radioclass" id="q1b" value="b" name="question[q1correct]" type="radio">2</input>
<input class="radioclass" id="q1c" value="c" name="question[q1correct]" type="radio">3</input>
<input class="radioclass" id="q1d" value="d" name="question[q1correct]" type="radio">4</input>
<p>Quiz 2</p>
<input class="radioclass" id="q2a" value="a" name="question[q1correct]" type="radio">1</input>
<input class="radioclass" id="q2b" value="b" name="question[q1correct]" type="radio">2</input>
<input class="radioclass" id="q2c" value="c" name="question[q3correct]" type="radio">3</input>
<input class="radioclass" id="q2d" value="d" name="question[q1correct]" type="radio">4</input>
<p>Quiz 3</p>
<input class="radioclass" id="q2a" value="a" name="question[q3correct]" type="radio">1</input>
<input class="radioclass" id="q2b" value="b" name="question[q1correct]" type="radio">2</input>
<input class="radioclass" id="q2c" value="c" name="question[q3correct]" type="radio">3</input>
<input class="radioclass" id="q2d" value="d" name="question[q1correct]" type="radio">4</input>
In the above mentioned codes, few name values are the same. In this case, how to highlight with background color or any other way using Javascript or Jquery?
Could you please someone help me to solve this? It will be appreciate.

By using jquery, You can do it as follows:
$(":input").each(function({
var myName = $(this).attr("name");
if(myName == "question[q1correct]"){
$(this).css("background-color", "red");
}else if(myName == "question[q3correct]"){
$(this).css("background-color", "green");
}
});