@coorpacademy/app-review 0.2.7 → 0.2.9-alpha.5

package/src/test/util/services.mock.ts

@@ -55,6 +55,10 @@ const fetchSkillsResponse = [
   }
 ];
 
+const fetchRankResponse = {
+  rank: 93
+};
+
 export const postProgressionResponse: ProgressionFromAPI = {
   _id: '62b1d1087aa12f00253f40ee',
   content,
@@ -284,6 +288,23 @@ export const postAnswerResponses: Record<string, ProgressionFromAPI> = {
   }
 };
 
+export const incorrectFreeTextPostAnswerResponse: ProgressionFromAPI = {
+  ...postAnswerResponses[freeTextSlide.universalRef],
+  state: {
+    ...postAnswerResponses[freeTextSlide.universalRef].state,
+    isCorrect: false,
+    allAnswers: [
+      {
+        slideRef: freeTextSlide.universalRef,
+        isCorrect: false,
+        answer: ['NOPE']
+      }
+    ],
+    pendingSlides: [freeTextSlide.universalRef],
+    stars: 0
+  }
+};
+
 export const progressionSlideWithPendingSlide: ProgressionFromAPI = {
   _id: '62b1d1087aa12f00253f40ee',
   content,
@@ -419,5 +440,6 @@ export const services: Services = {
     const currentSlide = progression.state.nextContent.ref;
     return Promise.resolve(get(currentSlide, postAnswerResponses));
   },
-  fetchCorrection: ref => Promise.resolve(getChoicesCorrection(ref))
+  fetchCorrection: ref => Promise.resolve(getChoicesCorrection(ref)),
+  fetchRank: () => Promise.resolve(fetchRankResponse)
 };

package/src/types/common.ts

@@ -167,6 +167,7 @@ export type Services = {
     progressionId: string,
     answer: string[]
   ): Promise<CorrectionFromAPI | void>;
+  fetchRank(token: string): Promise<Rank>;
 };
 
 export type Options = {

package/src/views/skills/test/skills.test.ts

@@ -11,7 +11,8 @@ test('should create initial props when there are no skills on the state', t => {
       skills: [],
       slides: {},
       token: '1234',
-      corrections: {}
+      corrections: {},
+      rank: {}
     },
     ui: {
       currentSlideRef: '',
@@ -56,7 +57,8 @@ test('should create initial props when skills on the state', t => {
       ],
       slides: {},
       token: '1234',
-      corrections: {}
+      corrections: {},
+      rank: {}
     },
     ui: {
       currentSlideRef: '',

package/src/views/slides/index.ts

@@ -8,11 +8,12 @@ import reduce from 'lodash/fp/reduce';
 import set from 'lodash/fp/set';
 import slice from 'lodash/fp/slice';
 import toInteger from 'lodash/fp/toInteger';
-import {Dispatch} from 'redux';
-import {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
-import {SlideIndexes} from '../../common';
-import {StoreState} from '../../reducers';
-import {AnswerUI} from '../../types/slides';
+import type {Dispatch} from 'redux';
+import join from 'lodash/fp/join';
+import type {ProgressionAnswerItem, ProgressionFromAPI} from '../../types/common';
+import type {SlideIndexes} from '../../common';
+import type {StoreState} from '../../reducers';
+import type {AnswerUI} from '../../types/slides';
 import {postAnswer} from '../../actions/api/post-answer';
 import {mapApiSlideToUi} from './map-api-slide-to-ui';
 
@@ -47,22 +48,27 @@ type SlidesStack = {
   [key in SlideIndexes]: UISlide;
 };
 
+type CorrectionPopinInformation = {
+  label: string;
+  message: string;
+};
+
+type CorrectionPopinKlf = {
+  label: string;
+  tooltip: string;
+};
+
+type CorrectionPopinNext = {
+  label: string;
+  ariaLabel: string;
+};
+
 export type CorrectionPopinProps = {
-  klf: {
-    label: string;
-    onClick: Function;
-    tooltip: string;
-  };
-  information: {
-    label: string;
-    message: string;
-  };
-  next: {
-    label: string;
-    ariaLabel: string;
-  };
-  successLabel: string;
-  failureLabel: string;
+  klf?: CorrectionPopinKlf;
+  information: CorrectionPopinInformation;
+  next: CorrectionPopinNext;
+  resultLabel: string;
+  type: 'right' | 'wrong';
 };
 
 export type SlidesViewProps = {
@@ -164,7 +170,15 @@ const buildStackSlides = (state: StoreState, dispatch: Dispatch): SlidesStack =>
       const parentContentTitle = getOr('', 'parentContentTitle.title', slideFromAPI);
       const parentContentType = getOr('', 'parentContentTitle.type', slideFromAPI);
 
+      const isCurrentSlideRef = currentSlideRef === slideRef;
+      const animateCorrectionPopin =
+        isCurrentSlideRef && getOr(false, ['ui', 'slide', 'animateCorrectionPopin'], state);
+      const showCorrectionPopin =
+        isCurrentSlideRef && getOr(false, ['ui', 'slide', 'showCorrectionPopin'], state);
+
       const updatedUiSlide = pipe(
+        set('showCorrectionPopin', showCorrectionPopin),
+        set('animateCorrectionPopin', animateCorrectionPopin),
         set('loading', false),
         set('questionText', questionText),
         set('answerUI', answerUI),
@@ -261,7 +275,35 @@ export const buildStepItems = (state: StoreState): StepItem[] => {
   return steps;
 };
 
+const getCorrectionPopinProps = (
+  isCorrect: boolean,
+  correctAnswer: string[],
+  klf: string
+): CorrectionPopinProps => ({
+  klf: isCorrect
+    ? undefined
+    : {
+        label: '_klf',
+        tooltip: klf
+      },
+  resultLabel: isCorrect ? '_right' : '_wrong',
+  information: {
+    label: isCorrect ? '_klf' : '_correctAnswer',
+    message: isCorrect ? klf : join(',', correctAnswer)
+  },
+  next: {
+    ariaLabel: '_correctionNextAriaLabel',
+    label: '_correctionNextLabel'
+  },
+  type: isCorrect ? 'right' : 'wrong'
+});
+
 export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): SlidesViewProps => {
+  const currentSlideRef = get(['ui', 'currentSlideRef'], state);
+  const correction = get(['data', 'corrections', currentSlideRef], state);
+  const isCorrect = get(['data', 'progression', 'state', 'isCorrect'], state);
+  const klf = getOr('', ['data', 'slides', currentSlideRef, 'klf'], state);
+
   return {
     header: {
       mode: '__revision_mode',
@@ -279,11 +321,12 @@ export const mapStateToSlidesProps = (state: StoreState, dispatch: Dispatch): Sl
       validateButton: {
         label: '__validate',
         disabled: !get('ui.slide.validateButton', state),
-        onClick: (): void => {
+        onClick: /* istanbul ignore next */ (): void => {
           dispatch(postAnswer);
         }
       },
-      correctionPopinProps: undefined,
+      correctionPopinProps:
+        correction && getCorrectionPopinProps(isCorrect, correction.correctAnswer, klf),
       endReview: false
     },
     congratsProps: undefined

package/src/views/slides/test/fixtures/qcm-graphic.ts

@@ -15,10 +15,10 @@ export const qcmGraphicSlide: SlideFromAPI = {
           media: {
             src: [
               {
-                _id: '624efd915948a7013083e986',
+                _id: '616dbbb61a50f8051c1971ba',
                 mimeType: 'image/jpeg',
-                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
-                id: '624efd915948a7013083e986'
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_180530003-1618999931321.jpg',
+                id: '616dbbb61a50f8051c1971ba'
               }
             ],
             posters: [],
@@ -26,19 +26,19 @@ export const qcmGraphicSlide: SlideFromAPI = {
             type: 'img'
           },
           items: [],
-          _id: '624efd915948a7013083e985',
-          label: 'Vrai',
-          value: 'sli_VkSQroQnx.choice_NJesyUo7nx',
-          id: '624efd915948a7013083e985'
+          _id: '616dbbb61a50f8051c1971b9',
+          label: 'La consolidation des acquis',
+          value: 'sli_4k5O3zaN5.choice_E1ebZYyF8q',
+          id: '616dbbb61a50f8051c1971b9'
         },
         {
           media: {
             src: [
               {
-                _id: '624efd915948a7013083e988',
+                _id: '616dbbb61a50f8051c1971bc',
                 mimeType: 'image/jpeg',
-                url: '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
-                id: '624efd915948a7013083e988'
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_1170951868-1618999931510.jpg',
+                id: '616dbbb61a50f8051c1971bc'
               }
             ],
             posters: [],
@@ -46,19 +46,139 @@ export const qcmGraphicSlide: SlideFromAPI = {
             type: 'img'
           },
           items: [],
-          _id: '624efd915948a7013083e987',
-          label: 'Faux',
-          value: 'sli_VkSQroQnx.choice_VkgayLjX3e',
-          id: '624efd915948a7013083e987'
+          _id: '616dbbb61a50f8051c1971bb',
+          label: 'Le retour d’information',
+          value: 'sli_4k5O3zaN5.choice_NygF~FJFIc',
+          id: '616dbbb61a50f8051c1971bb'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971be',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_439207960-1618999931642.jpg',
+                id: '616dbbb61a50f8051c1971be'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971bd',
+          label: 'L’engagement actif',
+          value: 'sli_4k5O3zaN5.choice_4yx5bKJKIc',
+          id: '616dbbb61a50f8051c1971bd'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971c0',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_538654849-1618999935091.jpg',
+                id: '616dbbb61a50f8051c1971c0'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971bf',
+          label: 'La motivation',
+          value: 'sli_4k5O3zaN5.choice_VkzcZY1F8q',
+          id: '616dbbb61a50f8051c1971bf'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971c2',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_485162803-1618999941454.jpg',
+                id: '616dbbb61a50f8051c1971c2'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971c1',
+          label: 'L’attention',
+          value: 'sli_4k5O3zaN5.choice_Vken~YJFI5',
+          id: '616dbbb61a50f8051c1971c1'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971c4',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_374136655-1619000050478.jpg',
+                id: '616dbbb61a50f8051c1971c4'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971c3',
+          label: 'La confiance en soi',
+          value: 'sli_4k5O3zaN5.choice_4JgpWKkFLq',
+          id: '616dbbb61a50f8051c1971c3'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971c6',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_142530529-1618999997389.jpg',
+                id: '616dbbb61a50f8051c1971c6'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971c5',
+          label: 'La capacité d’abstraction',
+          value: 'sli_4k5O3zaN5.choice_NJfabKkK8q',
+          id: '616dbbb61a50f8051c1971c5'
+        },
+        {
+          media: {
+            src: [
+              {
+                _id: '616dbbb61a50f8051c1971c8',
+                mimeType: 'image/jpeg',
+                url: '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_5948041-1618999993222.jpg',
+                id: '616dbbb61a50f8051c1971c8'
+              }
+            ],
+            posters: [],
+            subtitles: [],
+            type: 'img'
+          },
+          items: [],
+          _id: '616dbbb61a50f8051c1971c7',
+          label: 'L’abnégation',
+          value: 'sli_4k5O3zaN5.choice_41xAWYJYI9',
+          id: '616dbbb61a50f8051c1971c7'
         }
       ]
     },
     type: 'qcmGraphic',
-    header: 'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?',
-    explanation: 'Sélectionnez la bonne réponse.'
+    header: 'Quels sont les 4 piliers de l’apprentissage ?',
+    explanation: 'Sélectionnez les 4 bonnes réponses.'
   },
-  klf: "Il ne faut pas prendre la négociation comme une affaire personnelle, afin de rester centré sur son sujet. Mais cela ne signifie pas être dépourvu de toute émotion, car celles-ci peuvent être de vrais atouts. À condition de réussir à les exprimer sans accuser l'autre d'en être à l'origine.",
-  tips: "Pour gérer ses émotions, il faut d'abord les identifier, notamment en analysant ses ressentis physiques et en trouvant l'élément déclencheur.",
+  klf: 'Avec l’engagement actif, le retour d’information et la consolidation des acquis, l’attention est le premier des quatre piliers de l’apprentissage, identifiés par les chercheurs en neuroscience, spécialistes de l’éducation.',
+  tips: 'Une configuration idéale pour l’apprentissage, mettant en œuvre ces 4 piliers : présenter à un apprenant un contenu de durée raisonnable, qui respecte le temps d’attention qu’il peut lui accorder ; proposer ensuite un exercice sur le contenu qui vient d’être expliqué ; puis donner à l’apprenant un retour en direct sur sa production.',
   universalRef: 'sli_VkSQroQnx',
   _id: 'sli_VkSQroQnx',
   parentContentTitle: {
@@ -68,28 +188,75 @@ export const qcmGraphicSlide: SlideFromAPI = {
 };
 
 export const qcmGraphicUISlide: Partial<UISlide> = {
-  questionText:
-    'Pour mener une bonne négociation, il ne faut ressentir aucune émotion. Vrai ou faux ?',
+  questionText: 'Quels sont les 4 piliers de l’apprentissage ?',
   answerUI: {
-    help: 'Sélectionnez la bonne réponse.',
+    help: 'Sélectionnez les 4 bonnes réponses.',
     model: {
       type: 'qcmGraphic',
       answers: [
         {
-          title: 'Vrai',
+          title: 'La consolidation des acquis',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_180530003-1618999931321.jpg',
+          selected: false,
+          ariaLabel: 'La consolidation des acquis',
+          onClick: noop
+        },
+        {
+          title: 'Le retour d’information',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_1170951868-1618999931510.jpg',
+          selected: false,
+          ariaLabel: 'Le retour d’information',
+          onClick: noop
+        },
+        {
+          title: 'L’engagement actif',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_439207960-1618999931642.jpg',
+          selected: false,
+          ariaLabel: 'L’engagement actif',
+          onClick: noop
+        },
+        {
+          title: 'La motivation',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_538654849-1618999935091.jpg',
+          selected: false,
+          ariaLabel: 'La motivation',
+          onClick: noop
+        },
+        {
+          title: 'L’attention',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_485162803-1618999941454.jpg',
+          selected: false,
+          ariaLabel: 'L’attention',
+          onClick: noop
+        },
+        {
+          title: 'La confiance en soi',
+          image:
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_374136655-1619000050478.jpg',
+          selected: false,
+          ariaLabel: 'La confiance en soi',
+          onClick: noop
+        },
+        {
+          title: 'La capacité d’abstraction',
           image:
-            '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/true-1512554153232.jpg',
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_142530529-1618999997389.jpg',
           selected: false,
-          onClick: noop,
-          ariaLabel: 'Vrai'
+          ariaLabel: 'La capacité d’abstraction',
+          onClick: noop
         },
         {
-          title: 'Faux',
+          title: 'L’abnégation',
           image:
-            '//static.coorpacademy.com/content/CoorpAcademy/content-partnerships/cockpit-partner-au-feminin/default/false-1512554160848.jpg',
+            '//static.coorpacademy.com/content/CoorpAcademy/content-science-et-vie/cockpit-science-et-vie/default/shutterstock_5948041-1618999993222.jpg',
           selected: false,
-          onClick: noop,
-          ariaLabel: 'Faux'
+          ariaLabel: 'L’abnégation',
+          onClick: noop
         }
       ]
     }