@pie-element/hotspot 11.1.2-next.2 → 11.1.2

package/controller/src/index.js

@@ -0,0 +1,328 @@
+import debug from 'debug';
+import { isEmpty } from 'lodash-es';
+import { partialScoring } from '@pie-lib/controller-utils';
+
+import { isResponseCorrect } from './utils';
+
+import defaults from './defaults';
+
+const log = debug('pie-elements:hotspot:controller');
+
+export const normalize = (question) => ({
+  ...defaults,
+  ...question,
+});
+
+export function model(question, session, env) {
+  const normalizedQuestion = normalize(question);
+  const {
+    imageUrl,
+    dimensions,
+    hotspotColor,
+    hoverOutlineColor,
+    selectedHotspotColor,
+    multipleCorrect,
+    outlineColor,
+    partialScoring,
+    prompt,
+    shapes,
+    language,
+    fontSizeFactor,
+    autoplayAudioEnabled,
+    completeAudioEnabled,
+    customAudioButton,
+  } = normalizedQuestion;
+  const { rectangles, polygons, circles } = shapes || {};
+
+  const shouldIncludeCorrectResponse = env.mode === 'evaluate' || (env.role === 'instructor' && env.mode === 'view');
+
+  return new Promise((resolve) => {
+    const out = {
+      disabled: env.mode !== 'gather',
+      mode: env.mode,
+      dimensions,
+      imageUrl,
+      outlineColor,
+      hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
+      multipleCorrect,
+      partialScoring,
+      language,
+      fontSizeFactor,
+      autoplayAudioEnabled,
+      completeAudioEnabled,
+      customAudioButton,
+      shapes: {
+        ...shapes,
+        // eslint-disable-next-line no-unused-vars
+        rectangles: (rectangles || []).map(({ index, correct, ...rectProps }) =>
+          shouldIncludeCorrectResponse ? { correct, ...rectProps } : { ...rectProps },
+        ),
+        // eslint-disable-next-line no-unused-vars
+        polygons: (polygons || []).map(({ index, correct, ...polyProps }) =>
+          shouldIncludeCorrectResponse ? { correct, ...polyProps } : { ...polyProps },
+        ),
+        // eslint-disable-next-line no-unused-vars
+        circles: (circles || []).map(({ index, correct, ...circleProps }) =>
+          shouldIncludeCorrectResponse ? { correct, ...circleProps } : { ...circleProps },
+        ),
+      },
+      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,
+      extraCSSRules: normalizedQuestion.extraCSSRules,
+    };
+
+    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
+      out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;
+      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled
+        ? normalizedQuestion.teacherInstructions
+        : null;
+    } else {
+      out.rationale = null;
+      out.teacherInstructions = null;
+    }
+
+    out.prompt = normalizedQuestion.promptEnabled ? prompt : null;
+    out.strokeWidth = normalizedQuestion.strokeWidth;
+
+    resolve(out);
+  });
+}
+
+export const createDefaultModel = (model = {}) =>
+  new Promise((resolve) => {
+    resolve({
+      ...defaults,
+      ...model,
+    });
+  });
+
+const getScore = (config, session, env = {}) => {
+  const { answers } = session || {};
+
+  if (!config.shapes || (!config.shapes.rectangles && !config.shapes.polygons && !config.shapes.circles)) {
+    return 0;
+  }
+
+  const { shapes: { rectangles = [], polygons = [], circles = [] } = {} } = config;
+  const partialScoringEnabled = partialScoring.enabled(config, env);
+
+  if (!partialScoringEnabled) {
+    return isResponseCorrect(config, session) ? 1 : 0;
+  }
+
+  let correctAnswers = 0;
+  let selectedChoices = 0;
+
+  const choices = [...rectangles, ...polygons, ...circles];
+
+  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;
+
+    if (selected) {
+      selectedChoices += 1;
+    }
+
+    if (correctlySelected) {
+      correctAnswers += 1;
+    }
+  });
+
+  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);
+};
+
+  /**
+ * Generates detailed trace log for scoring evaluation
+ * @param {Object} model - the question model
+ * @param {Object} session - the student session
+ * @param {Object} env - the environment
+ * @returns {Array} traceLog - array of trace messages
+ */
+export const getLogTrace = (model, session, env) => {
+  const traceLog = [];
+  const { answers } = session || {};
+  const { shapes } = model || {};
+  
+  const allShapes = [];
+  if (shapes) {
+    if (shapes.rectangles) allShapes.push(...shapes.rectangles);
+    if (shapes.polygons) allShapes.push(...shapes.polygons);
+    if (shapes.circles) allShapes.push(...shapes.circles);
+  }
+  
+  const correctShapes = allShapes.filter(shape => shape.correct);
+  const totalShapes = allShapes.length;
+  
+  traceLog.push(`Total of ${totalShapes} hotspot(s) defined, ${correctShapes.length} correct.`);
+  
+  if (answers && answers.length > 0) {
+    traceLog.push(`Student selected ${answers.length} hotspot(s).`);
+    
+    let correctSelections = 0;
+    let incorrectSelections = 0;
+    
+    answers.forEach(answer => {
+      const shape = allShapes.find(s => s.id === answer.id);
+      if (shape && shape.correct) {
+        correctSelections++;
+      } else {
+        incorrectSelections++;
+      }
+    });
+    
+    const missedCorrect = correctShapes.filter(correctShape => 
+      !answers.some(answer => answer.id === correctShape.id)
+    ).length;
+    
+    if (correctSelections > 0) {
+      traceLog.push(`${correctSelections} correct hotspot(s) selected.`);
+    }
+    if (incorrectSelections > 0) {
+      traceLog.push(`${incorrectSelections} incorrect hotspot(s) selected.`);
+    }
+    if (missedCorrect > 0) {
+      traceLog.push(`${missedCorrect} correct hotspot(s) missed.`);
+    }
+  } else {
+    traceLog.push('No hotspots selected.');
+  }
+
+  const partialScoringEnabled = partialScoring.enabled(model, env);
+  
+  if (partialScoringEnabled) {
+    traceLog.push(`Score calculated using partial scoring.`);
+    
+    if (answers && answers.length > 0) {
+      let correctSelections = 0;
+      let incorrectSelections = 0;
+      
+      answers.forEach(answer => {
+        const shape = allShapes.find(s => s.id === answer.id);
+        if (shape && shape.correct) {
+          correctSelections++;
+        } else {
+          incorrectSelections++;
+        }
+      });
+      
+      const totalCorrectAvailable = correctShapes.length;
+      traceLog.push(`Partial scoring calculation: ${correctSelections} correct selections out of ${totalCorrectAvailable} available.`);
+      
+      if (incorrectSelections > totalCorrectAvailable) {
+        const extraSelections = incorrectSelections - (totalCorrectAvailable - correctSelections);
+        traceLog.push(`${extraSelections} extra incorrect selection(s) beyond required amount are deducted from score.`);
+      }
+    }
+  } else {
+    traceLog.push(`Score calculated using all-or-nothing scoring.`);
+  }
+
+  const score = getScore(model, session, env);
+  traceLog.push(`Score: ${score}.`);
+
+  return traceLog;
+}
+
+export function outcome(config, session, env = {}) {
+  return new Promise((resolve) => {
+    log('outcome...');
+
+    if (!session || isEmpty(session)) {
+      resolve({ 
+        score: 0, 
+        empty: true, 
+        traceLog: ['No hotspots selected. Score: 0.'] 
+      });
+    } 
+
+    if (session.answers) {
+      const traceLog = getLogTrace(config, session, env);
+      const score = getScore(config, session, env);
+
+      resolve({ score, empty: false, traceLog });
+    } else {
+      resolve({ 
+        score: 0, 
+        empty: true, 
+        traceLog: ['No hotspots selected. Score: 0.'] 
+      });
+    }
+  });
+}
+
+const returnShapesCorrect = (shapes) => {
+  let answers = [];
+
+  shapes.forEach((i) => {
+    const { correct, id } = i;
+    if (correct) {
+      answers.push({ id });
+    }
+  });
+  return answers;
+};
+
+export const createCorrectResponseSession = (question, env) => {
+  return new Promise((resolve) => {
+    if (env.mode !== 'evaluate' && env.role === 'instructor') {
+      const { shapes: { rectangles = [], circles = [], polygons = {} } = {} } = question;
+
+      const rectangleCorrect = returnShapesCorrect(rectangles);
+      const polygonsCorrect = returnShapesCorrect(polygons);
+      const circlesCorrect = returnShapesCorrect(circles);
+
+      resolve({
+        answers: [...rectangleCorrect, ...polygonsCorrect, ...circlesCorrect],
+        id: '1',
+      });
+    } else {
+      resolve(null);
+    }
+  });
+};
+
+// remove all html tags
+const getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');
+
+// remove all html tags except img, iframe and source tag for audio
+const getContent = (html) => (html || '').replace(/(<(?!img|iframe|source)([^>]+)>)/gi, '');
+
+export const validate = (model = {}, config = {}) => {
+  const { shapes } = model;
+  const { minShapes = 2, maxShapes, maxSelections } = config;
+  const errors = {};
+
+  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {
+    if (config[field]?.required && !getContent(model[field])) {
+      errors[field] = 'This field is required.';
+    }
+  });
+
+  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.shapes = `There should be at least ${minShapes} shapes defined.`;
+  } else if (nbOfShapes > maxShapes) {
+    errors.shapes = `No more than ${maxShapes} shapes should be defined.`;
+  }
+
+  if (nbOfSelections < 1) {
+    errors.selections = 'There should be at least 1 shape selected.';
+  } else if (nbOfSelections > maxSelections) {
+    errors.selections = `No more than ${maxSelections} shapes should be selected.`;
+  }
+
+  return errors;
+};

package/controller/src/utils.js

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