@pocketprep/ui-kit 3.9.7 → 3.9.9

package/lib/components/Quiz/Question/ChoicesContainer.vue

@@ -168,6 +168,9 @@
                     <template #explanationBottomExperiment>
                         <slot name="explanationBottomExperiment" />
                     </template>
+                    <template #tutorChatExplanationPrompts>
+                        <slot name="tutorChatExplanationPrompts" />
+                    </template>
                 </DropdownExplanation>
             </div>
             <template v-if="!globalMetrics">

package/lib/components/Quiz/Question/DropdownExplanation.vue

@@ -58,6 +58,13 @@
             tabindex="-1"
             v-html="explanationImageLongAlt"
         />
+        <div
+            v-if="showTutorChatExplanationPrompts"
+            v-dark="isDarkMode"
+            class="uikit-question-dropdown-explanation__tutor-chat-prompts"
+        >
+            <slot name="tutorChatExplanationPrompts" />
+        </div>
         <div
             v-if="reference && !hideReferences"
             v-dark="isDarkMode"
@@ -98,6 +105,7 @@ const {
     breakpointsWithEl,
     keywordDefinitions,
     showRightSideBar,
+    showTutorChatExplanationPrompts,
 } = useQuestionContext()
 
 const explanation = computed(() => {

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -214,6 +214,7 @@ const {
     matrixAnswerKeys,
     selectedMatrixChoices,
     isTeachGroupReview,
+    showRightSideBar,
 } = useQuestionContext()
 
 const matrixCheckboxGrid = ref<boolean[][] | undefined>(undefined)
@@ -427,12 +428,16 @@ watch(matrixRadioGrid, () => {
 }, { deep: true })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if (
+        ((reviewMode.value || showMatrixAnswers.value) || showRightSideBar)
+        && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid()
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if (
+        ((reviewMode.value || showMatrixAnswers.value) || showRightSideBar)
+        && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid()
         matrixRadioGrid.value = selectedRadioBtnGrid
     }

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -2,6 +2,10 @@
     <div
         v-dark="isDarkMode"
         class="uikit-question-mobile-matrix-choices-container"
+        :class="{
+            'uikit-question-mobile-matrix-choices-container--is-showing-right-side-bar':
+                showRightSideBar,
+        }"
     >
         <div
             class="uikit-question-mobile-matrix-choices-container__choices-container"
@@ -178,6 +182,7 @@ const {
     showMatrixAnswers,
     matrixAnswerKeys,
     selectedMatrixChoices,
+    showRightSideBar,
 } = useQuestionContext()
 
 const matrixCheckboxGrid = ref<boolean[][] | undefined>(undefined)
@@ -520,12 +525,16 @@ watch(showMatrixAnswers, () => {
 })
 
 watch(selectedMatrixChoices, () => {
-    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+    if (
+        ((reviewMode.value || showMatrixAnswers.value) || showRightSideBar)
+        && question.value.type === 'Matrix Checkbox') {
         const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid()
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
-    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+    if (
+        ((reviewMode.value || showMatrixAnswers.value) || showRightSideBar)
+        && question.value.type === 'Matrix Radio Button') {
         const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid()
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
@@ -544,6 +553,10 @@ watch(selectedMatrixChoices, () => {
         display: none
     }
 
+    &--is-showing-right-side-bar#{&}--tablet-portrait {
+        display: block;
+    }
+
     &__choices-container {
         cursor: pointer;
         position: relative;

package/lib/components/Quiz/Question.vue

@@ -213,10 +213,16 @@
                     <template #explanationBottomExperiment>
                         <slot name="explanationBottomExperiment" />
                     </template>
+                    <template #tutorChatExplanationPrompts>
+                        <slot name="tutorChatExplanationPrompts" />
+                    </template>
                 </ChoicesContainer>
                 <MatrixChoicesContainer
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
                     class="uikit-question__matrix-choices-container"
+                    :class="{
+                        'uikit-question__matrix-choices-container--right-side-bar-open': showRightSideBar,
+                    }"
                     ref="uikit-question__matrix-choices-container"
                     v-breakpoint="breakpointsWithEl"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
@@ -2281,6 +2287,10 @@ provide(InjectionKeys.showTutorChatExplanationPromptsKey, showTutorChatExplanati
     &__matrix-choices-container {
         display: block;
 
+        &--right-side-bar-open#{&}--tablet-portrait {
+            display: none;
+        }
+
         @include breakpoint(black-bear) {
             display: none;
         }

package/lib/components/Quiz/QuizContainer.vue

@@ -204,6 +204,7 @@ onMounted(() => {
 
         &--tablet-portrait {
             width: 290px;
+            margin-left: 10px;
         }
 
         &--mobile {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.9.7",
+  "version": "3.9.9",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {