Javascript quiz timer

Javascript quiz timer - javascript

Hi I am making a quiz using javascript but am struggling to put in a functioning countdown timer. This may be a simple question but how can I make it so that once the timer reaches zero it'll submit the quiz and tell the user times up? I have tried a few different ways but to no avail. Any help is appreciated.
My code for the countdown timer:
<script>
var total_seconds = 30*1;
var c_minutes = parseInt(total_seconds/60);
var c_seconds = parseInt(total_seconds%60);
function CheckTime(){
document.getElementById("quiz-time-left").innerHTML
= 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ' ;
if(total_seconds <=0){
setTimeout('document.quiz.submit()',1);
} else {
total_seconds = total_seconds -1;
c_minutes = parseInt(total_seconds/60);
c_seconds = parseInt(total_seconds%60);
setTimeout("CheckTime()",1000);
}}
setTimeout("CheckTime()",1000);
</script>
My code for the quiz:
<form name="form" onsubmit="return score()">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q1" value="a">a. 1<br>
<input type="radio" name="q1" value="b">b. 2<br>
<input type="radio" name="q1" value="c">c. 3<br>
<input type="radio" name="q1" value="d">d. 4<br>
<form name="form" onsubmit="return score()">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q2" value="a">a. 1<br>
<input type="radio" name="q2" value="b">b. 2<br>
<input type="radio" name="q2" value="c">c. 3<br>
<input type="radio" name="q2" value="d">d. 4<br>
<form name="form" onsubmit="return score()">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q3" value="a">a. 1<br>
<input type="radio" name="q3" value="b">b. 2<br>
<input type="radio" name="q3" value="c">c. 3<br>
<input type="radio" name="q3" value="d">d. 4<br>
<br>
<input type="submit" id="sendA" value="Submit">
<br>
<p id="p"></p>
</form>
</html>
<script>
function score()
{
//Referencing the value of the questions
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
//Array for the questions
var questions = [q1, q2, q3];
//Answers for each question
var answers = ["b", "b", "b"];
//variable to keep track of the points
var points = 0;
var total = 3;
//max score
//Making use of a for loop to iterate over the questions and answers arrays
for (var i = 0; i < total; i++)
{
if (questions[i] == answers[i]) {
points = points + 1; //Increment the score by 2 for every correct answer given
}
}
//CSS for questions
var q = document.getElementById("p");
q.style.fontSize = "40px";
q.style.textAlign = "center";
q.innerHTML = "You got " + points + " out of " + total;
return false;
}
</script>

Your html were divided into several forms, you only need one. You were missing the quiz time left div in your example so i added it to the top.
As a little extra touch i disabled the input when the timer runs out.
var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;
function CheckTime() {
document.getElementById("quiz-time-left").innerHTML = 'Time Left: ' + c_minutes + ' minutes ' + c_seconds + ' seconds ';
if (total_seconds <= 0) {
score();
} else {
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds / 60);
c_seconds = parseInt(total_seconds % 60);
timer = setTimeout(CheckTime, 1000);
}
}
timer = setTimeout(CheckTime, 1000);
function score() {
// stop timer
clearInterval(timer);
//Referencing the value of the questions
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
// disable form
var elements = document.getElementById("questions").elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
//Array for the questions
var questions = [q1, q2, q3];
//Answers for each question
var answers = ["b", "b", "b"];
//variable to keep track of the points
var points = 0;
var total = 3;
//max score
//Making use of a for loop to iterate over the questions and answers arrays
for (var i = 0; i < total; i++) {
if (questions[i] == answers[i]) {
points = points + 1; //Increment the score by 2 for every correct answer given
}
}
//CSS for questions
var q = document.getElementById("p");
q.style.fontSize = "40px";
q.style.textAlign = "center";
q.innerHTML = "You got " + points + " out of " + total +
"<br />" +
"you used " + (29 - Math.floor(total_seconds)) + " seconds";
return false;
}
<div id="quiz-time-left">
</div>
<form name="form" id="questions" onsubmit="return score()">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q1" value="a">a. 1<br>
<input type="radio" name="q1" value="b">b. 2<br>
<input type="radio" name="q1" value="c">c. 3<br>
<input type="radio" name="q1" value="d">d. 4<br>
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q2" value="a">a. 1<br>
<input type="radio" name="q2" value="b">b. 2<br>
<input type="radio" name="q2" value="c">c. 3<br>
<input type="radio" name="q2" value="d">d. 4<br>
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q3" value="a">a. 1<br>
<input type="radio" name="q3" value="b">b. 2<br>
<input type="radio" name="q3" value="c">c. 3<br>
<input type="radio" name="q3" value="d">d. 4<br>
<br>
<input type="submit" id="sendA" value="Submit">
<br>
<p id="p"></p>
</form>

Related

JS function resets after completion

I have a small form designed to calculate a score based on the answers given. Everything works, the variables are shown in the variables and also shown in the html for a split second. However, after a split second, the function resets and the resulting var is also removed. In trying to understand, I think it has to do with the scope of the var or form behavior? Here is a snippet:
</head>
<body>
<form id="calculateChangeForm" name="calculateChangeForm">
<p><strong>1. To what extend does the change impact the organization?</strong></p>
<input id="q1a1" name="q1" type="radio" value="2"> <label for="q1a1">A specific department or a working group</label><br><input id="q1a2" name="q1" type="radio" value="6"> <label for="q1a2">One department </label><br><input id="q1a3" name="q1" type="radio" value="7"> <label for="q1a3">Several departments</label><br><input id="q1a4" name="q1" type="radio" value="8"> <label for="q1a4">Whole organization</label><br><input id="q1a5" name="q1" type="radio" value="8"> <label for="q1a5">Cross entities</label><br><input id="q1a6" name="q1" type="radio" value="9"> <label for="q1a6">Regional Impact</label><br><input id="q1a7" name="q1" type="radio" value="10"> <label for="q1a7">Group Impact</label><hr class="mb-5 mt-5">
<p><strong>2. How many employees are impacted? </strong></p>
<input id="q2a1" name="q2" type="radio" value="1"> <label for="q2a1"> < 10 </label><br><input id="q2a2" name="q2" type="radio" value="4"> <label for="q2a2">10 - 50 </label><br><input id="q2a3" name="q2" type="radio" value="7"> <label for="q2a3">51 - 100</label><br><input id="q2a4" name="q2" type="radio" value="8"> <label for="q2a4">101 - 200</label><br><input id="q2a5" name="q2" type="radio" value="9"> <label for="q2a5">201 - 500</label><br><input id="q2a6" name="q2" type="radio" value="10"> <label for="q2a6"> > 500 </label><br><br><button id="calculateChangeButton" class="button">Submit</button>
<script> document.getElementById("calculateChangeButton").onclick = function() {calculateChange();}; </script>
</form><hr class="mb-5 mt-5"></div>
<p>Your score is: <span id="changeScore"></span></p>
<script>
var changescore = 0;
function calculateChange(){
var val1 = 0;
for( i = 0; i < document.calculateChangeForm.q1.length; i++ ){
if( document.calculateChangeForm.q1[i].checked == true ){
val1 = document.calculateChangeForm.q1[i].value;
alert("The value of Question 1 answer is: " + val1);
}
}
var val2 = 0;
for( i = 0; i < document.calculateChangeForm.q2.length; i++ ){
if( document.calculateChangeForm.q2[i].checked == true ){
val2 = document.calculateChangeForm.q2[i].value;
alert("The value of Question 2 answer is: " + val2);
}
}
var changescore = parseInt(val1) + parseInt(val2);
alert("The total score: " + changescore);
document.getElementById("changeScore").innerHTML = changescore;
}
</script>
</body>
Thank you,

After input from user t348575, it was clear that the button should be changed to a an input type="button" in order to stop the form from being submitted:

How to display/indicate the right and wrong answers at the end of javascript quiz

as the title suggests I need help with how to display the right and wrong answers at the end of my javascript quiz. I've tried various ways and none seem to work. I've tried highlighting, writing next to and displaying underneath the score however nothing I try seems to work. Any guidance is greatly appreciated thanks x
var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;
function CheckTime() {
document.getElementById("quiz-time-left").innerHTML =
"Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";
if (total_seconds <= 0) {
score();
} else {
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds / 60);
c_seconds = parseInt(total_seconds % 60);
timer = setTimeout(CheckTime, 1000);
}
}
timer = setTimeout(CheckTime, 1000);
function highlightAnswerWithClass(question, answer, className) {
var answers = document.forms.form[question];
for (var index = 0; index < answers.length; index++) {
if (answers[index].value === answer) {
answers[index].classList.add(className);
}
}
}
function score() {
// stop timer
clearInterval(timer);
//Referencing the value of the questions
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
var q4 = document.forms.form.q4.value;
var q5 = document.forms.form.q5.value;
var q6 = document.forms.form.q6.value;
// disable form
var elements = document.getElementById("questions").elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
//Array for the questions
var questions = [q1, q2, q3, q4, q5, q6];
//Answers for each question
var answers = ["b", "b", "b", "b", "b", "b"];
//variable to keep track of the points
var points = 0;
var total = 6;
//max score
//Making use of a for loop to iterate over the questions and answers arrays
for (var i = 0; i < total; i++) {
if (questions[i] == answers[i]) {
points = points + 2; //Increment the score by 2 for every correct answer given
alert(points);
highlightAnswerWithClass(i + 2, questions[i], "correct");
} else {
points = points - 1;
alert(points);
highlightAnswerWithClass(i + 2, questions[i], "incorrect");
highlightAnswerWithClass(i + 2, answers[i], "correct");
}
}
//CSS for questions
if (points >= 4) {
document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
} else {
document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
}
var q = document.getElementById("p");
q.style.fontSize = "40px";
q.style.textAlign = "center";
q.innerHTML =
"You got " +
points +
" out of " +
total +
"<br />" +
"you used " +
(29 - Math.floor(total_seconds)) +
" seconds";
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body bgcolor="lightblue">
<div id="quiz-time-left"></div>
<form name="form" id="questions" onsubmit="return false;">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q1" value="a" />a. 1<br />
<input type="radio" name="q1" value="b" />b. 2<br />
<input type="radio" name="q1" value="c" />c. 3<br />
<input type="radio" name="q1" value="d" />d. 4<br />
<h3>2. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q2" value="a" />a. 1<br />
<input type="radio" name="q2" value="b" />b. 2<br />
<input type="radio" name="q2" value="c" />c. 3<br />
<input type="radio" name="q2" value="d" />d. 4<br />
<h3>3. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q3" value="a" />a. 1<br />
<input type="radio" name="q3" value="b" />b. 2<br />
<input type="radio" name="q3" value="c" />c. 3<br />
<input type="radio" name="q3" value="d" />d. 4<br />
<h3>4. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q4" value="a" />a. 1<br />
<input type="radio" name="q4" value="b" />b. 2<br />
<input type="radio" name="q4" value="c" />c. 3<br />
<input type="radio" name="q4" value="d" />d. 4<br />
<h3>5. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q5" value="a" />a. 1<br />
<input type="radio" name="q5" value="b" />b. 2<br />
<input type="radio" name="q5" value="c" />c. 3<br />
<input type="radio" name="q5" value="d" />d. 4<br />
<h3>6. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q6" value="a" />a. 1<br />
<input type="radio" name="q6" value="b" />b. 2<br />
<input type="radio" name="q6" value="c" />c. 3<br />
<input type="radio" name="q6" value="d" />d. 4<br />
<br />
<input type="submit" id="sendA" value="Submit" onclick="score();" />
<br />
<p id="p"></p>
</form>
</body>
</html>

You should wrap value to label value, and use nextSiblingto set color for label.
I updated for high light all correct answer.
answers[index].nextSibling.style.backgroundColor = "red";
var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;
function CheckTime() {
document.getElementById("quiz-time-left").innerHTML =
"Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";
if (total_seconds <= 0) {
score();
} else {
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds / 60);
c_seconds = parseInt(total_seconds % 60);
timer = setTimeout(CheckTime, 1000);
}
}
timer = setTimeout(CheckTime, 1000);
function highlightAnswerWithClass(question, answer, className) {
var answers = document.forms.form['q'+question];
if(answers == undefined) return;
for (var index = 0; index < answers.length; index++) {
if (answers[index] != null && answers[index].value === answer) {
answers[index].classList.add(className);
if(answers[index].nextSibling.style != undefined) answers[index].nextSibling.style.backgroundColor = "red";
}
}
}
function score() {
// stop timer
clearInterval(timer);
//Referencing the value of the questions
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
var q4 = document.forms.form.q4.value;
var q5 = document.forms.form.q5.value;
var q6 = document.forms.form.q6.value;
// disable form
var elements = document.getElementById("questions").elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
//Array for the questions
var questions = [q1, q2, q3, q4, q5, q6];
//Answers for each question
var answers = ["b", "b", "b", "b", "b", "b"];
//variable to keep track of the points
var points = 0;
var total = 6;
//max score
//Making use of a for loop to iterate over the questions and answers arrays
for (var i = 0; i < total; i++) {
if (questions[i] == answers[i]) {
points = points + 2; //Increment the score by 2 for every correct answer given
//alert(points);
highlightAnswerWithClass(i + 1, questions[i], "correct");
} else {
points = points - 1;
//alert(points);
highlightAnswerWithClass(i + 1, questions[i], "incorrect");
highlightAnswerWithClass(i + 1, answers[i], "correct");
}
}
//CSS for questions
if (points >= 4) {
document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
} else {
document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
}
var q = document.getElementById("p");
q.style.fontSize = "40px";
q.style.textAlign = "center";
q.innerHTML =
"You got " +
points +
" out of " +
total +
"<br />" +
"you used " +
(29 - Math.floor(total_seconds)) +
" seconds";
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.correct{
border: 1px solid red;
background-color:red;
}
</style>
</head>
<body bgcolor="lightblue">
<div id="quiz-time-left"></div>
<form name="form" id="questions" onsubmit="return false;">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q1" value="a" />a. 1<br />
<input type="radio" name="q1" value="b" /><label>b. 2</label><br />
<input type="radio" name="q1" value="c" />c. 3<br />
<input type="radio" name="q1" value="d" />d. 4<br />
<h3>2. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q2" value="a" />a. 1<br />
<input type="radio" name="q2" value="b" /><label>b. 2</label><br />
<input type="radio" name="q2" value="c" />c. 3<br />
<input type="radio" name="q2" value="d" />d. 4<br />
<h3>3. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q3" value="a" />a. 1<br />
<input type="radio" name="q3" value="b" /><label>b. 2</label><br />
<input type="radio" name="q3" value="c" />c. 3<br />
<input type="radio" name="q3" value="d" />d. 4<br />
<h3>4. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q4" value="a" />a. 1<br />
<input type="radio" name="q4" value="b" /><label>b. 2</label><br />
<input type="radio" name="q4" value="c" />c. 3<br />
<input type="radio" name="q4" value="d" />d. 4<br />
<h3>5. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q5" value="a" />a. 1<br />
<input type="radio" name="q5" value="b" /><label>b. 2</label><br />
<input type="radio" name="q5" value="c" />c. 3<br />
<input type="radio" name="q5" value="d" />d. 4<br />
<h3>6. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q6" value="a" />a. 1<br />
<input type="radio" name="q6" value="b" /><label>b. 2</label><br />
<input type="radio" name="q6" value="c" />c. 3<br />
<input type="radio" name="q6" value="d" />d. 4<br />
<br />
<input type="submit" id="sendA" value="Submit" onclick="score();" />
<br />
<p id="p"></p>
</form>
</body>
</html>

Ok, so I ran the snippet and here is the error in the console:
Error: {
"message": "Uncaught ReferenceError: Invalid left-hand side expression in prefix operation",
"filename": "https://stacksnippets.net/js",
"lineno": 132,
"colno": 25
}
The error was in line 132 and column 25.
So I think you should check your code before asking stack overflow and you shouldn't just paste your entire code here. Take out the part you think has a problem and then ask us.
Here I took out the code I believe has an error.
Good Luck!
if (points >= 4) {
document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
} else {
document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
}

Your indexing in answers in highlightAnswerWithClass is not correct. answers is an array of all the inputs in the form, it's not grouped by question. Since there are 4 possible answers to each question, the indexes of the answers for a particular question are question*4 through question*4+3.
I'm not sure why you were adding 2 to the question number when calling that function.
I changed your HTML to put a span around the text of each answer. Then I use CSS to change the background of the color.
var total_seconds = 30 * 1;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
var timer;
function CheckTime() {
document.getElementById("quiz-time-left").innerHTML =
"Time Left: " + c_minutes + " minutes " + c_seconds + " seconds ";
if (total_seconds <= 0) {
score();
} else {
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds / 60);
c_seconds = parseInt(total_seconds % 60);
timer = setTimeout(CheckTime, 1000);
}
}
timer = setTimeout(CheckTime, 1000);
function highlightAnswerWithClass(question, answer, className) {
var answers = document.forms.form;
for (var index = question*4; index < question*4 + 4; index++) {
if (answers[index].value === answer) {
answers[index].classList.add(className);
}
}
}
function score() {
// stop timer
clearInterval(timer);
//Referencing the value of the questions
var q1 = document.forms.form.q1.value;
var q2 = document.forms.form.q2.value;
var q3 = document.forms.form.q3.value;
var q4 = document.forms.form.q4.value;
var q5 = document.forms.form.q5.value;
var q6 = document.forms.form.q6.value;
// disable form
var elements = document.getElementById("questions").elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
}
//Array for the questions
var questions = [q1, q2, q3, q4, q5, q6];
//Answers for each question
var answers = ["b", "b", "b", "b", "b", "b"];
//variable to keep track of the points
var points = 0;
var total = 6;
//max score
//Making use of a for loop to iterate over the questions and answers arrays
for (var i = 0; i < total; i++) {
if (questions[i] == answers[i]) {
points = points + 2; //Increment the score by 2 for every correct answer given
highlightAnswerWithClass(i, questions[i], "correct");
} else {
points = points - 1;
highlightAnswerWithClass(i, questions[i], "incorrect");
highlightAnswerWithClass(i, answers[i], "correct");
}
}
//CSS for questions
if (points >= 4) {
document.body.style.backgroundColor = "rgba(0,255,0,0.2)";
} else {
document.body.style.backgroundColor = "rgba(255,0,0,0.1)";
}
var q = document.getElementById("p");
q.style.fontSize = "40px";
q.style.textAlign = "center";
q.innerHTML =
"You got " +
points +
" out of " +
total +
"<br />" +
"you used " +
(29 - Math.floor(total_seconds)) +
" seconds";
return false;
}
.correct + span {
background-color: green;
}
.incorrect + span {
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body bgcolor="lightblue">
<div id="quiz-time-left"></div>
<form name="form" id="questions" onsubmit="return false;">
<h3>1. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q1" value="a" /><span>a. 1</span><br />
<input type="radio" name="q1" value="b" /><span>b. 2</span><br />
<input type="radio" name="q1" value="c" /><span>c. 3</span><br />
<input type="radio" name="q1" value="d" /><span>d. 4</span><br />
<h3>2. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q2" value="a" /><span>a. 1</span><br />
<input type="radio" name="q2" value="b" /><span>b. 2</span><br />
<input type="radio" name="q2" value="c" /><span>c. 3</span><br />
<input type="radio" name="q2" value="d" /><span>d. 4</span><br />
<h3>3. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q3" value="a" /><span>a. 1</span><br />
<input type="radio" name="q3" value="b" /><span>b. 2</span><br />
<input type="radio" name="q3" value="c" /><span>c. 3</span><br />
<input type="radio" name="q3" value="d" /><span>d. 4</span><br />
<h3>4. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q4" value="a" /><span>a. 1</span><br />
<input type="radio" name="q4" value="b" /><span>b. 2</span><br />
<input type="radio" name="q4" value="c" /><span>c. 3</span><br />
<input type="radio" name="q4" value="d" /><span>d. 4</span><br />
<h3>5. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q5" value="a" /><span>a. 1</span><br />
<input type="radio" name="q5" value="b" /><span>b. 2</span><br />
<input type="radio" name="q5" value="c" /><span>c. 3</span><br />
<input type="radio" name="q5" value="d" /><span>d. 4</span><br />
<h3>6. How many yellow cards equal a red card in football?</h3>
<input type="radio" name="q6" value="a" /><span>a. 1</span><br />
<input type="radio" name="q6" value="b" /><span>b. 2</span><br />
<input type="radio" name="q6" value="c" /><span>c. 3</span><br />
<input type="radio" name="q6" value="d" /><span>d. 4</span><br />
<span> </span><br />
<input type="submit" id="sendA" value="Submit" onclick="score();" />
<br />
<p id="p"></p>
</form>
</body>
</html>

change label text of all radio button in quiz as red and green

Below is the code of a sample radio button quiz where multiple radio buttons are provided. Correct answers and wrong answers are defined in the code. User may check any answer or keep all blank. If user checks any radio button and finally clicks "Grade Me" button, label text of radio button of any wrong answers checked by the user shall appear as red and at the same time correct answer of that particular question shall appear in green (This will help the user know which question he answered wrong and what is its correct answer). I have tried several steps and searched many forums and failed. I think it will be really simple.
Example:
var numQues = 3;
var numChoi = 3;
var answers = new Array(3);
answers[0] = "doesn't like";
answers[1] = "don't come";
answers[2] = "come";
var wrong = new Array(3);
wrong[0] = "don't like";
wrong[1] = "doesn't come";
wrong[2] = "comes";
var wrong1 = new Array(3);
wrong1[0] = "doesn't likes";
wrong1[1] = "doesn't comes";
wrong1[2] = "coming";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i = 0; i < numQues; i++) {
currElt = i * numChoi;
answered = false;
for (j = 0; j < numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered = true;
if (currSelection.value == answers[i]) {
score += 3;
break;
}
if (currSelection.value == wrong[i]) {
score -= 1;
break;
}
if (currSelection.value == wrong1[i]) {
score -= 1;
break;
}
}
}
}
var scoreper = Math.round(score * 100 / 9);
form.percentage.value = scoreper + "%";
form.mark.value = score;
}
<title>Quiz Questions And Answers</title>
<center>
<h1>Quiz Questions</h1>
</center>
<p>
<form name="quiz">
<p>
<b><br>1. He -------------------- it.<br></b>
<label><input type="radio" name="q1" value="don't like">don't like</label><br>
<label><input type="radio" name="q1" value="doesn't like">doesn't like</label><br>
<label><input type="radio" name="q1" value="doesn't likes">doesn't likes</label><br>
<p><b>
<hr>
<br>2. They -------------------- here very often.<br></b>
<label><input type="radio" name="q2" value="don't come">don't come</label><br>
<label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br>
<label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label><br>
<p><b>
<hr>
<br>3. John and Mary -------------------- twice a week.<br></b>
<label><input type="radio" name="q3" value="come">come</label><br>
<label><input type="radio" name="q3" value="comes">comes</label><br>
<label><input type="radio" name="q3" value="coming">coming</label>
<br>
<p><b>
<hr>
<p><b>
<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>
</form>
<p>
<form method="post" name="Form" onsubmit="" action="">
</form>

Here is a rewrite of your code.
I fixed the illegal HTML and used best practices with event listeners, querySelectors and CSS
Please study the code and see if you understand. I can add more comments if needed
var answers = ["doesn't like","don't come","come"];
var rads, quiz; // need to be set after load
window.addEventListener("load",function() { // when page loads
quiz = document.getElementById("quiz");
rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
document.getElementById("scoreButton").addEventListener("click",function(e) { // on click of scoreme
var score = 0;
for (var i=0;i<rads.length;i++) { // loop over all radios in the form
var rad = rads[i];
var idx = rad.name.substring(1)-1; //remove the q from the name - JS arrays start at 0
var checked = rad.checked;
var correct = rad.value==answers[idx];
if (correct) {
rad.closest("label").classList.toggle("correct");
if (checked) score +=3;
}
else if (checked) {
score--;
rad.closest("label").classList.toggle("error")
}
}
var scoreper = Math.round(score * 100 / rads.length);
document.querySelector("#percentage").innerHTML = scoreper + "%";
quiz.mark.value = score;
});
});
.correct {
color: green
}
.error {
color: red
}
<title>Quiz Questions And Answers</title>
<div class="header">
<h1>Quiz Questions</h1>
</div>
<form id="quiz">
<div class="questions">
<p>
<b>1. He -------------------- it.</b><br/>
<label><input type="radio" name="q1" value="don't like" />don't like</label><br/>
<label><input type="radio" name="q1" value="doesn't like" />doesn't like</label><br/>
<label><input type="radio" name="q1" value="doesn't likes" />doesn't likes</label>
</p>
<hr>
<p><b>2. They -------------------- here very often.</b><br/>
<label><input type="radio" name="q2" value="don't come">don't come</label><br/>
<label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br/>
<label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label>
</p>
<hr>
<p><b>3. John and Mary -------------------- twice a week.</b><br/>
<label><input type="radio" name="q3" value="come">come</label><br/>
<label><input type="radio" name="q3" value="comes">comes</label><br/>
<label><input type="radio" name="q3" value="coming">coming</label><br/>
</p>
<hr>
<p>
<input type="button" value="Grade Me" id="scoreButton">
<input type="reset" value="Clear"><br/>
Number of score out of 15 = <input type="text" size="15" id="mark">
Score in percentage = <span id="percentage"></span>
<p>
</div>
</form>

In your getScore function, when you find out that a certain element has a correct answer selected (whichever var is the label - unless you are using a custom radio button which I would recommend since changing the background of the label element would simply highlight the words), you can give it a new class using JS.
currSelection.classList.add("correct");
or
currSelection.classList.add("incorrect");
Then in your CSS file you can have rules saying
.correct { background: green !important; }
.incorrect { background: red !important; }

WoW!....Close....Thanks for support. But still all the wrong answers are showing red color. This will let the user know which question he answered wrong. That part is Okay. But once the wrong answers are marked with red(I mean only the wrongly selected radio button choice texts and not the entire question and answer choices
the correct answer of that wrong attempt to be shown in green to enlighten the user. And the sad part is that I again failed with the CSS thing. I wanted to create a quiz in blog and added custom CSS with conditional tag in html of blogger post.....Not Working. However, I will add the modified code here so that you get a clear picture if I am doing rightly as you said.(How and where to add the CSS rules inside this code(if that is what you mean))
var answers = ["doesn't like", "don't come", "come"];
var rads, quiz; // need to be set after load
window.addEventListener("load", function() { // when page loads
quiz = document.getElementById("quiz");
rads = quiz.querySelectorAll("input[type=radio]"); // all radios in the quiz
document.getElementById("scoreButton").addEventListener("click", function(e) { // on submit
var score = 0;
var checked = quiz.querySelectorAll("input[type=radio]:checked"); // all checked radios
for (var i = 0; i < checked.length; i++) { // loop over all checked radios in the form
var idx = checked[i].name.substring(1) - 1; //remove the q from the name - JS arrays start at 0
var correct = checked[i].value == answers[idx];
checked[i].closest("p").classList.toggle("error", !correct)
checked[i].closest("p").classList.toggle("correct", correct)
score += correct ? 3 : -1; // this is called a ternary
}
var scoreper = Math.round(score * 100 / rads.length);
document.querySelector("#percentage").innerHTML = scoreper + "%";
quiz.mark.value = score;
});
});
<!DOCTYPE HTML>
<html>
<body>
<title>Quiz Questions And Answers</title>
<div class="header">
<h1>Quiz Questions</h1>
</div>
<form id="quiz">
<div class="questions">
<p>
<b>1. He -------------------- it.</b><br/>
<label><input type="radio" name="q1" value="don't like" />don't like</label><br/>
<label><input type="radio" name="q1" value="doesn't https://stackoverflow.com/questions/53818896/change-label-text-of-all-radio-button-in-quiz-as-red-and-green/59801712#like" />doesn't like</label><br/>
<label><input type="radio" name="q1" value="doesn't likes" />doesn't likes</label>
</p>
<hr>
<p><b>2. They -------------------- here very often.</b><br/>
<label><input type="radio" name="q2" value="don't come">don't come</label><br/>
<label><input type="radio" name="q2" value="doesn't come">doesn't come</label><br/>
<label><input type="radio" name="q2" value="doesn't comes">doesn't comes</label>
</p>
<hr>
<p><b>3. John and Mary -------------------- twice a week.</b><br/>
<label><input type="radio" name="q3" value="come">come</label><br/>
<label><input type="radio" name="q3" value="comes">comes</label><br/>
<label><input type="radio" name="q3" value="coming">coming</label><br/>
</p>
<hr>
<p>
<input type="button" value="Grade Me" id="scoreButton">
<input type="reset" value="Clear"><br/> Number of score out of 15 = <input type="text" size="15" id="mark"> Score in percentage = <span id="percentage"></span>
<p>
</div>
</form>
</body>
</html>

You can try this:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var coffee = document.forms[0];
var txt = "";
var i;
for (i = 0; i < coffee.length; i++) {
if (coffee[i].checked) {
document.getElementById("score"+i).style.color = "green";
document.getElementById("order").value = "You Clicked Option " + i;
}
} }
</script>
</head>
<body>
<div id="score1" style="font-size: 50px">1</div>
<div id="score2" style="font-size: 50px">2</div>
<div id="score3" style="font-size: 50px">3</div>
<div id="score4" style="font-size: 50px">4</div>
**<form action="/action_page.php">
<input type="text" id="order" size="50">
<br>
<input type="radio" name="coffee" value="1" onclick="myFunction()">Option 1<br>
<input type="radio" name="coffee" value="2" onclick="myFunction()">Option 2<br>
<input type="radio" name="coffee" value="3" onclick="myFunction()">Option 3<br>
<input type="radio" name="coffee" value="4" onclick="myFunction()">Option 4<br>
</form>**
</body>
</html>

Returning multiple instances of feedback in a javascript loop for quiz feedback

This quiz works great except that I can't get it to return all of the incorrect answer feedback - only the last incorrect answer feedback. For example, if I input answer "c" for both #1 and #2, it's supposed to say both "Question 1 - Answer: a" and "Question 2 - Answer: b" at the bottom of the page. However, it only returns "Question 2 - Answer: b" since it's the last incorrect answer, so for some reason it's not returning all the feedback.
<!DOCTYPE HTML>
<html>
<head>
<title>Quiz Questions And Answers</title>
</head>
<body>
<center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
<b>Question 1.
<br>What is the 1st letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>
<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>
<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>
</form>
<p>
<form method="post" name="Form" onsubmit="" action="">
</form>
<script>
var numQues = 2;
var numChoi = 3;
var answers = new Array(2);
answers[0] = "a";
answers[1] = "b";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
answered=false;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered=true;
if (currSelection.value == answers[i]) {
score++;
break;
} else if (currSelection.value != answers[i]) {
qreturn = "Question " + (i+1) + " - Answer: " + answers[i];
document.getElementById("qreturn").innerHTML = qreturn;
//this is the incorrect answer feedback
break;
}
}
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>
<p id="qreturn"></p>

You use innerHTML = ..., which means element will be replaced every iteration. So use must use += operator or appendChild() function to display all answer.
Fixed code
<html>
<head>
<title>Quiz Questions And Answers</title>
</head>
<body>
<center><h1>Quiz Questions</h1></center>
<p>
<form name="quiz">
<p>
<b>Question 1.
<br>What is the 1st letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q1" value="a">A<br>
<input type="radio" name="q1" value="b">B<br>
<input type="radio" name="q1" value="c">C<br>
</blockquote>
<p><b>
<hr>
Question 2.
<br>What is the 2nd letter of the alphabet?<br></b>
<blockquote>
<input type="radio" name="q2" value="a">A<br>
<input type="radio" name="q2" value="b">B<br>
<input type="radio" name="q2" value="c">C<br>
</blockquote>
<p><b>
<input type="button"value="Grade Me"onClick="getScore(this.form);">
<input type="reset" value="Clear"><p>
Number of score out of 15 = <input type= text size 15 name= "mark">
Score in percentage = <input type=text size=15 name="percentage"><br>
</form>
<p>
<form method="post" name="Form" onsubmit="" action="">
</form>
<script>
var numQues = 2;
var numChoi = 3;
var answers = new Array(2);
answers[0] = "a";
answers[1] = "b";
function getScore(form) {
document.getElementById("qreturn").innerHTML =''
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
answered=false;
for (j=0; j<numChoi; j++) {
currSelection = form.elements[currElt + j];
if (currSelection.checked) {
answered=true;
if (currSelection.value == answers[i]) {
score++;
break;
} else if (currSelection.value != answers[i]) {
qreturn = "Question " + (i+1) + " - Answer: " + answers[i];
document.getElementById("qreturn").innerHTML += '<div>'+qreturn+'</div>';
//this is the incorrect answer feedback
break;
}
}
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>
<p id="qreturn"></p>

Sum split values from HTML form, use as data for Google scatter chart

I am creating an online quiz and want be able to plot the score on a chart.
I am attempting to add all the comma separated values in the checked radio buttons of a form in such a way that the result is also a comma separated value, however I am unsure how to do this.
Example:
2,2 + -2,2 + 1,-1 = 1,3
I then want to insert the resulting number into the Google Visualisation API to draw a chart on the same page, preferably updated as each radio button is checked.
Sample form code:
<form>
<input type="radio" name="q1" class="option" value="2,-2" />
<input type="radio" name="q1" class="option" value="1,-1" />
<input type="radio" name="q1" class="option" value="0,0" />
<input type="radio" name="q1" class="option" value="-1,1" />
<input type="radio" name="q1" class="option" value="-2,2" />
<input type="radio" name="q2" class="option" value="2,-2" />
<input type="radio" name="q2" class="option" value="1,-1" />
<input type="radio" name="q2" class="option" value="0,0" />
<input type="radio" name="q2" class="option" value="-1,1" />
<input type="radio" name="q2" class="option" value="-2,2" />
</form>
Google Visualisation API:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['',''],
[0,0]
]);
var options = {
hAxis: {minValue: -94, maxValue: 94, gridlines: {count:0}},
vAxis: {minValue: -94, maxValue: 94, gridlines: {count:0}},
legend: 'none',
colors: ['#000000'],
width: 500,
height: 500
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I have been looking for a way to accomplish this however so far none of the solutions I have found are suitable. Any help would be appreciated, thank you.

I made this Fiddle example to show you how to sum comma separated values dinamically. Once you get the values you can plot the result with Google Visualization API.
$(document).ready(function(){
var radios = $('input[type=radio]');
var evalResult = function(){
var sum1 = 0;
var sum2 = 0;
var q1 = $("input[type=radio][name=q1]:checked").val();
var q2 = $("input[type=radio][name=q2]:checked").val();
var values_q1 = q1.split(',');
var values_q2 = q2.split(',');
sum1 = parseInt(values_q1[0]) + parseInt(values_q1[0]);
sum2 = parseInt(values_q1[1]) + parseInt(values_q2[1]);
$(".expression").html(q1+" + "+ q2 + " = "+ sum1 + ","+sum2);
}
evalResult();
radios.change(evalResult);
});
EDIT
You can generalize the procedure over n questions.
$(document).ready(function(){
var radios = $('input[type=radio]');
var evalResult = function(){
var numQuestions = 80;
var sum1 = 0;
var sum2 = 0;
var expr_str = '';
for(var i = 1; i <= numQuestions; i++){
var q = $("input[type=radio][name=q"+i+"]:checked").val();
var value = q.split(',');
sum_1 += parseInt(value[0]);
sum_2 += parseInt(value[1]);
expr_str += (i <= numQuestions) ? q + " + " : q + " = ";
}
$(".expression").html(expr_str);
}
evalResult();
radios.change(evalResult);
});

I think following code should do the job
var totalVal = $(':checked')
.map(function() { return $(this).val(); })
.toArray()
.reduce(function(sum, val) {
var splitVal = val.split(',');
sum[0] = sum[0] + parseInt(splitVal[0], 10);
sum[1] = sum[1] + parseInt(splitVal[1], 10);
return sum;
}, [0, 0]);
console.log(totalVal)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<form>
<input checked type="radio" name="q1" class="option" value="2,-2" />
<input type="radio" name="q1" class="option" value="1,-1" />
<input type="radio" name="q1" class="option" value="0,0" />
<input type="radio" name="q1" class="option" value="-1,1" />
<input type="radio" name="q1" class="option" value="-2,2" />
<input type="radio" name="q2" class="option" value="2,-2" />
<input checked type="radio" name="q2" class="option" value="1,-1" />
<input type="radio" name="q2" class="option" value="0,0" />
<input type="radio" name="q2" class="option" value="-1,1" />
<input type="radio" name="q2" class="option" value="-2,2" />
</form>

Develop Reference

JavaScript is the programming language of the Web.

Javascript quiz timer - javascript

Related

JS function resets after completion

How to display/indicate the right and wrong answers at the end of javascript quiz

change label text of all radio button in quiz as red and green

Returning multiple instances of feedback in a javascript loop for quiz feedback

Sum split values from HTML form, use as data for Google scatter chart

Categories

Resources