feat: add explanation to each choice of the multiple choice questions (…

…#85) * feature: Add explanation field to multiple choice question choices for the small db --------- Co-authored-by: Kim Lan Phan Hoang <[email protected]> Co-authored-by: kim <[email protected]>
graasp · Sep 25, 2023 · 45d4df8 · 45d4df8
1 parent 25ee459
commit 45d4df8
Show file tree

Hide file tree

Showing 12 changed files with 439 additions and 118 deletions.
diff --git a/cypress/e2e/Admin/create/multipleChoices.cy.js b/cypress/e2e/Admin/create/multipleChoices.cy.js
@@ -15,8 +15,11 @@ import {
   MULTIPLE_CHOICES_ANSWER_CORRECTNESS_CLASSNAME,
   QUESTION_BAR_ADD_NEW_BUTTON_CLASSNAME,
   QUESTION_BAR_PREV_CY,
+  buildMultipleChoiceAddAnswerExplanationButtonCy,
   buildMultipleChoiceAnswerCy,
+  buildMultipleChoiceAnswerExplanationCy,
   buildMultipleChoiceDeleteAnswerButtonCy,
+  buildMultipleChoiceDeleteAnswerExplanationButtonCy,
   buildQuestionStepCy,
   dataCyWrapper,
 } from '../../../../src/config/selectors';
@@ -38,18 +41,22 @@ const newMultipleChoiceData = {
     {
       value: 'new choice 1',
       isCorrect: true,
+      explanation: 'reason 1',
     },
     {
       value: 'new choice 2',
       isCorrect: true,
+      explanation: 'reason 2',
     },
     {
       value: 'new choice 3',
       isCorrect: false,
+      explanation: 'reason 3',
     },
     {
       value: 'new choice 4',
       isCorrect: false,
+      explanation: 'reason 4',
     },
   ],
   explanation: 'my new explanation',
@@ -142,7 +149,7 @@ describe('Multiple Choices', () => {
       ...newMultipleChoiceData,
       choices: [
         ...newMultipleChoiceData.choices,
-        { value: '', isCorrect: true },
+        { value: '', isCorrect: true, explanation: '' },
       ],
     };
     fillMultipleChoiceQuestion(new2, { shouldSave: false });
@@ -155,9 +162,9 @@ describe('Multiple Choices', () => {
     const new3 = {
       ...newMultipleChoiceData,
       choices: [
-        { value: 'choice1', isCorrect: false },
-        { value: 'choice2', isCorrect: false },
-        { value: 'choice2', isCorrect: false },
+        { value: 'choice1', isCorrect: false, explanation: 'reason 1' },
+        { value: 'choice2', isCorrect: false, explanation: 'reason 2' },
+        { value: 'choice2', isCorrect: false, explanation: 'reason 3' },
       ],
     };
     fillMultipleChoiceQuestion(new3, { shouldSave: false });
@@ -172,6 +179,58 @@ describe('Multiple Choices', () => {
     cy.checkExplanationField(newMultipleChoiceData.explanation);
   });
 
+  it('Add explanations', () => {
+    cy.setUpApi({
+      database: {
+        appSettings: [],
+      },
+      appContext: {
+        permission: PermissionLevel.Admin,
+        context: Context.Builder,
+      },
+    });
+    cy.visit('/');
+
+    fillMultipleChoiceQuestion(newMultipleChoiceData);
+
+    newMultipleChoiceData.choices.forEach(({ explanation }, idx) => {
+      cy.get(
+        dataCyWrapper(buildMultipleChoiceAddAnswerExplanationButtonCy(idx))
+      ).should('be.visible');
+      cy.get(
+        dataCyWrapper(buildMultipleChoiceAddAnswerExplanationButtonCy(idx))
+      ).click();
+      cy.get(
+        `${dataCyWrapper(buildMultipleChoiceAnswerExplanationCy(idx))} textarea`
+      )
+        .should('be.visible')
+        .should('have.value', '');
+      if (explanation.length) {
+        cy.get(
+          `${dataCyWrapper(
+            buildMultipleChoiceAnswerExplanationCy(idx)
+          )} textarea`
+        )
+          .first()
+          .type(explanation);
+        cy.get(
+          dataCyWrapper(buildMultipleChoiceDeleteAnswerExplanationButtonCy(idx))
+        ).should('be.visible');
+        cy.get(
+          dataCyWrapper(buildMultipleChoiceDeleteAnswerExplanationButtonCy(idx))
+        ).click();
+        cy.get(
+          `${dataCyWrapper(
+            buildMultipleChoiceAnswerExplanationCy(idx)
+          )} textarea`
+        ).should('not.exist');
+        cy.get(
+          dataCyWrapper(buildMultipleChoiceAddAnswerExplanationButtonCy(idx))
+        ).should('be.visible');
+      }
+    });
+  });
+
   describe('Display saved settings', () => {
     beforeEach(() => {
       cy.setUpApi({
@@ -198,10 +257,17 @@ describe('Multiple Choices', () => {
         .should('be.visible')
         .should('contain', data.question);
 
-      data.choices.forEach(({ value, isCorrect }, idx) => {
+      data.choices.forEach(({ value, isCorrect, explanation }, idx) => {
         cy.get(
           `${dataCyWrapper(buildMultipleChoiceAnswerCy(idx))} input`
         ).should('have.value', value);
+        cy.get(
+          `${dataCyWrapper(
+            buildMultipleChoiceAnswerExplanationCy(idx)
+          )} textarea`
+        )
+          .should('be.visible')
+          .should('have.value', explanation);
         cy.get(
           `${dataCyWrapper(
             buildMultipleChoiceAnswerCy(idx)

diff --git a/cypress/e2e/play/multipleChoices.cy.js b/cypress/e2e/play/multipleChoices.cy.js
@@ -6,6 +6,7 @@ import {
 import {
   PLAY_VIEW_QUESTION_TITLE_CY,
   PLAY_VIEW_SUBMIT_BUTTON_CY,
+  buildMultipleChoiceExplanationPlayCy,
   buildMultipleChoicesButtonCy,
   buildQuestionStepCy,
   dataCyWrapper,
@@ -37,7 +38,7 @@ const clickSelection = (selection) => {
 const checkCorrection = (selection) => {
   // eslint-disable-next-line cypress/no-unnecessary-waiting
   cy.wait(1500);
-  data.choices.forEach(({ isCorrect }, idx) => {
+  data.choices.forEach(({ isCorrect, explanation }, idx) => {
     const wasSelected = selection.includes(idx);
     const correction = (() => {
       if (wasSelected && isCorrect) {
@@ -53,6 +54,18 @@ const checkCorrection = (selection) => {
         expect($el.attr('class').toLowerCase()).to.contain(correction);
       }
     );
+    // todo: enable back if explanations are shown only under some conditions
+    // if (wasSelected && !isCorrect) {
+    cy.get(dataCyWrapper(buildMultipleChoiceExplanationPlayCy(idx))).should(
+      'contain',
+      explanation
+    );
+    // }
+    // else if (!wasSelected) {
+    //   cy.get(dataCyWrapper(buildMultipleChoiceExplanationPlayCy(idx))).should(
+    //     'not.exist'
+    //   );
+    // }
   });
   cy.checkExplanationPlay(data.explanation);
 };

diff --git a/cypress/fixtures/appSettings.js b/cypress/fixtures/appSettings.js
@@ -11,18 +11,22 @@ export const MULTIPLE_CHOICES_APP_SETTING = {
       {
         value: 'choice 1',
         isCorrect: false,
+        explanation: 'reason 1',
       },
       {
         value: 'choice 2',
         isCorrect: true,
+        explanation: 'reason 2',
       },
       {
         value: 'choice 3',
         isCorrect: true,
+        explanation: 'reason 3',
       },
       {
         value: 'choice 4',
         isCorrect: false,
+        explanation: 'reason 4',
       },
     ],
     explanation: 'my explanation for multiple choice',
@@ -93,10 +97,26 @@ export const CAPITAL_FRANCE_SETTING = {
     question: 'What is the capital of France?',
     type: QuestionType.MULTIPLE_CHOICES,
     choices: [
-      { value: 'London', isCorrect: false },
-      { value: 'Paris', isCorrect: true },
-      { value: 'New York', isCorrect: false },
-      { value: 'Tokyo', isCorrect: false },
+      {
+        value: 'London',
+        isCorrect: false,
+        explanation: 'London is the capital of England',
+      },
+      {
+        value: 'Paris',
+        isCorrect: true,
+        explanation: 'Paris is the capital of France',
+      },
+      {
+        value: 'New York',
+        isCorrect: false,
+        explanation: 'New York is in the US',
+      },
+      {
+        value: 'Tokyo',
+        isCorrect: false,
+        explanation: 'Tokyo is the capital of Japan',
+      },
     ],
     explanation: 'Paris is the capital of France.',
   },
@@ -158,9 +178,9 @@ export const NAME_EARTH_SATELLITE = {
     question: "What is the name of earth's natural satellite",
     type: QuestionType.MULTIPLE_CHOICES,
     choices: [
-      { value: 'Moon', isCorrect: true },
-      { value: 'Jupiter', isCorrect: false },
-      { value: 'Mars', isCorrect: false },
+      { value: 'Moon', isCorrect: true, explanation: 'reason sat 1' },
+      { value: 'Jupiter', isCorrect: false, explanation: 'reason sat 2' },
+      { value: 'Mars', isCorrect: false, explanation: 'reason sat 3' },
     ],
   },
   name: APP_SETTING_NAMES.QUESTION,