fix: allow duplicate words in fill the blanks (#181)

* fix: allow duplicate words in fill in the blanks

cypress/e2e/play/fillBlanks.cy.ts

@@ -31,6 +31,7 @@ import {
   QUESTION_APP_SETTINGS,
   setAttemptsOnAppSettings,
 } from '../../fixtures/appSettings';
+import { APP_SETTINGS_FILL_THE_BLANKS_WITH_DUPLICATED } from './fixtures';
 
 const { data } = QUESTION_APP_SETTINGS.find(
   ({ name, data }) =>
@@ -309,6 +310,34 @@ describe('Play Fill In The Blanks', () => {
         });
       });
 
+      it('Show partially correct saved question with duplicate words', () => {
+        const partiallyCorrectAppData = buildAppData(
+          'Lorem <> dolor sit amet, consectetur adipiscing elit. <something> ut fermentum nulla, sed <> sem.'
+        );
+        cy.setUpApi({
+          database: {
+            appSettings: APP_SETTINGS_FILL_THE_BLANKS_WITH_DUPLICATED,
+            appData: [partiallyCorrectAppData],
+          },
+          appContext: {
+            context: Context.Player,
+          },
+        });
+        cy.visit('/');
+
+        // answer block still exists
+        cy.get(`${dataCyWrapper(buildFillBlanksAnswerId(3))}`).should(
+          'have.text',
+          'something'
+        );
+
+        // dropped answer block exists  and is displayed
+        cy.get(`${dataCyWrapper(buildBlankedTextWordCy(3))}`).should(
+          'have.text',
+          'something'
+        );
+      });
+
       it('Show unmatching and shorter saved question', () => {
         const shorterAppData = buildAppData(
           'Lorem <ergerg> dolor sit amet, consectetur adipiscing elit.'

cypress/e2e/play/fixtures.ts

@@ -0,0 +1,34 @@
+import { AppSetting } from '@graasp/sdk';
+
+import { QuestionDataAppSetting } from '../../../src/components/types/types';
+import { APP_SETTING_NAMES, QuestionType } from '../../../src/config/constants';
+import { datesFactory } from '../../../src/data/factories';
+import { mockItem } from '../../../src/data/items';
+
+export const FILL_BLANKS_SETTING_WITH_DUPLICATED: QuestionDataAppSetting = {
+  id: 'fill-blanks-id',
+  name: APP_SETTING_NAMES.QUESTION,
+  item: mockItem,
+  ...datesFactory,
+  data: {
+    type: QuestionType.FILL_BLANKS,
+    questionId: 'fill-blanks-id1',
+    question: 'My fill in the blanks question',
+    text: 'Lorem <something> dolor sit amet, consectetur adipiscing elit. <something> ut fermentum nulla, sed <suscipit> sem.',
+    explanation: 'my explanation for fill in the blanks',
+    hints: 'my hints for fill in the blanks',
+  },
+};
+
+export const APP_SETTINGS_FILL_THE_BLANKS_WITH_DUPLICATED: AppSetting[] = [
+  FILL_BLANKS_SETTING_WITH_DUPLICATED,
+  {
+    id: 'order-list-id',
+    name: APP_SETTING_NAMES.QUESTION_LIST,
+    item: mockItem,
+    ...datesFactory,
+    data: {
+      list: [FILL_BLANKS_SETTING_WITH_DUPLICATED.data.questionId],
+    },
+  },
+];

src/components/play/PlayFillInTheBlanks.tsx

@@ -80,10 +80,6 @@ const PlayFillInTheBlanks = ({
 
   const userCannotPlay = isReadonly || showCorrection || showCorrectness;
 
-  useEffect(() => {
-    console.log('words', state.words);
-  }, [state.words]);
-
   // reset wrong answers on retry
   useEffect(() => {
     const newState = resetWrongAnswers(state);
@@ -153,16 +149,12 @@ const PlayFillInTheBlanks = ({
       // change reference
       blank.displayed = text;
     }
-    // remove answer
-    const newAnswers = clonedeep(state.answers);
-    const droppedAnswer = newAnswers.find((answer) => answer.text === text);
-    if (droppedAnswer) {
-      // change reference
-      droppedAnswer.placed = true;
-    }
+
+    // don't need to remove answers manually, it is automatically computed when app data changes
+
     // add back the previous answer to the poll
     if (previousAnswer) {
-      const prevAnswer = newAnswers.find(
+      const prevAnswer = state.answers.find(
         (answer) => answer.text === previousAnswer
       );
       if (prevAnswer) {

src/utils/fillInTheBlanks.ts

@@ -81,9 +81,15 @@ export const splitSentence = (
   }
 
   // second pass to set as placed the displayed text
+  const displayedWords = result.words.map(({ displayed }) => displayed);
   result.answers = result.answers.map((a) => {
-    const isPlaced =
-      result.words.find((word) => word.displayed === a.text) !== undefined;
+    const idx = displayedWords.findIndex((word) => word === a.text);
+    const isPlaced = idx >= 0;
+
+    // remove occurence from displayed answers
+    if (isPlaced) {
+      displayedWords.splice(idx, 1);
+    }
 
     return { ...a, placed: isPlaced };
   });