feat(quiz): add directional question view transitions

Author: b-l-i-n-d

assets/src/js/frontend/learning-area/quiz/layout.ts

@@ -14,6 +14,9 @@ export interface QuizLayoutConfig {
 
 const quizLayout = (config: QuizLayoutConfig) => {
   const form = window.TutorCore?.form;
+  const docWithViewTransition = document as Document & {
+    startViewTransition?: (callback: () => void) => { finished: Promise<void> };
+  };
 
   return {
     layout: config.layout ?? QuizLayoutType.QUESTION_BELOW_EACH_OTHER,
@@ -139,8 +142,10 @@ const quizLayout = (config: QuizLayoutConfig) => {
         return;
       }
       if (this.currentIndex > 1) {
-        this.currentIndex -= 1;
-        this.revealFooterState = '';
+        this.runWithViewTransition(() => {
+          this.currentIndex -= 1;
+          this.revealFooterState = '';
+        }, 'back');
         this.scrollToQuestion();
       }
     },
@@ -174,18 +179,22 @@ const quizLayout = (config: QuizLayoutConfig) => {
         const wait = this.getRevealWaitTime();
         window.setTimeout(() => {
           this.isRevealing = false;
-          this.revealFooterState = '';
           if (this.currentIndex < this.totalQuestions) {
-            this.currentIndex += 1;
+            this.runWithViewTransition(() => {
+              this.currentIndex += 1;
+              this.revealFooterState = '';
+            });
             this.scrollToQuestion();
           }
         }, wait);
         return;
       }
 
       if (this.currentIndex < this.totalQuestions) {
-        this.currentIndex += 1;
-        this.revealFooterState = '';
+        this.runWithViewTransition(() => {
+          this.currentIndex += 1;
+          this.revealFooterState = '';
+        });
         this.scrollToQuestion();
       }
     },
@@ -197,11 +206,35 @@ const quizLayout = (config: QuizLayoutConfig) => {
       if (!index || index < 1 || index > this.totalQuestions) {
         return;
       }
-      this.currentIndex = index;
-      this.revealFooterState = '';
+      this.runWithViewTransition(
+        () => {
+          this.currentIndex = index;
+          this.revealFooterState = '';
+        },
+        index < this.currentIndex ? 'back' : 'forward',
+      );
       this.scrollToQuestion();
     },
 
+    runWithViewTransition(update: () => void, direction: 'forward' | 'back' = 'forward') {
+      const transitionRoot = document.documentElement;
+      transitionRoot.style.setProperty('--tutor-quiz-vt-dir', direction === 'back' ? '-1' : '1');
+
+      if (!docWithViewTransition.startViewTransition) {
+        update();
+        transitionRoot.style.removeProperty('--tutor-quiz-vt-dir');
+        return;
+      }
+
+      const transition = docWithViewTransition.startViewTransition.call(document, () => {
+        update();
+      });
+
+      transition.finished.finally(() => {
+        transitionRoot.style.removeProperty('--tutor-quiz-vt-dir');
+      });
+    },
+
     getRevealWaitTime(): number {
       const feedbackWaitMs = Number(this.revealWaitMs ?? '');
       if (!Number.isNaN(feedbackWaitMs) && feedbackWaitMs > 0) {

assets/src/scss/frontend/learning-area/components/quiz/_quiz.scss

@@ -6,6 +6,59 @@ $tutor-quiz-header-offset-admin: calc(44px + (#{$tutor-spacing-8} * 2) + 46px);
 $tutor-quiz-header-offset-admin-sm: calc(44px + (#{$tutor-spacing-8} * 2) + 32px);
 $tutor-quiz-footer-offset: 96px;
 
+::view-transition-group(tutor-quiz-question) {
+  animation-duration: 280ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+::view-transition-old(tutor-quiz-question),
+::view-transition-new(tutor-quiz-question) {
+  animation-duration: 280ms;
+  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+::view-transition-old(tutor-quiz-question) {
+  animation-name: tutor-quiz-question-exit;
+}
+
+::view-transition-new(tutor-quiz-question) {
+  animation-name: tutor-quiz-question-enter;
+}
+
+@keyframes tutor-quiz-question-enter {
+  from {
+    opacity: 0;
+    transform: translateX(calc(22px * var(--tutor-quiz-vt-dir, 1))) scale(0.985);
+    filter: blur(1px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+    filter: blur(0);
+  }
+}
+
+@keyframes tutor-quiz-question-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    filter: blur(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(-22px * var(--tutor-quiz-vt-dir, 1))) scale(0.985);
+    filter: blur(1px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(tutor-quiz-question),
+  ::view-transition-old(tutor-quiz-question),
+  ::view-transition-new(tutor-quiz-question) {
+    animation-duration: 1ms;
+  }
+}
+
 .tutor-quiz {
   &-submission {
     @include tutor-flex(column);
@@ -346,6 +399,10 @@ $tutor-quiz-footer-offset: 96px;
 
   &-question-wrapper {
     width: 100%;
+
+    &-active {
+      view-transition-name: tutor-quiz-question;
+    }
   }
 
   &-skip-btn {

templates/learning-area/quiz/attempt.php

@@ -201,6 +201,7 @@ class="tutor-quiz-question-wrapper"
 				data-quiz-question-index="<?php echo esc_attr( $question_index ); ?>"
 				data-answer-required="<?php echo esc_attr( $answer_required ? '1' : '0' ); ?>"
 				x-show="isQuestionActive(<?php echo esc_attr( $question_index ); ?>)"
+				:class="{ 'tutor-quiz-question-wrapper-active': isQuestionActive(<?php echo esc_attr( $question_index ); ?>) }"
 				x-cloak
 			>
 				<?php Quiz::render_question( $question, $question_index ); ?>