feat: render HTML in explanations (#295)

It makes them consistent with other XBlock fields.

Co-authored-by: Agrendalath <piotr@surowiec.it>

Author: abodacs

.gitignore

@@ -7,6 +7,7 @@ __pycache__/
 
 # Distribution / packaging
 .Python
+venv/
 env/
 build/
 develop-eggs/

Changelog.md

@@ -1,6 +1,11 @@
 Drag and Drop XBlock changelog
 ==============================
 
+Version 2.4.2 (2022-10-13)
+---------------------------
+
+* Support HTML in explanations.
+
 Version 2.4.1 (2022-10-06)
 ---------------------------
 * Remove dots on feedback and moves final feedback to end and set bold text on assessment mode.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -14,8 +14,8 @@
 import six.moves.urllib.error  # pylint: disable=import-error
 import six.moves.urllib.parse  # pylint: disable=import-error
 import six.moves.urllib.request  # pylint: disable=import-error
-import pkg_resources
 import six
+import pkg_resources
 import webob
 
 from django.utils import translation
@@ -44,6 +44,7 @@
 
 # pylint: disable=bad-continuation
 @XBlock.wants('settings')
+@XBlock.wants('replace_urls')
 @XBlock.needs('i18n')
 class DragAndDropBlock(
     ScorableXBlockMixin,
@@ -620,8 +621,21 @@ def show_answer(self, data, suffix=''):
 
         answer = self._get_correct_state()
 
-        answer['explanation'] = self.data.get('explanation', '').strip()
+        if explanation := self.data.get('explanation', '').strip():
+            if replace_urls_service := self.runtime.service(self, 'replace_urls'):
+                explanation = replace_urls_service.replace_urls(explanation)
 
+            # pylint: disable=fixme
+            # TODO: No longer needed after Maple.
+            else:
+                try:
+                    explanation = self.runtime.replace_urls(explanation)
+                    explanation = self.runtime.replace_course_urls(explanation)
+                    explanation = self.runtime.replace_jump_to_id_urls(explanation)
+                except (TypeError, AttributeError):
+                    logger.debug('Unable to perform URL substitution on the explanation: %s', explanation)
+
+            answer['explanation'] = explanation
         return answer
 
     @XBlock.json_handler

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -339,7 +339,7 @@ function DragAndDropTemplates(configuration) {
                 h('span', [
                     h('.detailed-solution', [
                         h('p', gettext('Explanation')),
-                        h('p', gettext(ctx.explanation)),
+                        h('p', {innerHTML: gettext(ctx.explanation)}),
                     ])
                 ])
             ])

setup.py

@@ -23,7 +23,7 @@ def package_data(pkg, root_list):
 
 setup(
     name='xblock-drag-and-drop-v2',
-    version='2.4.1',
+    version='2.4.2',
     description='XBlock - Drag-and-Drop v2',
     packages=['drag_and_drop_v2'],
     install_requires=[

tests/integration/test_custom_data_render.py

@@ -63,5 +63,5 @@ def test_html_title_renders_properly(self):
         Tests HTML titles are rendered properly
         """
         zones = self._get_zones()
-        self.assertEqual(u'Zone\ndroppable\nNo items placed here', zones[0].text)
-        self.assertNotEqual(u'Zone <sup>-1</sup>\ndroppable\nNo items placed here', zones[0].text)
+        self.assertEqual('Zone\ndroppable\nNo items placed here', zones[0].text)
+        self.assertNotEqual('Zone <sup>-1</sup>\ndroppable\nNo items placed here', zones[0].text)

tests/integration/test_interaction_assessment.py

@@ -474,13 +474,18 @@ def load_scenario(self, explanation_text: str, scenario_id: int):
         self._add_scenario(scenario_page_id, scenario_page_title, scenario_xml)
         self._page = self.go_to_page(scenario_page_title)
 
+    @staticmethod
+    def _get_explanation_html(explanation: str) -> str:
+        return f'<span><div class="detailed-solution"><p>Explanation</p><p>{explanation}</p></div></span>'
+
     @ddt.data(
-        (1, "This is an explanation.", True),
-        (2, " ", False),
-        (3, None, False),
+        (1, "This is an explanation.", True, "Explanation\nThis is an explanation."),
+        (2, " ", False, None),
+        (3, None, False, None),
+        (4, "12m<sup>2</sup>", True, "Explanation\n12m2"),
     )
     @ddt.unpack
-    def test_explanation(self, scenario_id: int, explanation: str, should_display: bool):
+    def test_explanation(self, scenario_id: int, explanation: str, should_display: bool, rendered_explanation: str):
         """
         Test that the "Explanation" is displayed after the "Show Answer" button is clicked.
         The docstring of the class explains when the explanation should be visible.
@@ -498,3 +503,6 @@ def test_explanation(self, scenario_id: int, explanation: str, should_display: b
 
         explanation_block = self._get_explanation()
         self.assertEqual(explanation_block.is_displayed(), should_display)
+        if should_display:
+            self.assertEqual(rendered_explanation, explanation_block.text)
+            self.assertEqual(self._get_explanation_html(explanation), explanation_block.get_attribute('innerHTML'))