Merge branch 'main' into release

README.md

@@ -109,6 +109,10 @@ The actual deployment happens through Github Actions. Look at `.github/workflows
 ```
 npm run test:unit
 ```
+To run unit tests for individual spec files (say, for Header component), use:
+```
+npm run test:unit -- Header.spec.ts
+```
 
 ### Run the end-to-end tests
 

src/components/InstructionPage.vue

@@ -2,7 +2,7 @@
     <div>
         <h4 class="text-lg font-bold m-6">Test Paper Overview</h4>
         <!-- Table -->
-        <table class="table-auto m-4">
+        <table class="table-auto mx-auto md:mx-0 m-4">
             <!-- row 1 -->
             <tr>
                 <th class="border-black border-1 text-left px-4 py-2">Test Name</th>
@@ -60,21 +60,21 @@
              <li>The countdown timer in the top right corner of screen will display the remaining time available for you to complete the test. When the timer reaches zero, the test will end by itself. You will not be required to end or submit your test.</li>
              <li>You can click on the <span class="inline-flex items-baseline"><BaseIcon name ='hamburger' class="place-self-center w-4 h-4"></BaseIcon></span> button on the top left corner of the page to expand the Question Palette.</li>
              <li>The Question Palette will show the status of each question using one of the following symbols:
-                <div class="flex flex-wrap ml-7 mr-4 m-2">
-                    <div class="flex items-center mb-2 mr-4">
-                        <Success></Success>
-                        <span class="ml-6 mr-6">You have answered the question</span>
-                    </div>
-                    <div class="flex items-center mb-2 mr-4">
-                        <Error></Error>
-                        <span class="ml-6 mr-6">You have not visited the question yet</span>
-                    </div>
-                    <div class="flex items-center mb-2 mr-4">
-                        <Neutral></Neutral>
-                        <span class="ml-6 mr-6">You have not answered the question</span>
-                    </div>
+              <div class="flex flex-wrap mx-2 md:mx-4 my-2">
+                <div class="flex items-center my-2 md:mx-4">
+                  <Success></Success>
+                  <span class="ml-6 mr-6">You have answered the question</span>
                 </div>
-             </li>
+                <div class="flex items-center my-2 md:mx-4">
+                  <Error></Error>
+                  <span class="ml-6 mr-6">You have not visited the question yet</span>
+                </div>
+                <div class="flex items-center my-2 md:mx-4">
+                  <Neutral></Neutral>
+                  <span class="ml-6 mr-6">You have not answered the question</span>
+                </div>
+              </div>
+            </li>
              <li>You can click on the <span class="inline-flex items-baseline"><BaseIcon name ='hamburger' class="place-self-center w-4 h-4"></BaseIcon></span> button again to collapse the Question Palette.</li>
           </ol>
         </div>

src/components/Omr/OmrItem.vue

@@ -55,14 +55,14 @@
           <!-- subjective question answer -->
           <div
             v-if="isQuestionTypeSubjective"
-            class="flex flex-row"
+            class="flex flex-col"
             :class="answerContainerClass"
             data-test="subjectiveAnswerContainer"
           >
             <!-- input area for the answer -->
             <Textarea
               v-model:value="subjectiveAnswer"
-              class="px-2 w-full"
+              class="px-1 w-full"
               :boxStyling="subjectiveAnswerBoxStyling"
               placeholder="Enter your answer here"
               :isDisabled="isAnswerDisabled"
@@ -84,18 +84,26 @@
                 {{ charactersLeft }}
               </p>
             </div>
+             <!-- answer display -->
+            <div
+              v-if="hasQuizEnded"
+              class="px-1 text-lg mt-2"
+              data-test="subjectiveCorrectAnswer"
+            >
+              Correct Answer: {{ correctAnswer }}
+            </div>
           </div>
           <!-- Numerical question answer -->
           <div
             v-if="isQuestionTypeNumericalFloat || isQuestionTypeNumericalInteger"
-            class="flex flex-row"
+            class="flex flex-col"
             :class="answerContainerClass"
             data-test="numericalAnswerContainer"
           >
             <!-- input area for the answer -->
             <Textarea
               v-model:value="numericalAnswer"
-              class="px-2 w-full"
+              class="px-1 w-full"
               :boxStyling="numericalAnswerBoxStyling"
               placeholder="Only numbers are allowed"
               :inputMode="getInputMode"
@@ -104,6 +112,14 @@
               @beforeinput="preventKeypressIfApplicable"
               data-test="numericalAnswer"
             ></Textarea>
+            <!-- answer display -->
+            <div
+              v-if="hasQuizEnded"
+              class="px-1 text-lg mt-2"
+              data-test="numericalCorrectAnswer"
+            >
+              Correct Answer: {{ correctAnswer }}
+            </div>
           </div>
         </div>
       </div>
@@ -192,6 +208,7 @@ export default defineComponent({
       draftAnswer: props.submittedAnswer as DraftResponse, // answer for the current question
       nonGradedAnswerClass: "bg-gray-200",
       correctOptionClass: "text-white bg-green-500",
+      skippedCorrectOptionClass: "border-4 border-green-500",
       wrongOptionClass: "text-white bg-red-500",
       disabledOptionClass: "bg-gray-200",
       questionHeaderTextClass:
@@ -242,7 +259,13 @@ export default defineComponent({
           props.isGradedQuestion &&
           props.correctAnswer.indexOf(optionIndex) != -1
       ) {
-        return state.correctOptionClass
+        if (state.draftAnswer != null &&
+            state.draftAnswer.indexOf(optionIndex) != -1) {
+          // if both correct and submitted option
+          return state.correctOptionClass
+        }
+        // if correct but not in submitted option
+        return state.skippedCorrectOptionClass
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) &&

src/components/Questions/Body.vue

@@ -127,6 +127,14 @@
               {{ charactersLeft }}
             </p>
           </div>
+          <!-- answer display -->
+          <div
+            v-if="hasQuizEnded"
+            class="px-2 text-lg mt-2"
+            data-test="subjectiveCorrectAnswer"
+          >
+            Correct Answer: {{ correctAnswer }}
+          </div>
         </div>
         <!-- Numerical question answer -->
         <div
@@ -147,6 +155,14 @@
             @beforeinput="preventKeypressIfApplicable"
             data-test="numericalAnswer"
           ></Textarea>
+          <!-- answer display -->
+          <div
+            v-if="hasQuizEnded"
+            class="px-2 text-lg mt-2"
+            data-test="numericalCorrectAnswer"
+          >
+            Correct Answer: {{ correctAnswer }}
+          </div>
         </div>
       </div>
     </div>
@@ -296,6 +312,7 @@ export default defineComponent({
       questionTypesWithOptions: new Set([questionType.SINGLE_CHOICE, questionType.MULTI_CHOICE]),
       nonGradedAnswerClass: "bg-gray-200",
       correctOptionClass: "text-white bg-green-500",
+      skippedCorrectOptionClass: "border-4 border-green-500",
       wrongOptionClass: "text-white bg-red-500",
       questionHeaderTextClass:
         "text-lg md:text-xl lg:text-2xl mx-4 m-2 text-center leading-tight whitespace-pre-wrap",
@@ -328,10 +345,11 @@ export default defineComponent({
     /**
      * returns the background class for an option
      *
-     * handles the 4 different cases:
+     * handles the 5 different cases:
      * - the given option has not been selected
      * - question is graded and given option is the right answer
      * - question is graded and given option is the wrong answer
+     * - question is graded and no option is given (skipped)
      * - question is non-graded and the given option has been selected
      * @param {Number} optionIndex - index of the option
      */
@@ -351,7 +369,13 @@ export default defineComponent({
         props.isGradedQuestion &&
         props.correctAnswer.indexOf(optionIndex) != -1
       ) {
-        return state.correctOptionClass
+        if (props.submittedAnswer != null &&
+            props.submittedAnswer.indexOf(optionIndex) != -1) {
+          // if both correct and submitted option
+          return state.correctOptionClass
+        }
+        // if correct but not in submitted option
+        return state.skippedCorrectOptionClass
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) &&

src/components/Questions/Footer.vue

@@ -6,20 +6,34 @@
       'bg-gray-200 py-4 px-2': isQuizAssessment,
     }"
   >
-    <div class="place-self-start flex h-full">
+    <div :class="[
+      !hasQuizEnded ? 'place-self-start flex h-full space-x-1': 'flex h-full w-full justify-between'
+    ]">
       <!-- back button - assessment and homework -->
       <icon-button
         :iconConfig="previousQuestionButtonIconConfig"
         :buttonClass="assessmentNavigationButtonClass"
-        :class="{
-          hidden: !isPreviousButtonShown && !isQuizAssessment,
-          invisible: (!isPreviousButtonShown && isQuizAssessment) || isOmrMode,
-        }"
-        :isDisabled="isSessionAnswerRequestProcessing"
+        :class="[
+          { hidden: isOmrMode },
+        ]"
+        :isDisabled="isSessionAnswerRequestProcessing || !isPreviousButtonShown"
         ariaLabel="Previous Question"
         @click="goToPreviousQuestion"
         data-test="previousQuestionButton"
       ></icon-button>
+      <!-- forward button - assessment -->
+      <icon-button
+        :class="[
+          { hidden: isOmrMode },
+        ]"
+        v-if="isQuizAssessment && isNextButtonShown"
+        :iconConfig="nextQuestionButtonIconConfig"
+        :buttonClass="assessmentNavigationButtonClass"
+        :isDisabled="isSessionAnswerRequestProcessing"
+        ariaLabel="Next Question"
+        @click="goToNextQuestion"
+        data-test="nextQuestionButton"
+      ></icon-button>
     </div>
 
     <div
@@ -37,19 +51,6 @@
         @click="clearAnswer"
         data-test="clearButton"
       ></icon-button>
-
-      <!-- save & next button - assessment -->
-      <icon-button
-        :class="{
-          hidden: isOmrMode
-        }"
-        :titleConfig="saveAndNextButtonTitleConfig"
-        :iconConfig="saveAndNextButtonIconConfig"
-        :buttonClass="saveAndNextButtonClass"
-        :isDisabled="(!isAnswerSubmitted && !isSubmitEnabled) || isSessionAnswerRequestProcessing"
-        @click="saveQuestionAndProceed"
-        data-test="saveAndNextButton"
-      ></icon-button>
     </div>
 
     <div class="place-self-end flex h-full">
@@ -63,19 +64,18 @@
         @click="submitQuestion"
         data-test="submitButton"
       ></icon-button>
-      <!-- forward button - assessment -->
+      <!-- save&next button - assessment-->
       <icon-button
         :class="{
           hidden: isOmrMode
         }"
-        v-if="isQuizAssessment && isNextButtonShown"
-        :titleConfig="nextQuestionButtonTitleConfig"
-        :iconConfig="nextQuestionButtonIconConfig"
-        :buttonClass="assessmentNavigationButtonClass"
-        :isDisabled="isSessionAnswerRequestProcessing"
-        ariaLabel="Next Question"
-        @click="goToNextQuestion"
-        data-test="nextQuestionButton"
+        v-if="isQuizAssessment && !hasQuizEnded"
+        :titleConfig="saveAndNextButtonTitleConfig"
+        :iconConfig="saveAndNextButtonIconConfig"
+        :buttonClass="saveAndNextButtonClass"
+        :isDisabled="(!isAnswerSubmitted && !isSubmitEnabled) || isSessionAnswerRequestProcessing"
+        @click="saveQuestionAndProceed"
+        data-test="saveAndNextButton"
       ></icon-button>
     </div>
   </div>
@@ -178,11 +178,6 @@ export default defineComponent({
       iconClass: state.assessmentNavigationButtonIconClass,
     } as IconButtonIconConfig);
 
-    const nextQuestionButtonTitleConfig = ref({
-      value: "Next",
-      class: "text-gray-600",
-    } as IconButtonTitleConfig);
-
     const clearButtonClass = ref([
       state.assessmentTextButtonClass,
       "bg-white hover:bg-gray-50",
@@ -271,7 +266,6 @@ export default defineComponent({
       ...toRefs(state),
       previousQuestionButtonIconConfig,
       nextQuestionButtonIconConfig,
-      nextQuestionButtonTitleConfig,
       clearButtonClass,
       saveAndNextButtonClass,
       clearButtonTitleConfig,

src/components/Questions/QuestionModal.vue

@@ -392,7 +392,7 @@ To attempt this question, unselect an answer to another question in this section
           }
         }
         state.toast.success(
-            `You have answered ${attemptedQuestions} out of ${props.numQuestions} questions. Please verify your responses and click End Test button again to make final submission.`,
+            `You have answered ${attemptedQuestions} out of ${props.numQuestions} questions. Click on the Question Palette to review unanswered questions before submitting the test. Click the End Test button again to make the final submission.`,
             {
               position: POSITION.TOP_CENTER,
               timeout: 5000,

src/components/Splash.vue

@@ -63,7 +63,7 @@
         :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
         :quizTimeLimit="quizTimeLimit"
         :questionSetStates = "questionSetStates"
-        class="xl:mr-20 xl:ml-10 lg:mr-24 lg:ml-24 md:mr-48 md:ml-48 sm:mr-60 sm:ml-60"
+        class="mx-4 md:mx-40"
     ></InstructionPage>
 
     <!-- start button -->
@@ -181,7 +181,7 @@ export default defineComponent({
           config.value = "Let's Start";
         } else {
           if (props.hasQuizEnded && !props.reviewAnswers) {
-            config.class = "text-sm md:text-sm text-primary font-poppins-bold";
+            config.class = "text-sm md:text-sm text-white font-poppins-bold";
             config.value = "You cannot review answers now. Please come back after test ends.";
             if (props.sessionEndTimeText != "") {
               config.value += ` (${props.sessionEndTimeText})`