@pie-element/hotspot 4.8.0 → 4.8.1-beta.587

package/controller/src/__tests__/index.test.js

@@ -41,20 +41,17 @@ describe('controller', () => {
   });
 
   describe('outcome partialScoring test', () => {
-
-    describe('hanging controller', ()=> {
-
+    describe('hanging controller', () => {
       it('doesnt hang if answers is missing', async () => {
-        const response = await outcome({}, {id: "1"}, {});
-        expect(response).toEqual({score: 0, empty: true});
+        const response = await outcome({}, { id: '1' }, {});
+        expect(response).toEqual({ score: 0, empty: true });
       });
 
       it('doesnt hang if the rest is missing', async () => {
-        const response = await outcome({}, {id: "1", answers: {}}, {});
-        expect(response).toEqual({score: 0 });
+        const response = await outcome({}, { id: '1', answers: {} }, {});
+        expect(response).toEqual({ score: 0 });
       });
-      
-    })
+    });
 
     beforeEach(() => {
       const rectangles = question.shapes.rectangles.concat({
@@ -72,11 +69,7 @@ describe('controller', () => {
 
     const assertOutcome = (message, extra, sessionValue, env, expected) => {
       it(message, async () => {
-        const result = await outcome(
-          { ...question, ...extra },
-          sessionValue,
-          env
-        );
+        const result = await outcome({ ...question, ...extra }, sessionValue, env);
         expect(result).toEqual(expect.objectContaining(expected));
       });
     };
@@ -86,7 +79,7 @@ describe('controller', () => {
       { partialScoring: true },
       { answers: [{ id: '2' }] },
       { mode: 'evaluate' },
-      { score: 0.2 }
+      { score: 0 },
     );
 
     assertOutcome(
@@ -94,7 +87,7 @@ describe('controller', () => {
       { partialScoring: false },
       { answers: [{ id: '2' }] },
       { mode: 'evaluate' },
-      { score: 0 }
+      { score: 0 },
     );
 
     assertOutcome(
@@ -102,7 +95,7 @@ describe('controller', () => {
       { partialScoring: false },
       { answers: [{ id: '2' }] },
       { mode: 'evaluate', partialScoring: true },
-      { score: 0 }
+      { score: 0 },
     );
 
     assertOutcome(
@@ -110,7 +103,7 @@ describe('controller', () => {
       { partialScoring: true },
       { answers: [{ id: '2' }] },
       { mode: 'evaluate', partialScoring: false },
-      { score: 0 }
+      { score: 0 },
     );
   });
 
@@ -136,10 +129,16 @@ describe('controller', () => {
 
     describe('partial scoring', () => {
       beforeEach(() => {
-        const rectangles = question.shapes.rectangles.concat({
-          id: '5',
-          correct: true,
-        });
+        const rectangles = question.shapes.rectangles.concat(
+          {
+            id: '5',
+            correct: true,
+          },
+          {
+            id: '6',
+            correct: true,
+          },
+        );
         question = {
           ...question,
           partialScoring: true,
@@ -149,42 +148,101 @@ describe('controller', () => {
           },
         };
       });
-      it('returns a score of 0.2', async () => {
+      it('returns a score of 0', async () => {
         const result = await outcome(question, { answers: [{ id: '2' }] });
-        expect(result.score).toEqual(0.2);
+        expect(result.score).toEqual(0);
       });
 
-      it('returns a score of 0.4', async () => {
+      it('returns a score of 0.25 for 1/4 correct answers and 0 incorrect answers', async () => {
         const result = await outcome(question, {
           answers: [{ id: '2' }, { id: '5' }],
         });
-        expect(result.score).toEqual(0.4);
+        expect(result.score).toEqual(0.25);
       });
 
-      it('returns a score of 0.4, even if answers are not in order', async () => {
+      it('returns a score of 0.25, even if answers are not in order', async () => {
         const result = await outcome(question, {
           answers: [{ id: '5' }, { id: '2' }],
         });
-        expect(result.score).toEqual(0.4);
+        expect(result.score).toEqual(0.25);
       });
 
-      it('returns a score of 0.6', async () => {
-        const result = await outcome(question, { answers: [{ id: '5' }] });
-        expect(result.score).toEqual(0.6);
+      it('returns a score of 0.5 for 2/4 correct answers and 0 incorrect answers', async () => {
+        const result = await outcome(question, { answers: [{ id: '5' }, { id: '4' }] });
+        expect(result.score).toEqual(0.5);
       });
 
-      it('returns a score of 1', async () => {
+      it('returns a score of 0.75 for 3/4 correct answers and 0 incorrect answers', async () => {
+        const result = await outcome(question, { answers: [{ id: '1' }, { id: '5' }, { id: '4' }] });
+        expect(result.score).toEqual(0.75);
+      });
+
+      it('returns a score of 1 for 4/4 correct answers and 0 incorrect answers', async () => {
         const result = await outcome(question, {
-          answers: [{ id: '1' }, { id: '4' }, { id: '5' }],
+          answers: [{ id: '1' }, { id: '4' }, { id: '5' }, { id: '6' }],
         });
         expect(result.score).toEqual(1);
       });
+
+      it('returns a score of 0.25 for 1/4 correct answers and 2 incorrect answers', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '1' }, { id: '2' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.25);
+      });
+
+      it('returns a score of 0.5 for 2/4 correct answers and 2 incorrect answers', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '1' }, { id: '4' }, { id: '2' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.5);
+      });
+
+      it('returns a score of 0.5 for 2/4 correct answers and 2 incorrect answers', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '1' }, { id: '4' }, { id: '2' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.5);
+      });
+
+      it('returns a score of 0.75 for 3/4 correct answers and 1 incorrect answer', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '6' }, { id: '4' }, { id: '1' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.75);
+      });
+
+      it('returns a score of 0.75 for 3/4 correct answers and 1 incorrect answer', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '6' }, { id: '4' }, { id: '1' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.75);
+      });
+
+      it('returns a score of 0.5 for 3/4 correct answers and 2 incorrect answer', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '6' }, { id: '4' }, { id: '2' }, { id: '3' }, { id: '1' }],
+        });
+        expect(result.score).toEqual(0.5);
+      });
+
+      it('returns a score of 0.75 for 4/4 correct answers and 1 incorrect answer', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '6' }, { id: '4' }, { id: '2' }, { id: '5' }, { id: '1' }],
+        });
+        expect(result.score).toEqual(0.75);
+      });
+
+      it('returns a score of 0.5 for 4/4 correct answers and 2 incorrect answers', async () => {
+        const result = await outcome(question, {
+          answers: [{ id: '6' }, { id: '4' }, { id: '2' }, { id: '5' }, { id: '1' }, { id: '3' }],
+        });
+        expect(result.score).toEqual(0.5);
+      });
     });
 
     const returnOutcome = (session) => {
-      it(`returns empty: true when session is ${JSON.stringify(
-        session
-      )}`, async () => {
+      it(`returns empty: true when session is ${JSON.stringify(session)}`, async () => {
         const result = await outcome(question, session);
         expect(result).toEqual({ score: 0, empty: true });
       });
@@ -233,15 +291,9 @@ describe('controller', () => {
 
       it('returns shapes', () => {
         expect(result.shapes.rectangles).toEqual(
-          expect.arrayContaining([
-            { id: '1', correct: true },
-            { id: '2' },
-            { id: '3' },
-          ])
-        );
-        expect(result.shapes.polygons).toEqual(
-          expect.arrayContaining([{ id: '4', correct: true }])
+          expect.arrayContaining([{ id: '1', correct: true }, { id: '2' }, { id: '3' }]),
         );
+        expect(result.shapes.polygons).toEqual(expect.arrayContaining([{ id: '4', correct: true }]));
       });
 
       it('does not return responseCorrect', () => {
@@ -271,15 +323,9 @@ describe('controller', () => {
 
       it('returns choices w/ correct', () => {
         expect(result.shapes.rectangles).toEqual(
-          expect.arrayContaining([
-            { id: '1', correct: true },
-            { id: '2' },
-            { id: '3' },
-          ])
-        );
-        expect(result.shapes.polygons).toEqual(
-          expect.arrayContaining([{ id: '4', correct: true }])
+          expect.arrayContaining([{ id: '1', correct: true }, { id: '2' }, { id: '3' }]),
         );
+        expect(result.shapes.polygons).toEqual(expect.arrayContaining([{ id: '4', correct: true }]));
       });
 
       it('returns is response correct', () => {
@@ -290,9 +336,7 @@ describe('controller', () => {
 
   describe('isResponseCorrect', () => {
     const returnIsResponseCorect = (session) => {
-      it(`response is not correct if session is ${JSON.stringify(
-        session
-      )}`, () => {
+      it(`response is not correct if session is ${JSON.stringify(session)}`, () => {
         expect(isResponseCorrect(question, session)).toEqual(false);
       });
     };

package/controller/src/defaults.js

@@ -3,20 +3,16 @@ export default {
   imageUrl: '',
   shapes: {
     rectangles: [],
-    polygons: []
+    polygons: [],
   },
   multipleCorrect: true,
   partialScoring: false,
   dimensions: {
     height: 0,
-    width: 0
+    width: 0,
   },
-  hotspotColor: 'rgba(137, 183, 244, 0.65)',
-  hotspotList: [
-    'rgba(137, 183, 244, 0.65)'
-  ],
+  hotspotColor: 'rgba(137, 183, 244, 0.25)',
+  hotspotList: ['rgba(137, 183, 244, 0.25)'],
   outlineColor: 'blue',
-  outlineList: [
-    'blue'
-  ]
+  outlineList: ['blue'],
 };

package/controller/src/index.js

@@ -8,7 +8,7 @@ import defaults from './defaults';
 
 const log = debug('pie-elements:hotspot:controller');
 
-export const normalize = question => ({
+export const normalize = (question) => ({
   promptEnabled: true,
   rationaleEnabled: true,
   teacherInstructionsEnabled: true,
@@ -19,19 +19,11 @@ export const normalize = question => ({
 
 export function model(question, session, env) {
   const normalizedQuestion = normalize(question);
-  const {
-    imageUrl,
-    dimensions,
-    hotspotColor,
-    multipleCorrect,
-    outlineColor,
-    partialScoring,
-    prompt,
-    shapes
-  } = normalizedQuestion;
+  const { imageUrl, dimensions, hotspotColor, multipleCorrect, outlineColor, partialScoring, prompt, shapes } =
+    normalizedQuestion;
   const { rectangles, polygons } = shapes || {};
 
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const out = {
       disabled: env.mode !== 'gather',
       mode: env.mode,
@@ -46,17 +38,16 @@ export function model(question, session, env) {
         // eslint-disable-next-line no-unused-vars
         rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),
         // eslint-disable-next-line no-unused-vars
-        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps }))
+        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps })),
       },
-      responseCorrect:
-        env.mode === 'evaluate'
-          ? isResponseCorrect(normalizedQuestion, session)
-          : undefined
+      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
       out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;
-      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+        ? normalizedQuestion.teacherInstructions
+        : null;
     } else {
       out.rationale = null;
       out.teacherInstructions = null;
@@ -71,7 +62,7 @@ export function model(question, session, env) {
 }
 
 export const createDefaultModel = (model = {}) =>
-  new Promise(resolve => {
+  new Promise((resolve) => {
     resolve({
       ...defaults,
       ...model,
@@ -93,25 +84,35 @@ const getScore = (config, session, env = {}) => {
   }
 
   let correctAnswers = 0;
+  let selectedChoices = 0;
 
   const choices = [...rectangles, ...polygons];
 
-  choices.forEach(shape => {
-    const selected = answers && answers.filter(answer => answer.id === shape.id)[0];
+  const correctChoices = choices.filter((choice) => choice.correct);
+
+  choices.forEach((shape) => {
+    const selected = answers && answers.filter((answer) => answer.id === shape.id)[0];
     const correctlySelected = shape.correct && selected;
-    const correctlyUnselected = !shape.correct && !selected;
 
-    if (correctlySelected || correctlyUnselected) {
+    if (selected) {
+      selectedChoices += 1;
+    }
+
+    if (correctlySelected) {
       correctAnswers += 1;
     }
   });
 
-  const str = (correctAnswers / choices.length).toFixed(2);
-  return parseFloat(str);
+  const extraAnswers = selectedChoices > correctChoices.length ? selectedChoices - correctChoices.length : 0;
+
+  const total = correctChoices.length === 0 ? 1 : correctChoices.length;
+  const str = ((correctAnswers - extraAnswers) / total).toFixed(2);
+
+  return str < 0 ? 0 : parseFloat(str);
 };
 
 export function outcome(config, session, env = {}) {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     log('outcome...');
 
     if (!session || isEmpty(session)) {
@@ -122,7 +123,7 @@ export function outcome(config, session, env = {}) {
       const score = getScore(config, session, env);
       resolve({ score });
     } else {
-      resolve({score: 0, empty: true})
+      resolve({ score: 0, empty: true });
     }
   });
 }
@@ -130,7 +131,7 @@ export function outcome(config, session, env = {}) {
 const returnShapesCorrect = (shapes) => {
   let answers = [];
 
-  shapes.forEach(i => {
+  shapes.forEach((i) => {
     const { correct, id } = i;
     if (correct) {
       answers.push({ id });
@@ -140,7 +141,7 @@ const returnShapesCorrect = (shapes) => {
 };
 
 export const createCorrectResponseSession = (question, env) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     if (env.mode !== 'evaluate' && env.role === 'instructor') {
       const { shapes: { rectangles = [], polygons = {} } = {} } = question;
 
@@ -148,14 +149,37 @@ export const createCorrectResponseSession = (question, env) => {
       const polygonsCorrect = returnShapesCorrect(polygons);
 
       resolve({
-        answers: [
-          ...rectangleCorrect,
-          ...polygonsCorrect
-        ],
-        id: '1'
+        answers: [...rectangleCorrect, ...polygonsCorrect],
+        id: '1',
       });
     } else {
       resolve(null);
     }
   });
 };
+
+export const validate = (model = {}, config = {}) => {
+  const { shapes } = model;
+  const { minShapes = 2, maxShapes, maxSelections } = config;
+  const errors = {};
+
+  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);
+
+  const nbOfSelections = (allShapes || []).reduce((acc, shape) => (shape.correct ? acc + 1 : acc), 0);
+
+  const nbOfShapes = (allShapes || []).length;
+
+  if (nbOfShapes < minShapes) {
+    errors.shapesError = `There should be at least ${minShapes} shapes defined.`;
+  } else if (nbOfShapes > maxShapes) {
+    errors.shapesError = `No more than ${maxShapes} shapes should be defined.`;
+  }
+
+  if (nbOfSelections < 1) {
+    errors.selectionsError = 'There should be at least 1 shape selected.';
+  } else if (nbOfSelections > maxSelections) {
+    errors.selectionsError = `No more than ${maxSelections} shapes should be selected.`;
+  }
+
+  return errors;
+};

package/controller/src/utils.js

@@ -1,13 +1,16 @@
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 
-export const getCorrectResponse = (choices) => choices
-  .filter(c => c.correct)
-  .map(c => c.id)
-  .sort();
+export const getCorrectResponse = (choices) =>
+  choices
+    .filter((c) => c.correct)
+    .map((c) => c.id)
+    .sort();
 
 export const isResponseCorrect = (question, session) => {
-  const { shapes: { rectangles, polygons } } = question;
+  const {
+    shapes: { rectangles, polygons },
+  } = question;
   const choices = [...rectangles, ...polygons];
   let correctResponseIds = getCorrectResponse(choices);
 
@@ -16,7 +19,7 @@ export const isResponseCorrect = (question, session) => {
   }
 
   if (session.answers && session.answers.length) {
-    let answerIds = (session.answers || []).map(a => a.id);
+    let answerIds = (session.answers || []).map((a) => a.id);
 
     return isEqual(answerIds.sort(), correctResponseIds);
   } else if (!(correctResponseIds && correctResponseIds.length)) {