diff --git a/src/components/Omr/OmrItem.vue b/src/components/Omr/OmrItem.vue
index 2b78c8a..f2dc7f5 100644
--- a/src/components/Omr/OmrItem.vue
+++ b/src/components/Omr/OmrItem.vue
@@ -1,133 +1,135 @@
 <template>
-    <div
-      class="flex h-full"
-    >
-      <div class="flex flex-row w-full">
-        <!-- question number and type information-->
-        <div class="basis-3/12">
-        <p :class="questionHeaderTextClass" data-test="question-header-text" v-html="questionHeaderText"></p>
+  <div class="flex h-full">
+    <div class="flex flex-row w-full">
+      <!-- question number and type information-->
+      <div class="basis-3/12">
+        <p
+          :class="questionHeaderTextClass"
+          data-test="question-header-text"
+          v-html="questionHeaderText"
+        ></p>
+      </div>
+      <div :class="orientationClass">
+        <!-- option container -->
+        <div
+          v-if="areOptionsVisible"
+          class="flex"
+          :class="answerContainerClass"
+          data-test="optionContainer"
+        >
+          <ul class="w-full">
+            <li class="list-none flex flex-row">
+              <div
+                v-for="(option, optionIndex) in options"
+                :key="optionIndex"
+                :class="[optionBackgroundClass(optionIndex), optionTextClass]"
+                :data-test="`optionContainer-${optionIndex}`"
+              >
+                <!-- each option is defined here -->
+                <!-- adding <label> so that touch input is just not limited to the radio/checkbox button -->
+                <label :class="labelClass(option)">
+                  <!-- understand the meaning of the attributes here:
+                    https://www.w3schools.com/tags/att_input_type_radio.asp -->
+
+                  <!-- radio button rely on names to decide what gets to be checked -->
+                  <!-- so ensure unique names for all radio buttons -->
+                  <input
+                    :type="optionInputType"
+                    :name="`option-${optionIndex}-${$props.currentQuestionIndex}`"
+                    class="place-self-center text-primary focus:ring-0 disabled:cursor-not-allowed"
+                    style="box-shadow: none"
+                    @click="selectOption(optionIndex)"
+                    :checked="isOptionMarked(optionIndex)"
+                    :disabled="isAnswerDisabled"
+                    :data-test="`optionSelector-${optionIndex}`"
+                  />
+                  <!-- assuming max 12 options  -->
+                  <div
+                    v-html="'ABCDEFGHIJKL'.split('')[optionIndex]"
+                    class="ml-2 h-full place-self-center text-base sm:text-lg"
+                    :data-test="`option-${optionIndex}`"
+                  ></div>
+                </label>
+              </div>
+            </li>
+          </ul>
         </div>
-        <div :class="orientationClass">
-          <!-- option container -->
+        <!-- subjective question answer -->
+        <div
+          v-if="isQuestionTypeSubjective"
+          class="flex flex-col"
+          :class="answerContainerClass"
+          data-test="subjectiveAnswerContainer"
+        >
+          <!-- input area for the answer -->
+          <Textarea
+            v-model:value="subjectiveAnswer"
+            class="px-1 w-full"
+            :boxStyling="subjectiveAnswerBoxStyling"
+            placeholder="Enter your answer here"
+            :isDisabled="isAnswerDisabled"
+            :maxHeightLimit="250"
+            @beforeinput="preventKeypressIfApplicable"
+            data-test="subjectiveAnswer"
+          ></Textarea>
+          <!-- character limit -->
           <div
-            v-if="areOptionsVisible"
-            class="flex"
-            :class="answerContainerClass"
-            data-test="optionContainer"
+            class="flex items-end px-6 mt-2"
+            v-if="hasCharLimit && !isAnswerSubmitted"
+            data-test="charLimitContainer"
           >
-            <ul class="w-full">
-              <li class="list-none flex flex-row">
-                <div
-                  v-for="(option, optionIndex) in options"
-                  :key="optionIndex"
-                  :class="[optionBackgroundClass(optionIndex), optionTextClass]"
-                  :data-test="`optionContainer-${optionIndex}`"
-                >
-                  <!-- each option is defined here -->
-                  <!-- adding <label> so that touch input is just not limited to the radio/checkbox button -->
-                  <label :class="labelClass(option)">
-                    <!-- understand the meaning of the attributes here:
-                      https://www.w3schools.com/tags/att_input_type_radio.asp -->
-
-                    <!-- radio button rely on names to decide what gets to be checked -->
-                    <!-- so ensure unique names for all radio buttons -->
-                    <input
-                      :type="optionInputType"
-                      :name="`option-${optionIndex}-${$props.currentQuestionIndex}`"
-                      class="place-self-center text-primary focus:ring-0 disabled:cursor-not-allowed"
-                      style="box-shadow: none"
-                      @click="selectOption(optionIndex)"
-                      :checked="isOptionMarked(optionIndex)"
-                      :disabled="isAnswerDisabled"
-                      :data-test="`optionSelector-${optionIndex}`"
-                    />
-                    <!-- assuming max 12 options  -->
-                    <div
-                      v-html="'ABCDEFGHIJKL'.split('')[optionIndex]"
-                      class="ml-2 h-full place-self-center text-base sm:text-lg"
-                      :data-test="`option-${optionIndex}`"
-                    ></div>
-                  </label>
-                </div>
-              </li>
-            </ul>
-          </div>
-          <!-- subjective question answer -->
-          <div
-            v-if="isQuestionTypeSubjective"
-            class="flex flex-col"
-            :class="answerContainerClass"
-            data-test="subjectiveAnswerContainer"
-          >
-            <!-- input area for the answer -->
-            <Textarea
-              v-model:value="subjectiveAnswer"
-              class="px-1 w-full"
-              :boxStyling="subjectiveAnswerBoxStyling"
-              placeholder="Enter your answer here"
-              :isDisabled="isAnswerDisabled"
-              :maxHeightLimit="250"
-              @beforeinput="preventKeypressIfApplicable"
-              data-test="subjectiveAnswer"
-            ></Textarea>
-            <!-- character limit -->
-            <div
-              class="flex items-end px-6 mt-2"
-              v-if="hasCharLimit && !isAnswerSubmitted"
-              data-test="charLimitContainer"
+            <p
+              class="text-sm sm:text-base lg:text-lg font-bold"
+              :class="maxCharLimitClass"
+              data-test="charLimit"
             >
-              <p
-                class="text-sm sm:text-base lg:text-lg font-bold"
-                :class="maxCharLimitClass"
-                data-test="charLimit"
-              >
-                {{ charactersLeft }}
-              </p>
-            </div>
-             <!-- answer display -->
-            <div
-              v-if="hasQuizEnded"
-              class="px-1 text-lg mt-2"
-              data-test="subjectiveCorrectAnswer"
-            >
-              Correct Answer: {{ correctAnswer }}
-            </div>
+              {{ charactersLeft }}
+            </p>
           </div>
-          <!-- Numerical question answer -->
+          <!-- answer display -->
           <div
-            v-if="isQuestionTypeNumericalFloat || isQuestionTypeNumericalInteger"
-            class="flex flex-col"
-            :class="answerContainerClass"
-            data-test="numericalAnswerContainer"
+            v-if="hasQuizEnded"
+            class="px-1 text-lg mt-2"
+            data-test="subjectiveCorrectAnswer"
           >
-            <!-- input area for the answer -->
-            <Textarea
-              v-model:value="numericalAnswer"
-              class="px-1 w-full"
-              :boxStyling="numericalAnswerBoxStyling"
-              placeholder="Only numbers are allowed"
-              :inputMode="getInputMode"
-              :isDisabled="isAnswerDisabled"
-              :maxHeightLimit="250"
-              @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>
+            Correct Answer: {{ correctAnswer }}
           </div>
-           <!-- Matrix match answer -->
+        </div>
+        <!-- Numerical question answer -->
+        <div
+          v-if="isQuestionTypeNumericalFloat || isQuestionTypeNumericalInteger"
+          class="flex flex-col"
+          :class="answerContainerClass"
+          data-test="numericalAnswerContainer"
+        >
+          <!-- input area for the answer -->
+          <Textarea
+            v-model:value="numericalAnswer"
+            class="px-1 w-full"
+            :boxStyling="numericalAnswerBoxStyling"
+            placeholder="Only numbers are allowed"
+            :inputMode="getInputMode"
+            :isDisabled="isAnswerDisabled"
+            :maxHeightLimit="250"
+            @beforeinput="preventKeypressIfApplicable"
+            data-test="numericalAnswer"
+          ></Textarea>
+          <!-- answer display -->
           <div
-            v-if="isQuestionTypeMatrixMatch"
-            class="flex flex-col items-center"
-            :class="answerContainerClass"
-            data-test="matrixMatchContainer"
+            v-if="hasQuizEnded"
+            class="px-1 text-lg mt-2"
+            data-test="numericalCorrectAnswer"
           >
+            Correct Answer: {{ correctAnswer }}
+          </div>
+        </div>
+        <!-- Matrix match answer -->
+        <div
+          v-if="isQuestionTypeMatrixMatch"
+          class="flex flex-col items-center"
+          :class="answerContainerClass"
+          data-test="matrixMatchContainer"
+        >
           <ul class="max-w-screen-md w-full">
             <li class="list-none space-y-1 flex flex-col">
               <!-- Create the matrix match table -->
@@ -135,15 +137,39 @@
                 <thead>
                   <tr>
                     <th></th>
-                    <th v-for="(column, columnIndex) in $props.matrixSize?.[1] || 5" :key="columnIndex" class="border border-gray-200 text-center">{{ getColumnLabel(columnIndex) }}</th>
+                    <th
+                      v-for="(column, columnIndex) in $props.matrixSize?.[1] ||
+                      5"
+                      :key="columnIndex"
+                      class="border border-gray-200 text-center"
+                    >
+                      {{ getColumnLabel(columnIndex) }}
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr v-for="(row, rowIndex) in $props.matrixSize?.[0] || 4" :key="rowIndex">
-                    <td class="border border-gray-200 text-center">{{ "ABCD"[rowIndex] }}</td>
-                    <td v-for="(column, columnIndex) in $props.matrixSize?.[1] || 5" :key="columnIndex" class="border border-gray-200 text-center">
+                  <tr
+                    v-for="(row, rowIndex) in $props.matrixSize?.[0] || 4"
+                    :key="rowIndex"
+                  >
+                    <td class="border border-gray-200 text-center">
+                      {{ "ABCD"[rowIndex] }}
+                    </td>
+                    <td
+                      v-for="(column, columnIndex) in $props.matrixSize?.[1] ||
+                      5"
+                      :key="columnIndex"
+                      class="border border-gray-200 text-center"
+                    >
                       <div
-                        :class="optionBackgroundClass(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
+                        :class="
+                          optionBackgroundClass(
+                            convertMatrixMatchOptionToString(
+                              rowIndex,
+                              columnIndex
+                            )
+                          )
+                        "
                       >
                         <input
                           type="checkbox"
@@ -153,11 +179,25 @@
                           :disabled="isAnswerDisabled"
                           class="place-self-center text-primary focus:ring-0 disabled:cursor-not-allowed"
                           style="box-shadow: none"
-                          @click="selectOption(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
-                          :checked="isMatrixMatchOptionMarked(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
+                          @click="
+                            selectOption(
+                              convertMatrixMatchOptionToString(
+                                rowIndex,
+                                columnIndex
+                              )
+                            )
+                          "
+                          :checked="
+                            isMatrixMatchOptionMarked(
+                              convertMatrixMatchOptionToString(
+                                rowIndex,
+                                columnIndex
+                              )
+                            )
+                          "
                           :data-test="`matrixMatchSelector-${rowIndex}-${columnIndex}`"
                         />
-                    </div>
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -166,20 +206,20 @@
           </ul>
           <!-- answer display -->
           <div
-              v-if="hasQuizEnded"
-              class="px-2 text-lg mt-2"
-              data-test="matrixMatchCorrectAnswer"
-            >
-              Correct Answer: {{ correctAnswer }}
-            </div>
+            v-if="hasQuizEnded"
+            class="px-2 text-lg mt-2"
+            data-test="matrixMatchCorrectAnswer"
+          >
+            Correct Answer: {{ correctAnswer }}
           </div>
         </div>
       </div>
     </div>
-  </template>
+  </div>
+</template>
 
 <script lang="ts">
-import Textarea from "../UI/Text/Textarea.vue"
+import Textarea from "../UI/Text/Textarea.vue";
 import {
   defineComponent,
   reactive,
@@ -188,12 +228,12 @@ import {
   watch,
   PropType,
   onMounted,
-  onUpdated
-} from "vue"
+  onUpdated,
+} from "vue";
 
-import { quizType, questionType, DraftResponse } from "../../types"
+import { quizType, questionType, DraftResponse } from "../../types";
 
-const MAX_LENGTH_NUMERICAL_CHARACTERS: number = 10 // max length of characters in numerical answer textbox
+const MAX_LENGTH_NUMERICAL_CHARACTERS: number = 10; // max length of characters in numerical answer textbox
 
 const clonedeep = require("lodash.clonedeep");
 
@@ -204,64 +244,69 @@ export default defineComponent({
   props: {
     options: {
       default: () => [],
-      type: Array
+      type: Array,
     },
     correctAnswer: {
       default: null,
-      type: [String, Number, Array]
+      type: [String, Number, Array],
     },
     /** submitted answer -- used to initialize omr-item's draft answer when quiz is resumed */
     submittedAnswer: {
       default: null,
-      type: [String, Number, Array]
+      type: [String, Number, Array],
     },
     questionType: {
       default: questionType.SINGLE_CHOICE,
-      type: String as PropType<questionType>
+      type: String as PropType<questionType>,
     },
     /** the character limit to be used if present */
     maxCharLimit: {
       default: -1,
-      type: Number
+      type: Number,
     },
     /** matrix size for matrix match question */
     matrixSize: {
       default: () => [4, 5],
-      type: Array
+      type: Array,
     },
     /** data of the image to be shown on a question. Contains URL and alt_text */
     isPortrait: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     isGradedQuestion: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     quizType: {
       type: String as PropType<quizType>,
-      default: "homework"
+      default: "homework",
     },
     hasQuizEnded: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /** whether the user has attempted all available questions
-       * based on question set's optional limit
-      */
+     * based on question set's optional limit
+     */
     isQuestionDisabled: {
       type: Boolean,
-      default: false
+      default: false,
     },
     currentQuestionIndex: {
       type: Number,
-      default: 0
+      default: 0,
     },
   },
   setup(props, context) {
-    const isQuizAssessment = computed(() => props.quizType == "assessment" || props.quizType == "omr-assessment")
+    const isQuizAssessment = computed(
+      () => props.quizType == "assessment" || props.quizType == "omr-assessment"
+    );
     const state = reactive({
-      questionTypesWithOptions: new Set([questionType.SINGLE_CHOICE, questionType.MULTI_CHOICE]),
+      questionTypesWithOptions: new Set([
+        questionType.SINGLE_CHOICE,
+        questionType.MULTI_CHOICE,
+      ]),
       draftAnswer: props.submittedAnswer as DraftResponse, // answer for the current question
       nonGradedAnswerClass: "bg-gray-200",
       correctOptionClass: "text-white bg-green-500 border rounded-md",
@@ -269,60 +314,63 @@ export default defineComponent({
       wrongOptionClass: "text-white bg-red-500 border rounded-md",
       disabledOptionClass: "bg-gray-200",
       questionHeaderTextClass:
-          "text-lg md:text-xl lg:text-2xl mx-2 md:mx-10 py-6 text-center leading-tight whitespace-pre-wrap",
+        "text-lg md:text-xl lg:text-2xl mx-2 md:mx-10 py-6 text-center leading-tight whitespace-pre-wrap",
       questionTextClass:
-          "text-lg md:text-xl lg:text-2xl mx-4 mt-6 m-2 font-bold leading-tight whitespace-pre-wrap",
+        "text-lg md:text-xl lg:text-2xl mx-4 mt-6 m-2 font-bold leading-tight whitespace-pre-wrap",
       optionTextClass:
-          "p-2 text-lg md:text-xl lg:text-2xl border rounded-md mx-2 whitespace-pre-wrap",
+        "p-2 text-lg md:text-xl lg:text-2xl border rounded-md mx-2 whitespace-pre-wrap",
       subjectiveAnswer: null as string | null, // holds the answer to the subjective question
-      numericalAnswer: null as number | null // holds the answer to the numerical question
-    })
+      numericalAnswer: null as number | null, // holds the answer to the numerical question
+    });
 
     /**
-       * returns the background class for an option
-       *
-       * handles the 4 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 non-graded and the given option has been selected
-       * @param {Number} optionIndex - index of the option
-       */
+     * returns the background class for an option
+     *
+     * handles the 4 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 non-graded and the given option has been selected
+     * @param {Number} optionIndex - index of the option
+     */
     function optionBackgroundClass(answer: number | string) {
       // for omr-mode, when answer is disabled, gray the option box
       if (isAnswerDisabled.value && !props.hasQuizEnded) {
-        return state.disabledOptionClass
+        return state.disabledOptionClass;
       }
       if (
         (!isAnswerSubmitted.value && !props.hasQuizEnded) || // before quiz has ended, if answer isn't submitted
-          typeof props.correctAnswer == "string" || // check for typescript
-          typeof state.draftAnswer == "string" || // check for typescript
-          typeof props.correctAnswer == "number" || // check for typescript
-          typeof state.draftAnswer == "number" // check for typescript
+        typeof props.correctAnswer == "string" || // check for typescript
+        typeof state.draftAnswer == "string" || // check for typescript
+        typeof props.correctAnswer == "number" || // check for typescript
+        typeof state.draftAnswer == "number" // check for typescript
       ) {
-        return
+        return;
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) && // display colors if its a homework or if its assessment and quiz ended
-          props.isGradedQuestion &&
-          props.correctAnswer.indexOf(answer) != -1
+        props.isGradedQuestion &&
+        props.correctAnswer.indexOf(answer) != -1
       ) {
-        if (state.draftAnswer != null &&
-            typeof state.draftAnswer != "string" &&
-            typeof state.draftAnswer != "number" &&
-            (state.draftAnswer as (string | number)[]).indexOf(answer) != -1) {
+        if (
+          state.draftAnswer != null &&
+          typeof state.draftAnswer != "string" &&
+          typeof state.draftAnswer != "number" &&
+          (state.draftAnswer as (string | number)[]).indexOf(answer) != -1
+        ) {
           // if both correct and submitted option
-          return state.correctOptionClass
+          return state.correctOptionClass;
         }
         // if correct but not in submitted option
-        return state.skippedCorrectOptionClass
+        return state.skippedCorrectOptionClass;
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) &&
-          state.draftAnswer != null &&
-          (state.draftAnswer as (string | number)[]).indexOf(answer) != -1) {
-        if (!props.isGradedQuestion) return state.nonGradedAnswerClass
-        return state.wrongOptionClass
+        state.draftAnswer != null &&
+        (state.draftAnswer as (string | number)[]).indexOf(answer) != -1
+      ) {
+        if (!props.isGradedQuestion) return state.nonGradedAnswerClass;
+        return state.wrongOptionClass;
       }
     }
 
@@ -330,10 +378,10 @@ export default defineComponent({
     function isOptionMarked(optionIndex: number) {
       return (
         state.draftAnswer != null &&
-          typeof state.draftAnswer != "string" &&
-          typeof state.draftAnswer != "number" &&
-          (state.draftAnswer as (string | number)[]).indexOf(optionIndex) != -1
-      )
+        typeof state.draftAnswer != "string" &&
+        typeof state.draftAnswer != "number" &&
+        (state.draftAnswer as (string | number)[]).indexOf(optionIndex) != -1
+      );
     }
 
     function getRowLabel(rowIndex: number) {
@@ -344,7 +392,10 @@ export default defineComponent({
       return "PQRSTUVWXYZ"[columnIndex]; // assume max cols = 11
     }
 
-    function convertMatrixMatchOptionToString(rowIndex: number, columnIndex: number) {
+    function convertMatrixMatchOptionToString(
+      rowIndex: number,
+      columnIndex: number
+    ) {
       const rowLetter = getRowLabel(rowIndex);
       const colLetter = getColumnLabel(columnIndex);
       return rowLetter + colLetter;
@@ -355,29 +406,34 @@ export default defineComponent({
         state.draftAnswer != null &&
         typeof state.draftAnswer != "string" &&
         typeof state.draftAnswer != "number" &&
-        (state.draftAnswer as (string | number)[]).indexOf(matrixMatchAnswer) != -1
-      )
+        (state.draftAnswer as (string | number)[]).indexOf(matrixMatchAnswer) !=
+          -1
+      );
     }
 
     /**
-      * triggered upon selecting an option
-      */
+     * triggered upon selecting an option
+     */
     function selectOption(answer: number | string) {
       if (isQuestionTypeSingleChoice.value) {
         // for MCQ, simply set the option as the current response
         let currentResponse = clonedeep(state.draftAnswer);
-        if (currentResponse != null && Array.isArray(currentResponse) && currentResponse[0] == answer) {
+        if (
+          currentResponse != null &&
+          Array.isArray(currentResponse) &&
+          currentResponse[0] == answer
+        ) {
           // if user has selected same radio button again
           currentResponse = null;
         } else {
-          currentResponse = [answer]
+          currentResponse = [answer];
         }
         state.draftAnswer = currentResponse;
       }
 
       if (isQuestionTypeMultiChoice.value || isQuestionTypeMatrixMatch.value) {
         if (state.draftAnswer == null) {
-          state.draftAnswer = []
+          state.draftAnswer = [];
         }
 
         // if the selection option was already in the response
@@ -386,106 +442,186 @@ export default defineComponent({
         // not cloning the array leads to update:responses -> changing currentResponse value
         let currentResponse = clonedeep(state.draftAnswer);
         if (Array.isArray(currentResponse)) {
-          const optionPositionInResponse = currentResponse.indexOf(answer)
+          const optionPositionInResponse = currentResponse.indexOf(answer);
           if (optionPositionInResponse != -1) {
-            currentResponse.splice(optionPositionInResponse, 1)
+            currentResponse.splice(optionPositionInResponse, 1);
             if (currentResponse.length == 0) {
               // if all options unselected, set answer to null
               currentResponse = null;
             }
           } else {
-            currentResponse.push(answer)
-            currentResponse.sort()
+            currentResponse.push(answer);
+            currentResponse.sort();
           }
         }
         state.draftAnswer = currentResponse;
       }
 
-      context.emit("option-selected", state.draftAnswer, props.currentQuestionIndex)
+      context.emit(
+        "option-selected",
+        state.draftAnswer,
+        props.currentQuestionIndex
+      );
     }
 
     function labelClass(optionText: String) {
-      return [{ "h-4 sm:h-5": optionText == "" }, "flex content-center"]
+      return [{ "h-4 sm:h-5": optionText == "" }, "flex content-center"];
     }
 
     function doesNumberContainDecimal(x: Number | null) {
-      return String(x).includes(".")
+      return String(x).includes(".");
     }
 
     function doNumericalCharactersExceedLimit(x: Number | null) {
-      return String(x).length >= MAX_LENGTH_NUMERICAL_CHARACTERS
+      return String(x).length >= MAX_LENGTH_NUMERICAL_CHARACTERS;
     }
 
     function preventKeypressIfApplicable(event: InputEvent) {
+      function showErrorNotification(message: string) {
+        const existingNotification = document.querySelector(
+          ".error-notification"
+        );
+        if (existingNotification) {
+          existingNotification.remove();
+        }
+        const notification = document.createElement("div");
+        notification.className = "error-notification";
+        notification.innerText = message;
+
+        // Styling the notification
+        Object.assign(notification.style, {
+          position: "fixed",
+          bottom: "90px", // Adjusted distance from the bottom to avoid UI elements
+          left: "50%",
+          transform: "translateX(-70%)", // Center horizontally
+          backgroundColor: "#f44336",
+          color: "white",
+          padding: "10px",
+          borderRadius: "5px",
+          boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
+          zIndex: 1000,
+          maxWidth: "90%", // Ensure it does not exceed screen width
+          textAlign: "center",
+          boxSizing: "border-box",
+        });
+
+        document.body.appendChild(notification);
+
+        // Automatically remove the notification after 3 seconds
+        setTimeout(() => {
+          notification.remove();
+        }, 2000);
+      }
+
       if (event.data == null) {
         // prevent "Enter" key in android browser decimal keypad mode
-        if (event.inputType == "insertLineBreak") event.preventDefault()
+        if (event.inputType == "insertLineBreak") event.preventDefault();
         // in other cases, return to escape null type error
-        return
+        return;
       }
+
+      const isAlphabet = /[a-zA-Z]/.test(event.data); // Check if the input is an alphabet
+
+      if (isAlphabet) {
+        showErrorNotification("Alphabets are not allowed!");
+        event.preventDefault();
+        return;
+      }
+
       if (isQuestionTypeSubjective.value) {
         // checks if character limit is reached in case it is set
-        if (!hasCharLimit.value) return
+        if (!hasCharLimit.value) return;
         if (!charactersLeft.value) {
-          event.preventDefault()
-          return
+          event.preventDefault();
+          return;
         }
       }
       if (isQuestionTypeNumericalFloat.value) {
-        const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']
-        const keyPressed: string = event.data
+        const keysAllowed: string[] = [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          ".",
+        ];
+        const keyPressed: string = event.data;
         if (
           doNumericalCharactersExceedLimit(state.numericalAnswer) ||
-            !keysAllowed.includes(keyPressed) ||
-            // if key is "." but number already has a decimal point, or key "." is entered as the first character in answer, prevent
-            (event.data == "." &&
-            (doesNumberContainDecimal(state.numericalAnswer) || state.numericalAnswer == null))
+          !keysAllowed.includes(keyPressed) ||
+          // if key is "." but number already has a decimal point, or key "." is entered as the first character in answer, prevent
+          (event.data == "." &&
+            (doesNumberContainDecimal(state.numericalAnswer) ||
+              state.numericalAnswer == null))
         ) {
-          event.preventDefault()
+          if (
+            event.data == "." &&
+            doesNumberContainDecimal(state.numericalAnswer)
+          ) {
+            showErrorNotification("You have already entered a decimal point!");
+          }
+          event.preventDefault();
         }
       }
       if (isQuestionTypeNumericalInteger.value) {
-        const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
-        const keyPressed: string = event.data
+        const keysAllowed: string[] = [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+        ];
+        const keyPressed: string = event.data;
         if (
           doNumericalCharactersExceedLimit(state.numericalAnswer) ||
-            !keysAllowed.includes(keyPressed)) {
-          event.preventDefault()
+          !keysAllowed.includes(keyPressed)
+        ) {
+          event.preventDefault();
         }
       }
     }
 
     const questionHeaderText = computed(() => {
-      return `Q.${props.currentQuestionIndex + 1}: `
-    })
+      return `Q.${props.currentQuestionIndex + 1}: `;
+    });
 
     // styling class for the question image and loading spinner containers
     const questionImageAreaClass = computed(() => ({
       "h-56 mb-4": props.isPortrait,
-      "h-28 sm:h-36 md:h-48 lg:h-56 xl:h-80 w-1/2": !props.isPortrait
-    }))
+      "h-28 sm:h-36 md:h-48 lg:h-56 xl:h-80 w-1/2": !props.isPortrait,
+    }));
 
     const areOptionsVisible = computed(() =>
       state.questionTypesWithOptions.has(props.questionType)
-    )
+    );
     const isQuestionTypeSubjective = computed(
       () => props.questionType == questionType.SUBJECTIVE
-    )
+    );
     const isQuestionTypeMultiChoice = computed(
       () => props.questionType == questionType.MULTI_CHOICE
-    )
+    );
     const isQuestionTypeSingleChoice = computed(
       () => props.questionType == questionType.SINGLE_CHOICE
-    )
+    );
     const isQuestionTypeNumericalInteger = computed(
       () => props.questionType == questionType.NUMERICAL_INTEGER
-    )
+    );
     const isQuestionTypeNumericalFloat = computed(
       () => props.questionType == questionType.NUMERICAL_FLOAT
-    )
+    );
     const isQuestionTypeMatrixMatch = computed(
       () => props.questionType == questionType.MATRIX_MATCH
-    )
+    );
 
     // styling class to decide orientation of image + options
     // depending on portrait/landscape orientation
@@ -493,172 +629,184 @@ export default defineComponent({
       return [
         {
           "content-center": false,
-          "flex-col": false
+          "flex-col": false,
         },
-        "flex mx-2 md:mx-10 py-4"
-      ]
-    })
+        "flex mx-2 md:mx-10 py-4",
+      ];
+    });
 
     const optionInputType = computed(() => {
-      if (!areOptionsVisible.value) return null
-      if (isQuestionTypeSingleChoice.value) return "radio"
-      if (isQuestionTypeMultiChoice.value) return "checkbox"
-      return null
-    })
+      if (!areOptionsVisible.value) return null;
+      if (isQuestionTypeSingleChoice.value) return "radio";
+      if (isQuestionTypeMultiChoice.value) return "checkbox";
+      return null;
+    });
 
     /**
-       * classes for the various containers corresponding to the possible types of answers
-       * to the various types of questions (options for MCQ, textarea for subjective)
-       */
+     * classes for the various containers corresponding to the possible types of answers
+     * to the various types of questions (options for MCQ, textarea for subjective)
+     */
     const answerContainerClass = computed(() => ({
       "w-1/2": false,
-      "w-full": true
-    }))
+      "w-full": true,
+    }));
 
-    const hasCharLimit = computed(() => props.maxCharLimit != -1)
+    const hasCharLimit = computed(() => props.maxCharLimit != -1);
 
     const isAnswerSubmitted = computed(() => {
-      if (state.draftAnswer == null) return false
-      if (isQuestionTypeNumericalInteger.value || isQuestionTypeNumericalFloat.value) {
-        return state.numericalAnswer != null
+      if (state.draftAnswer == null) return false;
+      if (
+        isQuestionTypeNumericalInteger.value ||
+        isQuestionTypeNumericalFloat.value
+      ) {
+        return state.numericalAnswer != null;
       }
       if (isQuestionTypeSingleChoice.value || isQuestionTypeMultiChoice.value) {
-        return Array.isArray(state.draftAnswer) && state.draftAnswer.length > 0
+        return Array.isArray(state.draftAnswer) && state.draftAnswer.length > 0;
       }
-      return true
-    })
+      return true;
+    });
 
     const maxCharLimitClass = computed(() => {
       // class for the character limit text
       if (charactersLeft.value > 0.2 * props.maxCharLimit) {
-        return "text-gray-400"
+        return "text-gray-400";
       } else if (charactersLeft.value > 0.1 * props.maxCharLimit) {
-        return "text-yellow-500"
-      } else return "text-red-400"
-    })
+        return "text-yellow-500";
+      } else return "text-red-400";
+    });
     const charactersLeft = computed(() => {
       // number of characters left for the subjective answer if a limit is given
-      return props.maxCharLimit - currentAnswerLength.value
-    })
+      return props.maxCharLimit - currentAnswerLength.value;
+    });
     const currentAnswerLength = computed(() => {
       // length of the current answer (for subjective question)
-      if (state.subjectiveAnswer == null) return 0
-      return state.subjectiveAnswer.length
-    })
+      if (state.subjectiveAnswer == null) return 0;
+      return state.subjectiveAnswer.length;
+    });
     const defaultSubjectiveAnswer = computed(() => {
       // the default answer to be shown for the subjective question
-      if (
-        state.draftAnswer != null &&
-          typeof state.draftAnswer == "string"
-      ) {
-        return state.draftAnswer
+      if (state.draftAnswer != null && typeof state.draftAnswer == "string") {
+        return state.draftAnswer;
       }
-      return ""
-    })
+      return "";
+    });
     const defaultNumericalAnswer = computed(() => {
-      if (
-        state.draftAnswer != null &&
-          typeof state.draftAnswer == "number"
-      ) {
-        return state.draftAnswer
+      if (state.draftAnswer != null && typeof state.draftAnswer == "number") {
+        return state.draftAnswer;
       }
-      return null
-    })
+      return null;
+    });
     const isAnswerDisabled = computed(
       () =>
         (isAnswerSubmitted.value && !isQuizAssessment.value) ||
-          props.isQuestionDisabled ||
-          props.hasQuizEnded
-    )
+        props.isQuestionDisabled ||
+        props.hasQuizEnded
+    );
     // input mode refers to keypad being displayed in mobile browsers
     const getInputMode = computed(() => {
-      if (isQuestionTypeNumericalInteger.value || isQuestionTypeNumericalFloat.value) {
-        return "decimal"
+      if (
+        isQuestionTypeNumericalInteger.value ||
+        isQuestionTypeNumericalFloat.value
+      ) {
+        return "decimal";
       }
-      return "text"
-    })
+      return "text";
+    });
 
     const subjectiveAnswerBoxStyling = computed(() => [
       {
-        "bg-gray-100": isAnswerSubmitted.value
+        "bg-gray-100": isAnswerSubmitted.value,
       },
-      "bp-420:h-20 sm:h-28 md:h-26 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed"
-    ])
+      "bp-420:h-20 sm:h-28 md:h-26 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed",
+    ]);
 
     const numericalAnswerBoxStyling = computed(() => [
       {
         "text-green-500 border-green-500":
-        ((state.draftAnswer == props.correctAnswer &&
-          isQuestionTypeNumericalInteger.value) ||
-          (typeof state.draftAnswer == "number" &&
-          typeof props.correctAnswer == "number" &&
-          Math.abs(state.draftAnswer - props.correctAnswer) < 0.05 &&
-          isQuestionTypeNumericalFloat.value)) &&
-            isAnswerSubmitted.value &&
-            props.isGradedQuestion &&
-            (!isQuizAssessment.value ||
-              (isQuizAssessment.value && props.hasQuizEnded)),
+          ((state.draftAnswer == props.correctAnswer &&
+            isQuestionTypeNumericalInteger.value) ||
+            (typeof state.draftAnswer == "number" &&
+              typeof props.correctAnswer == "number" &&
+              Math.abs(state.draftAnswer - props.correctAnswer) < 0.05 &&
+              isQuestionTypeNumericalFloat.value)) &&
+          isAnswerSubmitted.value &&
+          props.isGradedQuestion &&
+          (!isQuizAssessment.value ||
+            (isQuizAssessment.value && props.hasQuizEnded)),
         "text-red-500 border-red-400":
-        ((state.draftAnswer != props.correctAnswer &&
-          isQuestionTypeNumericalInteger.value) ||
-          (typeof state.draftAnswer == "number" &&
-          typeof props.correctAnswer == "number" &&
-          Math.abs(state.draftAnswer - props.correctAnswer) >= 0.05 &&
-          isQuestionTypeNumericalFloat.value)) &&
-            isAnswerSubmitted.value &&
-            props.isGradedQuestion &&
-            (!isQuizAssessment.value ||
-              (isQuizAssessment.value && props.hasQuizEnded)),
+          ((state.draftAnswer != props.correctAnswer &&
+            isQuestionTypeNumericalInteger.value) ||
+            (typeof state.draftAnswer == "number" &&
+              typeof props.correctAnswer == "number" &&
+              Math.abs(state.draftAnswer - props.correctAnswer) >= 0.05 &&
+              isQuestionTypeNumericalFloat.value)) &&
+          isAnswerSubmitted.value &&
+          props.isGradedQuestion &&
+          (!isQuizAssessment.value ||
+            (isQuizAssessment.value && props.hasQuizEnded)),
         "bg-gray-100":
-            (isAnswerSubmitted.value && !props.isGradedQuestion) ||
-            (isQuizAssessment.value && !props.hasQuizEnded)
+          (isAnswerSubmitted.value && !props.isGradedQuestion) ||
+          (isQuizAssessment.value && !props.hasQuizEnded),
       },
-      "bp-420:h-12 sm:h-12 md:h-12 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed"
-    ])
+      "bp-420:h-12 sm:h-12 md:h-12 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed",
+    ]);
 
-    state.subjectiveAnswer = defaultSubjectiveAnswer.value
-    state.numericalAnswer = defaultNumericalAnswer.value
+    state.subjectiveAnswer = defaultSubjectiveAnswer.value;
+    state.numericalAnswer = defaultNumericalAnswer.value;
 
     watch(
       () => state.numericalAnswer,
       (newValue) => {
-        if (String(newValue) == '' || newValue == null) {
+        if (String(newValue) == "" || newValue == null) {
           state.draftAnswer = null;
-          context.emit('numerical-answer-entered', null, props.currentQuestionIndex) // when entire answer is deleted, set draftAnswer as null
+          context.emit(
+            "numerical-answer-entered",
+            null,
+            props.currentQuestionIndex
+          ); // when entire answer is deleted, set draftAnswer as null
         } else {
           state.draftAnswer = Number(state.numericalAnswer);
-          context.emit("numerical-answer-entered", Number(state.numericalAnswer), props.currentQuestionIndex)
+          context.emit(
+            "numerical-answer-entered",
+            Number(state.numericalAnswer),
+            props.currentQuestionIndex
+          );
         }
       }
-    )
+    );
 
     watch(
       () => state.subjectiveAnswer,
       (newValue) => {
         if (
           newValue != null &&
-            hasCharLimit.value &&
-            newValue.length > props.maxCharLimit
+          hasCharLimit.value &&
+          newValue.length > props.maxCharLimit
         ) {
           // prevent answers more than the character limit from being entered via copy pasting
-          state.subjectiveAnswer = newValue.substring(0, props.maxCharLimit)
+          state.subjectiveAnswer = newValue.substring(0, props.maxCharLimit);
         }
         state.draftAnswer = state.subjectiveAnswer;
-        context.emit("subjective-answer-entered", state.subjectiveAnswer, props.currentQuestionIndex)
+        context.emit(
+          "subjective-answer-entered",
+          state.subjectiveAnswer,
+          props.currentQuestionIndex
+        );
       }
-    )
+    );
 
     onMounted(() => {
       // Force render any math on the page when component is mounted
       // @ts-ignore
-      if ("MathJax" in window) (window.MathJax as any).typeset()
-    })
+      if ("MathJax" in window) (window.MathJax as any).typeset();
+    });
 
     onUpdated(() => {
       // Force render any math on the page when component is updated
       // @ts-ignore
-      if ("MathJax" in window) (window.MathJax as any).typeset()
-    })
+      if ("MathJax" in window) (window.MathJax as any).typeset();
+    });
 
     return {
       ...toRefs(state),
@@ -691,36 +839,36 @@ export default defineComponent({
       subjectiveAnswerBoxStyling,
       numericalAnswerBoxStyling,
       isQuestionTypeNumericalFloat,
-      isQuestionTypeNumericalInteger
-    }
+      isQuestionTypeNumericalInteger,
+    };
   },
   emits: [
     "option-selected",
     "subjective-answer-entered",
     "numerical-answer-entered",
-    "navigate"
-  ]
-})
+    "navigate",
+  ],
+});
 </script>
 
-  <style>
-  /* width */
-  ::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: #f1f1f1;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: #888;
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-  </style>
+<style>
+/* width */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+</style>
diff --git a/src/components/Questions/Body.vue b/src/components/Questions/Body.vue
index a2c5d21..03c5120 100644
--- a/src/components/Questions/Body.vue
+++ b/src/components/Questions/Body.vue
@@ -22,10 +22,18 @@
 
     <div class="overflow-y-auto flex flex-col w-full">
       <div class="bg-gray-300">
-      <!-- questionHeaderPrefix shows the question index no. and the type of question -->
-      <p :class="questionHeaderPrefixClass" data-test="question-index-type" v-html="questionHeaderPrefix"></p>
-      <!-- questionHeaderSuffix shows the subject and section no. of question -->
-      <p :class="questionHeaderSuffixClass" data-test="question-subject-section" v-html="questionHeaderSuffix"></p>
+        <!-- questionHeaderPrefix shows the question index no. and the type of question -->
+        <p
+          :class="questionHeaderPrefixClass"
+          data-test="question-index-type"
+          v-html="questionHeaderPrefix"
+        ></p>
+        <!-- questionHeaderSuffix shows the subject and section no. of question -->
+        <p
+          :class="questionHeaderSuffixClass"
+          data-test="question-subject-section"
+          v-html="questionHeaderSuffix"
+        ></p>
       </div>
       <!-- question text -->
       <div class="mx-6 md:mx-10">
@@ -171,45 +179,90 @@
           :class="answerContainerClass"
           data-test="matrixMatchContainer"
         >
-        <ul class="max-w-screen-md w-full">
-          <li class="list-none space-y-1 flex flex-col">
-            <!-- Create the matrix match table -->
-            <table class="border-collapse border border-gray-200 mx-auto">
-              <thead>
-                <tr>
-                  <th></th>
-                  <th v-for="(column, columnIndex) in $props.matrixSize?.[1] || 5" :key="columnIndex" class="border border-gray-200 text-center">{{ getColumnLabel(columnIndex) }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(row, rowIndex) in $props.matrixSize?.[0] || 4" :key="rowIndex">
-                  <td class="border border-gray-200 text-center">{{ getRowLabel(rowIndex) }}</td>
-                  <td v-for="(column, columnIndex) in $props.matrixSize?.[1] || 5" :key="columnIndex" class="border border-gray-200 text-center">
-                    <div
-                      :class="optionBackgroundClass(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
+          <ul class="max-w-screen-md w-full">
+            <li class="list-none space-y-1 flex flex-col">
+              <!-- Create the matrix match table -->
+              <table class="border-collapse border border-gray-200 mx-auto">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th
+                      v-for="(column, columnIndex) in $props.matrixSize?.[1] ||
+                      5"
+                      :key="columnIndex"
+                      class="border border-gray-200 text-center"
                     >
-                      <input
-                        type="checkbox"
-                        :id="`${rowIndex}-${columnIndex}`"
-                        :name="`${rowIndex}-${columnIndex}`"
-                        :value="`${columnIndex}`"
-                        class="mx-auto text-primary focus:ring-0 disabled:cursor-not-allowed"
-                        :disabled="isAnswerDisabled"
-                        :class="optionBackgroundClass(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
-                        style="box-shadow: none"
-                        @click="selectOption(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
-                        :checked="isMatrixMatchOptionMarked(convertMatrixMatchOptionToString(rowIndex, columnIndex))"
-                        :data-test="`matrixMatchSelector-${rowIndex}-${columnIndex}`"
-                      />
-                  </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </li>
-        </ul>
-        <!-- answer display -->
-        <div
+                      {{ getColumnLabel(columnIndex) }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, rowIndex) in $props.matrixSize?.[0] || 4"
+                    :key="rowIndex"
+                  >
+                    <td class="border border-gray-200 text-center">
+                      {{ getRowLabel(rowIndex) }}
+                    </td>
+                    <td
+                      v-for="(column, columnIndex) in $props.matrixSize?.[1] ||
+                      5"
+                      :key="columnIndex"
+                      class="border border-gray-200 text-center"
+                    >
+                      <div
+                        :class="
+                          optionBackgroundClass(
+                            convertMatrixMatchOptionToString(
+                              rowIndex,
+                              columnIndex
+                            )
+                          )
+                        "
+                      >
+                        <input
+                          type="checkbox"
+                          :id="`${rowIndex}-${columnIndex}`"
+                          :name="`${rowIndex}-${columnIndex}`"
+                          :value="`${columnIndex}`"
+                          class="mx-auto text-primary focus:ring-0 disabled:cursor-not-allowed"
+                          :disabled="isAnswerDisabled"
+                          :class="
+                            optionBackgroundClass(
+                              convertMatrixMatchOptionToString(
+                                rowIndex,
+                                columnIndex
+                              )
+                            )
+                          "
+                          style="box-shadow: none"
+                          @click="
+                            selectOption(
+                              convertMatrixMatchOptionToString(
+                                rowIndex,
+                                columnIndex
+                              )
+                            )
+                          "
+                          :checked="
+                            isMatrixMatchOptionMarked(
+                              convertMatrixMatchOptionToString(
+                                rowIndex,
+                                columnIndex
+                              )
+                            )
+                          "
+                          :data-test="`matrixMatchSelector-${rowIndex}-${columnIndex}`"
+                        />
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </li>
+          </ul>
+          <!-- answer display -->
+          <div
             v-if="hasQuizEnded"
             class="px-2 text-lg mt-2"
             data-test="matrixMatchCorrectAnswer"
@@ -219,21 +272,27 @@
         </div>
       </div>
       <!-- Solution container -->
-        <div
-          v-if="(
-            (!isQuizAssessment && $props.isAnswerSubmitted) || hasQuizEnded)
-             && $props.displaySolution && isSolutionTextPresent"
-          class="mx-6 md:mx-10 py-4"
-        >
-          <p class="text-lg base:text-lg font-bold">Solution:</p>
-          <p :class="solutionTextClass" data-test="solution-text" v-html="solutionText"></p>
-        </div>
+      <div
+        v-if="
+          ((!isQuizAssessment && $props.isAnswerSubmitted) || hasQuizEnded) &&
+          $props.displaySolution &&
+          isSolutionTextPresent
+        "
+        class="mx-6 md:mx-10 py-4"
+      >
+        <p class="text-lg base:text-lg font-bold">Solution:</p>
+        <p
+          :class="solutionTextClass"
+          data-test="solution-text"
+          v-html="solutionText"
+        ></p>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import Textarea from "../UI/Text/Textarea.vue"
+import Textarea from "../UI/Text/Textarea.vue";
 import {
   defineComponent,
   reactive,
@@ -242,118 +301,126 @@ import {
   watch,
   PropType,
   onMounted,
-  onUpdated
-} from "vue"
-import BaseIcon from "../UI/Icons/BaseIcon.vue"
-import { quizType, questionSetPalette, questionType, questionTypeHeaderText, quizTitleType, testFormat, TimeLimit } from "../../types"
-import QuestionPalette from "./Palette/QuestionPalette.vue"
+  onUpdated,
+} from "vue";
+import BaseIcon from "../UI/Icons/BaseIcon.vue";
+import {
+  quizType,
+  questionSetPalette,
+  questionType,
+  questionTypeHeaderText,
+  quizTitleType,
+  testFormat,
+  TimeLimit,
+} from "../../types";
+import QuestionPalette from "./Palette/QuestionPalette.vue";
 
-const MAX_LENGTH_NUMERICAL_CHARACTERS: number = 10 // max length of characters in numerical answer textbox
+const MAX_LENGTH_NUMERICAL_CHARACTERS: number = 10; // max length of characters in numerical answer textbox
 
 export default defineComponent({
   components: {
     BaseIcon,
     Textarea,
-    QuestionPalette
+    QuestionPalette,
   },
   props: {
     text: {
       default: "",
-      type: String
+      type: String,
     },
     solutionText: {
       default: "",
-      type: String
+      type: String,
     },
     options: {
       default: () => [],
-      type: Array
+      type: Array,
     },
     correctAnswer: {
       default: null,
-      type: [String, Number, Array]
+      type: [String, Number, Array],
     },
     /** answer for the question which has been submitted */
     submittedAnswer: {
       default: null,
-      type: [String, Number, Array]
+      type: [String, Number, Array],
     },
     /** answer for the question which has been entered but not submitted */
     draftAnswer: {
       default: null,
-      type: [String, Number, Array]
+      type: [String, Number, Array],
     },
     isAnswerSubmitted: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     questionType: {
       default: questionType.SINGLE_CHOICE,
-      type: String as PropType<questionType>
+      type: String as PropType<questionType>,
     },
     /** the character limit to be used if present */
     maxCharLimit: {
       default: -1,
-      type: Number
+      type: Number,
     },
     /** matrix size for matrix match question */
     matrixSize: {
       default: () => [4, 5],
-      type: Array
+      type: Array,
     },
     /** data of the image to be shown on a question. Contains URL and alt_text */
     imageData: {
       default: null,
-      type: Object
+      type: Object,
     },
     displaySolution: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     isPortrait: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     isGradedQuestion: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     quizType: {
       type: String as PropType<quizType>,
-      default: "homework"
+      default: "homework",
     },
     hasQuizEnded: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /** whether the user has attempted all available questions
      * based on question set's optional limit
-    */
+     */
     optionalLimitReached: {
       type: Boolean,
-      default: false
+      default: false,
     },
     /** whether the draft answer has been cleared but not yet submitted */
     isDraftAnswerCleared: {
       default: false,
-      type: Boolean
+      type: Boolean,
     },
     /** whether the question palette is visible */
     isPaletteVisible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     questionSetStates: {
       type: Array as PropType<questionSetPalette[]>,
-      default: () => []
+      default: () => [],
     },
     currentQuestionIndex: {
       type: Number,
-      default: 0
+      default: 0,
     },
     questionSetTitle: {
       type: String,
-      default: ""
+      default: "",
     },
     title: {
       type: [null, String] as PropType<quizTitleType>,
@@ -369,23 +436,26 @@ export default defineComponent({
     },
     maxMarks: {
       type: Number,
-      required: true
+      required: true,
     },
     quizTimeLimit: {
-      type: Object as PropType<TimeLimit> || null,
-      default: null
+      type: (Object as PropType<TimeLimit>) || null,
+      default: null,
     },
     testFormat: {
       type: [null, String] as PropType<testFormat>,
-      default: null
+      default: null,
     },
   },
   setup(props, context) {
-    const isQuizAssessment = computed(() => props.quizType == "assessment")
+    const isQuizAssessment = computed(() => props.quizType == "assessment");
     const state = reactive({
       isImageLoading: false,
       // set containing the question types in which options are present
-      questionTypesWithOptions: new Set([questionType.SINGLE_CHOICE, questionType.MULTI_CHOICE]),
+      questionTypesWithOptions: new Set([
+        questionType.SINGLE_CHOICE,
+        questionType.MULTI_CHOICE,
+      ]),
       nonGradedAnswerClass: "bg-gray-200",
       correctOptionClass: "text-white bg-green-500 border rounded-md",
       skippedCorrectOptionClass: "border-4 border-green-500 rounded-md",
@@ -401,25 +471,28 @@ export default defineComponent({
       questionTextClass:
         "text-lg base:text-lg lg:text-xl mx-4 mt-6 m-2 font-bold leading-tight whitespace-pre-wrap",
       solutionTextClass:
-      "p-2 text-base base:text-lg lg:text-xl mx-2 whitespace-pre-wrap",
+        "p-2 text-base base:text-lg lg:text-xl mx-2 whitespace-pre-wrap",
       optionTextClass:
         "p-2 text-base base:text-lg lg:text-xl border rounded-md mx-2 whitespace-pre-wrap",
       subjectiveAnswer: null as string | null, // holds the answer to the subjective question
-      numericalAnswer: null as number | null // holds the answer to the numerical question
-    })
+      numericalAnswer: null as number | null, // holds the answer to the numerical question
+    });
 
     const questionTypeHeaderMapping = new Map<string, string>([
       [questionType.SINGLE_CHOICE, questionTypeHeaderText.SINGLE_CHOICE],
       [questionType.MULTI_CHOICE, questionTypeHeaderText.MULTI_CHOICE],
-      [questionType.NUMERICAL_INTEGER, questionTypeHeaderText.NUMERICAL_INTEGER],
+      [
+        questionType.NUMERICAL_INTEGER,
+        questionTypeHeaderText.NUMERICAL_INTEGER,
+      ],
       [questionType.NUMERICAL_FLOAT, questionTypeHeaderText.NUMERICAL_FLOAT],
       [questionType.SUBJECTIVE, questionTypeHeaderText.SUBJECTIVE],
-      [questionType.MATRIX_MATCH, questionTypeHeaderText.MATRIX_MATCH]
+      [questionType.MATRIX_MATCH, questionTypeHeaderText.MATRIX_MATCH],
     ]);
 
     /** stop the loading spinner when the image has been loaded **/
     function stopImageLoading() {
-      state.isImageLoading = false
+      state.isImageLoading = false;
     }
 
     /**
@@ -443,27 +516,30 @@ export default defineComponent({
         typeof props.correctAnswer == "number" || // check for typescript
         typeof props.submittedAnswer == "number" // check for typescript
       ) {
-        return
+        return;
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) && // display colors if its a homework or if its assessment and quiz ended
         props.isGradedQuestion &&
         props.correctAnswer.indexOf(answer) != -1
       ) {
-        if (props.submittedAnswer != null &&
-            props.submittedAnswer.indexOf(answer) != -1) {
+        if (
+          props.submittedAnswer != null &&
+          props.submittedAnswer.indexOf(answer) != -1
+        ) {
           // if both correct and submitted option
-          return state.correctOptionClass
+          return state.correctOptionClass;
         }
         // if correct but not in submitted option
-        return state.skippedCorrectOptionClass
+        return state.skippedCorrectOptionClass;
       }
       if (
         (!isQuizAssessment.value || props.hasQuizEnded) &&
         props.submittedAnswer != null &&
-        props.submittedAnswer.indexOf(answer) != -1) {
-        if (!props.isGradedQuestion) return state.nonGradedAnswerClass
-        return state.wrongOptionClass
+        props.submittedAnswer.indexOf(answer) != -1
+      ) {
+        if (!props.isGradedQuestion) return state.nonGradedAnswerClass;
+        return state.wrongOptionClass;
       }
     }
 
@@ -474,7 +550,7 @@ export default defineComponent({
         typeof props.draftAnswer != "string" &&
         typeof props.draftAnswer != "number" &&
         props.draftAnswer.indexOf(optionIndex) != -1
-      )
+      );
     }
 
     function getRowLabel(rowIndex: number) {
@@ -485,7 +561,10 @@ export default defineComponent({
       return "PQRSTUVWXYZ"[columnIndex]; // assume max cols = 11
     }
 
-    function convertMatrixMatchOptionToString(rowIndex: number, columnIndex: number) {
+    function convertMatrixMatchOptionToString(
+      rowIndex: number,
+      columnIndex: number
+    ) {
       const rowLetter = getRowLabel(rowIndex);
       const colLetter = getColumnLabel(columnIndex);
       return rowLetter + colLetter;
@@ -497,126 +576,202 @@ export default defineComponent({
         typeof props.draftAnswer != "string" &&
         typeof props.draftAnswer != "number" &&
         props.draftAnswer.indexOf(matrixMatchAnswer) != -1
-      )
+      );
     }
 
     function selectOption(answer: number | string) {
-      context.emit("option-selected", answer)
+      context.emit("option-selected", answer);
     }
 
     function labelClass(optionText: String) {
-      return [{ "h-4 sm:h-5": optionText == "" }, "flex content-center"]
+      return [{ "h-4 sm:h-5": optionText == "" }, "flex content-center"];
     }
 
     function startImageLoading() {
-      state.isImageLoading = true
+      state.isImageLoading = true;
     }
 
     function doesNumberContainDecimal(x: Number | null) {
-      return String(x).includes(".")
+      return String(x).includes(".");
     }
 
     function doNumericalCharactersExceedLimit(x: Number | null) {
-      return String(x).length >= MAX_LENGTH_NUMERICAL_CHARACTERS
+      return String(x).length >= MAX_LENGTH_NUMERICAL_CHARACTERS;
     }
 
     function preventKeypressIfApplicable(event: InputEvent) {
+      function showErrorNotification(message: string) {
+        const existingNotification = document.querySelector(
+          ".error-notification"
+        );
+        if (existingNotification) {
+          existingNotification.remove();
+        }
+        const notification = document.createElement("div");
+        notification.className = "error-notification";
+        notification.innerText = message;
+
+        // Styling the notification
+        Object.assign(notification.style, {
+          position: "fixed",
+          bottom: "90px", // Adjusted distance from the bottom to avoid UI elements
+          left: "50%",
+          transform: "translateX(-70%)", // Center horizontally
+          backgroundColor: "#f44336",
+          color: "white",
+          padding: "10px",
+          borderRadius: "5px",
+          boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
+          zIndex: 1000,
+          maxWidth: "90%", // Ensure it does not exceed screen width
+          textAlign: "center",
+          boxSizing: "border-box",
+        });
+
+        document.body.appendChild(notification);
+
+        // Automatically remove the notification after 3 seconds
+        setTimeout(() => {
+          notification.remove();
+        }, 2000);
+      }
+
       if (event.data == null) {
         // prevent "Enter" key in android browser decimal keypad mode
-        if (event.inputType == "insertLineBreak") event.preventDefault()
+        if (event.inputType == "insertLineBreak") event.preventDefault();
         // in other cases, return to escape null type error
-        return
+        return;
+      }
+
+      const isAlphabet = /[a-zA-Z]/.test(event.data); // Check if the input is an alphabet
+
+      if (isAlphabet) {
+        showErrorNotification("Alphabets are not allowed!");
+        event.preventDefault();
+        return;
       }
+
       if (isQuestionTypeSubjective.value) {
         // checks if character limit is reached in case it is set
-        if (!hasCharLimit.value) return
+        if (!hasCharLimit.value) return;
         if (!charactersLeft.value) {
-          event.preventDefault()
-          return
+          event.preventDefault();
+          return;
         }
       }
       if (isQuestionTypeNumericalFloat.value) {
-        const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']
-        const keyPressed: string = event.data
+        const keysAllowed: string[] = [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+          ".",
+        ];
+        const keyPressed: string = event.data;
         if (
           doNumericalCharactersExceedLimit(state.numericalAnswer) ||
           !keysAllowed.includes(keyPressed) ||
           // if key is "." but number already has a decimal point, or key "." is entered as the first character in answer, prevent
           (event.data == "." &&
-          (doesNumberContainDecimal(state.numericalAnswer) || state.numericalAnswer == null))
+            (doesNumberContainDecimal(state.numericalAnswer) ||
+              state.numericalAnswer == null))
         ) {
-          event.preventDefault()
+          if (
+            event.data == "." &&
+            doesNumberContainDecimal(state.numericalAnswer)
+          ) {
+            showErrorNotification("You have already entered a decimal point!");
+          }
+          event.preventDefault();
         }
       }
       if (isQuestionTypeNumericalInteger.value) {
-        const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
-        const keyPressed: string = event.data
+        const keysAllowed: string[] = [
+          "0",
+          "1",
+          "2",
+          "3",
+          "4",
+          "5",
+          "6",
+          "7",
+          "8",
+          "9",
+        ];
+        const keyPressed: string = event.data;
         if (
           doNumericalCharactersExceedLimit(state.numericalAnswer) ||
-          !keysAllowed.includes(keyPressed)) {
-          event.preventDefault()
+          !keysAllowed.includes(keyPressed)
+        ) {
+          event.preventDefault();
         }
       }
     }
 
     function navigateToQuestion(questionIndex: number) {
-      context.emit("navigate", questionIndex)
+      context.emit("navigate", questionIndex);
     }
 
     const questionHeaderPrefix = computed(() => {
-      return `Q.${props.currentQuestionIndex + 1} | ${questionTypeHeaderMapping.get(props.questionType)}`;
+      return `Q.${
+        props.currentQuestionIndex + 1
+      } | ${questionTypeHeaderMapping.get(props.questionType)}`;
     });
 
     const questionHeaderSuffix = computed(() => {
       if (isQuizAssessment.value) {
         return props.questionSetTitle;
       } else {
-        return `Total Questions: ${props.numQuestions}`
+        return `Total Questions: ${props.numQuestions}`;
       }
     });
 
     // styling class for the question image and loading spinner containers
     const questionImageAreaClass = computed(() => ({
       "h-56 mb-4": props.isPortrait,
-      "h-28 sm:h-36 md:h-48 lg:h-56 xl:h-80 w-1/2": !props.isPortrait
-    }))
+      "h-28 sm:h-36 md:h-48 lg:h-56 xl:h-80 w-1/2": !props.isPortrait,
+    }));
 
     // styling class for the image container
     const questionImageContainerClass = computed(() => [
       questionImageAreaClass.value,
       {
-        hidden: state.isImageLoading
+        hidden: state.isImageLoading,
       },
-      "border rounded-md"
-    ])
+      "border rounded-md",
+    ]);
 
     const isQuestionImagePresent = computed(
       () => props.imageData != null && props.imageData.url != null
-    )
+    );
     const areOptionsVisible = computed(() =>
       state.questionTypesWithOptions.has(props.questionType)
-    )
-    const isSolutionTextPresent = computed(
-      () => props.solutionText != ""
-    )
+    );
+    const isSolutionTextPresent = computed(() => props.solutionText != "");
     const isQuestionTypeSubjective = computed(
       () => props.questionType == questionType.SUBJECTIVE
-    )
+    );
     const isQuestionTypeMultiChoice = computed(
       () => props.questionType == questionType.MULTI_CHOICE
-    )
+    );
     const isQuestionTypeSingleChoice = computed(
       () => props.questionType == questionType.SINGLE_CHOICE
-    )
+    );
     const isQuestionTypeNumericalInteger = computed(
       () => props.questionType == questionType.NUMERICAL_INTEGER
-    )
+    );
     const isQuestionTypeNumericalFloat = computed(
       () => props.questionType == questionType.NUMERICAL_FLOAT
-    )
+    );
     const isQuestionTypeMatrixMatch = computed(
       () => props.questionType == questionType.MATRIX_MATCH
-    )
+    );
 
     // styling class to decide orientation of image + options
     // depending on portrait/landscape orientation
@@ -624,18 +779,18 @@ export default defineComponent({
       return [
         {
           "content-center": isQuestionImagePresent.value && !props.isPortrait,
-          "flex-col": isQuestionImagePresent.value && props.isPortrait
+          "flex-col": isQuestionImagePresent.value && props.isPortrait,
         },
-        "flex mx-6 md:mx-10 py-4"
-      ]
-    })
+        "flex mx-6 md:mx-10 py-4",
+      ];
+    });
 
     const optionInputType = computed(() => {
-      if (!areOptionsVisible.value) return null
-      if (isQuestionTypeSingleChoice.value) return "radio"
-      if (isQuestionTypeMultiChoice.value) return "checkbox"
-      return null
-    })
+      if (!areOptionsVisible.value) return null;
+      if (isQuestionTypeSingleChoice.value) return "radio";
+      if (isQuestionTypeMultiChoice.value) return "checkbox";
+      return null;
+    });
 
     /**
      * classes for the various containers corresponding to the possible types of answers
@@ -644,28 +799,29 @@ export default defineComponent({
     const answerContainerClass = computed(() => ({
       "w-1/2": !props.isPortrait && isQuestionImagePresent.value,
       "w-full":
-        props.isPortrait || (!props.isPortrait && !isQuestionImagePresent.value)
-    }))
+        props.isPortrait ||
+        (!props.isPortrait && !isQuestionImagePresent.value),
+    }));
 
-    const hasCharLimit = computed(() => props.maxCharLimit != -1)
+    const hasCharLimit = computed(() => props.maxCharLimit != -1);
 
     const maxCharLimitClass = computed(() => {
       // class for the character limit text
       if (charactersLeft.value > 0.2 * props.maxCharLimit) {
-        return "text-gray-400"
+        return "text-gray-400";
       } else if (charactersLeft.value > 0.1 * props.maxCharLimit) {
-        return "text-yellow-500"
-      } else return "text-red-400"
-    })
+        return "text-yellow-500";
+      } else return "text-red-400";
+    });
     const charactersLeft = computed(() => {
       // number of characters left for the subjective answer if a limit is given
-      return props.maxCharLimit - currentAnswerLength.value
-    })
+      return props.maxCharLimit - currentAnswerLength.value;
+    });
     const currentAnswerLength = computed(() => {
       // length of the current answer (for subjective question)
-      if (state.subjectiveAnswer == null) return 0
-      return state.subjectiveAnswer.length
-    })
+      if (state.subjectiveAnswer == null) return 0;
+      return state.subjectiveAnswer.length;
+    });
     const defaultSubjectiveAnswer = computed(() => {
       // the default answer to be shown for the subjective question
       if (
@@ -673,89 +829,92 @@ export default defineComponent({
         typeof props.submittedAnswer == "string" &&
         !props.isDraftAnswerCleared
       ) {
-        return props.submittedAnswer
+        return props.submittedAnswer;
       }
       if (typeof props.draftAnswer == "string") {
-        return props.draftAnswer
+        return props.draftAnswer;
       }
-      return ""
-    })
+      return "";
+    });
     const defaultNumericalAnswer = computed(() => {
       if (
         props.submittedAnswer != null &&
         typeof props.submittedAnswer == "number" &&
         !props.isDraftAnswerCleared
       ) {
-        return props.submittedAnswer
+        return props.submittedAnswer;
       }
       if (typeof props.draftAnswer == "number") {
-        return props.draftAnswer
+        return props.draftAnswer;
       }
-      return null
-    })
+      return null;
+    });
     const isAnswerDisabled = computed(
       () =>
         (props.isAnswerSubmitted && !isQuizAssessment.value) ||
         (props.optionalLimitReached && !props.isAnswerSubmitted) ||
         props.hasQuizEnded
-    )
+    );
     // input mode refers to keypad being displayed in mobile browsers
     const getInputMode = computed(() => {
-      if (isQuestionTypeNumericalInteger.value || isQuestionTypeNumericalFloat.value) {
-        return "decimal"
+      if (
+        isQuestionTypeNumericalInteger.value ||
+        isQuestionTypeNumericalFloat.value
+      ) {
+        return "decimal";
       }
-      return "text"
-    })
+      return "text";
+    });
 
     const subjectiveAnswerBoxStyling = computed(() => [
       {
-        "bg-gray-100": props.isAnswerSubmitted
+        "bg-gray-100": props.isAnswerSubmitted,
       },
-      "bp-420:h-20 sm:h-28 md:h-36 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed"
-    ])
+      "bp-420:h-20 sm:h-28 md:h-36 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed",
+    ]);
 
     const numericalAnswerBoxStyling = computed(() => [
       {
         "text-green-500 border-green-500":
           ((props.submittedAnswer == props.correctAnswer &&
-          isQuestionTypeNumericalInteger.value) ||
-          (typeof props.submittedAnswer == "number" &&
-          typeof props.correctAnswer == "number" &&
-          Math.abs(props.submittedAnswer - props.correctAnswer) < 0.05 &&
-          isQuestionTypeNumericalFloat.value)) &&
+            isQuestionTypeNumericalInteger.value) ||
+            (typeof props.submittedAnswer == "number" &&
+              typeof props.correctAnswer == "number" &&
+              Math.abs(props.submittedAnswer - props.correctAnswer) < 0.05 &&
+              isQuestionTypeNumericalFloat.value)) &&
           props.isAnswerSubmitted &&
           props.isGradedQuestion &&
           (!isQuizAssessment.value ||
             (isQuizAssessment.value && props.hasQuizEnded)),
         "text-red-500 border-red-400":
-        ((props.submittedAnswer != props.correctAnswer &&
-          isQuestionTypeNumericalInteger.value) ||
-          (typeof props.submittedAnswer == "number" &&
-          typeof props.correctAnswer == "number" &&
-          Math.abs(props.submittedAnswer - props.correctAnswer) >= 0.05 &&
-          isQuestionTypeNumericalFloat.value)) &&
+          ((props.submittedAnswer != props.correctAnswer &&
+            isQuestionTypeNumericalInteger.value) ||
+            (typeof props.submittedAnswer == "number" &&
+              typeof props.correctAnswer == "number" &&
+              Math.abs(props.submittedAnswer - props.correctAnswer) >= 0.05 &&
+              isQuestionTypeNumericalFloat.value)) &&
           props.isAnswerSubmitted &&
           props.isGradedQuestion &&
           (!isQuizAssessment.value ||
             (isQuizAssessment.value && props.hasQuizEnded)),
         "bg-gray-100":
           (props.isAnswerSubmitted && !props.isGradedQuestion) ||
-          (isQuizAssessment.value && !props.hasQuizEnded)
+          (isQuizAssessment.value && !props.hasQuizEnded),
       },
-      "bp-420:h-20 sm:h-28 md:h-36 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed"
-    ])
+      "bp-420:h-20 sm:h-28 md:h-36 px-4 placeholder-gray-400 focus:border-gray-200 focus:ring-primary disabled:cursor-not-allowed",
+    ]);
 
-    state.subjectiveAnswer = defaultSubjectiveAnswer.value
-    state.numericalAnswer = defaultNumericalAnswer.value
+    state.subjectiveAnswer = defaultSubjectiveAnswer.value;
+    state.numericalAnswer = defaultNumericalAnswer.value;
 
     watch(
       () => props.imageData,
       (newValue) => {
         // invoked when another item pops up which has an image
-        if (newValue != null) startImageLoading()
+        if (newValue != null) startImageLoading();
       },
       { deep: true }
-    )
+    );
 
     watch(
       () => props.draftAnswer,
@@ -763,27 +922,36 @@ export default defineComponent({
         // specific to subjective and numerical questions
         // when the draft answer is updated,
         // update the subjective and numerical answer too
-        if (typeof newValue == "string" || (newValue == null && typeof oldValue == "string")) {
-          state.subjectiveAnswer = newValue
+        if (
+          typeof newValue == "string" ||
+          (newValue == null && typeof oldValue == "string")
+        ) {
+          state.subjectiveAnswer = newValue;
         }
-        if (typeof newValue == "number" || (newValue == null && typeof oldValue == "number")) {
+        if (
+          typeof newValue == "number" ||
+          (newValue == null && typeof oldValue == "number")
+        ) {
           if (newValue != Number(state.numericalAnswer)) {
-            state.numericalAnswer = newValue
+            state.numericalAnswer = newValue;
           }
         }
       }
-    )
+    );
 
     watch(
       () => state.numericalAnswer,
       (newValue) => {
-        if (String(newValue) == '' || newValue == null) {
-          context.emit('numerical-answer-entered', null) // when entire answer is deleted, set draftAnswer as null
+        if (String(newValue) == "" || newValue == null) {
+          context.emit("numerical-answer-entered", null); // when entire answer is deleted, set draftAnswer as null
         } else {
-          context.emit("numerical-answer-entered", Number(state.numericalAnswer))
+          context.emit(
+            "numerical-answer-entered",
+            Number(state.numericalAnswer)
+          );
         }
       }
-    )
+    );
 
     watch(
       () => state.subjectiveAnswer,
@@ -794,25 +962,25 @@ export default defineComponent({
           newValue.length > props.maxCharLimit
         ) {
           // prevent answers more than the character limit from being entered via copy pasting
-          state.subjectiveAnswer = newValue.substring(0, props.maxCharLimit)
+          state.subjectiveAnswer = newValue.substring(0, props.maxCharLimit);
         }
-        context.emit("subjective-answer-entered", state.subjectiveAnswer)
+        context.emit("subjective-answer-entered", state.subjectiveAnswer);
       }
-    )
+    );
 
-    if (isQuestionImagePresent.value) startImageLoading()
+    if (isQuestionImagePresent.value) startImageLoading();
 
     onMounted(() => {
       // Force render any math on the page when component is mounted
       // @ts-ignore
-      if ("MathJax" in window) (window.MathJax as any).typeset()
-    })
+      if ("MathJax" in window) (window.MathJax as any).typeset();
+    });
 
     onUpdated(() => {
       // Force render any math on the page when component is updated
       // @ts-ignore
-      if ("MathJax" in window) (window.MathJax as any).typeset()
-    })
+      if ("MathJax" in window) (window.MathJax as any).typeset();
+    });
 
     return {
       ...toRefs(state),
@@ -850,16 +1018,16 @@ export default defineComponent({
       subjectiveAnswerBoxStyling,
       numericalAnswerBoxStyling,
       isQuestionTypeNumericalFloat,
-      isQuestionTypeNumericalInteger
-    }
+      isQuestionTypeNumericalInteger,
+    };
   },
   emits: [
     "option-selected",
     "subjective-answer-entered",
     "numerical-answer-entered",
-    "navigate"
-  ]
-})
+    "navigate",
+  ],
+});
 </script>
 
 <style>
diff --git a/tests/e2e/specs/renders-player-to-check-optional.js b/tests/e2e/specs/renders-player-to-check-optional.js
index e458e15..db983ac 100644
--- a/tests/e2e/specs/renders-player-to-check-optional.js
+++ b/tests/e2e/specs/renders-player-to-check-optional.js
@@ -139,19 +139,27 @@ describe("Player for Assessment quizzes", () => {
         );
       });
 
-      it("once scorecard displayed, number of skipped questions should not consider optional questions", () => {
+      it("check if scorecard eventually becomes visible", () => {
+        // Remove or hide any toast notifications
+        cy.get(".Vue-Toastification__toast-body").should("not.exist");
+
+        // Interact with the endTestButton
         cy.get('[data-test="modal"]')
-          .get('[data-test="endTestButton"]')
-          .trigger("click");
+          .find('[data-test="endTestButton"]')
+          .click();
 
-        // additional click to protect endTest button
+        // Additional check to ensure the button click was successful
         cy.get('[data-test="modal"]')
-          .get('[data-test="endTestButton"]')
-          .trigger("click");
+          .find('[data-test="endTestButton"]')
+          .click();
+
+        // Wait for the scorecard to become visible
+        cy.get('[data-test="scorecard"]').should("be.visible");
 
+        // Verify the text of the metricValue-2
         cy.get('[data-test="scorecard"]')
-          .get('[data-test="metricValue-2"]')
-          .should("have.text", 12); // 12 in first qset, none in 2nd qset
+          .find('[data-test="metricValue-2"]')
+          .should("have.text", "12"); // Ensure the text is a string
       });
     });
   });