I have been searching for an answer all day but can't seem to find anything that would help my specific problem so here goes.
In a question form, I want to show hidden divs based on radio button selections, using the jQuery click() function. But after a second click() event is triggered, the div that was shown in the previous selection is forgotten, and returned to hidden status.
Here is an example code:
jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){
if(jQuery(this).attr("value")=="answer1"){
jQuery(".hide").hide();
jQuery(".answer1").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer2"){
jQuery(".hide").hide();
jQuery(".answer2").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer3"){
jQuery(".hide").hide();
jQuery(".answer1and2").show();
jQuery(".answer3").show();
}
});
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<h1>Question 1</h1>
<input type="radio" name="question1" value="answer1">
Answer 1
<input type="radio" name="question1" value="answer2">
Answer 2
<div class="answer1 hide">
<p>Answer 1 is Apple</p>
</div>
<div class="answer2 hide">
<p>Answer 2 is Mango</p>
</div>
<div class="answer1and2 hide">
<h1>Question 2</h1>
<input type="radio" name="question2" value="answer3">
Any answer
<input type="radio" name="question2" value="answer3">
Any answer
</div>
<div class="answer3 hide">
<p>Did you choose Apple or Mango?</p>
</div>
How can I retain just one of the answers that was shown after the first selection?
JSFiddle code here
If you don't want shown divs to be hidden again, then just remove "hide" class from items you get "shown"
Here is JSFiddle
And here is one example row of how to do that:
jQuery(".answer1").show().removeClass('hide');
Just remove every
jQuery(".hide").hide();
(now with fiddle)
Related
I have made a multiple choice quiz and when there is one on a single page it works exactly as I want it to. The issue is that I need to have multiple quizzes appear on one page and the behaviour on one quiz is affecting the behaviour of any other quizzes that appear on that same page
I've been looking online to see if there's a way for the function to handle each quiz ID separately (as if they each had their own separate function) but nothing I've found so far looks to be something I can apply to the function I already have.
Here's the Javascript
jQuery(document).ready(function(){
jQuery('.answer').click(function(event){
jQuery('.active').removeClass('active');
jQuery(this).addClass('active');
event.preventDefault();
});
});
Here's the HTML
<div id="Quiz1" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
<div id="Quiz2" class="quiz">
<div class="question">Is this a really good question?</div>
<div class="interaction">
<div class="answer" data-answer="correct">
<div class="answer-content">
<span>Answer 1</span>
</div>
</div>
<div class="answer" data-answer="wrong1">
<div class="answer-content">
<span>Answer 2</span>
</div>
</div>
<div class="answer" data-answer="wrong2">
<div class="answer-content">
<span>Answer 3</span>
</div>
</div>
<div class="response-text correct">Correct</div>
<div class="response-text wrong1">Wrong 1</div>
<div class="response-text wrong2">Wrong 2</div>
</div>
</div>
Here's the CSS
.answer[data-answer="correct"] ~ .correct {
display:none;
}
.answer.active[data-answer="correct"] ~ .correct {
display:block
}
.answer[data-answer="wrong1"] ~ .wrong1 {
display:none;
}
.answer.active[data-answer="wrong1"] ~ .wrong1 {
display:block
}
.answer[data-answer="wrong2"] ~ .wrong2 {
display:none;
}
.answer.active[data-answer="wrong2"] ~ .wrong2 {
display:block
}
So, with one quiz on the page everything works as expected - Clicking each bubble will give the user a corresponding response: Correct, Wrong, Wrong2. As each bubble is clicked the css takes whichever .answer element has the .active class and displays the corresponding answer response based on the data-attribute given.
This is wonderful until I have more than one quiz on the page
When there are two quizzes on one page and you click the bubbles in the second quiz it will remove the last answer response from the quiz above it.
I need each quiz to act independently and not have one quiz affecting the others.
I hope this makes sense, I'm terrible at explaining myself.
I've set up a fiddle so you can see it in action - https://jsfiddle.net/g8qpvtcz/1/
If I understand you, you just want to be able to display more than one "response box"?
If so, this might do the job for you:
In your fiddle, change line 3 of the javascript:
jQuery('.active').removeClass('active');
to
jQuery(this).parent().children('.active').removeClass('active');
This gets the parent element of the clicked answer (i.e. the div.interaction) for the given quiz and only removes the active class in its children.
Edit
You could also just use the siblings() method. Which would be even prettier. Don't really know why I forgot about that one.
jQuery(this).siblings('.active').removeClass('active');
#input{
display: inline-block;
}
<div>
<div>
<input type="radio">
<label>Item 1</label>
</div>
<div class="inputClass">
<div id="input">Some text</div>
<div id="input"><input type="text"></div>
</div>
<div>
<input type="radio">
<label>Item 2</label>
</div>
</div>
In the above HTML snippet, is there any way I can restrict tabbing to the input inside .inputClass?
Please note that in the actual code I have no way of knowing if .inputClass will hold an input box or not. It could be a button, dropdowns etc or any other tabbable element. So I can't apply tabindex=-1 to the element(s).
Also, please note I don't want a jQuery solution.
I have the below form and am using css to display display span when radio button is clicked using the code
<style>
.glyphicon{
display: none;
}
input[type="radio"]:checked + span{
display: block;
}
</style>
<form>
<div class="form-group" id="myform">
<label for="usr">Q1:Are these dates in chronological order?1492,1941,1586 </label>
</div>
<div class="radio">
<label><input type="radio" id="opt0" name="optradio0">yes<span id="sp0" class="glyphicon glyphicon-remove"></span></label>
</div>
<div class="radio">
<label><input type="radio" id="opt1" name="optradio0">no<span id="sp1" class="glyphicon glyphicon-ok"></span></label>
</div>
<br/>
</form>
However there is a problem that the glyphicons are visible when the page is loaded. See link below
http://upscfever.com/upsc-fever/en/apti/en-apti1-chp6a.html
However when i remove the code given below the page works fine. So how can i keep the below code and still achieve the purpose.
<script>
$(document).ready(function(){
$("#header").load("http://upscfever.com/upsc-fever/header.html");
$("#footer").load("http://upscfever.com/upsc-fever/footer.html");
});
</script>
You can inspect the glyphicon in the dev console. Find out it's identifier, and then in your css, set it's initial display to none.
Don't forget to be as specific as possible to future proof it.
Quick question I have 3 checkbox's
I want to make the text next to them white, and by text next to time I mean the YES part
any idea's ?
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<input type="checkbox" value="No" id="sound">Yes
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<input type="checkbox" value="No" id="text">Yes
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">Yes
</div>
Probably a span is easiest:
<h4><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">
<span class="whiteText">Yes</span>
</div>
CSS:
.whiteText {
color: white;
}
Or with inline styling by replacing the class with a style="color:white;".
You can kill two birds with one stone by giving all your checkbxes and radio buttons labels, with a "for" attribute.
This firstly allows you to attach CSS to the label (give the label an id for this). But it is also the correct way to script checkboxes and radios these days, to make your web site accessible to the disabled. People who have impaired eyesight, or impaired handling, have difficulty clicking items as small as checkboxes. A labels becomes selectable along with the checkbox it is attached to, providing a much bigger area for the user to click on. It's good practice these days, especially if you do professional web development.
Just add a label and style the label. I ll use inline styles here but it's best practice to separate html and CSS
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<label style="color:white;"><input type="checkbox" value="No" id="sound">Yes</label>
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="text">Yes</label>
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="flash">Yes</label>
</div>
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/