Code improvements

src/components/InstructionPage.vue

@@ -16,7 +16,7 @@
             <!-- row 3 -->
             <tr>
                 <th class="border-black border-1 text-left px-4 py-2">Duration</th>
-                <td class="border-black border-1 px-4 py-2" data-test="quiz-time-limit">{{ ($props.quizTimeLimit)/60 }} minutes</td>
+                <td class="border-black border-1 px-4 py-2" data-test="quiz-time-limit">{{ ($props.quizTimeLimit.max)/60 }} minutes</td>
             </tr>
             <!-- row 4 -->
             <tr>
@@ -50,7 +50,7 @@
                 <div class="ml-12 mr-4 mt-1" :data-test="`no-of-questions-${index}`">
                   There are {{ questionSetState.paletteItems.length }} questions, out of which only {{ questionSetState.maxQuestionsAllowedToAttempt }} questions need to be attempted.
                 </div>
-                <div class="text-base mx-2 mb-4 leading-tight text-slate-500 ml-12 mr-4" :data-test="`questionSetInstruction-${index}`" v-html="questionSetState.instructionPageText"></div>
+                <div class="text-base mx-2 mb-4 leading-tight text-slate-500 ml-12 mr-4" :data-test="`questionSetInstruction-${index}`" v-html="questionSetState.localInstructionPageText"></div>
             </div>
         </div>
         <!-- general Instruction -->
@@ -106,7 +106,7 @@ import BaseIcon from "./UI/Icons/BaseIcon.vue";
 import Success from "./Questions/Palette/Success.vue";
 import Error from "./Questions/Palette/Error.vue";
 import Neutral from "./Questions/Palette/Neutral.vue";
-import { quizTitleType, testFormat, questionSetPalette } from "../types";
+import { quizTitleType, testFormat, questionSetPalette, TimeLimit } from "../types";
 export default defineComponent({
   name: "InstructionPage",
   components: {
@@ -133,7 +133,7 @@ export default defineComponent({
       required: true
     },
     quizTimeLimit: {
-      type: Number,
+      type: Object as PropType<TimeLimit> || null,
       required: true
     },
     questionSetStates: {

src/components/Questions/Body.vue

@@ -13,7 +13,7 @@
       :testFormat="testFormat"
       :maxMarks="maxMarks"
       :numQuestions="numQuestions"
-      :quiz-time-limit="quizTimeLimit"
+      :quizTimeLimit="quizTimeLimit"
       class="absolute w-full h-full sm:w-2/3 lg:w-1/2 xl:w-1/3 z-10"
       @navigate="navigateToQuestion"
       data-test="questionPalette"
@@ -166,7 +166,7 @@ import {
   onUpdated
 } from "vue"
 import BaseIcon from "../UI/Icons/BaseIcon.vue"
-import { quizType, questionSetPalette, questionType, questionTypeHeaderText, quizTitleType, testFormat } from "../../types"
+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
@@ -280,8 +280,8 @@ export default defineComponent({
       required: true
     },
     quizTimeLimit: {
-      type: Number,
-      required: true
+      type: Object as PropType<TimeLimit> || null,
+      default: null
     },
     testFormat: {
       type: [null, String] as PropType<testFormat>,

src/components/Questions/Palette/QuestionPalette.vue

@@ -23,7 +23,7 @@
       :testFormat="testFormat"
       :maxMarks="maxMarks"
       :max-questions-allowed-to-attempt="numQuestions"
-      :quiz-time-limit="quizTimeLimit"
+      :quizTimeLimit="quizTimeLimit"
       :questionSetStates = "questionSetStates"
       data-test="instruction-page"
     />
@@ -80,7 +80,7 @@ import Error from "./Error.vue";
 import Neutral from "./Neutral.vue";
 import PaletteItem from "./Item.vue";
 import InstructionPage from "@/components/InstructionPage.vue";
-import { QuestionSet, questionSetPalette, quizTitleType, testFormat } from "../../../types";
+import { QuestionSet, TimeLimit, questionSetPalette, quizTitleType, testFormat } from "../../../types";
 import { defineComponent, computed, PropType, reactive } from "vue";
 
 export default defineComponent({
@@ -122,8 +122,8 @@ export default defineComponent({
       required: true
     },
     quizTimeLimit: {
-      type: Number,
-      required: true
+      type: Object as PropType<TimeLimit> || null,
+      default: null
     },
     questionSets: {
       required: true,

src/components/Questions/QuestionModal.vue

@@ -56,8 +56,8 @@
         :subject="subject"
         :testFormat="testFormat"
         :maxMarks="maxMarks"
-        :max-questions-allowed-to-attempt="maxQuestionsAllowedToAttempt"
-        :quiz-time-limit="quizTimeLimit"
+        :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
+        :quizTimeLimit="quizTimeLimit"
         :numQuestions = "numQuestions"
         @option-selected="questionOptionSelected"
         @subjective-answer-entered="subjectiveAnswerUpdated"

src/types.ts

@@ -226,7 +226,7 @@ export interface questionSetPalette {
   title: string | null;
   paletteItems: paletteItemState[];
   instructionText: string;
-  instructionPageText?: string;
+  localInstructionPageText?: string;
   maxQuestionsAllowedToAttempt: number;
 }
 

src/views/Player.vue

@@ -20,7 +20,7 @@
         :sessionEndTimeText="sessionEndTimeText"
         :numQuestions="maxQuestionsAllowedToAttempt"
         :quizType="metadata.quiz_type"
-        :quizTimeLimit="quizTimeLimit?.max"
+        :quizTimeLimit="quizTimeLimit"
         :maxMarks="maxMarks"
         :maxQuestionsAllowedToAttempt="maxQuestionsAllowedToAttempt"
         :testFormat="metadata.test_format || ''"
@@ -70,7 +70,7 @@
         :questionSetTitle="currentQsetTitle"
         :questionSetStates="questionSetStates"
         :qsetIndexLimits="currentQsetIndexLimits"
-        :quizTimeLimit="quizTimeLimit?.max"
+        :quizTimeLimit="quizTimeLimit"
         :isSessionAnswerRequestProcessing="isSessionAnswerRequestProcessing"
         :continueAfterAnswerSubmit="continueAfterAnswerSubmit"
         :timeRemaining="timeRemaining"
@@ -711,7 +711,7 @@ export default defineComponent({
         // the below instruction assumes all questions within a set are of the same type
         let paletteInstructionText: string = state.questionSets[index].description ?? "";
         // added instructionPageText variable for instructionPage component to not print extra information that is present in paletteInstructionText
-        const instructionPageText: string = state.questionSets[index].description ?? "";
+        const localInstructionPageText: string = state.questionSets[index].description ?? "";
 
         if (state.questionSets[index].max_questions_allowed_to_attempt < state.questionSets[index].questions.length) {
           paletteInstructionText += `\nYou may attempt only up to ${state.questionSets[index].max_questions_allowed_to_attempt} questions in this section.`
@@ -723,7 +723,7 @@ export default defineComponent({
           title: state.questionSets[index].title,
           paletteItems: states,
           instructionText: paletteInstructionText,
-          instructionPageText: instructionPageText,
+          localInstructionPageText: localInstructionPageText,
           maxQuestionsAllowedToAttempt: state.questionSets[index].max_questions_allowed_to_attempt,
         })
       }

tests/unit/components/InstructionPage.spec.ts

@@ -6,7 +6,7 @@ describe('InstructionPage', () => {
   describe('when test_format is not FST', () => {
     const testQuestionSetStates = [
       {
-        instructionPageText: "You may attempt 2 question out of 5 questions",
+        instructionPageText: "You may attempt 2 out of 5 questions",
         instructionTest: "You may attempt all the questions",
         maxQuestionsAllowedToAttempt: 2,
         paletteItems: [
@@ -22,7 +22,7 @@ describe('InstructionPage', () => {
         title: "Maths - Set 0",
       },
       {
-        instructionPageText: "You may attempt 2 question out of 5 questions",
+        instructionPageText: "You may attempt 2 out of 5 questions",
         instructionTest: "You may attempt all the questions",
         maxQuestionsAllowedToAttempt: 2,
         paletteItems: [
@@ -70,7 +70,7 @@ describe('InstructionPage', () => {
   describe('when test_format is FST', () => {
     const testQuestionSetStates = [
       {
-        instructionPageText: "You may attempt 2 question out of 5 questions",
+        instructionPageText: "You may attempt 2 out of 5 questions",
         instructionTest: "You may attempt all the questions",
         maxQuestionsAllowedToAttempt: 2,
         paletteItems: [
@@ -86,7 +86,7 @@ describe('InstructionPage', () => {
         title: "Maths - Set 0",
       },
       {
-        instructionPageText: "You may attempt 2 question out of 5 questions",
+        instructionPageText: "You may attempt 2 out of 5 questions",
         instructionTest: "You may attempt all the questions",
         maxQuestionsAllowedToAttempt: 2,
         paletteItems: [
@@ -140,10 +140,10 @@ describe('InstructionPage', () => {
 
     it("displays instruction text for each set", () => {
       let questionSetIndex = 0;
-      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 question out of 5 questions");
+      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 out of 5 questions");
 
       questionSetIndex = 1;
-      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 question out of 5 questions");
+      expect(wrapper.find(`[data-test="questionSetInstruction-${questionSetIndex}"]`).text()).toBe("You may attempt 2 out of 5 questions");
     });
 
     it("No. of questions need to be attempted for each set", () => {

tests/unit/components/Questions/Palette/QuestionPalette.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import QuestionPalette from "@/components/Questions/Palette/QuestionPalette.vue";
 
-describe("New buttons in question palette", () => {
+describe("Buttons in palette", () => {
   const wrapper = mount(QuestionPalette);
   it("Buttons are visible or not", () => {
     expect(wrapper.find('[data-test="toggleInstructions"]').exists()).toBeTruthy();
@@ -13,13 +13,13 @@ describe("New buttons in question palette", () => {
     expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(true);
   })
 
-  it("when instruction button is clicked", async () => {
+  it("instructions are visible when instruction button is clicked", async () => {
     await wrapper.find('[data-test="toggleInstructions"]').trigger("click");
     expect(wrapper.find('[data-test="instruction-page"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(false);
   });
 
-  it("when instructions is visible and instruction button is clicked again", async () => {
+  it("when instructions are visible and instruction button is clicked again", async () => {
     const showInstructions = true;
     const showPalette = false;
       await wrapper.setProps({
@@ -31,7 +31,7 @@ describe("New buttons in question palette", () => {
     expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(false);
   });
 
-  it("when palette button is clicked", async () => {
+  it("palette is visible when palette button is clicked", async () => {
     await wrapper.find('[data-test="togglePalette"]').trigger("click");
     expect(wrapper.find('[data-test="question-palette"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="instruction-page"]').exists()).toBe(false);