Displaying stored Variables with Jquery - javascript

i am writing a simple quiz where the answers are stored in 5 variables. after the 5th question i would like the results to display.
Before the jquery implementation to hide the next question i used
documents.write.Rus (rus being the variable). this worked but i can't figure out how to implement it within my jquery code. Can someone take a look?
here is my javascript & html code :
function check() {
var Rus = 0;
var Zin = 0;
var Duu = 0;
var Ver = 0;
var Zor = 0;
var q1 = document.quiz.q1.value;
if (q1 == "Rus") {
Rus++
}
if (q1 == "Zin") {
Zin++
}
if (q1 == "Duu") {
Duu++
}
if (q1 == "Ver") {
Ver++
}
if (q1 == "Zor") {
Zor++
}
}
$(document).ready(function() {
//hide all questions
$('.questionForm').hide();
$('#results').hide();
//show first question
$('#q1').show();
$('#q1 #button').click(function() {
$('.questionForm').hide();
$('.results').hide();
$('#q2').show();
return false;
});
$('#q2 #button').click(function() {
$('.questionForm').hide();
$('#results').hide();
$('#q3').show();
return false;
});
$('#q3 #button').click(function() {
$('.questionForm').hide();
$('#results').hide();
$('#q4').show();
return false;
});
$('#q4 #button').click(function() {
$('.questionForm').hide();
$('#results').hide();
$('#q5').show();
return false;
});
$('#q5 #button').click(function() {
$('.questionForm').hide();
// show results
$('#results').show();
$Rus.show();
return false;
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="STYLE.CSS">
<title>Document</title>
</head>
<body>
<form class="questionForm" name="quiz" id="q1" data-question="1">
<div>
<p>Question 1</p>
<p><input type="radio" name="q1" value="Rus">A. Rustgeving</p>
<p><input type="radio" name="q1" value="Zin">B. Zingeving</p>
<p><input type="radio" name="q1" value="Duu">C. Duurzaamheid</p>
<p><input type="radio" name="q1" value="Ver">D. Verzuiling</p>
<p><input type="radio" name="q1" value="Zor">D. Zorgzaamheid</p>
</div>
<input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
</form>
<form class="questionForm" name="quiz" id="q2" data-question="2">
<div>
<p>Question 2</p>
<p><input type="radio" name="q2" value="Rus">A. Rustgeving</p>
<p><input type="radio" name="q2" value="Zin">B. Zingeving</p>
<p><input type="radio" name="q2" value="Duu">C. Duurzaamheid</p>
<p><input type="radio" name="q2" value="Ver">D. Verzuiling</p>
<p><input type="radio" name="q2" value="Zor">D. Zorgzaamheid</p>
</div>
<input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
</form>
<form class="questionForm" name="quiz" id="q3" data-question="3">
<div>
<p>Question 3</p>
<p><input type="radio" name="q3" value="Rus">A. Rustgeving</p>
<p><input type="radio" name="q3" value="Zin">B. Zingeving</p>
<p><input type="radio" name="q3" value="Duu">C. Duurzaamheid</p>
<p><input type="radio" name="q3" value="Ver">D. Verzuiling</p>
<p><input type="radio" name="q3" value="Zor">D. Zorgzaamheid</p>
</div>
<input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
</form>
<form class="questionForm" name="quiz" id="q4" data-question="4">
<div>
<p>Question 4</p>
<p><input type="radio" name="q4" value="Rus">A. Rustgeving</p>
<p><input type="radio" name="q4" value="Zin">B. Zingeving</p>
<p><input type="radio" name="q4" value="Duu">C. Duurzaamheid</p>
<p><input type="radio" name="q4" value="Ver">D. Verzuiling</p>
<p><input type="radio" name="q4" value="Zor">D. Zorgzaamheid</p>
</div>
<input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
</form>
<form class="questionForm" name="quiz" id="q5" data-question="5">
<div>
<p>Question 5</p>
<p><input type="radio" name="q5" value="Rus">A. Rustgeving</p>
<p><input type="radio" name="q5" value="Zin">B. Zingeving</p>
<p><input type="radio" name="q5" value="Duu">C. Duurzaamheid</p>
<p><input type="radio" name="q5" value="Ver">D. Verzuiling</p>
<p><input type="radio" name="q5" value="Zor">D. Zorgzaamheid</p>
</div>
<input class="favorite styled" id="button" type="button" value="Volgende" onclick="check()">
</form>
<div name="results" id="results">
<p1>Results</p1>
</div>
<script src="jquery.js"></script>
<script src="quiz.js"></script>
</body>
</html>

Related

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 */
});

Multiple Radio button call with jquery issue

I would like to make a simple quiz that checks for correct answers and counts the score which outputs on the bottom of the page. I was able to do it with simple js and html but would like to do the same using jquery. However when i press submit in jquery version nothing happens ( i am a noob to jquery and cant find what is wrong) Thanks in advance!
//Question One Answer is 'a'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'a'
var score = 0;
checkAll = function() {
var message;
// var score = 0;
if ($("#question1").val() === "a") {
score++;
} else {
return false;
}
if ($("#question2").val() === "b") {
score++;
} else {
return false;
}
if ($("#question3").val() === "b") {
score++;
} else {
return false;
}
if ($("#question4").val() === "b") {
score++;
} else {
return false;
}
if ($("#question5").val() === "a") {
score++;
} else {
return false;
}
message = "You got " + score + "out of five questions right!";
$("#results").html(message);
initialize = function() {
$("#init").click(checkAll)
};
};
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="quiz.js"></script>
</head>
<body>
<h1>Geography Quiz</h1>
<p>
<label for="user">Name:</label>
<input type="text" name="username" id="user" />
</p>
<div class="qheader">
<p> 1) Which of the countries below is largest by area?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question1">a) Russia<br>
<input type="radio" value="b" name="question1">b) China<br>
<input type="radio" value="c" name="question1">c) USA<br>
<input type="radio" value="d" name="question1">d) Canada<br>
</div>
<br>
<div class="qheader">
<p> 2) Which of these cities is United States Capital?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question2">a) New York<br>
<input type="radio" value="b" name="question2">b) Washington D.C
<input type="radio" value="c" name="question2">c) Chicago<br>
<input type="radio" value="d" name="question2">d) Moscow<br>
</div>
<div class="qheader">
<p> 3) Which of these cities is Spain's Capital?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question3">a) Barcelona<br>
<input type="radio" value="b" name="question3">b) Madrid <br>
<input type="radio" value="c" name="question3">c) Milan<br>
<input type="radio" value="d" name="question3">d) Rome<br>
</div>
<div class="qheader">
<p> 4) Which ocean is the largest?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question4">a) Arctic<br>
<input type="radio" value="b" name="question4">b) Pacific<br>
<input type="radio" value="c" name="question4">c) Indian<br>
<input type="radio" value="d" name="question4">d) Atlantic<br>
</div>
<div class="qheader">
<p> 5) Which of these rivers is largest in North America?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question5">a) Missouri River<br>
<input type="radio" value="b" name="question5">b) Nile River <br>
<input type="radio" value="c" name="question5">c) Amazon River<br>
<input type="radio" value="d" name="question5">d) Yenisei River<br>
</div>
<p>
<input type="button" id="init" value="Submit" />
</p>
<p id="results"></p>
</form>
</body>
</html>
First, you have your initialize() function inside the checkAll() function. It should be a separate function.
Second, you never call initialize().
Third, you use $("#question1").val() to get the value of a radio button, but # is for matching IDs, not names. The way to get the value of a radio button is $(":radio[name=question1]:checked").val() (see jQuery get value of selected radio button).
Fourth, you return immediately whenever an answer is wrong. You need to keep going so you can report the total score.
Fifth, you need to initialize score to 0 in the function. Otherwise, you'll add the score for the current call to the score from the previous time. And score should just be a local variable in the function, there's no need for the global variable.
//Question One Answer is 'a'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'a'
checkAll = function() {
var message;
var score = 0;
if ($(":radio[name=question1]:checked").val() === "a") {
score++;
}
if ($(":radio[name=question2]:checked").val() === "b") {
score++;
}
if ($(":radio[name=question3]:checked").val() === "b") {
score++;
}
if ($(":radio[name=question4]:checked").val() === "b") {
score++;
}
if ($(":radio[name=question5]:checked").val() === "a") {
score++;
}
message = "You got " + score + " out of five questions right!";
$("#results").html(message);
};
initialize = function() {
$("#init").click(checkAll)
};
initialize();
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<h1>Geography Quiz</h1>
<p>
<label for="user">Name:</label>
<input type="text" name="username" id="user" />
</p>
<div class="qheader">
<p> 1) Which of the countries below is largest by area?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question1">a) Russia<br>
<input type="radio" value="b" name="question1">b) China<br>
<input type="radio" value="c" name="question1">c) USA<br>
<input type="radio" value="d" name="question1">d) Canada<br>
</div>
<br>
<div class="qheader">
<p> 2) Which of these cities is United States Capital?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question2">a) New York<br>
<input type="radio" value="b" name="question2">b) Washington D.C
<input type="radio" value="c" name="question2">c) Chicago<br>
<input type="radio" value="d" name="question2">d) Moscow<br>
</div>
<div class="qheader">
<p> 3) Which of these cities is Spain's Capital?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question3">a) Barcelona<br>
<input type="radio" value="b" name="question3">b) Madrid <br>
<input type="radio" value="c" name="question3">c) Milan<br>
<input type="radio" value="d" name="question3">d) Rome<br>
</div>
<div class="qheader">
<p> 4) Which ocean is the largest?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question4">a) Arctic<br>
<input type="radio" value="b" name="question4">b) Pacific<br>
<input type="radio" value="c" name="question4">c) Indian<br>
<input type="radio" value="d" name="question4">d) Atlantic<br>
</div>
<div class="qheader">
<p> 5) Which of these rivers is largest in North America?</p>
</div>
<div class="questsel">
<input type="radio" value="a" name="question5">a) Missouri River<br>
<input type="radio" value="b" name="question5">b) Nile River <br>
<input type="radio" value="c" name="question5">c) Amazon River<br>
<input type="radio" value="d" name="question5">d) Yenisei River<br>
</div>
<p>
<input type="button" id="init" value="Submit" />
</p>
<p id="results"></p>

radio button is selecting multiple values

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css">
<script>
var xmlh,url;
xmlh = new XMLHttpRequest();
url="AnswerFile.txt";
xmlh.onreadystatechange=function(){
if(xmlh.readyState == 4 && xmlh.status ==200){
var myArr =JSON.parse(xmlh.responseText);
myFunctuion(myArr);
}
};
xmlh.open("GET",url,true);
xmlh.send();
function myFunctuion(arr){
var dom=document.getElementById("demo");
var cha=document.getElementById("radio1");
var chb=document.getElementById("radio2");
var chc=document.getElementById("radio3");
dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
cha.innerHTML = arr[0].ChA ;
chb.innerHTML = arr[0].ChB ;
chc.innerHTML = arr[0].ChC ;
}
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>
i get my all question and option from text file by JSON and i succeeded it .
But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked .
what my problem in code ? what i do? and why cause this problem ?
?** for style i use W3.CSS **?
Your HTML input radio should have the same name attribute, like this:
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Your radio buttons should all use the same name :)
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>
Name of your radio input fields should be same for specific question's options. Like below:
First group of radios
<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>
Second group of radios
<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>

How can I check if all radio buttons are checked

I have a number of radio buttons with the option, 'yes' or 'no'.
Is there a simple way with jQuery to check if they all have 'yes' selected?
HTML is:
<input type="radio" id="yes1" name="group1" value="yes">Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes<br>
<input type="radio" name="group3" value="No">No<br>
I'm guessing it's something along the lines of
yes1 = $("#yes1").prop("checked", true);
yes2 = $("#yes2").prop("checked", true);
yes3 = $("#yes2").prop("checked", true);
if (yes1 & yes2 & yes3) {
// do something ?
}
You can rather compare the length of elements with ['value=yes] with elements with ['value=yes] and property :checked:
if($('[value=yes]').length==$('[value=yes]:checked').length){
//all yes elements are checked
}
One way is to check whether all the radios with value as yes is checked
if($('input[type="radio"][value="yes"]').not(':checked').length == 0){
//all checked
}
You may check the count of radio buttons with value != true. If the count is Zero, all radio buttons would be selected.
if(!$('input[type="radio"][value="yes"]').not(':checked').length){
//select all radio buttons with value = yes
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>
<input type="radio" id="yes1" name="group1" value="yes" checked>Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes" checked>Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes" checked>Yes<br>
<input type="radio" name="group3" value="No">No<br>
var yes1 = $("#yes1").is(":checked")
var yes2 = $("#yes2").is(":checked")
var yes3 = $("#yes3").is(":checked")
//$("#Myradio").is(":checked")
if (yes1 & yes2 & yes3) {
alert('sasa');
//do something
}
FIDDLE
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>

Categories