feat: reset the user's selection on retry of multiple choices (#166)

Author: ReidyT

cypress/e2e/play/multipleChoices.cy.ts

@@ -33,6 +33,7 @@ const { data } = QUESTION_APP_SETTINGS.find(
 
 const id = data.questionId;
 const { choices } = data as MultipleChoicesAppSettingData;
+const allChoicesIdx = choices.map((_c, idx) => idx);
 
 const multipleChoiceAppSettingsData = APP_SETTINGS[0].data as AppSettingData;
 
@@ -90,6 +91,13 @@ const checkCorrection = (selection: number[], showCorrection = true) => {
   }
 };
 
+const checkAllChoicesAreNotSelected = () =>
+  allChoicesIdx.forEach((idx) =>
+    cy
+      .get(dataCyWrapper(buildMultipleChoicesButtonCy(idx, false)))
+      .should('be.visible')
+  );
+
 /**
  * Checks that the buttons inputs and submit buttons are disabled or not.
  * It is useful to check that:
@@ -306,6 +314,18 @@ describe('Play Multiple Choices', () => {
         });
       });
 
+      it('Reset selection on retry', () => {
+        const selection = [0, 2];
+
+        clickSelection(selection);
+
+        cy.get(dataCyWrapper(PLAY_VIEW_SUBMIT_BUTTON_CY)).click();
+        cy.get(dataCyWrapper(PLAY_VIEW_RETRY_BUTTON_CY)).click();
+
+        // Checks that the user's selection is reset on retry.
+        checkAllChoicesAreNotSelected();
+      });
+
       it('Correct app data', () => {
         // click on choices -> become selected
         const selection = choices.reduce(

src/components/play/multipleChoices/PlayMultipleChoices.tsx

@@ -208,6 +208,12 @@ const PlayMultipleChoices = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [choices, showCorrection, showCorrectness]);
 
+  // Reset the user's selection at each retry.
+  useEffect(() => {
+    setResponse([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [numberOfRetry]);
+
   const onResponseClick = (value: string) => {
     const choiceIdx = response.choices?.findIndex((choice) => choice === value);