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 */
});
Related
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>
An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
I have a multi-step form that has a "next" and "back" button on each step of the form. I'm using jQuery to enable the "next" button once the criteria for each section is met. For example: at least one checkbox is checked or a radio button is selected.
I'm having an issue where after completing a number of sections, I go back to a previous section and uncheck all checkboxes and the "next" button remains enabled.
There's a Codepen here of a rough version of what I'm working with - note all sections are visible to show how the button remains enabled once you begin checking/unchecking: https://codepen.io/abbasarezoo/pen/jZgQOV
My current code:
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
JS:
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
if ($('.panels input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
Is there any way to make this work?
when you select the input to see if is checked, you're selecting all inputs
if ($('.panels input:checked').length >= 1) {
you need to select just the inputs from the panel the user clicked
if ($(this).closest('.panels').find('input:checked').length >= 1) {
https://codepen.io/spacedog4/pen/YaWqdo?editors=1010
Please see below comment in $panelsInput.click(function (){});, you need to get the checked count for current panel (the user clicks), instead of all.
So the comparasion in your codes:
$('.panels input:checked').length >= 1
need to change to:
$(this).parent().find('input:checked').length >= 1
var $panelsInput = $('.panels input'),
$rowsInput = $('.rows input');
$panelsInput.click(function () {
//get current input, find out its parent, then get the count of checked
if ($(this).parent().find('input:checked').length >= 1) {
$(this).closest('.panels').find('.next-q').prop('disabled', false);
}
else {
$(this).closest('.panels').find('.next-q').prop('disabled', true);
}
});
$rowsInput.click(function () {
var radioLength = $('.radio-row').length;
if ($('.rows input:checked').length == radioLength) {
$('.rows .next-q').prop('disabled', false);
}
else {
$('.rows .next-q').prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
I thought it is interesting to handle interactions using event delegation at the form level which is more flexible:
Only one handler is loaded in memory. (By the way only a single scope is in charge of the logic behind the prev/next behavior).
You can add dynamically panels to the form (with the same markup structure) and buttons will work right away without requiring another listener registering step.
var $panelsInput = $('.panels input')
, $rowsInput = $('.rows input')
;
$('form').on('click', function (e) {
let $t = $(this)
, $target = $(e.target)
, $fieldset = $target.closest('fieldset')
, $rows = $fieldset.find('.radio-row')
;
// When a button is clicked
if ($target.is('button')) {
// Next button
if ($target.is('.next-q')) {
$fieldset.addClass('hide').next().addClass('show');
// Prev button
} else {
// Untick boxes
$fieldset.find('input').prop('checked', false).end()
// Disable appropriate button
.find('.next-q').prop('disabled', true).end()
.prev().removeClass('hide').nextAll().removeClass('show');
}
// When a checkbox is clicked
} else if ($target.is('input')) {
let $containers = ($rows.length ? $rows : $fieldset)
, containersHavingAtickedBox = $containers.filter(function() {
return !!$(this).find('input:checked').length
})
, shouldEnable = $containers.length === containersHavingAtickedBox.length
;
$fieldset.find('.next-q').prop('disabled', !shouldEnable);
}
});
fieldset ~ fieldset, .hide{display:none}
fieldset.show:not(.hide){display: block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="panels">
<h2>1: Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-3">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>2: Select multiple answers</h2>
<label for="checkbox-4">Checkbox 1</label>
<input type="checkbox" id="checkbox-4" name="checkbox" />
<label for="checkbox-5">Checkbox 2</label>
<input type="checkbox" id="checkbox-5" name="checkbox" />
<label for="checkbox-6">Checkbox 3</label>
<input type="checkbox" id="checkbox-6" name="checkbox" />
<br />
<button type="button" class="next-q" disabled>Next</button>
</fieldset>
<fieldset class="panels">
<h2>3: Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
<fieldset class="rows">
<h2>4: Select one answer per row</h2>
<div class="radio-row">
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-1" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-1" />
</div>
<div class="radio-row">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-2" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-2" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-2" />
</div>
<button type="button" class="next-q" disabled>Next</button>
<button type="button" class="previous-q">Previous</button>
</fieldset>
</form>
I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.
I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).
I need this to work on a page with multiple sets of radio buttons
Here is the HTML:
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic"/>
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic"/>
<div class="radio-image"></div>
</label>
</form>
However, while I've been able to get a checked radio button value using this:
jQuery('input[name=toeic]').change(function(){
var invar = jQuery('input[name=toeic]:checked').val();
alert(invar);
});
The script is only effective within the first row of buttons clicked.
To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed (correct).
But, if in another row, button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be multiple sets of radio buttons.
Any help would be very much appreciated
You could do something like this :
$(document).ready(function() {
$("#finish").click(function() {
var answersList = [];
//Loop over all questoins
$(".toeic_pages").each(function() {
var questionId = $(this).attr("id");
var answer = $("input[name='toeic']:checked", $(this)).val();
//if Answer isnt provided do not update the answersList
if (answer !== undefined) {
answersList.push({
question: questionId,
answer: answer
});
}
});
console.log(answersList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="toeic_pages" id="1">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
...
<form class="toeic_pages" id="2">
<label class="item1">
<input type="radio" value="A" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item2">
<input type="radio" value="B" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item3">
<input type="radio" value="C" name="toeic" />
<div class="radio-image"></div>
</label>
<label class="item4">
<input type="radio" value="D" name="toeic" />
<div class="radio-image"></div>
</label>
</form>
<button id="finish">Get Answers</button>
I think this is exactly what you need.
$('#1 input').on('change', function() {
alert($('#1').attr('id')+$('input[name=radioName]:checked', '#1').val());
});
$('#2 input').on('change', function() {
alert($('#2').attr('id')+$('input[name=radioName]:checked', '#2').val());
});
$('#3 input').on('change', function() {
alert($('#3').attr('id')+$('input[name=radioName]:checked', '#3').val());
});
$('#4 input').on('change', function() {
alert($('#4').attr('id')+$('input[name=radioName]:checked', '#4').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="1">
Question 1
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="2">
Question 2
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="3">
Question 3
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
<form id="4">
Question 4
<br>
<input type="radio" name="radioName" value="A" /> A <br />
<input type="radio" name="radioName" value="B" /> B <br />
<input type="radio" name="radioName" value="C" /> C <br />
</form>
Credits to the owner of this answer #Peter J in this question How can I know which radio button is selected via jQuery?
Example here:
http://jsfiddle.net/UVHtu/19/
I need to fill in the blank:
HTML:
<div id="options">
<input type="radio" id="op_a" name="op" value="a" />
<label for="op_a">Option A</label>
<input type="radio" id="op_b" name="op" value="b" />
<label for="op_b">Option B</label>
<input type="radio" id="op_c" name="op" value="c" />
<label for="op_c">Option C</label>
</div>
<input type="button" id="disable_button" value="Disable Option B" />
JavaScript:
$("#options").buttonset();
$("#disable_button").click(function(){
// What goes here to disable option B?
});
$("#options").buttonset();
$("#disable_button").click(function(){
// What goes here?
$('#op_b').attr("disabled", "disabled");
$("#options").buttonset("refresh");
});