From 6189ac388013cf4aa0229a5eef331eb3d592728a Mon Sep 17 00:00:00 2001 From: Matjaz Gregoric Date: Sun, 12 Jul 2015 21:09:58 +0200 Subject: [PATCH 1/2] Implement tooltips/clarifications. The idea is based on capa nodes: https://github.com/edx/edx-platform/pull/6679 I decided to go with {}

".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): @@ -208,5 +212,9 @@ def author_edit_view(self, context): })) 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 diff --git a/problem_builder/mentoring.py b/problem_builder/mentoring.py index 45184db6..0376be11 100644 --- a/problem_builder/mentoring.py +++ b/problem_builder/mentoring.py @@ -314,8 +314,10 @@ def student_view(self, context): 'child_content': child_content, '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')) 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')) @@ -746,7 +748,9 @@ def author_edit_view(self, context): 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/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_javascript_url(self.runtime.local_resource_url(self, 'public/js/mentoring_edit.js')) fragment.initialize_js('MentoringEditComponents') return fragment diff --git a/problem_builder/public/css/problem-builder.css b/problem_builder/public/css/problem-builder.css new file mode 100644 index 00000000..945b76a9 --- /dev/null +++ b/problem_builder/public/css/problem-builder.css @@ -0,0 +1,7 @@ +.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 diff --git a/problem_builder/public/js/mentoring.js b/problem_builder/public/js/mentoring.js index d8107055..f0cfcdbb 100644 --- a/problem_builder/public/js/mentoring.js +++ b/problem_builder/public/js/mentoring.js @@ -113,6 +113,8 @@ function MentoringBlock(runtime, element) { } } + ProblemBuilder.transformClarifications(element); + if (data.mode === 'standard') { MentoringStandardView(runtime, element, mentoring); } diff --git a/problem_builder/public/js/mentoring_edit.js b/problem_builder/public/js/mentoring_edit.js index 693a609e..9e6b4348 100644 --- a/problem_builder/public/js/mentoring_edit.js +++ b/problem_builder/public/js/mentoring_edit.js @@ -17,5 +17,8 @@ function MentoringEditComponents(runtime, element) { $(this).addClass('disabled'); } }); + + ProblemBuilder.transformClarifications(element); + runtime.listenTo('deleted-child', updateButtons); } diff --git a/problem_builder/public/js/problem_builder.js b/problem_builder/public/js/problem_builder.js new file mode 100644 index 00000000..57072552 --- /dev/null +++ b/problem_builder/public/js/problem_builder.js @@ -0,0 +1,40 @@ +window.ProblemBuilder = { + + transformClarifications: function(element) { + element = $(element); + + var transformExisting = function(node) { + $('.pb-clarification', node).each(function() { + var item = $(this); + var content = item.html(); + var clarification = $( + '' + + '' + + '' + + '' + ); + clarification.find('i').attr('data-tooltip', content); + clarification.find('span.sr').html(content); + item.empty().append(clarification); + }); + }; + + // Transform all span.pb-clarifications already existing inside the 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 + // block's JS init function isn't called after edits in the Studio. + if (window.MutationObserver) { + var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + Array.prototype.forEach.call(mutation.addedNodes, function(node) { + transformExisting(node); + }); + }) + }); + observer.observe(element[0], {childList: true, subtree: true}); + } + } + +}; diff --git a/problem_builder/public/js/questionnaire_edit.js b/problem_builder/public/js/questionnaire_edit.js new file mode 100644 index 00000000..9943c674 --- /dev/null +++ b/problem_builder/public/js/questionnaire_edit.js @@ -0,0 +1,4 @@ +function QuestionnaireEdit(runtime, element) { + 'use strict'; + ProblemBuilder.transformClarifications(element); +} diff --git a/problem_builder/questionnaire.py b/problem_builder/questionnaire.py index c3108bec..a31856d3 100644 --- a/problem_builder/questionnaire.py +++ b/problem_builder/questionnaire.py @@ -173,7 +173,11 @@ def author_edit_view(self, context): """ fragment = super(QuestionnaireAbstractBlock, self).author_edit_view(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/questionnaire_edit.js')) + fragment.initialize_js('QuestionnaireEdit') return fragment def validate_field_data(self, validation, data): diff --git a/problem_builder/tests/integration/test_clarifications.py b/problem_builder/tests/integration/test_clarifications.py new file mode 100644 index 00000000..76a5ec0d --- /dev/null +++ b/problem_builder/tests/integration/test_clarifications.py @@ -0,0 +1,100 @@ +# -*- coding: utf-8 -*- +# +# Copyright (c) 2014-2015 Harvard, edX & OpenCraft +# +# This software's license gives you freedom; you can copy, convey, +# propagate, redistribute and/or modify this program under the terms of +# the GNU Affero General Public License (AGPL) as published by the Free +# Software Foundation (FSF), either version 3 of the License, or (at your +# option) any later version of the AGPL published by the FSF. +# +# This program is distributed in the hope that it will be useful, but +# WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero +# General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with this program in a file in the toplevel directory called +# "AGPLv3". If not, see . +# +""" +Test that elements are transformed into LMS-like tooltips. +""" + +# Imports ########################################################### +import ddt +from cgi import escape +from xblockutils.base_test import SeleniumXBlockTest + + +# Classes ########################################################### + + +@ddt.ddt +class ClarificationTest(SeleniumXBlockTest): + """ + Test that the content of span.pb-clarification elements is transformed into + tooltip elements. + """ + + clarification_text = 'Let me clarify...' + + mcq_template = """ + + + Gaius Baltar + Admiral William Adama {clarify} + Starbuck + + + """ + + mrq_template = """ + + + Lots of choices + Funny{clarify} choices + Not sure {clarify} + + + """ + + rating_template = """ + + + More than 5 stars {clarify} + + + """ + + long_answer_template = """ + + + + """ + + def prepare_xml_scenario(self, xml_template): + span = '{}'.format(self.clarification_text) + escaped_span = escape(span, quote=True) + return xml_template.format(clarify=escaped_span) + + @ddt.data( + (mcq_template, 2), + (mrq_template, 4), + (rating_template, 2), + (long_answer_template, 1), + ) + @ddt.unpack + def test_title(self, xml_template, tooltip_count): + self.set_scenario_xml(self.prepare_xml_scenario(xml_template)) + pb_element = self.go_to_view() + clarifications = pb_element.find_elements_by_css_selector('span.pb-clarification') + + self.assertEqual(len(clarifications), tooltip_count) + + for clarification in clarifications: + tooltip = clarification.find_element_by_css_selector('i[data-tooltip]') + self.assertEqual(tooltip.get_attribute('data-tooltip'), self.clarification_text) + + sr = clarification.find_element_by_css_selector('span.sr') + self.assertEqual(sr.text, self.clarification_text) From 2bde5538b3c795a82177f8002fb5aeb8661be902 Mon Sep 17 00:00:00 2001 From: Matjaz Gregoric Date: Wed, 15 Jul 2015 10:47:53 +0200 Subject: [PATCH 2/2] Address review comments. --- problem_builder/mcq.py | 16 +- problem_builder/mentoring.py | 10 +- problem_builder/public/css/mentoring.css | 175 ----------------- ...ring_edit.css => problem-builder-edit.css} | 0 .../css/problem-builder-tinymce-content.css | 15 ++ .../public/css/problem-builder.css | 178 +++++++++++++++++- problem_builder/public/js/mentoring.js | 2 +- problem_builder/public/js/mentoring_edit.js | 2 +- .../public/js/questionnaire_edit.js | 2 +- .../public/js/{problem_builder.js => util.js} | 8 +- problem_builder/questionnaire.py | 8 +- .../templates/html/ratingblock.html | 4 +- .../html/ratingblock_edit_preview.html | 6 +- .../tests/integration/test_clarifications.py | 20 +- 14 files changed, 232 insertions(+), 214 deletions(-) delete mode 100644 problem_builder/public/css/mentoring.css rename problem_builder/public/css/{mentoring_edit.css => problem-builder-edit.css} (100%) create mode 100644 problem_builder/public/css/problem-builder-tinymce-content.css rename problem_builder/public/js/{problem_builder.js => util.js} (89%) diff --git a/problem_builder/mcq.py b/problem_builder/mcq.py index 06098d93..55cc78af 100644 --- a/problem_builder/mcq.py +++ b/problem_builder/mcq.py @@ -115,19 +115,13 @@ def submit(self, submission): 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"

{}

".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 @@ def human_readable_choices(self): {"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 @@ def author_edit_view(self, context): '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 diff --git a/problem_builder/mentoring.py b/problem_builder/mentoring.py index 0376be11..84e685fc 100644 --- a/problem_builder/mentoring.py +++ b/problem_builder/mentoring.py @@ -315,9 +315,8 @@ def student_view(self, context): '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 @@ def author_preview_view(self, context): 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 @@ def author_edit_view(self, context): "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 diff --git a/problem_builder/public/css/mentoring.css b/problem_builder/public/css/mentoring.css deleted file mode 100644 index a71ac3af..00000000 --- a/problem_builder/public/css/mentoring.css +++ /dev/null @@ -1,175 +0,0 @@ -.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; -} diff --git a/problem_builder/public/css/mentoring_edit.css b/problem_builder/public/css/problem-builder-edit.css similarity index 100% rename from problem_builder/public/css/mentoring_edit.css rename to problem_builder/public/css/problem-builder-edit.css diff --git a/problem_builder/public/css/problem-builder-tinymce-content.css b/problem_builder/public/css/problem-builder-tinymce-content.css new file mode 100644 index 00000000..75c46e9b --- /dev/null +++ b/problem_builder/public/css/problem-builder-tinymce-content.css @@ -0,0 +1,15 @@ +/* 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: "]" +} diff --git a/problem_builder/public/css/problem-builder.css b/problem_builder/public/css/problem-builder.css index 945b76a9..5bef983a 100644 --- a/problem_builder/public/css/problem-builder.css +++ b/problem_builder/public/css/problem-builder.css @@ -1,7 +1,183 @@ +.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 +} diff --git a/problem_builder/public/js/mentoring.js b/problem_builder/public/js/mentoring.js index f0cfcdbb..2541580a 100644 --- a/problem_builder/public/js/mentoring.js +++ b/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); diff --git a/problem_builder/public/js/mentoring_edit.js b/problem_builder/public/js/mentoring_edit.js index 9e6b4348..b5f545a5 100644 --- a/problem_builder/public/js/mentoring_edit.js +++ b/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); } diff --git a/problem_builder/public/js/questionnaire_edit.js b/problem_builder/public/js/questionnaire_edit.js index 9943c674..fb266ad5 100644 --- a/problem_builder/public/js/questionnaire_edit.js +++ b/problem_builder/public/js/questionnaire_edit.js @@ -1,4 +1,4 @@ function QuestionnaireEdit(runtime, element) { 'use strict'; - ProblemBuilder.transformClarifications(element); + ProblemBuilderUtil.transformClarifications(element); } diff --git a/problem_builder/public/js/problem_builder.js b/problem_builder/public/js/util.js similarity index 89% rename from problem_builder/public/js/problem_builder.js rename to problem_builder/public/js/util.js index 57072552..b4d7d1f6 100644 --- a/problem_builder/public/js/problem_builder.js +++ b/problem_builder/public/js/util.js @@ -1,7 +1,7 @@ -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}); } } diff --git a/problem_builder/questionnaire.py b/problem_builder/questionnaire.py index a31856d3..f35c7a32 100644 --- a/problem_builder/questionnaire.py +++ b/problem_builder/questionnaire.py @@ -167,15 +167,19 @@ def get_submission_display(self, submission): 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 diff --git a/problem_builder/templates/html/ratingblock.html b/problem_builder/templates/html/ratingblock.html index 0574b5e7..90d04d7b 100644 --- a/problem_builder/templates/html/ratingblock.html +++ b/problem_builder/templates/html/ratingblock.html @@ -15,8 +15,8 @@
diff --git a/problem_builder/templates/html/ratingblock_edit_preview.html b/problem_builder/templates/html/ratingblock_edit_preview.html index f996873c..d1dd983c 100644 --- a/problem_builder/templates/html/ratingblock_edit_preview.html +++ b/problem_builder/templates/html/ratingblock_edit_preview.html @@ -1,14 +1,14 @@ {% load i18n %} -

{{ question }}

+

{{ question|safe }}

{% trans "Built-in choices:" %}

    -
  • Choice (1): 1 - {{ low }} ({{accepted_statuses.1}})
    • +
  • Choice (1): 1 - {{ low|safe }} ({{accepted_statuses.1}})
  • Choice (2): 2 ({{accepted_statuses.2}})
  • Choice (3): 3 ({{accepted_statuses.3}})
  • Choice (4): 4 ({{accepted_statuses.4}})
    • -
  • Choice (5): 5 - {{ high }} ({{accepted_statuses.5}})
    • +
  • Choice (5): 5 - {{ high|safe }} ({{accepted_statuses.5}})

{% trans "Additional custom choices and tips:" %}

diff --git a/problem_builder/tests/integration/test_clarifications.py b/problem_builder/tests/integration/test_clarifications.py index 76a5ec0d..bdb77a99 100644 --- a/problem_builder/tests/integration/test_clarifications.py +++ b/problem_builder/tests/integration/test_clarifications.py @@ -41,7 +41,7 @@ class ClarificationTest(SeleniumXBlockTest): mcq_template = """ - + Gaius Baltar Admiral William Adama {clarify} Starbuck @@ -51,7 +51,7 @@ class ClarificationTest(SeleniumXBlockTest): mrq_template = """ - + Lots of choices Funny{clarify} choices Not sure {clarify} @@ -61,7 +61,7 @@ class ClarificationTest(SeleniumXBlockTest): rating_template = """ - + More than 5 stars {clarify} @@ -69,20 +69,30 @@ class ClarificationTest(SeleniumXBlockTest): long_answer_template = """ - + + + """ + + html_block_template = """ + +

This is some raw {clarify} HTML code.

 """ def prepare_xml_scenario(self, xml_template): 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):