Quiz

label element for selecting radio buttons by clicking text

 
 
Picture of Andy Morrall
label element for selecting radio buttons by clicking text
 
Hi Everyone,

Moodle's usability is great, but I'd like to suggest one small thing to improve it.

Clicking radio buttons for multiple choice questions is a bit slow because the radio buttons are so small.

If Moodle used <label> elements, users could click on the text of the descriptions or answers associated with the radio buttons, and the radio buttons would be selected.

Jakob Neilsen describes this on http://www.useit.com/alertbox/20040927.html in Point 11 of his usability guidelines.

The code is very simple; e.g.
<input type="radio" name="sample" id="one"> <label for="one">One</label>

Clicking on the word 'One' selects the radion button. I tried to put a working example in this message, but it got filtered out. mixed

Hope this helps. I'm afraid my PHP isn't up to suggesting any code.

Andy Morrall
 
Average of ratings: -
Picture of Julian Sedding
Re: label element for selecting radio buttons by clicking text
 
Yes, that change makes life a little simpler. Its in CVS now for the multiple choice and true/false questiontypes.
 
Average of ratings:Useful (1)
Picture of Andy Morrall
Re: label element for selecting radio buttons by clicking text
 

Hi,

On testing this in the version from the CVS, there is a problem.

The <label> tag uses a 'for' argument to refer to a radio button by the radio button's ID. However, in one page of questions I have a question with the answers 'Strongly agree', 'Agree', 'Disagree' and 'Strongly disagree'.

Clicking any one of these words always selects 'Strongly disagree'.

The reason is that all the radio buttons have the same ID, which you can see by looking at the HTML. My page is http://elearn.elc.polyu.edu.hk/mod/quiz/attempt.php?q=43

The solution is to give the radio buttons different IDs, but I don't know if this would interfere with anything else, such as form submission.

Andy

 
Average of ratings: -
Picture of John Papaioannou
Re: label element for selecting radio buttons by clicking text
 
No, ids don't cause any such problems automatically. Problems might occur if there is also interaction with JavaScript, but with a little caution nothing serious there as well.

Julian, maybe you will find it easier to use Eloy's choose_from_radio() and print_checkbox() functions, defined in weblib. I just upgraded them to automatically assign ids and provide labels for their caption text, so you don't have to do anything except call them. big grin

Cheers!
 
Average of ratings: -
Picture of David Scotson
Re: label element for selecting radio buttons by clicking text
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

You only need to use the rather odd for="id" syntax when the the two items are seperated (e.g. in different table cells).

It's usually much easier (to code and read) if you just surround the entire input with label tags like this rendering the id unnecessary:

<label><input type="radio" name="sample">One</label>

edit: looking at the weblib code, this label could just replace the span for a slight increase in clarity, and decrease in page size.

Also, on a similar topic, does checked on its own validate? I thought you needed checked="checked", at least that's what I've being doing for ages, I can't quite remember why.

 
Average of ratings: -
Picture of Julian Sedding
Re: label element for selecting radio buttons by clicking text
 
In theory (W3 specification) that is true, however, I found that IE 6 does not support this syntax. Otherwise I would have prefered to use it to avoid exactly that kind of problems. The syntax with for="id" works on Firefox, IE and Opera, so I chose to go for that.

Julian
 
Average of ratings: -
Picture of David Scotson
Re: label element for selecting radio buttons by clicking text
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers

I'd not heard of that problem. Though I'll note you can add the for="id" to the label even if you do it the neater way. Does that still cause IE problems?

 
Average of ratings: -
Picture of John Papaioannou
Re: label element for selecting radio buttons by clicking text
 
  1. Julian's correct, the "nicer" syntax without for= doesn't work in IE. It's one of those annoying little things that you find out the hard way and then work around until the end of time.
  2. I agree that there are too many <span>s in there, however I was too lazy to think of what to do with them.
  3. Only checked="checked" validates. Must have missed it, I 'll put the blame on the small hours of the morning. wink
 
Average of ratings: -
Picture of Julian Sedding
Re: label element for selecting radio buttons by clicking text
 
Thanks Jon, that's a great, because it should fix this problem for many places in moodle smile I'll include these functions when I have a free minute. I already fixed this yesterday, so the latest CVS should already behave correctly.

Julian
 
Average of ratings: -
Picture of Andy Morrall
Re: label element for selecting radio buttons by clicking text
 

Hi Guys,

Thanks for implementing this.

Now it's working, any ideas about how to get it incorporated into the Lesson module? I left a message in the Lesson forum, but no reply.

Andy

 
Average of ratings: -
Picture of Gustav W Delius
Re: label element for selecting radio buttons by clicking text
 
Mark Nielsen is working on making it possible for the Quiz and Lesson modules to use the same questions code so that improvements in one will automatically be available in the other.
 
Average of ratings: -