feat: show/hide back button based on display_feedback

Users are only allowed to go back from test scores slide if display_feedback is set to immediately. If it is set to end_of_test, users cannot go back to the same questions but they can use Redo test button if allow_reset_problems is true.
open-craft · Aug 2, 2024 · d733533 · d733533
1 parent cfb83df
commit d733533
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 5 deletions.
diff --git a/multi_problem_xblock/multi_problem_xblock.py b/multi_problem_xblock/multi_problem_xblock.py
@@ -197,6 +197,7 @@ def _children_iterator(self, filter_block_type=None):
         """
         Generator to yield child problem blocks.
         """
+        # use selected_children method from LibraryContentBlock to get child xblocks.
         for index, (block_type, block_id) in enumerate(self.selected_children()):
             if filter_block_type and (block_type != filter_block_type):
                 continue
@@ -275,6 +276,7 @@ def get_test_scores(self, _data, _suffix):
             return Response(_('All problems need to be completed before checking test results!'), status=400)
         question_answers, student_score, total_possible_score = self._prepare_user_score(include_question_answers=True)
         passed = False
+        allow_back_button = True
 
         if self.score_display_format == SCORE_DISPLAY_FORMAT.X_OUT_OF_Y:
             score_display = f'{student_score}/{total_possible_score}'
@@ -287,17 +289,28 @@ def get_test_scores(self, _data, _suffix):
             self.publish_completion(1)
             passed = True
 
+        if self.display_feedback != DISPLAYFEEDBACK.IMMEDIATELY:
+            allow_back_button = False
+            self.current_slide = -1
+
         template = loader.render_django_template(
             '/templates/html/multi_problem_xblock_test_scores.html',
             {
                 'cut_off_score': cut_off_score if self.cut_off_score else '',
                 'question_answers': question_answers,
                 'score': score_display,
                 'passed': passed,
+                'allow_back_button': allow_back_button,
             },
         )
         return Response(template, content_type='text/html')
 
+    @XBlock.handler
+    def reset_selected_children(self, data, suffix=None):
+        # reset current_slide field
+        self.current_slide = 0
+        return super().reset_selected_children(data, suffix)
+
     def student_view_context(self, context=None):
         """
         Student view data for templates and javascript initialization
@@ -314,7 +327,6 @@ def student_view_context(self, context=None):
             user_service = self.runtime.service(self, 'user')
             child_context['username'] = user_service.get_current_user().opt_attrs.get('edx-platform.username')
 
-        # use selected_children method from LibraryContentBlock to get child xblocks.
         for index, block_type, child in self._children_iterator():
             child_id = str(child.usage_key)
             if child is None:
@@ -344,6 +356,12 @@ def student_view_context(self, context=None):
             )
 
         next_page_on_submit = self.next_page_on_submit and self.display_feedback != DISPLAYFEEDBACK.IMMEDIATELY
+        overall_progress = self._calculate_progress_percentage(completed_problems, total_problems)
+
+        # Reset current_slide field if display_feedback is set to never after user completes all problems.
+        if overall_progress == 100 and self.current_slide == -1 and self.display_feedback == DISPLAYFEEDBACK.NEVER:
+            self.current_slide = 0
+
         template_context = {
             'items': items,
             'self': self,
@@ -352,7 +370,7 @@ def student_view_context(self, context=None):
             'reset_button': self.allow_resetting_children,
             'show_results': self.display_feedback != DISPLAYFEEDBACK.NEVER,
             'next_page_on_submit': next_page_on_submit,
-            'overall_progress': self._calculate_progress_percentage(completed_problems, total_problems),
+            'overall_progress': overall_progress,
             'bookmarks_service_enabled': bookmarks_service is not None,
         }
         js_context = {

diff --git a/multi_problem_xblock/public/js/multi_problem_xblock.js b/multi_problem_xblock/public/js/multi_problem_xblock.js
@@ -22,8 +22,6 @@ function MultiProblemBlock(runtime, element, initArgs) {
     next_page_on_submit: nextPageOnSubmit = false,
   } = initArgs;
 
-  showSlide(currentSlide)
-
   function showSlide(n) {
     var slides = $('.slide', element);
     slides[n].style.display = "block";
@@ -67,6 +65,7 @@ function MultiProblemBlock(runtime, element, initArgs) {
     // Otherwise, display the correct tab:
     showSlide(nextSlide);
   }
+
   $('.nextBtn', element).click((e) => nextPrev(1));
   $('.prevBtn', element).click((e) => nextPrev(-1));
 
@@ -128,9 +127,13 @@ function MultiProblemBlock(runtime, element, initArgs) {
       type: 'GET',
       dataType: 'html',
       success: function( data ) {
-        $('.problem-slides-container', element).hide();
         $('.problem-test-score-container', element).show();
         $('.problem-test-score-container', element).html(data);
+        if ($('.back-to-problems', element).length) {
+          $('.problem-slides-container', element).hide();
+        } else {
+          $('.problem-slides-container', element).remove();
+        }
         var $accordions = $(element).find('.accordion');
 
         $('.back-to-problems', element).click((e) => {
@@ -167,6 +170,13 @@ function MultiProblemBlock(runtime, element, initArgs) {
     });
   })
 
+  // If user has already completed all problems, display test score slide
+  if (currentSlide === -1) {
+    $('.see-test-results', element).trigger('click');
+  } else {
+    showSlide(currentSlide)
+  }
+
   window.RequireJS.require(['course_bookmarks/js/views/bookmark_button'], function(BookmarkButton) {
     var $bookmarkButtonElements = $element.find('.multi-problem-bookmark-buttons');
     $bookmarkButtonElements.each(function() {

diff --git a/multi_problem_xblock/templates/html/multi_problem_xblock.html b/multi_problem_xblock/templates/html/multi_problem_xblock.html
@@ -6,6 +6,7 @@
     <div class="progress-bar" role="progressbar" style="width: {{ overall_progress }}%;" aria-valuenow="{{ overall_progress }}" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <!--Problem slides-->
+  {% if self.current_slide != -1 %}
   <div class="px-4 pt-5 pb-4 problem-slides-container">
     <div class="problem-slide-header">
       <button type="button" class="prevBtn btn-default btn-primary-outline">
@@ -56,6 +57,7 @@ <h2 class="hd hd-2">{{ self.display_name }}</h2>
       {% endfor %}
     </div>
   </div>
+  {% endif %}
   <!--Test score container-->
   <div class="problem-test-score-container">
   </div>

diff --git a/multi_problem_xblock/templates/html/multi_problem_xblock_test_scores.html b/multi_problem_xblock/templates/html/multi_problem_xblock_test_scores.html
@@ -3,11 +3,16 @@
 <!--Test results-->
 <div class="multi-problem-test-results px-4 pt-5 pb-4">
   <div class="problem-slide-header">
+    {% if allow_back_button %}
     <button type="button" class="back-to-problems btn-default btn-primary-outline">
       <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M5.6668 10.5L6.8418 9.325L3.02513 5.5L6.8418 1.675L5.6668 0.5L0.666798 5.5L5.6668 10.5Z" fill="#15376D"/>
       </svg>
     </button>
+    {% else %}
+    <!--Empty div to have some space-->
+    <div class="py-4" />
+    {% endif %}
     <div class="score-header-text text-center">
       <small class="text-gray">
         {% trans 'Complete!' %}