apluslms/mooc-grader

Double label HTML element in questionnaire

markkuriekkinen opened this issue · 1 comments

markkuriekkinen commented

Double label HTML element in quiz:

mooc-grader/access/templates/access/graded_form.html

Line 35 in 42f1a81

<label class="control-label">{{ field.label_tag }}</label>

markkuriekkinen commented

From the PR: I write some thoughts here since I had forgotten what this was about.

  • This label is the "Question 1" text at the start of the question. Not the label for one checkbox.
  • In text input questions, clicking on the "Question 1" label should activate focus on the text input/text area.
  • In checkbox or radio button questions, clicking on the "Question 1" label should NOT activate any of the choices (i.e., tick the checkbox).
  • The PR #106 removed the class control-label from the <label>, but the class does not seem to affect anything at the moment, hence it's OK.

The if branch basically separates checkbox/radio button questions from text input questions. The label for the text input must include the for attribute so that clicking on the "Question 1" label moves focus to the text input. Checkbox questions must not use the for attribute in the "Question 1" label.