Markup for multiple choice "quiz"
Home / Site Building & Testing / Markup for multiple choice "quiz"
I'm presented with the following scenario:
Question:
[ ] Answer 1
[ ] Answer 2
...
Another Question:
and so on
Two techniques come to mind:
<h3>Question:</h3>
<ul>
<li><label><input type="radio"> Answer 1</label</li>
<li><label><input type="radio"> Answer 2</label</li>
...
</ul>
OR:
<dl>
<dt>Question:</dt>
<dd><label><input type="radio">Answer 1</label></dd>
<dd><label><input type="radio">Answer 2</label></dd>
...
</dl>
The latter seems to better group the answers to the question, but there is only one correct answer, so it seems to be blurring semantics to leave them as "definitions". Any thoughts?
_________________
Supermod @ CodingForums
Website: http://www.jasonkarldavis.com
Share: 
Personally, I'd stick with the first option, and use CSS to do some styling on the relevant ul and li classes.
While definition lists can be useful in certain circumstances, I don't think that quizzes are necessarily that circumstance!
Share:
how about the more semantically correct (IMHO):
| Code: |
|
<fieldset> <legend>Question:</legend> <label><input type="radio"> Answer 1</label> <label><input type="radio"> Answer 2</label> ... </fieldset> <fieldset> <legend>Another question</legend> ... </fieldset> |
with suitable style for the label (display: block; in this configuration should do the job nicely, and suppressing the border on the fieldset)
?
_________________
Patrick H. Lauke / webmaster / University of Salford
co-lead: WaSP Accesibility Task Force
take it to the streets ... WaSP Street Team
personal: splintered | photographia | redux
co-author: Web Accessibility - Web Standards and Regulatory Compliance
Share:
I like the fieldset! However, I feel as though the answers should be a list... perhaps putting a <ul><li> around the subsequent <label>'s would be appropriate?_________________
Supermod @ CodingForums
Website: http://www.jasonkarldavis.com
Share:
| Jason Davis wrote: |
| I like the fieldset! However, I feel as though the answers should be a list... perhaps putting a <ul><li> around the subsequent <label>'s would be appropriate? |
beware of listitis. once you look hard enough, anything can become a list. having label/input blocks sequentially in a fieldset is, in my view, enough structure to suggest it's a list of choices. otherwise you may well use a list for any other form as well...
_________________
Patrick H. Lauke / webmaster / University of Salford
co-lead: WaSP Accesibility Task Force
take it to the streets ... WaSP Street Team
personal: splintered | photographia | redux
co-author: Web Accessibility - Web Standards and Regulatory Compliance
Share:
Your point is made. 
I would disagree on this being a bad case of list-itis, but the comment about fieldset grouping similarly to ul does make my list structure rather superfluous.
As always, thanks for the comments!
_________________
Supermod @ CodingForums
Website: http://www.jasonkarldavis.com
Share:
Page 1 of 1
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum