I am trying to make a small question web app using javascript/html. what I am trying to do is, assign a class to each of the radio buttons for each question-i.e. all the radio buttons for question 1 will have an input class of "question1" and 2 will have a class of "question2" and so on.
Because I don't know how many questions I will have, I was wondering if there was a way to achieve this dynamically through javascript using element.classList.add and increment the value of the question by 1 each time. I have received a response using jquery, but I was wondering if there was also a way to achieve this using pure javascript.
After some research, I have tried accessing all the elements inside a form using "form.elements" however it does not seem to be working.
HTML:
<form name="quizForm">
<div class="content">
<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 3</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
</form>
Javascript:
//counting the index of the class
let ind =0;
//access the named elements within the form
let elements = form.elements;
for(i=0;i<elements.length;i++){
element.classList.add(`quiz${ind+1}`)
}
Any information towards the right direction is greatly appreciated. Thank you.
I apologise for my initial question as I am realising that I have been unclear explaining some aspects of the issue that I was having. I managed to solve the problem. When I ask questions in the future, I will make sure I double check my code so that it is working. Posting an solution here for those who are interested and in the hopes that it will help someone.
What I did:
make a variable that keeps a track of the class number (ind)
using "querySelectorAll" I can select all the elements with the class "quiz"
loop through the returned array with forEach, increment the "ind" variable
select all the inputs that are inside each "quiz"
the "quiz" loop through those inputs and add a class to the input elements
HTML:
<div class="quiz">
<p>Question 1</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 2</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
<div class="quiz" style="display: none;">
<p>Question 3</p>
<input type="radio" name="answer" value="1">
<input type="radio" name="answer" value="2">
<input type="radio" name="answer" value="3">
</div>
Javascript:
const quizes = document.querySelectorAll('.quiz');
//a variable to increment the classes
let ind = 0;
quizes.forEach(function(element){
ind++;
let inputs = element.querySelectorAll('input');
inputs.forEach((input)=>{
input.classList.add(`question${ind}`)
})
//to test on the console
console.log(inputs)
})
All the radio button inputs for question 1 have the same "question1" class.
Related
I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.
I'm using Javascript and radio buttons for the first time.
I need to know how to assign the script to each radio button that is selected? there seem to be a few ways of doing this and its just getting confusing!
Each question has 4 radio buttons to select from and I need to gather the answers at the end!
Any help appreciated
Just add an event listener to the radio buttons and maintain a mapping where you could store all your answers to.
let answers = {}
$('input[type=radio]').on('click', function (event) {
let question = event.currentTarget.name
let answer = event.currentTarget.value
answers[question] = answer
document.getElementById('result').innerHTML = JSON.stringify(answers, null, 2)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question-block">
<div class="question">
1. Which one is the biggest?
</div>
<div class="answers">
<form>
<input type="radio" name="1" value="1" checked> Elephant<br>
<input type="radio" name="1" value="2"> Whale<br>
<input type="radio" name="1" value="3"> Giraffe
</form>
</div>
</div>
<div class="question-block">
<div class="question">
2. Which one is the smallest animal?
</div>
<div class="answers">
<form>
<input type="radio" name="2" value="1" checked> Bacteria<br>
<input type="radio" name="2" value="2"> Virus<br>
<input type="radio" name="2" value="3"> Ant
</form>
</div>
</div>
<div id="result">
</div>
I'm trying to create a form with 10+ questions on it.
Each question with have three answer options, "Yes" "No" "Not applicable" which are chosen via radio buttons.
When "No" is selected a div is shown with additional information, this would be applicable for each question.
Not being great at Javascript I consulted Stack Overflow, found something and have failed miserably to amend it:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('noCheck').checked) {
document.getElementById('ifNo').style.display = 'block';
}
else document.getElementById('ifNo').style.display = 'none';
}
</script>
<p>Question 1</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
<h2>Section header</h2>
<p>Question 2</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
<p>Question 3</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
This only works on the first question but not the others.
The intention is for this to go in a rails app and the number of questions could be large (more than 10) so was trying to create a short piece of code that would work on all questions.
Any help, from someone who knows what they're talking about (i.e. not me) would be extremely appreciated.
Do not use same id more than once. Here https://jsfiddle.net/o2kdb8ej/ you can find simple solution using jQuery, without any ids specified applicable for any number of questions. The main idea is to specify value for each radio button, handling change event for each radio button on the page, and in that handler check its value, and according to its value hide or show specified p element.
Is not valid html to have more than one element with the same id. You have multiple elements with id id=noCheck. When javascript code is executed the function getElementById() is looking for a single element, and returns the first one, that's why only the first div is showing.
You could assign the same name to every "No" radiobutton and use getElementsByName() instead. This returns a collection of elements, and then you could iterate over them to show all divs that must be shown.
Using same id for different elements in a html code is a bad way. You need to create different id's for different questions like:
<p>Question 1</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="yesCheck1"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="noCheck1"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="naCheck1"> Not applicable <br>
<div id="ifNo1" style="display:none">
<p>Recommendation goes here</p>
<h2>Section header</h2>
<p>Question 2</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="yesCheck2"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="noCheck2"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="naCheck2"> Not applicable <br>
<div id="ifNo2" style="display:none">
<p>Recommendation goes here</p>
<p>Question 3</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="yesCheck3"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="noCheck3"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="naCheck3"> Not applicable <br>
<div id="ifNo3" style="display:none">
<p>Recommendation goes here</p>
</div>
now in your javascript code:
function yesnoCheck() {
newId = id.split('k')[1]; //this will give 2 in "q2" (splitting)
var noCheck = "noCheck"
newNoCheck = noCheck.concat(newId); //if the newId is 2 then it will be "noCheck2"
var ifNo = "ifNo"
newifNo = ifNo.concat(newId); //if the newId is 2 then it will be "ifNo2"
if (document.getElementById(newNoCheck).checked) {
document.getElementById(newifNo).style.display = 'block';
}
else document.getElementById(newifNo).style.display = 'none';
}
You can find the working jsfiddle here
I made a multiple choice test with parsing XML of questions and answers using PHP. The generated HTML looks something like this:
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
Categories are named "Category" + a number starting from 0 (category0, category1...)
The answer is stored in a hidden field and is exactly the same as the correct options value.
I created a JS function that checks if the selected answer is correct or not, and colors the background of set div according. The function is triggered onclick in each radio input.
I need help with creating a statistic/score of answers for all questions and for each category separately.
At the beginning the score would be 0 of all possible answers.
If I would click on the correct choice of first question the score would be 1 of all possible questions, and 1 of all questions of first category.
I would like to achive this live (when any button is clicked), without posting the form(no POST/GET).
Hope I described my problem so you can understand it, if any clarification is needed, please let me know.
So far I only worked with JS, but any solutions in jQuery as also welcome.
When a radio button is clicked, execute the same logic you already have to determine if answers are correct, but call it for EACH of your "categories", NOT just the one that was clicked.
Start a variable at 0 and increment it by 1 each time you find a correct answer. Then, after your loop, you can update your "Correct Answers" message with the variable's value. This won't require any postbacks.
You could do something like this
$('input[type="radio"]').change( function(){
var answer = $(this).siblings('.answer').val();
if ($(this).val() == answer) {
var score = $(this).parents().siblings('.score').val();
score++;
$(this).parents().siblings('.score').val(score)
console.log(score);
} else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<input type="hidden" class="score" value="0">
<p></p>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<input type="hidden" class="score" value="0">
<p><p>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
I've got multiple sets of radio buttons and am trying to use the .find() function to dynamically find the value of radio buttons in the same grouping.
However, it keeps returning undefined.
<fieldset>
<div id="border1">
<input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra">
<input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion">
</div>
<div id="border2">
<input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges">
<input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes">
</div>
</fieldset>
<fieldset>
<div class="border1">
<input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey">
<input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot">
</div>
<div class="border2">
<input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas">
<input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries">
</div>
</fieldset>
(Sorry, didn't mean to put the same IDs. Was a copy/paste.)
I'm trying to use jquery to dynamically find the values:
$(".animals .radio").change(function()
{
alert($(this).closest('fieldset').find('.fruit').val());
etc.
}
But it keeps returning undefined
Also tried:
$(this).closest('fieldset').find('.fruit:checked').val()
Is there another way I should be approaching this?
I don't want to have to write code for every single set of radio buttons.
$(".animals .radio") is not the query you are looking for, it should be $(".animals.radio") (no white space between classes).
$(".animals .radio") looks for an element with class "radio" inside an element with class "animals".
It should .animals.radio, not .animals .radio.
.animals.radio means these two classes belongs to same element. (in your case this is right)
.animals .radio means .animals is ancestor of .radio.
$(".animals.radio").change(function() {
alert($(this).closest('fieldset').find('.fruit').val());
});
AND ONE THINK, YOUR CODE HAVE DUPLICATE IDS, AVOID IT.
How about not using id="" twice, and setting a type="radio" on those inputs for starters ?
You are also using the same ID for multiple elements, stop that ?
It should probably be :
<fieldset>
<div id="border1">
<input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" />
<input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" />
</div>
<div id="border2">
<input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" />
<input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" />
</div>
</fieldset>
<fieldset>
<div class="border1">
<input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" />
<input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" />
</div>
<div class="border2">
<input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" />
<input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" />
</div>
</fieldset>
To get both values :
$('input[type="radio"]').on('change', function() {
$(this).closest('fieldset').find('.fruit').each(function() {
alert(this.value);
});
});
To get only the one that is checked :
$('input[type="radio"]').on('change', function() {
var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
alert(elm.value);
});
$(".animals .radio") is getting you all the elements with class radio that have parents with class animals.
You want elements with both classes animals and radio, which is like $(".animals.radio")