Address review comments.

problem_builder/mcq.py

@@ -115,19 +115,13 @@ class MCQBlock(SubmittingXBlockMixin, QuestionnaireAbstractBlock):
         log.debug(u'MCQ submission result: %s', result)
         return result
 
-    def author_edit_view(self, context):
+    def get_author_edit_view_fragment(self, context):
         """
         The options for the 1-5 values of the Likert scale aren't child blocks but we want to
         show them in the author edit view, for clarity.
         """
         fragment = Fragment(u"<p>{}</p>".format(self.question))
         self.render_children(context, fragment, can_reorder=True, can_add=False)
-        fragment.add_content(loader.render_template('templates/html/questionnaire_add_buttons.html', {}))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/questionnaire-edit.css'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/problem_builder.js'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/questionnaire_edit.js'))
-        fragment.initialize_js('QuestionnaireEdit')
         return fragment
 
     def validate_field_data(self, validation, data):
@@ -198,7 +192,7 @@ class RatingBlock(MCQBlock):
             {"display_name": dn, "value": val} for val, dn in zip(self.FIXED_VALUES, display_names)
             ] + super(RatingBlock, self).human_readable_choices
 
-    def author_edit_view(self, context):
+    def get_author_edit_view_fragment(self, context):
         """
         The options for the 1-5 values of the Likert scale aren't child blocks but we want to
         show them in the author edit view, for clarity.
@@ -211,10 +205,4 @@ class RatingBlock(MCQBlock):
             'accepted_statuses': [None] + [self.describe_choice_correctness(c) for c in "12345"],
         }))
         self.render_children(context, fragment, can_reorder=True, can_add=False)
-        fragment.add_content(loader.render_template('templates/html/questionnaire_add_buttons.html', {}))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/questionnaire-edit.css'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/problem_builder.js'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/questionnaire_edit.js'))
-        fragment.initialize_js('QuestionnaireEdit')
         return fragment

problem_builder/mentoring.py

@@ -315,9 +315,8 @@ class MentoringBlock(XBlock, StepParentMixin, StudioEditableXBlockMixin, StudioC
             'missing_dependency_url': self.has_missing_dependency and self.next_step_url,
         }))
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/mentoring.css'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/vendor/underscore-min.js'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/problem_builder.js'))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/util.js'))
         js_file = 'public/js/mentoring_{}_view.js'.format('assessment' if self.is_assessment else 'standard')
         fragment.add_javascript_url(self.runtime.local_resource_url(self, js_file))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/mentoring.js'))
@@ -733,7 +732,7 @@ class MentoringBlock(XBlock, StepParentMixin, StudioEditableXBlockMixin, StudioC
         fragment.add_content(loader.render_template('templates/html/mentoring_url_name.html', {
             "url_name": self.url_name
         }))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/mentoring_edit.css'))
+        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder-edit.css'))
         self.include_theme_files(fragment)
         return fragment
 
@@ -749,8 +748,9 @@ class MentoringBlock(XBlock, StepParentMixin, StudioEditableXBlockMixin, StudioC
             "url_name": self.url_name
         }))
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
-        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/mentoring_edit.css'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/problem_builder.js'))
+        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder-edit.css'))
+        fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder-tinymce-content.css'))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/util.js'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/mentoring_edit.js'))
         fragment.initialize_js('MentoringEditComponents')
         return fragment

problem_builder/public/css/mentoring.css

-.mentoring .title .shared-header {
-    margin: 1em 0em;
-}
-
-.mentoring .messages,
-.mentoring .assessment-messages {
-    display: none;
-}
-
-.mentoring .messages .title1,
-.mentoring .assessment-messages .title1 {
-    color: #333333;
-    text-transform: uppercase;
-    font-weight: bold;
-    font-style: normal;
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-
-.mentoring .warning {
-    border: 1px solid;
-    margin: 10px 0px;
-    padding: 15px 10px;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    color: #9F6000;
-    background-color: #FEEFB3;
-}
-
-.mentoring .missing-dependency.warning {
-    display: none;
-}
-
-.mentoring .bold {
-    font-weight: bold;
-}
-.mentoring .italic {
-    font-style: italic;
-}
-
-.mentoring fieldset {
-    margin-top: 10px;
-}
-
-.mentoring h3 {
-    margin-top: 0px;
-    margin-bottom: 7px;
-}
-
-.mentoring .submit {
-    display: inline-block;
-    margin-top: 20px;
-}
-
-.mentoring .submit input {
-    display: none;
-}
-
-.mentoring legend {
-    white-space: normal;
-    display: table; /* Enable line-wrapping in IE8 */
-}
-
-.mentoring .choices legend.question p:last-child { /* Selector must be more specific than 'div.course-wrapper section.course-content p' */
-    margin-bottom: 0;
-}
-
-.mentoring .attempts {
-    margin-left: 10px;
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 13px;
-    font-weight: 600;
-}
-
-.mentoring .attempts > span {
-    color: #777;
-    font-style: italic;
-    webkit-font-smoothing: antialiased;
-}
-
-.mentoring .checkmark-correct {
-    font-size: 22pt;
-    color: #629b2b;
-    float: left;
-}
-
-.mentoring .checkmark-partially-correct {
-    font-size: 22pt;
-    color: #e37222;
-    float: left;
-}
-
-.mentoring .checkmark-incorrect {
-    font-size: 22pt;
-    color: #ff0000;
-    float: left;
-}
-
-.mentoring .choice-result{
-    display:block;
-    float: left;
-    height:33.33px;
-}
-
-.mentoring .assessment-question-block {
-    border: 5px solid #e5ebee;
-    padding: 20px;
-}
-
-.mentoring .assessment-question-block > .xblock-v1-assessment_step_view,
-.mentoring .assessment-question-block > .xblock-assessment_step_view  {
-    display: none; /* Each "step" (question) is hidden at first, and shown one at a time by JavaScript */
-}
-
-.mentoring .assessment-checkmark {
-    margin-right: 10px;
-}
-
-.mentoring .grade .grade-result {
-    margin: 20px;
-}
-
-.mentoring .grade .checkmark-incorrect {
-    margin-left: 10px;
-    margin-right: 20px;
-}
-
-.mentoring input[type=button],
-.mentoring input[type=button]:focus {
-    background-color: #3384ca;
-}
-
-.mentoring input[type=button][disabled],
-.mentoring input[type=button][disabled]:hover,
-.mentoring input[type=button][disabled]:focus {
-    background-color: #cccccc;
-}
-
-.mentoring input[type="checkbox"],
-.mentoring input[type="radio"] {
-    margin: 0;
-}
-
-.mentoring .review-list {
-    list-style: none;
-    padding-left: 0 !important;
-    margin-left: 0;
-}
-.mentoring .review-list li {
-    display: inline;
-}
-
-.mentoring .review-list li a{
-    font-weight: bold;
-}
-
-.mentoring .results-section {
-    float: left;
-}
-
-.mentoring .results-section p {
-    margin: 4px;
-}
-
-.mentoring .clear {
-    display: block;
-    clear: both;
-}
-
-.mentoring .review-link {
-    float: right;
-    display: none;
-}

problem_builder/public/css/problem-builder-tinymce-content.css

+/* Some styling to make clarifications stand out a bit in
+   studio HTML edit view. */
+
+.mce-content-body .pb-clarification {
+    color: #999;
+    font-size: 0.75em;
+}
+
+.mce-content-body .pb-clarification::before {
+    content: "(?)["
+}
+
+.mce-content-body .pb-clarification::after {
+    content: "]"
+}

problem_builder/public/css/problem-builder.css

+.mentoring .title .shared-header {
+    margin: 1em 0em;
+}
+
+.mentoring .messages,
+.mentoring .assessment-messages {
+    display: none;
+}
+
+.mentoring .messages .title1,
+.mentoring .assessment-messages .title1 {
+    color: #333333;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-style: normal;
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.mentoring .warning {
+    border: 1px solid;
+    margin: 10px 0px;
+    padding: 15px 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    color: #9F6000;
+    background-color: #FEEFB3;
+}
+
+.mentoring .missing-dependency.warning {
+    display: none;
+}
+
+.mentoring .bold {
+    font-weight: bold;
+}
+.mentoring .italic {
+    font-style: italic;
+}
+
+.mentoring fieldset {
+    margin-top: 10px;
+}
+
+.mentoring h3 {
+    margin-top: 0px;
+    margin-bottom: 7px;
+}
+
+.mentoring .submit {
+    display: inline-block;
+    margin-top: 20px;
+}
+
+.mentoring .submit input {
+    display: none;
+}
+
+.mentoring legend {
+    white-space: normal;
+    display: table; /* Enable line-wrapping in IE8 */
+}
+
+.mentoring .choices legend.question p:last-child { /* Selector must be more specific than 'div.course-wrapper section.course-content p' */
+    margin-bottom: 0;
+}
+
+.mentoring .attempts {
+    margin-left: 10px;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.mentoring .attempts > span {
+    color: #777;
+    font-style: italic;
+    webkit-font-smoothing: antialiased;
+}
+
+.mentoring .checkmark-correct {
+    font-size: 22pt;
+    color: #629b2b;
+    float: left;
+}
+
+.mentoring .checkmark-partially-correct {
+    font-size: 22pt;
+    color: #e37222;
+    float: left;
+}
+
+.mentoring .checkmark-incorrect {
+    font-size: 22pt;
+    color: #ff0000;
+    float: left;
+}
+
+.mentoring .choice-result{
+    display:block;
+    float: left;
+    height:33.33px;
+}
+
+.mentoring .assessment-question-block {
+    border: 5px solid #e5ebee;
+    padding: 20px;
+}
+
+.mentoring .assessment-question-block > .xblock-v1-assessment_step_view,
+.mentoring .assessment-question-block > .xblock-assessment_step_view  {
+    display: none; /* Each "step" (question) is hidden at first, and shown one at a time by JavaScript */
+}
+
+.mentoring .assessment-checkmark {
+    margin-right: 10px;
+}
+
+.mentoring .grade .grade-result {
+    margin: 20px;
+}
+
+.mentoring .grade .checkmark-incorrect {
+    margin-left: 10px;
+    margin-right: 20px;
+}
+
+.mentoring input[type=button],
+.mentoring input[type=button]:focus {
+    background-color: #3384ca;
+}
+
+.mentoring input[type=button][disabled],
+.mentoring input[type=button][disabled]:hover,
+.mentoring input[type=button][disabled]:focus {
+    background-color: #cccccc;
+}
+
+.mentoring input[type="checkbox"],
+.mentoring input[type="radio"] {
+    margin: 0;
+}
+
+.mentoring .review-list {
+    list-style: none;
+    padding-left: 0 !important;
+    margin-left: 0;
+}
+.mentoring .review-list li {
+    display: inline;
+}
+
+.mentoring .review-list li a{
+    font-weight: bold;
+}
+
+.mentoring .results-section {
+    float: left;
+}
+
+.mentoring .results-section p {
+    margin: 4px;
+}
+
+.mentoring .clear {
+    display: block;
+    clear: both;
+}
+
+.mentoring .review-link {
+    float: right;
+    display: none;
+}
+
 .pb-clarification span.clarification i {
     font-style: normal;
 }
 
 .pb-clarification span.clarification i:hover {
     color: rgb(0, 159, 230);
-}
+}
\ No newline at end of file

problem_builder/public/js/mentoring.js

@@ -113,7 +113,7 @@ function MentoringBlock(runtime, element) {
         }
     }
 
-    ProblemBuilder.transformClarifications(element);
+    ProblemBuilderUtil.transformClarifications(element);
 
     if (data.mode === 'standard') {
         MentoringStandardView(runtime, element, mentoring);

problem_builder/public/js/mentoring_edit.js

@@ -18,7 +18,7 @@ function MentoringEditComponents(runtime, element) {
         }
     });
 
-    ProblemBuilder.transformClarifications(element);
+    ProblemBuilderUtil.transformClarifications(element);
 
     runtime.listenTo('deleted-child', updateButtons);
 }

problem_builder/public/js/questionnaire_edit.js

 function QuestionnaireEdit(runtime, element) {
     'use strict';
-    ProblemBuilder.transformClarifications(element);
+    ProblemBuilderUtil.transformClarifications(element);
 }

problem_builder/public/js/problem_builder.js → problem_builder/public/js/util.js

-window.ProblemBuilder = {
+window.ProblemBuilderUtil = {
 
     transformClarifications: function(element) {
-        element = $(element);
+        var $element = $(element);
 
         var transformExisting = function(node) {
             $('.pb-clarification', node).each(function() {
@@ -20,7 +20,7 @@ window.ProblemBuilder = {
         };
 
         // Transform all span.pb-clarifications already existing inside the element.
-        transformExisting(element);
+        transformExisting($element);
 
         // Transform all future span.pb-clarifications using mutation observer.
         // It's only needed in the Studio when editing xblock children because the
@@ -33,7 +33,7 @@ window.ProblemBuilder = {
                     });
                 })
             });
-            observer.observe(element[0], {childList: true, subtree: true});
+            observer.observe($element[0], {childList: true, subtree: true});
         }
     }
 

problem_builder/questionnaire.py

@@ -167,15 +167,19 @@ class QuestionnaireAbstractBlock(StudioEditableXBlockMixin, StudioContainerXBloc
                 return choice.content
         return submission
 
+    def get_author_edit_view_fragment(self, context):
+        fragment = super(QuestionnaireAbstractBlock, self).author_edit_view(context)
+        return fragment
+
     def author_edit_view(self, context):
         """
         Add some HTML to the author view that allows authors to add choices and tips.
         """
-        fragment = super(QuestionnaireAbstractBlock, self).author_edit_view(context)
+        fragment = self.get_author_edit_view_fragment(context)
         fragment.add_content(loader.render_template('templates/html/questionnaire_add_buttons.html', {}))
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/problem-builder.css'))
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/questionnaire-edit.css'))
-        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/problem_builder.js'))
+        fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/util.js'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/questionnaire_edit.js'))
         fragment.initialize_js('QuestionnaireEdit')
         return fragment

problem_builder/templates/html/ratingblock.html

@@ -15,8 +15,8 @@
         </div>
         <label class="choice-label" for="choice-{{ self.html_id }}-{{i}}">
           {{i}}
-          {% if i == '1' %} - {{ self.low }}{% endif %}
-          {% if i == '5' %} - {{ self.high }}{% endif %}
+          {% if i == '1' %} - {{ self.low|safe }}{% endif %}
+          {% if i == '5' %} - {{ self.high|safe }}{% endif %}
         </label>
         <div class="choice-tips-container">
           <div class="choice-tips"></div>

problem_builder/templates/html/ratingblock_edit_preview.html

 {% load i18n %}
-<p>{{ question }}</p>
+<p>{{ question|safe }}</p>
 
 <h2>{% trans "Built-in choices:" %}</h2>
 
 <ul>
-<li>Choice (1): <strong>1 - {{ low }}</strong> ({{accepted_statuses.1}})</li>
+<li>Choice (1): <strong>1 - {{ low|safe }}</strong> ({{accepted_statuses.1}})</li>
 <li>Choice (2): <strong>2</strong> ({{accepted_statuses.2}})</li>
 <li>Choice (3): <strong>3</strong> ({{accepted_statuses.3}})</li>
 <li>Choice (4): <strong>4</strong> ({{accepted_statuses.4}})</li>
-<li>Choice (5): <strong>5 - {{ high }}</strong> ({{accepted_statuses.5}})</li>
+<li>Choice (5): <strong>5 - {{ high|safe }}</strong> ({{accepted_statuses.5}})</li>
 </ul>
 
 <h2>{% trans "Additional custom choices and tips:" %}</h2>

problem_builder/tests/integration/test_clarifications.py

@@ -41,7 +41,7 @@ class ClarificationTest(SeleniumXBlockTest):
 
     mcq_template = """
         <problem-builder>
-            <pb-mcq question="Who was your favorite character? {clarify}">
+            <pb-mcq question="Who was your favorite character? {clarify_escaped}">
                 <pb-choice value="gaius">Gaius Baltar</pb-choice>
                 <pb-choice value="adama">Admiral William Adama {clarify}</pb-choice>
                 <pb-choice value="starbuck">Starbuck</pb-choice>
@@ -51,7 +51,7 @@ class ClarificationTest(SeleniumXBlockTest):
 
     mrq_template = """
         <problem-builder>
-            <pb-mrq question="What makes a great {clarify} MRQ {clarify}?">
+            <pb-mrq question="What makes a great {clarify_escaped} MRQ {clarify_escaped}?">
                 <pb-choice value="1">Lots of choices</pb-choice>
                 <pb-choice value="2">Funny{clarify} choices</pb-choice>
                 <pb-choice value="3">Not sure {clarify}</pb-choice>
@@ -61,7 +61,7 @@ class ClarificationTest(SeleniumXBlockTest):
 
     rating_template = """
         <problem-builder>
-            <pb-rating name="rating_1_1" question="How do you rate {clarify} Battlestar Galactica?">
+            <pb-rating name="rating_1_1" question="How do you rate {clarify_escaped} Battlestar Galactica?">
                 <pb-choice value="6">More than 5 stars {clarify}</pb-choice>
             </pb-rating>
         </problem-builder>
@@ -69,20 +69,30 @@ class ClarificationTest(SeleniumXBlockTest):
 
     long_answer_template = """
         <problem-builder>
-            <pb-answer question="What did you think {clarify} of the ending?" />
+            <pb-answer question="What did you think {clarify_escaped} of the ending?" />
+        </problem-builder>
+    """
+
+    html_block_template = """
+        <problem-builder>
+            <html_demo><p>This is some raw {clarify} HTML code.</p></html_demo>
         </problem-builder>
     """
 
     def prepare_xml_scenario(self, xml_template):
         span = '<span class="pb-clarification">{}</span>'.format(self.clarification_text)
         escaped_span = escape(span, quote=True)
-        return xml_template.format(clarify=escaped_span)
+        return xml_template.format(
+            clarify=span,
+            clarify_escaped=escaped_span
+        )
 
     @ddt.data(
         (mcq_template, 2),
         (mrq_template, 4),
         (rating_template, 2),
         (long_answer_template, 1),
+        (html_block_template, 1),
     )
     @ddt.unpack
     def test_title(self, xml_template, tooltip_count):