Merge pull request #32 from open-craft/hide-header-title

[MCKIN-3486] Enable course designer to hide header title

drag_and_drop_v2/drag_and_drop_v2.py

@@ -29,6 +29,13 @@ class DragAndDropBlock(XBlock):
         default="Drag and Drop"
     )
 
+    show_title = Boolean(
+        display_name="Show title",
+        help="Display the title to the user?",
+        scope=Scope.settings,
+        default=True
+    )
+
     question_text = String(
         display_name="Question text",
         help="The question text that is displayed to the user",
@@ -128,6 +135,7 @@ class DragAndDropBlock(XBlock):
     @XBlock.json_handler
     def studio_submit(self, submissions, suffix=''):
         self.display_name = submissions['display_name']
+        self.show_title = submissions['show_title']
         self.question_text = submissions['question_text']
         self.weight = float(submissions['weight'])
         self.data = submissions['data']
@@ -244,6 +252,7 @@ class DragAndDropBlock(XBlock):
         }
 
         data['title'] = self.display_name
+        data['show_title'] = self.show_title
         data['question_text'] = self.question_text
 
         return data

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -244,6 +244,7 @@ function DragAndDropBlock(runtime, element) {
 
         var context = {
             header_html: state.title,
+            show_title: state.show_title,
             question_html: state.question_text,
             popup_html: state.state.feedback || '',
             feedback_html: $.trim(state.state.finished ? state.feedback.finish : state.feedback.start),

drag_and_drop_v2/public/js/drag_and_drop_edit.js

@@ -410,6 +410,7 @@ function DragAndDropEditBlock(runtime, element) {
 
                         var data = {
                             'display_name': $(element).find('.display-name').val(),
+                            'show_title': $(element).find('.show-title').is(':checked'),
                             'weight': $(element).find('.weight').val(),
                             'question_text': $(element).find('.question-text').val(),
                             'data': _fn.data,

drag_and_drop_v2/public/js/view.js

@@ -74,9 +74,13 @@
     };
 
     var mainTemplate = function(ctx) {
+        var problemHeader = '';
+        if (ctx.show_title) {
+            problemHeader = h('h2.problem-header', {innerHTML: ctx.header_html});
+        }
         return (
             h('section.xblock--drag-and-drop', [
-                h('h2.problem-header', {innerHTML: ctx.header_html}),
+                problemHeader,
                 h('section.problem', {role: 'application'}, [
                     h('div.title1', 'Question'),
                     h('p', {innerHTML: ctx.question_html})

drag_and_drop_v2/templates/html/drag_and_drop_edit.html

@@ -17,6 +17,8 @@
                 <form class="feedback-form">
                     <h3>Question title</h3>
                     <input class="display-name" value="{{ self.display_name }}" />
+                    <input class="show-title" type="checkbox" value="{{ self.show_title }}"
+                           {% if self.show_title %}checked="checked"{% endif %}> Show title
 
                     <h3>Maximum score</h3>
                     <input class="weight" value="1" value="{{ self.weight }}"/>

tests/data/test_get_data.json

@@ -70,5 +70,6 @@
   },
   "targetImg": "http://i0.kym-cdn.com/photos/images/newsfeed/000/030/404/1260585284155.png",
   "title": "Drag and Drop",
+  "show_title": true,
   "question_text": ""
 }

tests/data/test_get_html_data.json

@@ -70,5 +70,6 @@
   },
   "targetImg": "http://i0.kym-cdn.com/photos/images/newsfeed/000/030/404/1260585284155.png",
   "title": "Drag and Drop",
+  "show_title": true,
   "question_text": ""
 }

tests/integration/test_base.py

@@ -19,12 +19,16 @@ class BaseIntegrationTest(SeleniumBaseTest):
         "'": "'"
     }
 
-    def _make_scenario_xml(self, display_name, question_text, completed):
+    def _make_scenario_xml(self, display_name, show_title, question_text, completed):
         return """
 <vertical_demo>
-    <drag-and-drop-v2 display_name='{display_name}' question_text='{question_text}' weight='1' completed='{completed}'/>
+    <drag-and-drop-v2 display_name='{display_name}' show_title='{show_title}' question_text='{question_text}'
+                      weight='1' completed='{completed}'/>
 </vertical_demo>
-    """.format(display_name=escape(display_name), question_text=escape(question_text), completed=completed)
+    """.format(
+        display_name=escape(display_name), show_title=show_title, question_text=escape(question_text),
+        completed=completed
+    )
 
     def _get_custom_scenario_xml(self, filename):
         data = load_resource(filename)

tests/integration/test_title_and_question.py

 from ddt import ddt, unpack, data
+from selenium.common.exceptions import NoSuchElementException
 from tests.integration.test_base import BaseIntegrationTest
 from workbench import scenarios
 
@@ -13,9 +14,11 @@ class TestDragAndDropTitleAndQuestion(BaseIntegrationTest):
         ('html2', '<span style="color:red">Title: HTML?</span>', '<span style="color:red">Span question</span>'),
     )
     def test_title_and_question_parameters(self, _, display_name, question_text):
-        const_page_name = 'Test block parameters'
-        const_page_id = 'test_block_title'
-        scenario_xml = self._make_scenario_xml(display_name, question_text, False)
+        const_page_name = 'Test title and question parameters'
+        const_page_id = 'test_block_title_and_question'
+        scenario_xml = self._make_scenario_xml(
+            display_name=display_name, show_title=True, question_text=question_text, completed=False
+        )
         scenarios.add_xml_scenario(const_page_id, const_page_name, scenario_xml)
         self.addCleanup(scenarios.remove_scenario, const_page_id)
 
@@ -25,3 +28,27 @@ class TestDragAndDropTitleAndQuestion(BaseIntegrationTest):
 
         question = page.find_element_by_css_selector('section.problem > p')
         self.assertEqual(self.get_element_html(question), question_text)
+
+    @unpack
+    @data(
+        ('plain shown', 'title1', True),
+        ('plain hidden', 'title2', False),
+        ('html shown', 'title with <i>HTML</i>', True),
+        ('html hidden', '<span style="color:red">Title: HTML?</span>', False)
+    )
+    def test_show_title_parameter(self, _, display_name, show_title):
+        const_page_name = 'Test show title parameter'
+        const_page_id = 'test_block_show_title'
+        scenario_xml = self._make_scenario_xml(
+            display_name=display_name, show_title=show_title, question_text='Generic question', completed=False
+        )
+        scenarios.add_xml_scenario(const_page_id, const_page_name, scenario_xml)
+        self.addCleanup(scenarios.remove_scenario, const_page_id)
+
+        page = self.go_to_page(const_page_name)
+        if show_title:
+            problem_header = page.find_element_by_css_selector('h2.problem-header')
+            self.assertEqual(self.get_element_html(problem_header), display_name)
+        else:
+            with self.assertRaises(NoSuchElementException):
+                page.find_element_by_css_selector('h2.problem-header')

tests/test_drag_and_drop_v2.py

@@ -59,6 +59,7 @@ def test_studio_submit():
 
     body = json.dumps({
         'display_name': "Test Drag & Drop",
+        'show_title': True,
         'question_text': "Question Drag & Drop",
         'weight': '5',
         'data': {