Think about a survey:
- Do you smoke?
- Yes
- No (skip to 4.)
- How often do you smoke?
- Every hour
- Every two hours
- Do you realize ...
- Not really
- Is question four a question?
- Yes
- No
This could be done in a non-obstrusive way: If the "(skip to 4.)" text was inside its own span with its own CSS class, it would be trivial to add data-skip-questions to that span, and have jQuery look for
span[data-skip-questions]
, and use String.split
with jQuery.add
to register with this plugin.html code:
<ol class="questions">
<li>Do you smoke?
<ol>
<li><input type="radio" name="q1" value="y" />Yes</li>
<li><input type="radio" name="q1" value="n" />No <span data-skip-questions="2 3">(skip to 4.)</span></li>
</ol>
</li>
<li>How often do you smoke?
<ol>
<li><input type="radio" name="q2" value="1" /> Every hour</li>
<li><input type="radio" name="q2" value="2" /> Every two hours</li>
</ol>
</li>
<li>Do you realize ...
<ol>
<li><input type="radio" name="q3" value="n" /> Not really...</li>
</ol>
</li>
<li>Is question four a question?
<ol>
<li><input type="radio" name="q4" value="y" /> Yes</li>
<li><input type="radio" name="q4" value="n" /> No</li>
</ol>
</li>
</ol>
javascript code:$('span[data-skip-questions]').each(function() {
var questionsToSkip = $(this).data('skip-questions').split(' '),
q = $(null),
watchedInput = $(this).parents('li:first').find('input[type="radio"]');
$.each(questionsToSkip, function(i, val) {
q = q.add($('ol.questions > li')
.eq(val - 1));
});
$(q).hide().showWhen(watchedInput, true);
})
// Hide the span, since the user doesn't have to skip the questions snymore.
.hide();
Here's a fiddle for the survey example.Edit:
The plugin is now on github. It was released under the WTFPL. Feel free to fork and use!
No comments:
Post a Comment