I am making a simple quiz to get the number of correct questions answered by a person when he submits the 'submit' button. But, it is always giving Zero. Pls help.
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('[name=q1]').val() == "Delhi"){count++;}
if($('[name=q2]').val() == "Lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
It is always giving '0', but if I select 'Delhi' and 'Lotus' it should give answer as 2.
Two things:
$('[name=q1]').val() will give you the value of the first element with name="q1", not the checked element. For that, add :checked.
You're comparing "delhi" with "Delhi"; case matters.
$(document).ready(function() {
$('button').click(function() {
var count = 0;
if ($('[name=q1]:checked').val() == "delhi") {
count++;
}
if ($('[name=q2]:checked').val() == "lotus") {
count++;
}
alert(count);
});
});
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You have an error in your Js code, and you have to select the checked inputs, your code selects just the first input
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('input[name=q1]:checked').val() == "delhi"){count++;}
if($('input[name=q2]:checked').val() == "lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
</body>
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('[name=q1]:checked').val() == "delhi"){count++;}
if($('[name=q2]:checked').val() == "lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
Try to rename you values with a capital letter (lotus=>Lotus, etc).
Related
I'm a student and I'm going to make a page about the exam.
I'd like to divide several checkboxes so they don't overlap and total sum.
How can I have "q1" and "q2" operate separately?
Only one is checked per question, and whether two are sum together.
<script type="text/javascript">
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk){
var obj = document.getElementsByName("q1");
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
</script>
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this);calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
Update your checkOnly function to add name as arg:
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
In the HTML update the method, pass name as second arg:
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="0"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this, 'q2')" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="0"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
var sum=0;
function calc(cBox) {
var sumtext = document.getElementById("sumtext");
if(cBox.checked)
sum += parseInt(cBox.value);
else
sum -= parseInt(cBox.value);
sumtext.value = sum;
}
function checkOnly(chk, name){
var obj = document.getElementsByName(name);
for(var i=0; i<obj.length; i++){
if(obj[i] != chk){
obj[i].checked = false;
}
}
}
No.1 Question<br>
<br>
<input type="checkbox" name="q1" value="1"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q1" value="2"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q1" value="3"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q1" value="4"
onclick="javascript:checkOnly(this, 'q1');calc(this)" class="sum" >Answer4
</p>
No.2 Question<br>
<br>
<input type="checkbox" name="q2" value="1"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer1<br>
<input type="checkbox" name="q2" value="2"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer2<br>
<input type="checkbox" name="q2" value="3"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer3<br>
<input type="checkbox" name="q2" value="4"
onclick="javascript:checkOnly(this, 'q2');calc(this)" class="sum" >Answer4
</p>
<input type="text" id="sumtext" value="0" >
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.
I have a list of questions in HTML. Each question will have 4 radio buttons for the answers, and the user will select the appropriate answer. Each radio button has an assigned value. At the end, I would like to show in HTML, the user's score once the questions have all been answered.
It's fairly straight forward, but I am having issues iterating through the questions and returning a summing the total value for their score.
Any suggestions on the iterating jQuery loops would be helpful.
<div>
<p class="question">1. Question:</p>
<ul id="answers1">
<input type="radio" name="q1" value="15" id="q1a"><label for="q1a"> Answer 1</label><br/>
<input type="radio" name="q1" value="10" id="q1b"><label for="q1b"> Answer 2</label><br/>
<input type="radio" name="q1" value="5" id="q1c"><label for="q1c"> Answer 3</label><br/>
<input type="radio" name="q1" value="1" id="q1d"><label for="q1d"> Answer 4</label><br/>
</ul>
<p class="question">2. Question</p>
<ul id="answers2">
<input type="radio" name="q2" value="15" id="q2a"><label for="q2a"> Answer 1</label><br/>
<input type="radio" name="q2" value="10" id="q2b"><label for="q2b"> Answer 2</label><br/>
<input type="radio" name="q2" value="5" id="q2c"><label for="q2c"> Answer 3</label><br/>
<input type="radio" name="q2" value="1" id="q2d"><label for="q2d"> Answer 4</label><br/>
</ul>
<p class="question">3. Question</p>
<ul id="answers3">
<input type="radio" name="q3" value="1" id="q3a"><label for="q3a">Answer 1</label><br/>
<input type="radio" name="q3" value="5" id="q3b"><label for="q3b">Answer 2</label><br/>
<input type="radio" name="q3" value="10" id="q3c"><label for="q3c">Answer 3</label><br/>
<input type="radio" name="q3" value="15" id="q3d"><label for="q3d">Answer 4</label><br/>
</ul>
<div id="sum" >Print Score from Questions Here</div>
</div>
You can get total score usong this.
var score=0;
$("input[type='radio']:checked").each(function () {
score += $(this).val();
});
$('#sum').text(score);
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>
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>