label element for selecting radio buttons by clicking text

label element for selecting radio buttons by clicking text

by Andy Morrall -
Number of replies: 10
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: -
In reply to Andy Morrall

Re: label element for selecting radio buttons by clicking text

by Julian Sedding -
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)
In reply to Julian Sedding

Re: label element for selecting radio buttons by clicking text

by Andy Morrall -

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: -
In reply to Andy Morrall

Re: label element for selecting radio buttons by clicking text

by John Papaioannou -
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: -
In reply to John Papaioannou

Re: label element for selecting radio buttons by clicking text

by David Scotson -

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: -
In reply to David Scotson

Re: label element for selecting radio buttons by clicking text

by Julian Sedding -
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: -
In reply to Julian Sedding

Re: label element for selecting radio buttons by clicking text

by David Scotson -

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: -
In reply to David Scotson

Re: label element for selecting radio buttons by clicking text

by John Papaioannou -
  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: -
In reply to John Papaioannou

Re: label element for selecting radio buttons by clicking text

by Julian Sedding -
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: -
In reply to Julian Sedding

Re: label element for selecting radio buttons by clicking text

by Andy Morrall -

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: -
In reply to Andy Morrall

Re: label element for selecting radio buttons by clicking text

by Gustav W Delius -
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: -