feat: Add HTML support in explanation

drag_and_drop_v2/drag_and_drop_v2.py

@@ -30,7 +30,7 @@
 from .default_data import DEFAULT_DATA
 from .utils import (
     Constants, DummyTranslationService, FeedbackMessage,
-    FeedbackMessages, ItemStats, StateMigration, _clean_data, _
+    FeedbackMessages, ItemStats, StateMigration, clean_data, _
 )
 
 # Globals ###########################################################
@@ -620,8 +620,14 @@ def show_answer(self, data, suffix=''):
 
         answer = self._get_correct_state()
 
-        answer['explanation'] = self.data.get('explanation', '').strip()
-
+        explanation = self.data.get('explanation', '').strip()
+        if hasattr(self.runtime, 'replace_urls'):
+            explanation = self.runtime.replace_urls(explanation)
+        if hasattr(self.runtime, 'replace_course_urls'):
+            explanation = self.runtime.replace_course_urls(explanation)
+        if hasattr(self.runtime, 'replace_jump_to_id_urls'):
+            explanation = self.runtime.replace_jump_to_id_urls(explanation)
+        answer['explanation'] = explanation
         return answer
 
     @XBlock.json_handler
@@ -1203,31 +1209,31 @@ def index_dictionary(self):
 
         zones_display_names = {
             "zone_{}_display_name".format(zone_i):
-                _clean_data(zone.get("title", ""))
+                clean_data(zone.get("title", ""))
             for zone_i, zone in enumerate(self.data.get("zones", []))
         }
 
         zones_description = {
             "zone_{}_description".format(zone_i):
-                _clean_data(zone.get("description", ""))
+                clean_data(zone.get("description", ""))
             for zone_i, zone in enumerate(self.data.get("zones", []))
         }
 
         items_display_names = {
             "item_{}_display_name".format(item_i):
-                _clean_data(item.get("displayName", ""))
+                clean_data(item.get("displayName", ""))
             for item_i, item in enumerate(self.data.get("items", []))
         }
 
         items_image_description = {
             "item_{}_image_description".format(item_i):
-                _clean_data(item.get("imageDescription", ""))
+                clean_data(item.get("imageDescription", ""))
             for item_i, item in enumerate(self.data.get("items", []))
         }
 
         index_body = {
             "display_name": self.display_name,
-            "question_text": _clean_data(self.question_text),
+            "question_text": clean_data(self.question_text),
             "background_image_description": self.data.get("targetImgDescription", ""),
         }
         index_body.update(items_display_names)

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)}),
                     ])
                 ])
             ])

drag_and_drop_v2/utils.py

@@ -5,7 +5,6 @@
 import copy
 import re
 from collections import namedtuple
-
 from bleach.sanitizer import Cleaner
 
 
@@ -22,7 +21,7 @@ def ngettext_fallback(text_singular, text_plural, number):
         return text_plural
 
 
-def _clean_data(data):
+def clean_data(data):
     """ Remove html tags and extra white spaces e.g newline, tabs etc from provided data """
     cleaner = Cleaner(tags=[], strip=True)
     cleaned_text = " ".join(re.split(r"\s+", cleaner.clean(data), flags=re.UNICODE)).strip()
@@ -143,7 +142,6 @@ def apply_zone_migrations(self, zone):
         """
         migrations = (self._zone_v1_to_v2, self._zone_v2_to_v2p1)
         zone_id = zone.get('uid', zone.get('id'))
-
         return self._apply_migration(zone_id, zone, migrations)
 
     def apply_item_state_migrations(self, item_id, item_state):

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\n, dropzone\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,28 @@ 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)
 
+    def _get_explanation_html(self, explanation: str):
+        """
+        get generated html explanation
+
+        Args:
+            explanation (str): explanation text
+
+        Returns:
+            str:  generated html explanation
+        """
+
+        return ('<span><div class="detailed-solution"><p>Explanation</p><p>{explanation}</p></div></span>')\
+            .format(explanation=explanation)
+
     @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 +513,7 @@ 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'))