Fix position and appearance of review tips

problem_builder/public/css/problem-builder.css

@@ -174,16 +174,25 @@
     display: none;
 }
 
-.mentoring .assessment-messages p.review-tips-intro {
-    margin-top: 1em;
+.mentoring .assessment-review-tips p.review-tips-intro {
+    margin-top: 1.2em;
     margin-bottom: 0;
     font-weight: bold;
 }
 
-.mentoring .assessment-messages .review-tips-list {
+.mentoring .assessment-review-tips .review-tips-list {
     margin-top: 0;
     padding-top: 0;
 }
+.mentoring .assessment-review-tips .review-tips-list li {
+    margin-left: 0.5em;
+    padding-left: 0;
+}
+.mentoring .assessment-review-tips .review-tips-list li p {
+    display: inline;
+    margin: 0;
+}
+
 
 .pb-clarification span.clarification i {
     font-style: normal;

problem_builder/public/js/mentoring_assessment_view.js

@@ -2,7 +2,7 @@ function MentoringAssessmentView(runtime, element, mentoring) {
     var gradeTemplate = _.template($('#xblock-grade-template').html());
     var reviewQuestionsTemplate = _.template($('#xblock-review-questions-template').html()); // Detailed list of which questions the user got wrong
     var reviewTipsTemplate = _.template($('#xblock-review-tips-template').html()); // Tips about specific questions the user got wrong
-    var submitDOM, nextDOM, reviewDOM, tryAgainDOM, messagesDOM, reviewLinkDOM;
+    var submitDOM, nextDOM, reviewDOM, tryAgainDOM, messagesDOM, reviewLinkDOM, reviewTipsDOM;
     var submitXHR;
     var checkmark;
     var active_child;
@@ -24,6 +24,7 @@ function MentoringAssessmentView(runtime, element, mentoring) {
         $('.grade').html('');
         $('.attempts').html('');
         messagesDOM.empty().hide();
+        reviewTipsDOM.empty().hide();
     }
 
     function no_more_attempts() {
@@ -65,20 +66,18 @@ function MentoringAssessmentView(runtime, element, mentoring) {
 
         mentoring.renderAttempts();
         if (data.max_attempts === 0 || data.num_attempts < data.max_attempts) {
-            var messageHTML = '';
             if (data.assessment_message) {
-                messageHTML += data.assessment_message; // Overall on-assessment-review message
+                // Overall on-assessment-review message:
+                mentoring.setContent(messagesDOM, data.assessment_message);
+                messagesDOM.show();
             }
             if (data.assessment_review_tips.length > 0) {
-                messageHTML += reviewTipsTemplate({
-                    // on-assessment-review-question messages specific to questions the student got wrong:
+                // on-assessment-review-question messages specific to questions the student got wrong:
+                mentoring.setContent(reviewTipsDOM, reviewTipsTemplate({
                     tips: data.assessment_review_tips
-                });
+                }));
+                reviewTipsDOM.show();
             }
-            if (messageHTML.length > 0) {
-                mentoring.setContent(messagesDOM, messageHTML);
-            }
-            messagesDOM.show();
         }
         $('a.question-link', element).click(reviewJump);
     }
@@ -114,6 +113,7 @@ function MentoringAssessmentView(runtime, element, mentoring) {
         reviewLinkDOM = $(element).find('.review-link');
         checkmark = $('.assessment-checkmark', element);
         messagesDOM = $('.assessment-messages', element);
+        reviewTipsDOM = $('.assessment-review-tips', element);
 
         submitDOM.show();
         submitDOM.bind('click', submit);

problem_builder/public/themes/apros.css

@@ -16,3 +16,8 @@
 .mentoring h3 {
     text-transform: uppercase;
 }
+
+.themed-xblock.mentoring .assessment-review-tips .review-tips-list li {
+    margin-left: 1.8em;
+    padding-left: 0;
+}

problem_builder/step.py

@@ -45,7 +45,7 @@ class StepParentMixin(object):
     An XBlock mixin for a parent block containing Step children
     """
 
-    @property
+    @lazy
     def steps(self):
         """
         Get the usage_ids of all of this XBlock's children that are "Steps"

problem_builder/templates/html/mentoring.html

@@ -53,6 +53,7 @@
     </div>
     {% endif %}
     <div class="messages"></div>
+    <div class="assessment-review-tips"></div>
   </div>
   <div class="review-link"><a href="#">Review final grade</a></div>
 </div>

problem_builder/tests/integration/test_assessment.py

@@ -394,15 +394,15 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
         self.multiple_response_question(4, mentoring, controls, ("Its beauty",), PARTIAL, last=True)
 
         # The review tips for MCQ 2 and the MRQ should be shown:
-        messages = mentoring.find_element_by_css_selector('.assessment-messages')
-        self.assertTrue(messages.is_displayed())
-        self.assertIn('You might consider reviewing the following items', messages.text)
-        self.assertIn('Take another look at', messages.text)
-        self.assertIn('Lesson 1', messages.text)
-        self.assertNotIn('Lesson 2', messages.text)  # This MCQ was correct
-        self.assertIn('Lesson 3', messages.text)
+        review_tips = mentoring.find_element_by_css_selector('.assessment-review-tips')
+        self.assertTrue(review_tips.is_displayed())
+        self.assertIn('You might consider reviewing the following items', review_tips.text)
+        self.assertIn('Take another look at', review_tips.text)
+        self.assertIn('Lesson 1', review_tips.text)
+        self.assertNotIn('Lesson 2', review_tips.text)  # This MCQ was correct
+        self.assertIn('Lesson 3', review_tips.text)
         # The on-assessment-review message is also shown if attempts remain:
-        self.assertIn('Assessment additional feedback message text', messages.text)
+        self.assert_messages_text(mentoring, "Assessment additional feedback message text")
 
         self.assert_clickable(controls.try_again)
         controls.try_again.click()
@@ -415,7 +415,7 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
         self.multiple_response_question(4, mentoring, controls, user_selection, CORRECT, last=True)
 
         self.assert_messages_text(mentoring, "Assessment additional feedback message text")
-        self.assertNotIn('You might consider reviewing the following items', messages.text)
+        self.assertFalse(review_tips.is_displayed())
 
         self.assert_clickable(controls.try_again)
         controls.try_again.click()
@@ -427,7 +427,7 @@ class MentoringAssessmentTest(MentoringAssessmentBaseTest):
         self.multiple_response_question(4, mentoring, controls, ("Its beauty",), PARTIAL, last=True)
 
         # The review tips will not be shown because no attempts remain:
-        self.assert_messages_empty(mentoring)
+        self.assertFalse(review_tips.is_displayed())
 
     def test_single_question_assessment(self):
         """