@pocketprep/ui-kit 3.4.55 → 3.4.56

package/lib/components/Quiz/Question.vue

@@ -57,6 +57,17 @@
                     </template>
                 </QuestionContext>
             </slot>
+            <div
+                v-if="questionScenario && currentScenarioQuestionNumber && numberOfScenarioQuestions"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                tabindex="-1"
+                class="uikit-question__scenario-part-x-of-y-label"
+                :aria-label="`Scenario Part ${currentScenarioQuestionNumber} of ${numberOfScenarioQuestions}`"
+                aria-live="assertive"
+            >
+                Part {{ currentScenarioQuestionNumber }} of {{ numberOfScenarioQuestions }}
+            </div>
             <slot name="promptExperiment" />
             <div
                 ref="prompt"
@@ -495,6 +506,7 @@ import type {
     TMatrixChoiceScores,
     TNamesRow,
     TViewNames,
+    IScenarioSerial,
 } from './question'
 
 @Component({
@@ -615,6 +627,29 @@ export default class Question extends Vue {
         return this.question.type === 'Matrix Checkbox' || this.question.type === 'Matrix Radio Button'
     }
 
+    get questionScenario () {
+        return this.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
+    }
+
+    get numberOfScenarioQuestions () {
+        return this.questionScenario?.questions.length
+    }
+
+    get currentScenarioQuestionNumber () {
+        if (this.questionScenario?.questions) {
+            const indexOfScenarioSerial = this.questionScenario.questions.findIndex(
+                (scenarioSerial: IScenarioSerial) =>  {
+                    return scenarioSerial.serial === this.question.serial
+                }
+            )
+
+            return indexOfScenarioSerial !== -1 ? indexOfScenarioSerial + 1 : undefined
+        }
+
+        return undefined
+
+    }
+
     get passageImageUrl () {
         const imageUrl = this.question.passageImage?.url
         
@@ -1639,6 +1674,27 @@ export default class Question extends Vue {
         }
     }
 
+    &__scenario-part-x-of-y-label {
+        padding: 0 16px;
+        margin-bottom: 4px;
+        width: 100%;
+        max-width: 490px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 19px;
+        color: $slate;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--mobile {
+            line-height: 20px;
+            margin-bottom: 8px;
+        }
+    }
+
     &__prompt {
         outline: none;
         font-weight: 600;

package/lib/components/Quiz/question.d.ts

@@ -50,4 +50,8 @@ export interface IRadioOptions {
     choices: TMatrixChoiceKey[]
     value: TMatrixChoiceKey | null
     label?: string
+}
+
+export interface IScenarioSerial {
+    serial: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.55",
+  "version": "3.4.56",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -78,7 +78,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.14.10",
+    "@pocketprep/types": "1.14.20",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
     "@vitejs/plugin-vue": "4.6.2",