minor ui changes

src/components/InstructionPage.vue

@@ -88,15 +88,15 @@
                 <li>To select you answer, click on the button of one of the options.</li>
                 <li>To deselect your chosen answer, click on the button of the chosen option again or click on the <b>Clear</b> button.</li>
                 <li>To change your chosen answer, click on the button of another option.</li>
-                <li>To save your answer, you <b>MUST</b> click on the "Save >" button.</li>
+                <li>To save your answer, you <b>MUST</b> click on the "Save & Next" button.</li>
              </ol>
              </li>
              <li>To change your answer to a question that has already been answered, first select that question for answering and then follow the procedure for answering that type of question.</li>
           </ol>
         </div>
         <div class="mt-5 ml-6 mr-4 flex border-red-400 border-1 p-2">
           <div class="float-left text-red-400 pr-5 pl-3 text-xl font-bold">!</div>
-          <div class="float-right text-justify pr-2">Note that selecting an option does NOT save your answer to the current question. Click on <b>"Save >" to save your answer</b> for the current question and then go to the next question.</div>
+          <div class="float-right text-justify pr-2">Note that selecting an option does NOT save your answer to the current question. Click on <b>"Save & Next" to save your answer</b> for the current question and then go to the next question.</div>
         </div>
     </div>
 </template>

src/components/Questions/Footer.vue

@@ -59,7 +59,7 @@
       }"
       :titleConfig="markForReviewButtonTitleConfig"
       :buttonClass="markForReviewButtonClass"
-      :isDisabled="isAnswerSubmitted || isSessionAnswerRequestProcessing"
+      :isDisabled="isAnswerSubmitted || isSessionAnswerRequestProcessing || isMarkedForReview"
       @click="toggleMarkForReview"
       data-test="markForReviewButton"
       ></icon-button>
@@ -107,6 +107,8 @@ import {
   toRefs,
   computed,
   PropType,
+  onMounted,
+  onBeforeUnmount
 } from "vue";
 
 export default defineComponent({
@@ -155,6 +157,10 @@ export default defineComponent({
   },
   setup(props, context) {
     const isQuizAssessment = computed(() => props.quizType == "assessment" || props.quizType == "omr-assessment");
+    const isSmallScreen = ref(false);
+    const updateScreenSize = () => {
+      isSmallScreen.value = window.matchMedia("(max-width: 500px)").matches;
+    };
     const state = reactive({
       assessmentNavigationButtonIconClass: [
         {
@@ -215,12 +221,12 @@ export default defineComponent({
     } as IconButtonTitleConfig);
 
     const markForReviewButtonTitleConfig = computed(() => ({
-      value: props.isMarkedForReview ? "Clear Review" : "Mark For Review",
+      value: isSmallScreen.value ? "Review >" : "Mark For Review & Next",
       class: ["text-xxs bp-500:text-sm lg:text-base xl:text-lg font-bold", "text-violet-500"],
     } as IconButtonTitleConfig));
 
     const saveAndNextButtonTitleConfig = ref({
-      value: "Save >",
+      value: "Save & Next",
       class: [state.assessmentTextButtonTitleClass, "text-emerald-500"],
     } as IconButtonTitleConfig);
 
@@ -243,10 +249,15 @@ export default defineComponent({
     }
 
     function toggleMarkForReview() {
-      if (props.isMarkedForReview) {
-        context.emit("clear-review");
-      } else {
+      if (!props.isMarkedForReview) {
         context.emit("mark-for-review");
+        // wait for processing to be done and answer to be submitted
+        const checkProcessingDone = setInterval(() => {
+          if (!props.isSessionAnswerRequestProcessing) {
+            if (props.continueAfterAnswerSubmit) context.emit("continue");
+            clearInterval(checkProcessingDone);
+          }
+        }, 100); // check every 100ms
       }
     }
 
@@ -296,6 +307,16 @@ export default defineComponent({
       "p-4 px-8 bp-500:p-6 bp-500:px-12 rounded-2xl shadow-xl disabled:opacity-50 disabled:cursor-not-allowed",
     ]);
 
+    // Setup listeners for screen size changes
+    onMounted(() => {
+      updateScreenSize();
+      window.addEventListener("resize", updateScreenSize);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", updateScreenSize);
+    });
+
     return {
       ...toRefs(state),
       previousQuestionButtonIconConfig,
@@ -319,6 +340,6 @@ export default defineComponent({
       isQuizAssessment,
     };
   },
-  emits: ["submit", "previous", "continue", "clear", "mark-for-review", "clear-review"],
+  emits: ["submit", "previous", "continue", "clear", "mark-for-review"],
 });
 </script>

src/components/Questions/Palette/Review.vue

@@ -3,7 +3,7 @@
       :title="title"
       :hasQuizEnded="hasQuizEnded"
       iconName="skip-rounded"
-      iconClass="bg-violet-100 border-violet-600"
+      iconClass="bg-violet-300 border-violet-600"
     ></KeyTemplate>
   </template>
 

src/components/Questions/QuestionModal.vue

@@ -85,7 +85,6 @@
         @previous="showPreviousQuestion"
         @clear="clearAnswer"
         @mark-for-review="markForReviewQuestion"
-        @clear-review="clearReviewQuestion"
         data-test="footer"
       ></Footer>
     </div>
@@ -255,7 +254,7 @@ export default defineComponent({
           state.toast.warning(
             `You have already attempted maximum allowed (${props.maxQuestionsAllowedToAttempt}) questions in current section (Q.${props.qsetIndexLimits.low + 1} - Q.${props.qsetIndexLimits.high}).
 
-To attempt this question, unselect an answer to another question in this section.
+To attempt Q.${props.currentQuestionIndex + 1}, unselect an answer to another question in this section.
             `,
             {
               position: POSITION.TOP_CENTER,
@@ -339,7 +338,7 @@ To attempt this question, unselect an answer to another question in this section
       state.previousLocalResponse = clonedeep(state.localResponses[props.currentQuestionIndex]);
       state.localResponses[props.currentQuestionIndex].marked_for_review = true;
       state.toast.info(
-        `Question ${props.currentQuestionIndex + 1} marked for review!`,
+        `Question ${props.currentQuestionIndex + 1} is marked for review!`,
         {
           position: POSITION.TOP_LEFT,
           timeout: 2000
@@ -348,12 +347,6 @@ To attempt this question, unselect an answer to another question in this section
       context.emit("update-review-status")
     }
 
-    function clearReviewQuestion() {
-      state.previousLocalResponse = clonedeep(state.localResponses[props.currentQuestionIndex]);
-      state.localResponses[props.currentQuestionIndex].marked_for_review = false;
-      context.emit("update-review-status")
-    }
-
     function showNextQuestion() {
       // It toggles the reRenderKey from 0 to 1 or 1 to 0. And changing the reRender key, re-renders the component.
       // we reRender the whole component as textarea is holding the details which is not getting updated
@@ -400,7 +393,7 @@ To attempt this question, unselect an answer to another question in this section
           currentQuestionResponseAnswer.value
       }
       state.isDraftAnswerCleared = false
-      state.toast.clear() // if toast exists in current state, clear when you switch state
+      // state.toast.clear() // if toast exists in current state, clear when you switch state
     }
 
     function numericalAnswerUpdated(answer: number | null) {
@@ -578,7 +571,6 @@ Click on the Question Palette to view unanswered questions before submitting the
       subjectiveAnswerUpdated,
       clearAnswer,
       markForReviewQuestion,
-      clearReviewQuestion,
       endTest,
       endTestByTime,
       navigateToQuestion,

tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
         1: "1px",
       },
       fontSize: {
-        xxs: "0.65rem",
+        xxs: "0.80rem",
       },
     },
     screens: {