Merge pull request #19 from open-craft/eugeny/html-labels

Allowed placing HTML tags for all input fields in the D&D v2 xblock

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -166,6 +166,7 @@
     margin-left: 15px;
     margin-top: 35px;
     margin-bottom: 15px;
+    font-size: 14px;
 }
 
 .xblock--drag-and-drop .popup .close {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -293,7 +293,7 @@ function DragAndDropBlock(runtime, element) {
                         content: str
                     });
 
-                    _fn.$popup.find(".popup-content").text(str);
+                    _fn.$popup.find(".popup-content").html(str);
                     return _fn.$popup.show();
                 }
             },

drag_and_drop_v2/templates/html/drag_and_drop.html

@@ -2,12 +2,12 @@
     {{ js_templates|safe }}
 
     <h2 class="problem-header">
-      {{ title }}
+      {{ title|safe }}
     </h2>
 
     <section class="problem" role="application">
         <div class="title1">Question</div>
-        <p>{{ question_text }}</p>
+        <p>{{ question_text|safe }}</p>
     </section>
 
     <section class="drag-container">

drag_and_drop_v2/templates/html/js_templates.html

 <script id="item-tpl" type="text/html">
     <li class="option" data-value="{{ id }}"
         style="width: {{ size.width }}; height: {{ size.height }}">
-        {{ displayName }}
+        {{{ displayName }}}
     </li>
 </script>
 
@@ -18,7 +18,7 @@
         left:{{ x }}px;
         width:{{ width }}px;
         height:{{ height }}px;">
-        <p>{{ title }}</p>
+        <p>{{{ title }}}</p>
     </div>
 </script>
 

tests/test_drag_and_drop_v2.py

@@ -44,8 +44,8 @@ def test_templates_contents():
     assert_in('<section class="xblock--drag-and-drop">',
         student_fragment.content)
     assert_in('{{ value }}', student_fragment.content)
-    assert_in("Test Drag &amp; Drop", student_fragment.content)
-    assert_in("Question Drag &amp; Drop", student_fragment.content)
+    assert_in("Test Drag & Drop", student_fragment.content)
+    assert_in("Question Drag & Drop", student_fragment.content)
 
     studio_fragment = block.render('studio_view', Mock())
     assert_in('<div class="xblock--drag-and-drop editor-with-buttons">',
@@ -72,54 +72,61 @@ def test_studio_submit():
     assert_equals(block.weight, 5)
     assert_equals(block.data, {'foo': 1})
 
-def test_ajax():
+
+def do_ajax(orig_file, get_file):
     assert_equals.__self__.maxDiff = None
 
     block = make_block()
 
-    with open('tests/test_data.json') as f:
+    with open(orig_file) as f:
         block.data = json.load(f)
 
-    with open('tests/test_get_data.json') as f:
+    initial_data = block.data
+    zoneA = initial_data["items"][0]["zone"]
+    zoneB = initial_data["items"][1]["zone"]
+    feedback_finish = initial_data["feedback"]["finish"]
+    get_item_feedback = lambda item, type: initial_data["items"][item]["feedback"][type]
+
+    with open(get_file) as f:
         get_data = json.loads(block.handle('get_data', Mock()).body)
         assert_equals(json.load(f), get_data)
 
     # Wrong with feedback
-    data = json.dumps({"val":0,"zone":"Zone B","top":"31px","left":"216px"})
+    data = json.dumps({"val":0,"zone":zoneB,"top":"31px","left":"216px"})
     res = json.loads(block.handle('do_attempt', make_request(data)).body)
     assert_equals(res, {
         "final_feedback": None,
         "finished": False,
         "correct": False,
-        "feedback": "No A"
+        "feedback": get_item_feedback(0, "incorrect")
     })
-    with open('tests/test_get_data.json') as f:
+    with open(get_file) as f:
         get_data = json.loads(block.handle('get_data', Mock()).body)
         assert_equals(json.load(f), get_data)
 
     # Wrong without feedback
-    data = json.dumps({"val":2,"zone":"Zone B","top":"42px","left":"100px"})
+    data = json.dumps({"val":2,"zone":zoneB,"top":"42px","left":"100px"})
     res = json.loads(block.handle('do_attempt', make_request(data)).body)
     assert_equals(res, {
         "final_feedback": None,
         "finished": False,
         "correct": False,
-        "feedback": ""
+        "feedback": get_item_feedback(2, "incorrect")
     })
-    with open('tests/test_get_data.json') as f:
+    with open(get_file) as f:
         get_data = json.loads(block.handle('get_data', Mock()).body)
         assert_equals(json.load(f), get_data)
 
     # Correct
-    data = json.dumps({"val":0,"zone":"Zone A","top":"11px","left":"111px"})
+    data = json.dumps({"val":0,"zone":zoneA,"top":"11px","left":"111px"})
     res = json.loads(block.handle('do_attempt', make_request(data)).body)
     assert_equals(res, {
         "final_feedback": None,
         "finished": False,
         "correct": True,
-        "feedback": "Yes A"
+        "feedback": get_item_feedback(0, "correct")
     })
-    with open('tests/test_get_data.json') as f:
+    with open(get_file) as f:
         expected = json.load(f)
         expected["state"] = {
             "items": {
@@ -131,15 +138,15 @@ def test_ajax():
         assert_equals(expected, get_data)
 
     # Final
-    data = json.dumps({"val":1,"zone":"Zone B","top":"22px","left":"222px"})
+    data = json.dumps({"val":1,"zone":zoneB,"top":"22px","left":"222px"})
     res = json.loads(block.handle('do_attempt', make_request(data)).body)
     assert_equals(res, {
-        "final_feedback": "Final Feed",
+        "final_feedback": feedback_finish,
         "finished": True,
         "correct": True,
-        "feedback": "Yes B"
+        "feedback": get_item_feedback(1, "correct")
     })
-    with open('tests/test_get_data.json') as f:
+    with open(get_file) as f:
         expected = json.load(f)
         expected["state"] = {
             "items": {
@@ -148,10 +155,17 @@ def test_ajax():
             },
             "finished": True
         }
-        expected["feedback"]["finish"] = "Final Feed"
+        expected["feedback"]["finish"] = feedback_finish
         get_data = json.loads(block.handle('get_data', Mock()).body)
         assert_equals(expected, get_data)
 
+def test_ajax():
+    do_ajax('tests/test_data.json', 'tests/test_get_data.json')
+
+
+def test_html_ajax():
+    do_ajax('tests/test_html_data.json', 'tests/test_get_html_data.json')
+
 def test_ajax_solve_and_reset():
     block = make_block()
 

tests/test_get_html_data.json

+{
+  "zones": [
+    {
+      "index": 1,
+      "width": 200,
+      "title": "Zone <i>A</i>",
+      "height": 100,
+      "y": "200",
+      "x": "100",
+      "id": "zone-1"
+    },
+    {
+      "index": 2,
+      "width": 200,
+      "title": "Zone <b>B</b>",
+      "height": 100,
+      "y": 0,
+      "x": 0,
+      "id": "zone-2"
+    }
+  ],
+  "items": [
+    {
+      "displayName": "<b>A</b>",
+      "backgroundImage": "",
+      "id": 0,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "<i>B</i>",
+      "backgroundImage": "",
+      "id": 1,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "X",
+      "backgroundImage": "",
+      "id": 2,
+      "size": {
+        "width": "100px",
+        "height": "100px"
+      }
+    },
+    {
+      "displayName": "",
+      "backgroundImage": "http://i1.kym-cdn.com/entries/icons/square/000/006/151/tumblr_lltzgnHi5F1qzib3wo1_400.jpg",
+      "id": 3,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    }
+  ],
+  "state": {
+    "items": {},
+    "finished": false
+  },
+  "feedback": {
+    "start": "Intro Feed"
+  },
+  "targetImg": "http://i0.kym-cdn.com/photos/images/newsfeed/000/030/404/1260585284155.png"
+}

tests/test_html_data.json

+{
+  "zones": [
+    {
+      "index": 1,
+      "width": 200,
+      "title": "Zone <i>A</i>",
+      "height": 100,
+      "y": "200",
+      "x": "100",
+      "id": "zone-1"
+    },
+    {
+      "index": 2,
+      "width": 200,
+      "title": "Zone <b>B</b>",
+      "height": 100,
+      "y": 0,
+      "x": 0,
+      "id": "zone-2"
+    }
+  ],
+  "items": [
+    {
+      "displayName": "<b>A</b>",
+      "feedback": {
+        "incorrect": "No <b>A</b>",
+        "correct": "Yes <b>A</b>"
+      },
+      "zone": "Zone <i>A</i>",
+      "backgroundImage": "",
+      "id": 0,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "<i>B</i>",
+      "feedback": {
+        "incorrect": "No <i>B</i>",
+        "correct": "Yes <i>B</i>"
+      },
+      "zone": "Zone <b>B</b>",
+      "backgroundImage": "",
+      "id": 1,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    },
+    {
+      "displayName": "X",
+      "feedback": {
+        "incorrect": "",
+        "correct": ""
+      },
+      "zone": "none",
+      "backgroundImage": "",
+      "id": 2,
+      "size": {
+        "width": "100px",
+        "height": "100px"
+      }
+    },
+    {
+      "displayName": "",
+      "feedback": {
+        "incorrect": "",
+        "correct": ""
+      },
+      "zone": "none",
+      "backgroundImage": "http://i1.kym-cdn.com/entries/icons/square/000/006/151/tumblr_lltzgnHi5F1qzib3wo1_400.jpg",
+      "id": 3,
+      "size": {
+        "width": "190px",
+        "height": "auto"
+      }
+    }
+  ],
+  "state": {
+    "items": {},
+    "finished": true
+  },
+  "feedback": {
+    "start": "Intro Feed",
+    "finish": "Final <b>Feed</b>"
+  },
+  "targetImg": "http://i0.kym-cdn.com/photos/images/newsfeed/000/030/404/1260585284155.png"
+}