Merge pull request #13413 from edx/release

Merge release back to master

cms/djangoapps/contentstore/tests/test_crud.py

@@ -35,8 +35,8 @@ class TemplateTests(ModuleStoreTestCase):
         self.assertIsNotNone(dropdown)
         self.assertIn('markdown', dropdown['metadata'])
         self.assertIn('data', dropdown)
-        self.assertRegexpMatches(dropdown['metadata']['markdown'], r'^Dropdown.*')
-        self.assertRegexpMatches(dropdown['data'], r'<problem>\s*<p>Dropdown.*')
+        self.assertRegexpMatches(dropdown['metadata']['markdown'], r'.*dropdown problems.*')
+        self.assertRegexpMatches(dropdown['data'], r'<problem>\s*<optionresponse>\s*<p>.*dropdown problems.*')
 
     def test_get_some_templates(self):
         self.assertEqual(len(SequenceDescriptor.templates()), 0)

cms/static/cms/js/require-config.js

@@ -28,6 +28,7 @@
             'mustache': 'js/vendor/mustache',
             'codemirror': 'js/vendor/codemirror-compressed',
             'codemirror/stex': 'js/vendor/CodeMirror/stex',
+            'pretty-print': 'js/lib/pretty-print',
             'jquery': 'common/js/vendor/jquery',
             'jquery-migrate': 'common/js/vendor/jquery-migrate',
             'jquery.ui': 'js/vendor/jquery-ui.min',

common/djangoapps/pipeline_js/templates/xmodule.js

@@ -6,9 +6,8 @@
 ## and attach them to the global context manually.
 define(["jquery", "underscore", "codemirror", "tinymce",
         "jquery.tinymce", "jquery.qtip", "jquery.scrollTo", "jquery.flot",
-        "jquery.cookie",
-        "utility"],
-       function($, _, CodeMirror, tinymce) {
+        "jquery.cookie", "pretty-print", "utility"],
+       function($, _, CodeMirror) {
     window.$ = $;
     window._ = _;
     require(['mathjax']);

common/lib/capa/capa/capa_problem.py

@@ -13,6 +13,7 @@ Main module which shows problems (of "capa" type).
 This is used by capa_module.
 """
 
+from collections import OrderedDict
 from copy import deepcopy
 from datetime import datetime
 import logging
@@ -35,6 +36,16 @@ from capa.safe_exec import safe_exec
 # extra things displayed after "show answers" is pressed
 solution_tags = ['solution']
 
+# fully accessible capa input types
+ACCESSIBLE_CAPA_INPUT_TYPES = [
+    'checkboxgroup',
+    'radiogroup',
+    'choicegroup',
+    'optioninput',
+    'textline',
+    'formulaequationinput',
+]
+
 # these get captured as student responses
 response_properties = ["codeparam", "responseparam", "answer", "openendedparam"]
 
@@ -176,7 +187,7 @@ class LoncapaProblem(object):
         # transformations.  This also creates the dict (self.responders) of Response
         # instances for each question in the problem. The dict has keys = xml subtree of
         # Response, values = Response instance
-        self._preprocess_problem(self.tree)
+        self.problem_data = self._preprocess_problem(self.tree)
 
         if not self.student_answers:  # True when student_answers is an empty dict
             self.set_initial_display()
@@ -752,7 +763,9 @@ class LoncapaProblem(object):
 
         if problemtree.tag in inputtypes.registry.registered_tags():
             # If this is an inputtype subtree, let it render itself.
-            status = "unsubmitted"
+            response_data = self.problem_data[problemid]
+
+            status = 'unsubmitted'
             msg = ''
             hint = ''
             hintmode = None
@@ -766,7 +779,7 @@ class LoncapaProblem(object):
                 hintmode = self.correct_map.get_hintmode(pid)
                 answervariable = self.correct_map.get_property(pid, 'answervariable')
 
-            value = ""
+            value = ''
             if self.student_answers and problemid in self.student_answers:
                 value = self.student_answers[problemid]
 
@@ -780,6 +793,7 @@ class LoncapaProblem(object):
                 'id': input_id,
                 'input_state': self.input_state[input_id],
                 'answervariable': answervariable,
+                'response_data': response_data,
                 'feedback': {
                     'message': msg,
                     'hint': hint,
@@ -836,27 +850,30 @@ class LoncapaProblem(object):
         Obtain all responder answers and save as self.responder_answers dict (key = response)
         """
         response_id = 1
+        problem_data = {}
         self.responders = {}
         for response in tree.xpath('//' + "|//".join(responsetypes.registry.registered_tags())):
-            response_id_str = self.problem_id + "_" + str(response_id)
+            responsetype_id = self.problem_id + "_" + str(response_id)
             # create and save ID for this response
-            response.set('id', response_id_str)
+            response.set('id', responsetype_id)
             response_id += 1
 
             answer_id = 1
             input_tags = inputtypes.registry.registered_tags()
             inputfields = tree.xpath(
-                "|".join(['//' + response.tag + '[@id=$id]//' + x for x in input_tags + solution_tags]),
-                id=response_id_str
+                "|".join(['//' + response.tag + '[@id=$id]//' + x for x in input_tags]),
+                id=responsetype_id
             )
 
-            # assign one answer_id for each input type or solution type
+            # assign one answer_id for each input type
             for entry in inputfields:
                 entry.attrib['response_id'] = str(response_id)
                 entry.attrib['answer_id'] = str(answer_id)
                 entry.attrib['id'] = "%s_%i_%i" % (self.problem_id, response_id, answer_id)
                 answer_id = answer_id + 1
 
+            self.response_a11y_data(response, inputfields, responsetype_id, problem_data)
+
             # instantiate capa Response
             responsetype_cls = responsetypes.registry.get_class_for_tag(response.tag)
             responder = responsetype_cls(response, inputfields, self.context, self.capa_system, self.capa_module)
@@ -881,3 +898,85 @@ class LoncapaProblem(object):
         for solution in tree.findall('.//solution'):
             solution.attrib['id'] = "%s_solution_%i" % (self.problem_id, solution_id)
             solution_id += 1
+
+        return problem_data
+
+    def response_a11y_data(self, response, inputfields, responsetype_id, problem_data):
+        """
+        Construct data to be used for a11y.
+
+        Arguments:
+            response (object): xml response object
+            inputfields (list): list of inputfields in a responsetype
+            responsetype_id (str): responsetype id
+            problem_data (dict): dict to be filled with response data
+        """
+        # if there are no inputtypes then don't do anything
+        if not inputfields:
+            return
+
+        element_to_be_deleted = None
+        label = ''
+
+        if len(inputfields) > 1:
+            response.set('multiple_inputtypes', 'true')
+            group_label_tag = response.find('label')
+            group_label_tag_text = ''
+            if group_label_tag is not None:
+                group_label_tag.tag = 'p'
+                group_label_tag.set('id', responsetype_id)
+                group_label_tag.set('class', 'multi-inputs-group-label')
+                group_label_tag_text = group_label_tag.text
+
+            for inputfield in inputfields:
+                problem_data[inputfield.get('id')] = {
+                    'group_label': group_label_tag_text,
+                    'label': inputfield.attrib.get('label', ''),
+                    'descriptions': {}
+                }
+        else:
+            # Extract label value from <label> tag or label attribute from inside the responsetype
+            responsetype_label_tag = response.find('label')
+            if responsetype_label_tag is not None:
+                label = responsetype_label_tag.text
+                # store <label> tag containing question text to delete
+                # it later otherwise question will be rendered twice
+                element_to_be_deleted = responsetype_label_tag
+            elif 'label' in inputfields[0].attrib:
+                # in this case we have old problems with label attribute and p tag having question in it
+                # we will pick the first sibling of responsetype if its a p tag and match the text with
+                # the label attribute text. if they are equal then we will use this text as question.
+                # Get first <p> tag before responsetype, this <p> may contains the question text.
+                p_tag = response.xpath('preceding-sibling::*[1][self::p]')
+
+                if p_tag and p_tag[0].text == inputfields[0].attrib['label']:
+                    label = p_tag[0].text
+                    element_to_be_deleted = p_tag[0]
+            else:
+                # In this case the problems don't have tag or label attribute inside the responsetype
+                # so we will get the first preceding label tag w.r.t to this responsetype.
+                # This will take care of those multi-question problems that are not using --- in their markdown.
+                label_tag = response.xpath('preceding-sibling::*[1][self::label]')
+                if label_tag:
+                    label = label_tag[0].text
+                    element_to_be_deleted = label_tag[0]
+
+            # delete label or p element only if inputtype is fully accessible
+            if inputfields[0].tag in ACCESSIBLE_CAPA_INPUT_TYPES and element_to_be_deleted is not None:
+                element_to_be_deleted.getparent().remove(element_to_be_deleted)
+
+            # Extract descriptions and set unique id on each description tag
+            description_tags = response.findall('description')
+            description_id = 1
+            descriptions = OrderedDict()
+            for description in description_tags:
+                descriptions[
+                    "description_%s_%i" % (responsetype_id, description_id)
+                ] = description.text
+                response.remove(description)
+                description_id += 1
+
+            problem_data[inputfields[0].get('id')] = {
+                'label': label.strip() if label else '',
+                'descriptions': descriptions
+            }

common/lib/capa/capa/inputtypes.py

@@ -96,10 +96,13 @@ class Status(object):
             'correct': _('This answer is correct.'),
             'incorrect': _('This answer is incorrect.'),
             'partially-correct': _('This answer is partially correct.'),
-            'unanswered': _('This answer is unanswered.'),
-            'unsubmitted': _('This answer is unanswered.'),
             'queued': _('This answer is being processed.'),
         }
+        tooltips.update(
+            dict.fromkeys(
+                ['incomplete', 'unanswered', 'unsubmitted'], _('Not yet answered.')
+            )
+        )
         self.display_name = names.get(status, unicode(status))
         self.display_tooltip = tooltips.get(status, u'')
         self._status = status or ''
@@ -224,7 +227,8 @@ class InputTypeBase(object):
         self.hint = feedback.get('hint', '')
         self.hintmode = feedback.get('hintmode', None)
         self.input_state = state.get('input_state', {})
-        self.answervariable = state.get("answervariable", None)
+        self.answervariable = state.get('answervariable', None)
+        self.response_data = state.get('response_data')
 
         # put hint above msg if it should be displayed
         if self.hintmode == 'always':
@@ -316,8 +320,18 @@ class InputTypeBase(object):
             'value': self.value,
             'status': Status(self.status, self.capa_system.i18n.ugettext),
             'msg': self.msg,
+            'response_data': self.response_data,
             'STATIC_URL': self.capa_system.STATIC_URL,
+            'describedby': '',
         }
+
+        # Don't add aria-describedby attribute if there are no descriptions
+        if self.response_data.get('descriptions'):
+            description_ids = ' '.join(self.response_data.get('descriptions').keys())
+            context.update(
+                {'describedby': 'aria-describedby="{}"'.format(description_ids)}
+            )
+
         context.update(
             (a, v) for (a, v) in self.loaded_attributes.iteritems() if a in self.to_render
         )
@@ -344,7 +358,7 @@ class InputTypeBase(object):
 
         context = self._get_render_context()
 
-        html = self.capa_system.render_template(self.template, context)
+        html = self.capa_system.render_template(self.template, context).strip()
 
         try:
             output = etree.XML(html)
@@ -377,7 +391,7 @@ class OptionInput(InputTypeBase):
 
     Example:
 
-    <optioninput options="('Up','Down')" label="Where is the sky?" correct="Up"/><text>The location of the sky</text>
+    <optioninput options="('Up','Down')" correct="Up"/><text>The location of the sky</text>
 
     # TODO: allow ordering to be randomized
     """
@@ -413,9 +427,15 @@ class OptionInput(InputTypeBase):
         Convert options to a convenient format.
         """
         return [Attribute('options', transform=cls.parse_options),
-                Attribute('label', ''),
                 Attribute('inline', False)]
 
+    def _extra_context(self):
+        """
+        Return extra context.
+        """
+        _ = self.capa_system.i18n.ugettext
+        return {'default_option_text': _('Select an option')}
+
 #-----------------------------------------------------------------------------
 
 
@@ -432,7 +452,7 @@ class ChoiceGroup(InputTypeBase):
 
     Example:
 
-    <choicegroup label="Which foil?">
+    <choicegroup>
       <choice correct="false" name="foil1">
         <text>This is foil One.</text>
       </choice>
@@ -475,7 +495,6 @@ class ChoiceGroup(InputTypeBase):
         #  `django.utils.translation.ugettext_noop` because Django cannot be imported in this file
         _ = lambda text: text
         return [Attribute("show_correctness", "always"),
-                Attribute('label', ''),
                 Attribute("submitted_message", _("Answer received."))]
 
     def _extra_context(self):
@@ -637,7 +656,7 @@ class TextLine(InputTypeBase):
     is used e.g. for embedding simulations turned into questions.
 
     Example:
-        <textline math="1" trailing_text="m/s" label="How fast is a cheetah?" />
+        <textline math="1" trailing_text="m/s"/>
 
     This example will render out a text line with a math preview and the text 'm/s'
     after the end of the text line.
@@ -653,7 +672,6 @@ class TextLine(InputTypeBase):
         """
         return [
             Attribute('size', None),
-            Attribute('label', ''),
 
             Attribute('hidden', False),
             Attribute('inline', False),
@@ -713,7 +731,6 @@ class FileSubmission(InputTypeBase):
         Convert the list of allowed files to a convenient format.
         """
         return [Attribute('allowed_files', '[]', transform=cls.parse_files),
-                Attribute('label', ''),
                 Attribute('required_files', '[]', transform=cls.parse_files), ]
 
     def setup(self):
@@ -1027,7 +1044,6 @@ class Schematic(InputTypeBase):
             Attribute('analyses', None),
             Attribute('initial_value', None),
             Attribute('submit_analyses', None),
-            Attribute('label', ''),
         ]
 
     def _extra_context(self):
@@ -1063,7 +1079,6 @@ class ImageInput(InputTypeBase):
         """
         return [Attribute('src'),
                 Attribute('height'),
-                Attribute('label', ''),
                 Attribute('width'), ]
 
     def setup(self):
@@ -1154,8 +1169,7 @@ class ChemicalEquationInput(InputTypeBase):
         """
         Can set size of text field.
         """
-        return [Attribute('size', '20'),
-                Attribute('label', ''), ]
+        return [Attribute('size', '20'), ]
 
     def _extra_context(self):
         """
@@ -1218,7 +1232,7 @@ class FormulaEquationInput(InputTypeBase):
 
     Example:
 
-    <formulaequationinput size="50" label="Enter the equation for motion" />
+    <formulaequationinput size="50"/>
 
     options: size -- width of the textbox.
              trailing_text -- text to show after the input textbox when
@@ -1236,7 +1250,6 @@ class FormulaEquationInput(InputTypeBase):
         return [
             Attribute('size', '20'),
             Attribute('inline', False),
-            Attribute('label', ''),
             Attribute('trailing_text', ''),
         ]
 
@@ -1626,7 +1639,7 @@ class ChoiceTextGroup(InputTypeBase):
         select the correct choice and fill in numbers to make it accurate.
       <endouttext/>
       <choicetextresponse>
-        <radiotextgroup label="What is the correct choice?">
+        <radiotextgroup>
           <choice correct="false">The lowest number rolled was:
             <decoy_input/> and the highest number rolled was:
             <decoy_input/> .</choice>
@@ -1649,7 +1662,7 @@ class ChoiceTextGroup(InputTypeBase):
         select the correct choices and fill in numbers to make them accurate.
       <endouttext/>
       <choicetextresponse>
-        <checkboxtextgroup label="What is the answer?">
+        <checkboxtextgroup>
              <choice correct="true">
                 The lowest number selected was <numtolerance_input answer="1.4142" tolerance="0.01"/>
              </choice>
@@ -1715,7 +1728,6 @@ class ChoiceTextGroup(InputTypeBase):
         return [
             Attribute("show_correctness", "always"),
             Attribute("submitted_message", _("Answer received.")),
-            Attribute("label", ""),
         ]
 
     def _extra_context(self):

common/lib/capa/capa/responsetypes.py

@@ -250,8 +250,27 @@ class LoncapaResponse(object):
           - renderer : procedure which produces HTML given an ElementTree
           - response_msg: a message displayed at the end of the Response
         """
-        # render ourself as a <span> + our content
-        tree = etree.Element('span')
+        _ = self.capa_system.i18n.ugettext
+
+        # get responsetype index to make responsetype label
+        response_index = self.xml.attrib['id'].split('_')[-1]
+        # Translators: index here could be 1,2,3 and so on
+        response_label = _(u'Question {index}').format(index=response_index)
+
+        # wrap the content inside a section
+        tree = etree.Element('section')
+        tree.set('class', 'wrapper-problem-response')
+        tree.set('tabindex', '-1')
+        tree.set('aria-label', response_label)
+
+        if self.xml.get('multiple_inputtypes'):
+            # add <div> to wrap all inputtypes
+            content = etree.SubElement(tree, 'div')
+            content.set('class', 'multi-inputs-group')
+            content.set('role', 'group')
+            content.set('aria-labelledby', self.xml.get('id'))
+        else:
+            content = tree
 
         # problem author can make this span display:inline
         if self.xml.get('inline', ''):
@@ -261,12 +280,12 @@ class LoncapaResponse(object):
             # call provided procedure to do the rendering
             item_xhtml = renderer(item)
             if item_xhtml is not None:
-                tree.append(item_xhtml)
+                content.append(item_xhtml)
         tree.tail = self.xml.tail
 
         # Add a <div> for the message at the end of the response
         if response_msg:
-            tree.append(self._render_response_msg_html(response_msg))
+            content.append(self._render_response_msg_html(response_msg))
 
         return tree
 

common/lib/capa/capa/templates/annotationinput.html

+<%! from openedx.core.djangolib.markup import HTML %>
 <form class="annotation-input">
 <div class="script_placeholder" data-src="${STATIC_URL}js/capa/annotationinput.js"/>
 
@@ -59,6 +60,5 @@
 </form>
 
 % if msg:
-<span class="message">${msg|n}</span>
+<span class="message">${HTML(msg)}</span>
 % endif
-

common/lib/capa/capa/templates/chemicalequationinput.html

@@ -3,7 +3,7 @@
 
     <div class="${status.classname}" id="status_${id}">
 
-    <input type="text" name="input_${id}" id="input_${id}" aria-label="${label}" aria-describedby="answer_${id}" data-input-id="${id}" value="${value|h}"
+    <input type="text" name="input_${id}" id="input_${id}" aria-label="${response_data['label']}" aria-describedby="answer_${id}" data-input-id="${id}" value="${value|h}"
    % if size:
    size="${size}"
    % endif

common/lib/capa/capa/templates/choicegroup.html

+<%! from openedx.core.djangolib.markup import HTML %>
+<%
+  def is_radio_input(choice_id):
+    return input_type == 'radio' and ((isinstance(value, basestring) and (choice_id == value)) or (
+      not isinstance(value, basestring) and choice_id in value
+    ))
+%>
 <form class="choicegroup capa_inputtype" id="inputtype_${id}">
-    <fieldset role="${input_type}group" aria-label="${label}">
-        % for choice_id, choice_description in choices:
-        <label for="input_${id}_${choice_id}"
-            ## If the student has selected this choice...
-            % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
+    <fieldset ${describedby}>
+      % if response_data['label']:
+        <legend id="${id}-legend" class="response-fieldset-legend field-group-hd">${response_data['label']}</legend>
+      % endif
+      % for description_id, description_text in response_data['descriptions'].items():
+        <p class="question-description" id="${description_id}">${description_text}</p>
+      % endfor
+        % for choice_id, choice_label in choices:
+          <div class="field" aria-live="polite" aria-atomic="true">
             <%
-                if status == 'correct':
-                    correctness = 'correct'
-                elif status == 'partially-correct':
-                    correctness = 'partially-correct'
-                elif status == 'incorrect':
-                    correctness = 'incorrect'
-                else:
-                    correctness = None
+              label_class = 'response-label field-label label-inline'
             %>
-            % if correctness and not show_correctness=='never':
-            class="choicegroup_${correctness}"
-            % endif
-            % endif
-            >
-            <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" aria-role="radio" aria-describedby="answer_${id}" value="${choice_id}"
-            ## If the student selected this choice...
-            % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
-            checked="true"
-            % elif input_type != 'radio' and choice_id in value:
-            checked="true"
-            % endif
-            % if input_type != 'radio':
-            aria-multiselectable="true"
-            % endif
+            <label id="${id}-${choice_id}-label"
+                ## If the student has selected this choice...
+                % if is_radio_input(choice_id):
+                <%
+                    if status == 'correct':
+                        correctness = 'correct'
+                    elif status == 'partially-correct':
+                        correctness = 'partially-correct'
+                    elif status == 'incorrect':
+                        correctness = 'incorrect'
+                    else:
+                        correctness = None
+                %>
+                    % if correctness and not show_correctness == 'never':
+                        <% label_class += ' choicegroup_' + correctness %>
+                    % endif
+                % endif
+                class="${label_class}"
+                ${describedby}
+                >
+                <input type="${input_type}" name="input_${id}${name_array_suffix}" id="input_${id}_${choice_id}" class="field-input input-${input_type}" value="${choice_id}"
+                ## If the student selected this choice...
+                % if is_radio_input(choice_id):
+                checked="true"
+                % elif input_type != 'radio' and choice_id in value:
+                checked="true"
+                % endif
+                /> ${choice_label}
 
-            /> ${choice_description}
-
-            % if input_type == 'radio' and ( (isinstance(value, basestring) and (choice_id == value))  or  (not isinstance(value, basestring) and choice_id in value) ):
-            % if status in ('correct', 'partially-correct', 'incorrect') and not show_correctness=='never':
-            <span class="sr status">${choice_description|h} - ${status.display_name}</span>
-            % endif
-            % endif
-        </label>
+                % if is_radio_input(choice_id):
+                  % if status in ('correct', 'partially-correct', 'incorrect') and not show_correctness == 'never':
+                    <span class="sr status" id="${id}-${choice_id}-labeltext">${status.display_name}</span>
+                  % endif
+                % endif
+            </label>
+          </div>
         % endfor
         <span id="answer_${id}"></span>
     </fieldset>
     <div class="indicator-container">
         % if input_type == 'checkbox' or not value:
-            <span class="status ${status.classname if show_correctness != 'never' else 'unanswered'}" id="status_${id}" aria-describedby="inputtype_${id}" data-tooltip="${status.display_tooltip}">
-                <span class="sr">
-                    %for choice_id, choice_description in choices:
-                        % if choice_id in value:
-                            ${choice_description},
-                        %endif
-                    %endfor
-                    -
-                    ${status.display_tooltip}
-                </span>
+            <span class="status ${status.classname if show_correctness != 'never' else 'unanswered'}" id="status_${id}" data-tooltip="${status.display_tooltip}">
+                <span class="sr">${status.display_tooltip}</span>
             </span>
         % endif
     </div>
@@ -60,6 +68,6 @@
     <div class="capa_alert">${submitted_message}</div>
     %endif
     % if msg:
-    <span class="message">${msg|n}</span>
+    <span class="message">${HTML(msg)}</span>
     % endif
 </form>

common/lib/capa/capa/templates/choicetext.html

 <%! from django.utils.translation import ugettext as _ %>
 <% element_checked = False %>
 % for choice_id, _ in choices:
-    <%choice_id = choice_id %>
+    <% choice_id = choice_id %>
     %if choice_id in value:
         <% element_checked = True %>
     %endif
-%endfor
+% endfor
 <section id="choicetextinput_${id}" class="choicetextinput">
 <form class="choicetextgroup capa_inputtype" id="inputtype_${id}">
     <div class="script_placeholder" data-src="${STATIC_URL}js/capa/choicetextinput.js"/>
-    
-    <fieldset aria-label="${label}">
+
+    <fieldset aria-label="${response_data['label']}">
         % for choice_id, choice_description in choices:
-        <%choice_id= choice_id %>
+        <% choice_id = choice_id %>
         <section id="forinput${choice_id}"
             % if input_type == 'radio' and choice_id in value :
             <%
@@ -59,7 +59,7 @@
         <span id="answer_${id}"></span>
     </fieldset>
         <input class= "choicetextvalue" type="hidden"  name="input_${id}{}" id="input_${id}" value="${value|h}" />
-    
+
     <div class="indicator-container">
     % if input_type == 'checkbox' or not element_checked:
         <span class="status ${status.classname}" id="status_${id}"></span>

common/lib/capa/capa/templates/drag_and_drop_input.html

+<%! from openedx.core.djangolib.markup import HTML %>
 <div id="inputtype_${id}" class="capa_inputtype">
     <div class="drag_and_drop_problem_div" id="drag_and_drop_div_${id}"
      data-plain-id="${id}">
@@ -23,7 +24,7 @@
     <p id="answer_${id}" class="answer"></p>
 
     % if msg:
-        <span class="message">${msg|n}</span>
+        <span class="message">${HTML(msg)}</span>
     % endif
 
     % if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:

common/lib/capa/capa/templates/filesubmission.html

+<%! from openedx.core.djangolib.markup import HTML %>
 <section id="filesubmission_${id}" class="filesubmission">
   <div class="grader-status file">
 
@@ -7,7 +8,7 @@
     % endif
     <p class="debug">${status}</p>
 
-    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files|h}" data-allowed_files="${allowed_files|h}" aria-label="${label}" />
+    <input type="file" name="input_${id}" id="input_${id}" value="${value}" multiple="multiple" data-required_files="${required_files|h}" data-allowed_files="${allowed_files|h}" aria-label="${response_data['label']}"/>
   </div>
-    <div class="message">${msg|n}</div>
+    <div class="message">${HTML(msg)}</div>
 </section>

common/lib/capa/capa/templates/formulaequationinput.html

 <%page expression_filter="h"/>
 <%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = 'style="display:inline-block;vertical-align:top"' if inline else "" %>
-<section id="formulaequationinput_${id}" class="inputtype formulaequationinput" ${doinline | n}>
-  <div class="${status.classname}" id="status_${id}">
-    <input type="text" name="input_${id}" id="input_${id}"
-        data-input-id="${id}" value="${value}"
-        aria-label="${label}"
-        aria-describedby="${id}_status"
-        % if size:
-        size="${size}"
-        % endif
-        />
-    <span class="trailing_text">${trailing_text}</span>
+<div id="formulaequationinput_${id}" class="inputtype formulaequationinput" ${doinline | n, decode.utf8}>
+    <div class="${status.classname}" id="status_${id}">
+      % if response_data['label']:
+          <label class="problem-group-label" for="input_${id}">${response_data['label']}</label>
+      % endif
+        % for description_id, description_text in response_data['descriptions'].items():
+            <p class="question-description" id="${description_id}">${description_text}</p>
+        % endfor
+        <input type="text" name="input_${id}" id="input_${id}"
+            data-input-id="${id}" value="${value}"
+            ${describedby | n, decode.utf8}
+            % if size:
+            size="${size}"
+            % endif
+            />
+        <span class="trailing_text">${trailing_text}</span>
 
-      <span class="status" id="${id}_status" data-tooltip="${status.display_tooltip}">
-        <span class="sr">
-          ${status.display_name}
+        <span class="status" id="${id}_status" data-tooltip="${status.display_tooltip}">
+            <span class="sr">${status.display_tooltip}</span>
         </span>
-      </span>
 
-      <p id="answer_${id}" class="answer"></p>
+        <p id="answer_${id}" class="answer"></p>
 
-      <div id="input_${id}_preview" class="equation">
-        \(\)
-        <img src="${STATIC_URL}images/spinner.gif" class="loading" alt="Loading"/>
-      </div>
-  </div>
+        <div id="input_${id}_preview" class="equation">
+            \(\)
+            <img src="${STATIC_URL}images/spinner.gif" class="loading" alt="Loading"/>
+        </div>
+    </div>
 
-  <div class="script_placeholder" data-src="${previewer}"/>
+    <div class="script_placeholder" data-src="${previewer}"/>
 
   % if msg:
       <span class="message">${HTML(msg)}</span>
   % endif
-</section>
+</div>

common/lib/capa/capa/templates/optioninput.html

+<%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = "inline" if inline else "" %>
 
 <form class="inputtype option-input ${doinline}">
-   <select name="input_${id}" id="input_${id}" aria-label="${label}" aria-describedby="answer_${id}">
-      <option value="option_${id}_dummy_default">  </option>
+  % if response_data['label']:
+      <label class="problem-group-label" for="input_${id}">${response_data['label']}</label>
+  % endif
+
+  % for description_id, description_text in response_data['descriptions'].items():
+    <p class="question-description" id="${description_id}">${description_text}</p>
+  % endfor
+
+   <select name="input_${id}" id="input_${id}" ${describedby}>
+      <option value="option_${id}_dummy_default">${default_option_text}</option>
       % for option_id, option_description in options:
           <option value="${option_id}"
-          % if (option_id==value or option_id==answervariable):
+          % if (option_id == value or option_id == answervariable):
         	selected="true"
           % endif
           > ${option_description}</option>
@@ -13,15 +22,12 @@
     </select>
 
   <div class="indicator-container">
-    <span class="status ${status.classname}"
-        id="status_${id}"
-        aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}">
-      <span class="sr">${value|h} - ${status.display_tooltip}</span>
+    <span class="status ${status.classname}" id="status_${id}" data-tooltip="${status.display_tooltip}">
+        <span class="sr">${status.display_tooltip}</span>
     </span>
   </div>
   <p class="answer" id="answer_${id}"></p>
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
-
 </form>

common/lib/capa/capa/templates/schematicinput.html

@@ -8,7 +8,7 @@
     analyses="${analyses}"
     name="input_${id}"
     id="input_${id}"
-    aria-label="${label}"
+    aria-label="${response_data['label']}"
     aria-describedby="answer_${id}"
     value="${value|h}"
     initial_value="${initial_value|h}"

common/lib/capa/capa/templates/solutionspan.html

-<section class="solution-span">
+<div class="solution-span">
  <span id="solution_${id}"></span>
-</section>
+</div>

common/lib/capa/capa/templates/textline.html

@@ -2,62 +2,57 @@
 <%! from openedx.core.djangolib.markup import HTML %>
 <% doinline = "inline" if inline else "" %>
 
-<div id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline" >
-
-    % if preprocessor is not None:
+<div id="inputtype_${id}" class="${'text-input-dynamath' if do_math else ''} capa_inputtype ${doinline} textline">
+% if preprocessor is not None:
     <div class="text-input-dynamath_data ${doinline}" data-preprocessor="${preprocessor['class_name']}"/>
     <div class="script_placeholder" data-src="${preprocessor['script_src']}"/>
-    % endif
+% endif
 
-    % if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'):
+% if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'):
     <div class="${status.classname} ${doinline}" id="status_${id}">
+% endif
+
+% if hidden:
+    <div style="display:none;" name="${hidden}" inputid="input_${id}" />
+% endif
+
+% if response_data['label']:
+    <label class="problem-group-label" for="input_${id}">${response_data['label']}</label>
+% endif
+
+% for description_id, description_text in response_data['descriptions'].items():
+    <p class="question-description" id="${description_id}">${description_text}</p>
+% endfor
+<input type="text" name="input_${id}" id="input_${id}" ${describedby | n, decode.utf8} value="${value}"
+    % if do_math:
+        class="math"
+    % endif
+    % if size:
+        size="${size}"
     % endif
     % if hidden:
-      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
+        style="display:none;"
     % endif
+/>
+<span class="trailing_text">${trailing_text}</span>
+
+<span class="status" data-tooltip="${status.display_tooltip}">
+    <span class="sr">${status.display_tooltip}</span>
+</span>
 
-  <input type="text" name="input_${id}" id="input_${id}" aria-label="${label}" aria-describedby="answer_${id}" value="${value}"
-        % if do_math:
-            class="math"
-        % endif
-        % if size:
-            size="${size}"
-        % endif
-        % if hidden:
-            style="display:none;"
-        % endif
-   />
-   <span class="trailing_text">${trailing_text}</span>
-
-      <span class="status" 
-         %if status != 'unsubmitted':
-         %endif
-         aria-describedby="input_${id}" data-tooltip="${status.display_tooltip}">
-        <span class="sr">
-          %if value:
-            ${value}
-          % else:
-            ${label}
-          %endif
-            -
-            ${status.display_name}
-        </span>
-      </span>
-
-      <p id="answer_${id}" class="answer"></p>
-
-      % if do_math:
-      <div id="display_${id}" class="equation">`{::}`</div>
-      <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath"></textarea>
-
-      % endif
+<p id="answer_${id}" class="answer"></p>
+
+% if do_math:
+    <div id="display_${id}" class="equation">`{::}`</div>
+    <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath"></textarea>
+% endif
 
 % if status in ('unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete'):
-</div>
+    </div>
 % endif
 
-  % if msg:
-      <span class="message">${HTML(msg)}</span>
-  % endif
+% if msg:
+  <span class="message">${HTML(msg)}</span>
+% endif
 
 </div>

common/lib/capa/capa/templates/vsepr_input.html

+<%! from openedx.core.djangolib.markup import HTML %>
 <section id="inputtype_${id}" class="capa_inputtype" >
      <table><tr><td height='600'>
     <div id="vsepr_div_${id}" style="position:relative;" data-molecules="${molecules}" data-geometries="${geometries}">
@@ -26,7 +27,7 @@
   <p id="answer_${id}" class="answer"></p>
 
   % if msg:
-      <span class="message">${msg|n}</span>
+      <span class="message">${HTML(msg)}</span>
   % endif
 % if status in ['unsubmitted', 'correct', 'incorrect', 'partially-correct', 'incomplete']:
 </div>

common/lib/capa/capa/tests/__init__.py

 """Tools for helping with testing capa."""
 
 import gettext
+from path import path  # pylint: disable=no-name-in-module
 import os
 import os.path
 
@@ -9,12 +10,29 @@ import fs.osfs
 from capa.capa_problem import LoncapaProblem, LoncapaSystem
 from capa.inputtypes import Status
 from mock import Mock, MagicMock
+from mako.lookup import TemplateLookup
 
 import xml.sax.saxutils as saxutils
 
 TEST_DIR = os.path.dirname(os.path.realpath(__file__))
 
 
+def get_template(template_name):
+    """
+    Return template for a capa inputtype.
+    """
+    return TemplateLookup(
+        directories=[path(__file__).dirname().dirname() / 'templates']
+    ).get_template(template_name)
+
+
+def capa_render_template(template, context):
+    """
+    Render template for a capa inputtype.
+    """
+    return get_template(template).render_unicode(**context)
+
+
 def tst_render_template(template, context):
     """
     A test version of render to template.  Renders to the repr of the context, completely ignoring
@@ -30,7 +48,7 @@ xqueue_interface = MagicMock()
 xqueue_interface.send_to_queue.return_value = (0, 'Success!')
 
 
-def test_capa_system():
+def test_capa_system(render_template=None):
     """
     Construct a mock LoncapaSystem instance.
 
@@ -46,7 +64,7 @@ def test_capa_system():
         filestore=fs.osfs.OSFS(os.path.join(TEST_DIR, "test_files")),
         i18n=gettext.NullTranslations(),
         node_path=os.environ.get("NODE_PATH", "/usr/local/lib/node_modules"),
-        render_template=tst_render_template,
+        render_template=render_template or tst_render_template,
         seed=0,
         STATIC_URL='/dummy-static/',
         STATUS_CLASS=Status,
@@ -66,9 +84,10 @@ def mock_capa_module():
     return capa_module
 
 
-def new_loncapa_problem(xml, capa_system=None, seed=723):
+def new_loncapa_problem(xml, capa_system=None, seed=723, use_capa_render_template=False):
     """Construct a `LoncapaProblem` suitable for unit tests."""
-    return LoncapaProblem(xml, id='1', seed=seed, capa_system=capa_system or test_capa_system(),
+    render_template = capa_render_template if use_capa_render_template else None
+    return LoncapaProblem(xml, id='1', seed=seed, capa_system=capa_system or test_capa_system(render_template),
                           capa_module=mock_capa_module())
 
 

common/lib/capa/capa/tests/response_xml_factory.py

@@ -267,6 +267,9 @@ class CustomResponseXMLFactory(ResponseXMLFactory):
 
         *answer_attr*: The "answer" attribute on the tag itself (treated as an
         alias to "expect", though "expect" takes priority if both are given)
+
+        *group_label*: Text to represent group of inputs when there are
+        multiple inputs.
         """
 
         # Retrieve **kwargs
@@ -276,6 +279,7 @@ class CustomResponseXMLFactory(ResponseXMLFactory):
         answer = kwargs.get('answer', None)
         options = kwargs.get('options', None)
         cfn_extra_args = kwargs.get('cfn_extra_args', None)
+        group_label = kwargs.get('group_label', None)
 
         # Create the response element
         response_element = etree.Element("customresponse")
@@ -293,6 +297,10 @@ class CustomResponseXMLFactory(ResponseXMLFactory):
             answer_element = etree.SubElement(response_element, "answer")
             answer_element.text = str(answer)
 
+        if group_label:
+            group_label_element = etree.SubElement(response_element, "label")
+            group_label_element.text = group_label
+
         if options:
             response_element.set('options', str(options))