feat: provide hints when incorrect answer (#117)

Author: ReidyT

cypress/e2e/Admin/create/createView.cy.ts

@@ -41,6 +41,7 @@ const newMultipleChoiceData = {
     },
   ],
   explanation: 'my new explanation',
+  hints: 'my new hints'
 };
 
 describe('Create View', () => {

cypress/e2e/Admin/create/fillBlanks.cy.ts

@@ -26,6 +26,7 @@ const newFillBlanksData = {
   question: 'new question text',
   text: 'My text with <blanks> and more <blanks>',
   explanation: 'new explanation',
+  hints: 'new hints',
 };
 
 const { data } = QUESTION_APP_SETTINGS.find(
@@ -41,7 +42,8 @@ const fillBlanksQuestion = (
     text,
     question,
     explanation,
-  }: { text: string; question: string; explanation: string },
+    hints,
+  }: { text: string; question: string; explanation: string; hints: string },
   { shouldSave = true } = {}
 ) => {
   // fill question
@@ -55,6 +57,7 @@ const fillBlanksQuestion = (
     cy.get(dataCyWrapper(FILL_BLANKS_TEXT_FIELD_CY)).type(text);
   }
 
+  cy.fillHints(hints);
   cy.fillExplanation(explanation);
 
   // save
@@ -133,6 +136,7 @@ describe('Fill in the Blanks', () => {
         'have.value',
         data.text
       );
+      cy.checkHintsField(data.hints);
       cy.checkExplanationField(data.explanation);
     });
 
@@ -152,6 +156,7 @@ describe('Fill in the Blanks', () => {
         'have.value',
         newFillBlanksData.text
       );
+      cy.checkHintsField(newFillBlanksData.hints);
       cy.checkExplanationField(newFillBlanksData.explanation);
     });
   });

cypress/e2e/Admin/create/multipleChoices.cy.ts

@@ -63,17 +63,20 @@ const newMultipleChoiceData = {
     },
   ],
   explanation: 'my new explanation',
+  hints: 'my new hints',
 };
 
 export const fillMultipleChoiceQuestion = (
   {
     choices,
     question,
     explanation,
+    hints,
   }: {
     choices: MultipleChoicesChoice[];
     question: string;
     explanation: string;
+    hints: string;
   },
   { shouldSave = true } = {}
 ) => {
@@ -126,6 +129,7 @@ export const fillMultipleChoiceQuestion = (
     });
   });
 
+  cy.fillHints(hints);
   cy.fillExplanation(explanation);
 
   // save
@@ -184,6 +188,7 @@ describe('Multiple Choices', () => {
     fillMultipleChoiceQuestion(newMultipleChoiceData);
     cy.checkErrorMessage({});
 
+    cy.checkHintsField(newMultipleChoiceData.hints);
     cy.checkExplanationField(newMultipleChoiceData.explanation);
   });
 
@@ -286,6 +291,7 @@ describe('Multiple Choices', () => {
       });
       cy.get(dataCyWrapper(QUESTION_BAR_PREV_CY)).should('be.disabled');
 
+      cy.checkHintsField(data.hints);
       cy.checkExplanationField(data.explanation);
     });
 
@@ -312,6 +318,7 @@ describe('Multiple Choices', () => {
         ).should(isCorrect ? 'be.checked' : 'not.be.checked');
       });
 
+      cy.checkHintsField(newMultipleChoiceData.hints);
       cy.checkExplanationField(newMultipleChoiceData.explanation);
     });
 

cypress/e2e/Admin/create/slider.cy.ts

@@ -32,6 +32,7 @@ const newSliderData = {
   max: 90,
   value: 40,
   explanation: 'new explanation',
+  hints: 'new hints',
 };
 
 const { data } = QUESTION_APP_SETTINGS.find(
@@ -45,12 +46,13 @@ type SliderValues = {
   max: number;
   value: number;
   explanation: string;
+  hints: string;
 };
 
 const id = data.questionId;
 
 const fillSliderQuestion = (
-  { min, max, value, question, explanation }: SliderValues,
+  { min, max, value, question, explanation, hints }: SliderValues,
   originalAppSettingDataValue: number,
   { shouldSave = true } = {}
 ) => {
@@ -78,6 +80,7 @@ const fillSliderQuestion = (
     cy.get(`${dataCyWrapper(SLIDER_CY)}`).type(stepsString);
   }
 
+  cy.fillHints(hints);
   cy.fillExplanation(explanation);
 
   // save
@@ -168,6 +171,7 @@ describe('Slider', () => {
         'have.value',
         data.value
       );
+      cy.checkHintsField(data.hints);
       cy.checkExplanationField(data.explanation);
     });
 
@@ -196,6 +200,7 @@ describe('Slider', () => {
         'not.have.value',
         data.value
       );
+      cy.checkHintsField(newSliderData.hints);
       cy.checkExplanationField(newSliderData.explanation);
     });
   });

cypress/e2e/Admin/create/textInput.cy.ts

@@ -26,6 +26,7 @@ const newTextInputData = {
   question: 'new question text',
   text: 'new text',
   explanation: 'my explanation',
+  hints: 'my hints',
 };
 
 const { data } = QUESTION_APP_SETTINGS.find(
@@ -40,7 +41,8 @@ const fillTextInputQuestion = (
     text,
     question,
     explanation,
-  }: { text: string; question: string; explanation: string },
+    hints,
+  }: { text: string; question: string; explanation: string; hints: string },
   { shouldSave = true } = {}
 ) => {
   // fill question if not empty
@@ -55,7 +57,8 @@ const fillTextInputQuestion = (
     cy.get(`${dataCyWrapper(TEXT_INPUT_FIELD_CY)} input`).type(text);
   }
 
-  // fill explanation
+  // fill hints and explanation
+  cy.fillHints(hints);
   cy.fillExplanation(explanation);
 
   // save
@@ -143,6 +146,7 @@ describe('Text Input', () => {
         data.text
       );
 
+      cy.checkHintsField(data.hints);
       cy.checkExplanationField(data.explanation);
     });
 
@@ -163,6 +167,7 @@ describe('Text Input', () => {
         newTextInputData.text
       );
 
+      cy.checkHintsField(newTextInputData.hints);
       cy.checkExplanationField(newTextInputData.explanation);
     });
   });

cypress/e2e/play/fillBlanks.cy.ts

@@ -1,6 +1,9 @@
 import { Context } from '@graasp/sdk';
 
-import { TextAppDataData } from '../../../src/components/types/types';
+import {
+  AppSettingData,
+  TextAppDataData,
+} from '../../../src/components/types/types';
 import {
   APP_SETTING_NAMES,
   FILL_BLANKS_TYPE,
@@ -37,7 +40,7 @@ const id = data.questionId;
 const { text } = data as TextAppDataData;
 const { answers, words } = splitSentence(text);
 
-const explanationShouldNotBeVisible = () => cy.checkExplanationPlay(undefined);
+const fillBlanksAppSettingsData = APP_SETTINGS[3].data as AppSettingData;
 
 // verify all answers styles
 const checkCorrection = (
@@ -89,7 +92,7 @@ const checkCorrection = (
     if (shouldBeVisible) {
       cy.checkExplanationPlay(data.explanation);
     } else {
-      explanationShouldNotBeVisible();
+      cy.checkExplanationPlay(null);
     }
   });
 };
@@ -193,6 +196,7 @@ describe('Play Fill In The Blanks', () => {
             );
           }
         });
+        cy.checkHintsPlay(null);
         cy.checkExplanationPlay(null);
         checkInputDisabled(false);
         cy.checkNumberOfAttemptsProgression({
@@ -235,6 +239,9 @@ describe('Play Fill In The Blanks', () => {
 
         checkCorrection(splitSentence(data.text));
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // success displayed in question bar
         cy.checkStepStatus(id, true);
 
@@ -267,6 +274,9 @@ describe('Play Fill In The Blanks', () => {
         const data = partiallyCorrectAppData.data;
         checkCorrection(splitSentence(data.text));
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // success displayed in question bar
         cy.checkStepStatus(id, false);
 
@@ -298,6 +308,9 @@ describe('Play Fill In The Blanks', () => {
         const data = shorterAppData.data;
         checkCorrection(splitSentence(data.text));
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // success displayed in question bar
         cy.checkStepStatus(id, false);
 
@@ -326,6 +339,9 @@ describe('Play Fill In The Blanks', () => {
         cy.visit('/');
         cy.get(dataCyWrapper(buildQuestionStepCy(id))).click();
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // we do not check correction: nothing matches
         // but we want to know that the app didn't crash
 
@@ -400,6 +416,9 @@ describe('Play Fill In The Blanks', () => {
 
         checkCorrection(splitSentence(data.text));
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // success displayed in question bar
         cy.checkStepStatus(id, true);
 
@@ -435,6 +454,9 @@ describe('Play Fill In The Blanks', () => {
         const data = partiallyCorrectAppData.data;
         checkCorrection(splitSentence(data.text), false);
 
+        // hints should be displayed
+        cy.checkHintsPlay(fillBlanksAppSettingsData.hints);
+
         // success displayed in question bar
         cy.checkStepStatus(id, false);
 
@@ -469,6 +491,9 @@ describe('Play Fill In The Blanks', () => {
         const data = shorterAppData.data;
         checkCorrection(splitSentence(data.text), false);
 
+        // hints should be displayed
+        cy.checkHintsPlay(fillBlanksAppSettingsData.hints);
+
         // success displayed in question bar
         cy.checkStepStatus(id, false);
 
@@ -500,6 +525,9 @@ describe('Play Fill In The Blanks', () => {
         cy.visit('/');
         cy.get(dataCyWrapper(buildQuestionStepCy(id))).click();
 
+        // hints should be displayed
+        cy.checkHintsPlay(fillBlanksAppSettingsData.hints);
+
         // we do not check correction: nothing matches
         // but we want to know that the app didn't crash
 

cypress/e2e/play/multipleChoices.cy.ts

@@ -1,6 +1,9 @@
 import { Context } from '@graasp/sdk';
 
-import { MultipleChoicesAppSettingData } from '../../../src/components/types/types';
+import {
+  AppSettingData,
+  MultipleChoicesAppSettingData,
+} from '../../../src/components/types/types';
 import { APP_SETTING_NAMES, QuestionType } from '../../../src/config/constants';
 import {
   EXPLANATION_PLAY_CY,
@@ -28,6 +31,8 @@ const { data } = QUESTION_APP_SETTINGS.find(
 const id = data.questionId;
 const { choices } = data as MultipleChoicesAppSettingData;
 
+const multipleChoiceAppSettingsData = APP_SETTINGS[0].data as AppSettingData;
+
 // click on choices -> become selected
 const clickSelection = (selection: number[]) => {
   // eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -124,6 +129,7 @@ describe('Play Multiple Choices', () => {
             dataCyWrapper(buildMultipleChoicesButtonCy(idx, false))
           ).should('be.visible');
         });
+        cy.checkHintsPlay(null);
         cy.checkExplanationPlay(null);
         checkInputDisabled([], false);
         cy.checkNumberOfAttemptsProgression({
@@ -141,6 +147,9 @@ describe('Play Multiple Choices', () => {
         // verify all choices styles
         checkCorrection(selection);
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // error displayed in question bar
         cy.checkStepStatus(id, false);
         checkInputDisabled(selection, true);
@@ -164,6 +173,9 @@ describe('Play Multiple Choices', () => {
 
         checkCorrection(selection);
 
+        // hints should be hidden
+        cy.checkHintsPlay(null);
+
         // success displayed in question bar
         cy.checkStepStatus(id, true);
         checkInputDisabled(selection, true);
@@ -218,6 +230,8 @@ describe('Play Multiple Choices', () => {
         );
 
         checkCorrection(selection);
+        // hints should be hidden
+        cy.checkHintsPlay(null);
         checkInputDisabled(selection, true);
         cy.checkNumberOfAttemptsProgression({
           numberOfAttempts: NUMBER_OF_ATTEMPTS,
@@ -256,6 +270,8 @@ describe('Play Multiple Choices', () => {
         // verify all choices styles
         checkCorrection(selection, false);
 
+        cy.checkHintsPlay(multipleChoiceAppSettingsData.hints);
+
         // error displayed in question bar
         cy.checkStepStatus(id, false);
         checkInputDisabled(selection, false);
@@ -278,6 +294,7 @@ describe('Play Multiple Choices', () => {
         cy.get(dataCyWrapper(PLAY_VIEW_SUBMIT_BUTTON_CY)).click();
 
         checkCorrection(selection);
+        cy.checkHintsPlay(null);
 
         // success displayed in question bar
         cy.checkStepStatus(id, true);
@@ -336,6 +353,7 @@ describe('Play Multiple Choices', () => {
         );
 
         checkCorrection(selection, false);
+        cy.checkHintsPlay(multipleChoiceAppSettingsData.hints);
         checkInputDisabled(selection, false);
         cy.checkNumberOfAttemptsProgression({
           numberOfAttempts: NUMBER_OF_ATTEMPTS,