✨ Refine v4 quiz single-question flow and reveal footer feedback

assets/core/scss/themes/_dark.scss

@@ -64,6 +64,7 @@
   --tutor-icon-disabled: #{$tutor-gray-600};
   --tutor-icon-brand: #{$tutor-brand-600};
   --tutor-icon-brand-hover: #{$tutor-brand-700};
+  --tutor-icon-brand-secondary: #{$tutor-brand-300};
   --tutor-icon-exception1: #{$tutor-exception-1};
   --tutor-icon-exception2: #{$tutor-exception-2};
   --tutor-icon-success-primary: #{$tutor-success-600};

assets/core/scss/themes/_light.scss

@@ -65,6 +65,7 @@
   --tutor-icon-disabled: #{$tutor-gray-300};
   --tutor-icon-brand: #{$tutor-brand-600};
   --tutor-icon-brand-hover: #{$tutor-brand-700};
+  --tutor-icon-brand-secondary: #{$tutor-brand-300};
   --tutor-icon-exception1: #{$tutor-exception-1};
   --tutor-icon-exception2: #{$tutor-exception-2};
   --tutor-icon-success-primary: #{$tutor-success-700};

assets/core/scss/tokens/_icons.scss

@@ -12,6 +12,7 @@ $tutor-icon-secondary: var(--tutor-icon-secondary);
 $tutor-icon-subdued: var(--tutor-icon-subdued);
 $tutor-icon-brand: var(--tutor-icon-brand);
 $tutor-icon-brand-hover: var(--tutor-icon-brand-hover);
+$tutor-icon-brand-secondary: var(--tutor-icon-brand-secondary);
 $tutor-icon-success-primary: var(--tutor-icon-success-primary);
 $tutor-icon-critical: var(--tutor-icon-critical);
 $tutor-icon-critical-hover: var(--tutor-icon-critical-hover);
@@ -35,6 +36,7 @@ $tutor-icons: (
   subdued: $tutor-icon-subdued,
   brand: $tutor-icon-brand,
   brand-hover: $tutor-icon-brand-hover,
+  brand-secondary: $tutor-icon-brand-secondary,
   success-primary: $tutor-icon-success-primary,
   critical: $tutor-icon-critical,
   critical-hover: $tutor-icon-critical-hover,
@@ -44,4 +46,4 @@ $tutor-icons: (
   exception2: $tutor-icon-exception2,
   exception4: $tutor-icon-exception4,
   disabled: $tutor-icon-disabled,
-);
+);

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

@@ -1,4 +1,3 @@
-export type QuizFooterPosition = 'only' | 'first' | 'middle' | 'last';
 export type RevealQuestionType = (typeof QUIZ_REVEAL_CONFIG.SUPPORTED_TYPES)[number];
 
 export const QUIZ_REVEAL_CONFIG = {
@@ -13,6 +12,7 @@ export const QUIZ_REVEAL_CONFIG = {
   EXPLANATION_CONTENT_DATASET: 'quizExplanationContent',
   DATA_OPTION_ATTR: 'data-option',
   DATA_REVEALED_ATTR: 'data-revealed',
+  DATA_RESULT_ATTR: 'data-reveal-result',
   DATA_OPTION_CORRECT: 'correct',
   DATA_OPTION_INCORRECT: 'incorrect',
 } as const;
@@ -22,13 +22,6 @@ export const QUIZ_ABANDON_CONFIG = {
   IGNORE_ANCHOR_PREFIXES: ['#', 'javascript:'],
 } as const;
 
-export const QUIZ_FOOTER_POSITIONS = {
-  ONLY: 'only',
-  FIRST: 'first',
-  MIDDLE: 'middle',
-  LAST: 'last',
-} as const;
-
 export const QuestionTimeoutAction = {
   AUTO_ABANDON: 'auto_abandon',
   AUTO_SUBMIT: 'auto_submit',

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

@@ -51,6 +51,8 @@ export const revealQuestionWithAnswers = (wrapper: HTMLElement, revealAnswerIds:
   }
 
   const inputs = Array.from(question.querySelectorAll<HTMLInputElement>('input[type="radio"], input[type="checkbox"]'));
+  const selectedAnswerIds = new Set<number>();
+  const correctAnswerIds = new Set<number>();
 
   inputs.forEach((input) => {
     const option = input.closest(QUIZ_REVEAL_CONFIG.OPTION_SELECTOR) as HTMLElement | null;
@@ -59,7 +61,18 @@ export const revealQuestionWithAnswers = (wrapper: HTMLElement, revealAnswerIds:
     }
 
     const answerId = Number(input.value);
+    if (Number.isNaN(answerId)) {
+      return;
+    }
+
+    if (input.checked) {
+      selectedAnswerIds.add(answerId);
+    }
+
     const isCorrect = revealAnswerIds.includes(answerId);
+    if (isCorrect) {
+      correctAnswerIds.add(answerId);
+    }
 
     if (isCorrect) {
       option.setAttribute(QUIZ_REVEAL_CONFIG.DATA_OPTION_ATTR, QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT);
@@ -70,5 +83,14 @@ export const revealQuestionWithAnswers = (wrapper: HTMLElement, revealAnswerIds:
     input.disabled = true;
   });
 
+  const hasMatchingSelection =
+    selectedAnswerIds.size > 0 &&
+    selectedAnswerIds.size === correctAnswerIds.size &&
+    Array.from(selectedAnswerIds).every((id) => correctAnswerIds.has(id));
+
+  question.setAttribute(
+    QUIZ_REVEAL_CONFIG.DATA_RESULT_ATTR,
+    hasMatchingSelection ? QUIZ_REVEAL_CONFIG.DATA_OPTION_CORRECT : QUIZ_REVEAL_CONFIG.DATA_OPTION_INCORRECT,
+  );
   question.setAttribute(QUIZ_REVEAL_CONFIG.DATA_REVEALED_ATTR, '1');
 };