diff --git a/problem_builder/public/css/problem-builder.css b/problem_builder/public/css/problem-builder.css index 8417767a..2edc3fe6 100644 --- a/problem_builder/public/css/problem-builder.css +++ b/problem_builder/public/css/problem-builder.css @@ -229,3 +229,17 @@ .pb-clarification span.clarification i:hover { color: rgb(0, 159, 230); } + +.mentoring .sb-step { + position: relative; +} + +.mentoring .sb-step .sb-step-message { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 1.5em; + background-color: white; + box-shadow: 0 10px 20px #5C5C5C; +} \ No newline at end of file diff --git a/problem_builder/public/js/mentoring_with_steps.js b/problem_builder/public/js/mentoring_with_steps.js index 3c59b502..443065af 100644 --- a/problem_builder/public/js/mentoring_with_steps.js +++ b/problem_builder/public/js/mentoring_with_steps.js @@ -22,6 +22,7 @@ function MentoringWithStepsBlock(runtime, element) { var activeStep = $('.mentoring', element).data('active-step'); var reviewTipsTemplate = _.template($('#xblock-review-tips-template').html()); // Tips about specific questions the user got wrong var attemptsTemplate = _.template($('#xblock-attempts-template').html()); + var message = $('.sb-step-message', element); var checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM, gradeDOM, attemptsDOM, reviewTipsDOM, reviewLinkDOM, submitXHR; @@ -183,6 +184,7 @@ function MentoringWithStepsBlock(runtime, element) { hideReviewStep(); attemptsDOM.html(''); reviewTipsDOM.empty().hide(); + message.hide(); } function updateNextLabel() { diff --git a/problem_builder/public/js/step.js b/problem_builder/public/js/step.js index 06c2ffb8..430a40dd 100644 --- a/problem_builder/public/js/step.js +++ b/problem_builder/public/js/step.js @@ -10,7 +10,8 @@ function MentoringStepBlock(runtime, element) { } } - var submitXHR, resultsXHR; + var submitXHR, resultsXHR, + message = $(element).find('.sb-step-message'); function callIfExists(obj, fn) { if (typeof obj !== 'undefined' && typeof obj[fn] == 'function') { @@ -59,6 +60,12 @@ function MentoringStepBlock(runtime, element) { submitXHR = $.post(handlerUrl, JSON.stringify(data)) .success(function(response) { resultHandler(response); + if (message.length) { + message.fadeIn(); + $(document).click(function() { + message.fadeOut(); + }); + } }); }, diff --git a/problem_builder/step.py b/problem_builder/step.py index 9372f63b..bbec3b01 100644 --- a/problem_builder/step.py +++ b/problem_builder/step.py @@ -107,7 +107,12 @@ class MentoringStepBlock( default=_("Next Step") ) - editable_fields = ('display_name', 'show_title', 'next_button_label') + message = String( + display_name=_("Message"), + help=_("Feedback or instructional message which pops up after submitting."), + ) + + editable_fields = ('display_name', 'show_title', 'next_button_label', 'message') @lazy def siblings(self): diff --git a/problem_builder/templates/html/step.html b/problem_builder/templates/html/step.html index 096dd0d7..54bab608 100644 --- a/problem_builder/templates/html/step.html +++ b/problem_builder/templates/html/step.html @@ -14,4 +14,9 @@