feat: auto advance on submit

open-craft · Jul 26, 2024 · 988014e · 988014e
1 parent 5cd4fb3
commit 988014e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/multi_problem_xblock/multi_problem_xblock.py b/multi_problem_xblock/multi_problem_xblock.py
@@ -10,7 +10,7 @@
 from web_fragments.fragment import Fragment
 from webob import Response
 from xblock.core import XBlock
-from xblock.fields import Float, Integer, Scope, String
+from xblock.fields import Boolean, Float, Integer, Scope, String
 
 try:
     from xblock.utils.resources import ResourceLoader
@@ -120,6 +120,15 @@ class MultiProblemBlock(LibraryContentBlock):
         values={'min': 0, 'step': 0.1, 'max': 1},
     )
 
+    next_page_on_submit = Boolean(
+        display_name=_('Next page on submit'),
+        help=_(
+            'If true and display feedback is set to End of test or Never, next problem will be displayed automatically on submit.'
+        ),
+        scope=Scope.settings,
+        default=False,
+    )
+
     current_slide = Integer(help=_('Stores current slide/problem number for a user'), scope=Scope.user_state, default=0)
 
     @property
@@ -295,6 +304,7 @@ def student_view(self, context):
                 }
             )
 
+        next_page_on_submit = self.next_page_on_submit and self.display_feedback != DISPLAYFEEDBACK.IMMEDIATELY
         fragment.add_content(
             loader.render_django_template(
                 '/templates/html/multi_problem_xblock.html',
@@ -305,12 +315,16 @@ def student_view(self, context):
                     'completion_delay_ms': 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),
                 },
             )
         )
         fragment.add_css_url(self.runtime.local_resource_url(self, 'public/css/multi_problem_xblock.css'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/multi_problem_xblock.js'))
         fragment.initialize_js('MultiProblemBlock')
-        fragment.json_init_args = {'current_slide': self.current_slide}
+        fragment.json_init_args = {
+            'current_slide': self.current_slide,
+            'next_page_on_submit': next_page_on_submit,
+        }
         return fragment
diff --git a/multi_problem_xblock/public/js/multi_problem_xblock.js b/multi_problem_xblock/public/js/multi_problem_xblock.js
@@ -17,7 +17,11 @@ function MultiProblemBlock(runtime, element, initArgs) {
   }
 
 
-  var { current_slide: currentSlide = 0 } = initArgs;
+  var {
+    current_slide: currentSlide = 0,
+    next_page_on_submit: nextPageOnSubmit = false,
+  } = initArgs;
+
   showSlide(currentSlide)
 
   function showSlide(n) {
@@ -51,16 +55,17 @@ function MultiProblemBlock(runtime, element, initArgs) {
   function nextPrev(n) {
     // This function will figure out which tab to display
     var slides = $('.slide', element);
-    // Hide the current tab:
-    slides[currentSlide].style.display = "none";
-    // Increase or decrease the current tab by 1:
-    currentSlide = currentSlide + n;
+    // Calculate next slide position
+    var nextSlide = currentSlide + n;
     // if you have reached the end of the form...
-    if (currentSlide >= slides.length) {
+    if (nextSlide >= slides.length) {
       return false;
     }
+    // Hide the current tab:
+    slides[currentSlide].style.display = "none";
+    currentSlide = nextSlide;
     // Otherwise, display the correct tab:
-    showSlide(currentSlide);
+    showSlide(nextSlide);
   }
   $('.nextBtn', element).click((e) => nextPrev(1));
   $('.prevBtn', element).click((e) => nextPrev(-1));
@@ -109,6 +114,10 @@ function MultiProblemBlock(runtime, element, initArgs) {
           $resultsBtn.prop('disabled', false);
         }
       });
+      // initArgs.nextPageOnSubmit loose value on reset, so confirm value from html template
+      if ((nextPageOnSubmit || $('.multi-problem-container', element).data('nextPageOnSubmit'))) {
+        nextPrev(1);
+      }
     });
   });
 

diff --git a/multi_problem_xblock/templates/html/multi_problem_xblock.html b/multi_problem_xblock/templates/html/multi_problem_xblock.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="multi-problem-container">
+<div class="multi-problem-container" data-next-page-on-submit="{% if next_page_on_submit %}true{% else %}false{% endif %}">
   <!--Progress bar-->
   <div class="progress">
     <div class="progress-bar" role="progressbar" style="width: {{ overall_progress }}%;" aria-valuenow="{{ overall_progress }}" aria-valuemin="0" aria-valuemax="100"></div>