@pie-element/image-cloze-association 3.6.0 → 3.6.3-next.1014

package/lib/possible-response.js

@@ -31,13 +31,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _renderUi = require("@pie-lib/render-ui");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
 
 var _constants = _interopRequireDefault(require("./constants"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var PossibleResponse = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(PossibleResponse, _React$Component);
@@ -89,15 +91,16 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
           data = _this$props2.data;
       var additionalClass = this.getClassname();
       var evaluationStyle = {
-        alignSelf: 'center',
         fontSize: 14,
-        paddingRight: 2
+        position: 'absolute',
+        bottom: '3px',
+        right: '3px'
       };
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.base, " ").concat(additionalClass),
         style: containerStyle
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.span,
+        className: (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]),
         dangerouslySetInnerHTML: {
           __html: data.value
         }
@@ -129,6 +132,7 @@ PossibleResponse.defaultProps = {
 var styles = function styles() {
   return {
     base: {
+      position: 'relative',
       backgroundColor: _renderUi.color.background(),
       border: "1px solid ".concat(_renderUi.color.primary()),
       display: 'flex',
@@ -148,6 +152,9 @@ var styles = function styles() {
     },
     span: {
       backgroundColor: _renderUi.color.background()
+    },
+    hiddenSpan: {
+      visibility: 'hidden'
     }
   };
 };

package/lib/possible-response.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","alignSelf","fontSize","paddingRight","base","span","__html","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","alignItems","justifyContent","minHeight","padding","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n  getClassname = () => {\n    const { classes, data: { isCorrect } } = this.props;\n    let styleProp;\n\n    switch (isCorrect) {\n      case undefined:\n        styleProp = null; break;\n      case true:\n        styleProp = 'baseCorrect'; break;\n      default:\n        styleProp = 'baseIncorrect'; break;\n    }\n    return styleProp ? classes[styleProp] : '';\n  };\n\n  render() {\n    const { classes, connectDragSource, containerStyle, data } = this.props;\n    const additionalClass = this.getClassname();\n    const evaluationStyle = {\n      alignSelf: 'center',\n      fontSize: 14,\n      paddingRight: 2\n    };\n\n    return connectDragSource(\n      <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n        <span className={classes.span} dangerouslySetInnerHTML={{__html: data.value}}/>\n        <EvaluationIcon\n          isCorrect={data.isCorrect}\n          containerStyle={evaluationStyle}\n        />\n      </div>\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {}\n};\n\nconst styles = () => ({\n  base: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content'\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()}`\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()}`\n  },\n  span: {\n    backgroundColor: color.background()\n  }\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const { data, data: { id, value, containerIndex }, onDragBegin } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  }\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(Styled);\n"],"file":"possible-response.js"}
+{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","fontSize","position","bottom","right","base","span","hiddenSpan","hidden","__html","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","alignItems","justifyContent","minHeight","padding","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n  getClassname = () => {\n    const { classes, data: { isCorrect } } = this.props;\n    let styleProp;\n\n    switch (isCorrect) {\n      case undefined:\n        styleProp = null; break;\n      case true:\n        styleProp = 'baseCorrect'; break;\n      default:\n        styleProp = 'baseIncorrect'; break;\n    }\n    return styleProp ? classes[styleProp] : '';\n  };\n\n  render() {\n    const { classes, connectDragSource, containerStyle, data } = this.props;\n    const additionalClass = this.getClassname();\n    const evaluationStyle = {\n      fontSize: 14,\n      position: 'absolute',\n      bottom: '3px',\n      right: '3px'\n    };\n\n    return connectDragSource(\n      <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n        <span\n          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}\n          dangerouslySetInnerHTML={{__html: data.value}}\n        />\n        <EvaluationIcon\n          isCorrect={data.isCorrect}\n          containerStyle={evaluationStyle}\n        />\n      </div>\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {}\n};\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content'\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()}`\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()}`\n  },\n  span: {\n    backgroundColor: color.background()\n  },\n  hiddenSpan: {\n    visibility: 'hidden'\n  }\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const { data, data: { id, value, containerIndex }, onDragBegin } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  }\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(Styled);\n"],"file":"possible-response.js"}

package/lib/root.js

@@ -39,6 +39,8 @@ var _renderUi = require("@pie-lib/render-ui");
 
 var _styles = require("@material-ui/core/styles");
 
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
+
 var _imageContainer = _interopRequireDefault(require("./image-container"));
 
 var _interactiveSection = _interopRequireDefault(require("./interactive-section"));
@@ -49,13 +51,13 @@ var _utilsCorrectness = require("./utils-correctness");
 
 var _lodash = _interopRequireDefault(require("lodash"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var generateId = function generateId() {
   return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
@@ -188,6 +190,11 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
 
       updateAnswer(answersToStore);
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleCorrect", function (showCorrect) {
+      return _this.setState({
+        showCorrect: showCorrect
+      });
+    });
     var _props$model = props.model,
         _possibleResponses = _props$model.possibleResponses,
         responseContainers = _props$model.responseContainers,
@@ -238,7 +245,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           id: "".concat(index)
         });
       }),
-      maxResponsePerZone: _maxResponsePerZone || 1
+      maxResponsePerZone: _maxResponsePerZone || 1,
+      showCorrect: false
     };
     return _this;
   }
@@ -255,16 +263,42 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           validation = _this$props$model.validation,
           teacherInstructions = _this$props$model.teacherInstructions,
           prompt = _this$props$model.prompt,
-          showDashedBorder = _this$props$model.showDashedBorder;
+          showDashedBorder = _this$props$model.showDashedBorder,
+          mode = _this$props$model.mode;
       var _this$state3 = this.state,
           answers = _this$state3.answers,
           draggingElement = _this$state3.draggingElement,
           possibleResponses = _this$state3.possibleResponses,
           responseContainers = _this$state3.responseContainers,
           maxResponsePerZone = _this$state3.maxResponsePerZone,
-          maxResponsePerZoneWarning = _this$state3.maxResponsePerZoneWarning;
+          maxResponsePerZoneWarning = _this$state3.maxResponsePerZoneWarning,
+          showCorrect = _this$state3.showCorrect;
+      var isEvaluateMode = mode === 'evaluate';
+      var showToggle = isEvaluateMode && !responseCorrect;
+
+      var _ref2 = validation || {},
+          validResponse = _ref2.validResponse;
+
+      var correctAnswers = [];
+
+      if (validResponse) {
+        (validResponse.value || []).forEach(function (container, i) {
+          (container.images || []).forEach(function (v) {
+            correctAnswers.push({
+              value: v,
+              containerIndex: i
+            });
+          });
+        });
+      }
+
       var warningMessage = "You\u2019ve reached the limit of ".concat(maxResponsePerZone, " responses per area.") + 'To add another response, one must first be removed.';
       var answersToShow = responseCorrect !== undefined ? (0, _utilsCorrectness.getAnswersCorrectness)(answers, validation, duplicateResponses) : answers;
+
+      if (responseCorrect === false && maxResponsePerZone === 1) {
+        answersToShow = [].concat((0, _toConsumableArray2["default"])(answersToShow), (0, _toConsumableArray2["default"])((0, _utilsCorrectness.getUnansweredAnswers)(answersToShow, validation)));
+      }
+
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "prompt",
         prompt: prompt
@@ -273,15 +307,30 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: teacherInstructions
       })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, /*#__PURE__*/_react["default"].createElement("span", {
         dangerouslySetInnerHTML: {
           __html: stimulus
         }
-      })), /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
+      })), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showToggle,
+        toggled: showCorrect,
+        onToggle: this.toggleCorrect
+      }), /*#__PURE__*/_react["default"].createElement("br", null), showCorrect && showToggle ? /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
+        responseCorrect: true
+      }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
+        canDrag: false,
+        answers: correctAnswers,
+        draggingElement: draggingElement,
+        duplicateResponses: duplicateResponses,
+        image: image,
+        onAnswerSelect: this.handleOnAnswerSelect,
+        onDragAnswerBegin: this.beginDrag,
+        onDragAnswerEnd: this.handleOnDragEnd,
+        responseContainers: responseContainers,
+        showDashedBorder: showDashedBorder
+      })) : /*#__PURE__*/_react["default"].createElement(_interactiveSection["default"], {
         responseCorrect: responseCorrect
       }, /*#__PURE__*/_react["default"].createElement(_imageContainer["default"], {
         canDrag: !disabled,
@@ -328,9 +377,9 @@ var WarningInfo = (0, _styles.withStyles)({
     paddingLeft: '5px',
     userSelect: 'none'
   }
-})(function (_ref2) {
-  var classes = _ref2.classes,
-      message = _ref2.message;
+})(function (_ref3) {
+  var classes = _ref3.classes,
+      message = _ref3.message;
   return /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, null, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
     classNames: 'fb',
     key: "fb",

package/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","disabled","image","stimulus","responseCorrect","validation","teacherInstructions","prompt","showDashedBorder","warningMessage","answersToShow","hidden","visible","__html","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","backgroundColor","padding","display","alignItems","width","height","message","paddingLeft","userSelect","classes","propTypes","PropTypes","string","object","isRequired","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withDragContext } from '@pie-lib/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/icons';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () =>\n  Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: {\n        possibleResponses,\n        responseContainers,\n        duplicateResponses,\n        maxResponsePerZone,\n      },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map(\n      (item, index) => ({\n        value: item,\n        id: `${index}`,\n      })\n    );\n\n    answers = _(answers || [])\n      .groupBy('containerIndex')\n      // keep only last maxResponsePerZone answers for each zone\n      .map((grp) => grp.slice(-(maxResponsePerZone || 1)))\n      .flatMap()\n      // set id for each answer\n      .map((answer, index) => ({ ...answer, id: `${index}` }))\n      // return only answer which have a valid container index\n      .filter((answer) => answer.containerIndex < responseContainers.length)\n      .value();\n\n    const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n      (response) => !answers.find((answer) => answer.value === response.value)\n    );\n    this.state = {\n      answers: answers || [],\n      draggingElement: { id: '', value: '' },\n      possibleResponses: duplicateResponses\n        ? possibleResponsesWithIds\n        : possibleResponsesFiltered,\n      // set id for each response containers\n      responseContainers: responseContainers.map((item, index) => ({\n        index,\n        ...item,\n        id: `${index}`,\n      })),\n      maxResponsePerZone: maxResponsePerZone || 1,\n    };\n  }\n\n  beginDrag = (draggingElement) => {\n    this.setState({\n      draggingElement,\n    });\n  };\n\n  handleOnDragEnd = () => {\n    this.setState({\n      draggingElement: { id: '', value: '' },\n    });\n  };\n\n  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (\n      maxResponsePerZone ===\n      answers.filter((a) => a.containerIndex === responseContainerIndex).length\n    ) {\n      const answersInThisContainer = answers.filter(\n        (a) => a.containerIndex === responseContainerIndex\n      );\n      const answersInOtherContainers = answers.filter(\n        (b) => b.containerIndex !== responseContainerIndex\n      );\n\n      const shiftedItem = answersInThisContainer[0];\n      if (maxResponsePerZone === 1) {\n        answersInThisContainer.shift(); // FIFO\n      } else {\n        this.setState({ maxResponsePerZoneWarning: true });\n        return;\n      }\n\n      // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n      if (!duplicateResponses) {\n        possibleResponses.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${\n            _.max(\n              possibleResponses\n                .map((c) => parseInt(c.id))\n                .filter((id) => !isNaN(id))\n            ) + 1\n          }`,\n        });\n      }\n\n      // answers will be:\n      // + shifted answers for the current container\n      // + if duplicatesAllowed, all the other answers from other containers\n      //   else: all the answers from other containers that are not having the same value\n      // + new answer\n      answersToStore = [\n        ...answersInThisContainer, // shifted\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answersInOtherContainers.filter((a) =>\n          duplicateResponses ? true : a.value !== answer.value\n        ), // un-shifted\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    } else {\n      // answers will be:\n      // + if duplicatesAllowed, all the other answers, except the one that was dragged\n      //   else: all the answers that are not having the same value\n      // + new answer\n      answersToStore = [\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answers.filter((a) =>\n          duplicateResponses ? a.id !== answer.id : a.value !== answer.value\n        ),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    }\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      possibleResponses:\n        // for single response per container remove answer from possible responses\n        duplicateResponses\n          ? possibleResponses\n          : possibleResponses.filter(\n              (response) => response.value !== answer.value\n            ),\n    });\n    updateAnswer(answersToStore);\n  };\n\n  handleOnAnswerRemove = (answer) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses } = this.state;\n    const answersToStore = answers.filter((a) => a.id !== answer.id);\n    const shouldNotPushInPossibleResponses =\n      answer.containerIndex === undefined; // don't duplicate possible responses\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      // push back into possible responses the removed answer if responses cannot be duplicated\n      possibleResponses:\n        duplicateResponses || shouldNotPushInPossibleResponses\n          ? possibleResponses\n          : [\n              ...possibleResponses,\n              {\n                ...answer,\n                containerIndex: undefined,\n              },\n            ],\n    });\n    updateAnswer(answersToStore);\n  };\n\n  render() {\n    const {\n      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n      },\n    } = this.props;\n    const {\n      answers,\n      draggingElement,\n      possibleResponses,\n      responseContainers,\n      maxResponsePerZone,\n      maxResponsePerZoneWarning,\n    } = this.state;\n\n    const warningMessage =\n      `You’ve reached the limit of ${maxResponsePerZone} responses per area.` +\n      'To add another response, one must first be removed.';\n\n    const answersToShow =\n      responseCorrect !== undefined\n        ? getAnswersCorrectness(answers, validation, duplicateResponses)\n        : answers;\n\n    return (\n      <div>\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        {teacherInstructions && (\n          <Collapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />\n          </Collapsible>\n        )}\n\n        <Typography>\n          <span dangerouslySetInnerHTML={{ __html: stimulus }} />\n        </Typography>\n\n        <InteractiveSection responseCorrect={responseCorrect}>\n          <Image\n            canDrag={!disabled}\n            answers={answersToShow}\n            draggingElement={draggingElement}\n            duplicateResponses={duplicateResponses}\n            image={image}\n            onAnswerSelect={this.handleOnAnswerSelect}\n            onDragAnswerBegin={this.beginDrag}\n            onDragAnswerEnd={this.handleOnDragEnd}\n            responseContainers={responseContainers}\n            showDashedBorder={showDashedBorder}\n          />\n\n          {maxResponsePerZoneWarning && (\n            <WarningInfo message={warningMessage} />\n          )}\n\n          <PossibleResponses\n            canDrag={!disabled}\n            data={possibleResponses}\n            onAnswerRemove={this.handleOnAnswerRemove}\n            onDragBegin={this.beginDrag}\n            onDragEnd={this.handleOnDragEnd}\n          />\n        </InteractiveSection>\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles({\n  warning: {\n    margin: '0 16px',\n    backgroundColor: '#dddddd',\n    padding: '10px',\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    '& svg': {\n      height: '30px',\n    },\n    '& h1': {\n      padding: '0px',\n      margin: '0px',\n    },\n  },\n  message: {\n    paddingLeft: '5px',\n    userSelect: 'none',\n  },\n})(({ classes, message }) => (\n  <TransitionGroup>\n    <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n      <div key=\"panel\" className={classes.warning}>\n        <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n        <span\n          className={classes.message}\n          dangerouslySetInnerHTML={{ __html: message }}\n        />\n      </div>\n    </CSSTransition>\n  </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n  message: PropTypes.string,\n  classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  session: PropTypes.object,\n  updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n  classes: {},\n};\n\nexport default withDragContext(ImageClozeAssociationComponent);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","ImageClozeAssociationComponent","props","draggingElement","setState","id","value","answer","responseContainerIndex","duplicateResponses","model","updateAnswer","state","answers","possibleResponses","maxResponsePerZone","answersToStore","filter","a","containerIndex","length","answersInThisContainer","answersInOtherContainers","b","shiftedItem","shift","maxResponsePerZoneWarning","push","_","max","map","c","parseInt","isNaN","response","shouldNotPushInPossibleResponses","undefined","showCorrect","responseContainers","session","possibleResponsesWithIds","item","index","groupBy","grp","slice","flatMap","possibleResponsesFiltered","find","disabled","image","stimulus","responseCorrect","validation","teacherInstructions","prompt","showDashedBorder","mode","isEvaluateMode","showToggle","validResponse","correctAnswers","forEach","container","i","images","v","warningMessage","answersToShow","hidden","visible","__html","toggleCorrect","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","WarningInfo","warning","margin","backgroundColor","padding","display","alignItems","width","height","message","paddingLeft","userSelect","classes","propTypes","PropTypes","string","object","isRequired","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { withDragContext } from '@pie-lib/drag';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ShowRationale } from '@pie-lib/icons';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\n\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\nimport { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';\nimport _ from 'lodash';\n\nconst generateId = () =>\n  Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nclass ImageClozeAssociationComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    const {\n      model: {\n        possibleResponses,\n        responseContainers,\n        duplicateResponses,\n        maxResponsePerZone,\n      },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map(\n      (item, index) => ({\n        value: item,\n        id: `${index}`,\n      })\n    );\n\n    answers = _(answers || [])\n      .groupBy('containerIndex')\n      // keep only last maxResponsePerZone answers for each zone\n      .map((grp) => grp.slice(-(maxResponsePerZone || 1)))\n      .flatMap()\n      // set id for each answer\n      .map((answer, index) => ({ ...answer, id: `${index}` }))\n      // return only answer which have a valid container index\n      .filter((answer) => answer.containerIndex < responseContainers.length)\n      .value();\n\n    const possibleResponsesFiltered = possibleResponsesWithIds.filter(\n      (response) => !answers.find((answer) => answer.value === response.value)\n    );\n    this.state = {\n      answers: answers || [],\n      draggingElement: { id: '', value: '' },\n      possibleResponses: duplicateResponses\n        ? possibleResponsesWithIds\n        : possibleResponsesFiltered,\n      // set id for each response containers\n      responseContainers: responseContainers.map((item, index) => ({\n        index,\n        ...item,\n        id: `${index}`,\n      })),\n      maxResponsePerZone: maxResponsePerZone || 1,\n      showCorrect: false\n    };\n  }\n\n  beginDrag = (draggingElement) => {\n    this.setState({\n      draggingElement,\n    });\n  };\n\n  handleOnDragEnd = () => {\n    this.setState({\n      draggingElement: { id: '', value: '' },\n    });\n  };\n\n  handleOnAnswerSelect = (answer, responseContainerIndex) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses, maxResponsePerZone } = this.state;\n    let answersToStore;\n\n    if (\n      maxResponsePerZone ===\n      answers.filter((a) => a.containerIndex === responseContainerIndex).length\n    ) {\n      const answersInThisContainer = answers.filter(\n        (a) => a.containerIndex === responseContainerIndex\n      );\n      const answersInOtherContainers = answers.filter(\n        (b) => b.containerIndex !== responseContainerIndex\n      );\n\n      const shiftedItem = answersInThisContainer[0];\n      if (maxResponsePerZone === 1) {\n        answersInThisContainer.shift(); // FIFO\n      } else {\n        this.setState({ maxResponsePerZoneWarning: true });\n        return;\n      }\n\n      // if duplicates are not allowed, make sure to put the shifted value back in possible responses\n      if (!duplicateResponses) {\n        possibleResponses.push({\n          ...shiftedItem,\n          containerIndex: '',\n          id: `${\n            _.max(\n              possibleResponses\n                .map((c) => parseInt(c.id))\n                .filter((id) => !isNaN(id))\n            ) + 1\n          }`,\n        });\n      }\n\n      // answers will be:\n      // + shifted answers for the current container\n      // + if duplicatesAllowed, all the other answers from other containers\n      //   else: all the answers from other containers that are not having the same value\n      // + new answer\n      answersToStore = [\n        ...answersInThisContainer, // shifted\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answersInOtherContainers.filter((a) =>\n          duplicateResponses ? true : a.value !== answer.value\n        ), // un-shifted\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    } else {\n      // answers will be:\n      // + if duplicatesAllowed, all the other answers, except the one that was dragged\n      //   else: all the answers that are not having the same value\n      // + new answer\n      answersToStore = [\n        // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?\n        // if yes, this should do it: add a.id !== answer.id instead of 'true'\n        ...answers.filter((a) =>\n          duplicateResponses ? a.id !== answer.id : a.value !== answer.value\n        ),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {}),\n        },\n      ];\n    }\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      possibleResponses:\n        // for single response per container remove answer from possible responses\n        duplicateResponses\n          ? possibleResponses\n          : possibleResponses.filter(\n              (response) => response.value !== answer.value\n            ),\n    });\n    updateAnswer(answersToStore);\n  };\n\n  handleOnAnswerRemove = (answer) => {\n    const {\n      model: { duplicateResponses },\n      updateAnswer,\n    } = this.props;\n    const { answers, possibleResponses } = this.state;\n    const answersToStore = answers.filter((a) => a.id !== answer.id);\n    const shouldNotPushInPossibleResponses =\n      answer.containerIndex === undefined; // don't duplicate possible responses\n\n    this.setState({\n      maxResponsePerZoneWarning: false,\n      answers: answersToStore,\n      // push back into possible responses the removed answer if responses cannot be duplicated\n      possibleResponses:\n        duplicateResponses || shouldNotPushInPossibleResponses\n          ? possibleResponses\n          : [\n              ...possibleResponses,\n              {\n                ...answer,\n                containerIndex: undefined,\n              },\n            ],\n    });\n    updateAnswer(answersToStore);\n  };\n\n  toggleCorrect = showCorrect => this.setState({ showCorrect });\n\n  render() {\n    const {\n      model: {\n        disabled,\n        duplicateResponses,\n        image,\n        stimulus,\n        responseCorrect,\n        validation,\n        teacherInstructions,\n        prompt,\n        showDashedBorder,\n        mode,\n      },\n    } = this.props;\n    const {\n      answers,\n      draggingElement,\n      possibleResponses,\n      responseContainers,\n      maxResponsePerZone,\n      maxResponsePerZoneWarning,\n      showCorrect\n    } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showToggle = isEvaluateMode && !responseCorrect;\n\n    const { validResponse } = validation || {};\n    const correctAnswers = [];\n\n    if (validResponse) {\n      (validResponse.value || []).forEach((container, i) => {\n        (container.images || []).forEach(v => {\n          correctAnswers.push({\n            value: v,\n            containerIndex: i\n          });\n        });\n      });\n    }\n\n    const warningMessage =\n      `You’ve reached the limit of ${maxResponsePerZone} responses per area.` +\n      'To add another response, one must first be removed.';\n\n    let answersToShow =\n      responseCorrect !== undefined\n        ? getAnswersCorrectness(answers, validation, duplicateResponses)\n        : answers;\n\n    if (responseCorrect === false && maxResponsePerZone === 1) {\n      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];\n    }\n\n    return (\n      <div>\n        <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n        {teacherInstructions && (\n          <Collapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <Typography>\n          <span dangerouslySetInnerHTML={{ __html: stimulus }} />\n        </Typography>\n\n        <CorrectAnswerToggle\n          show={showToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleCorrect}\n        />\n        <br/>\n\n        {(showCorrect && showToggle) ? (\n          <InteractiveSection responseCorrect={true}>\n            <Image\n              canDrag={false}\n              answers={correctAnswers}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n          </InteractiveSection>\n        ) : (\n          <InteractiveSection responseCorrect={responseCorrect}>\n            <Image\n              canDrag={!disabled}\n              answers={answersToShow}\n              draggingElement={draggingElement}\n              duplicateResponses={duplicateResponses}\n              image={image}\n              onAnswerSelect={this.handleOnAnswerSelect}\n              onDragAnswerBegin={this.beginDrag}\n              onDragAnswerEnd={this.handleOnDragEnd}\n              responseContainers={responseContainers}\n              showDashedBorder={showDashedBorder}\n            />\n\n            {maxResponsePerZoneWarning && (\n              <WarningInfo message={warningMessage}/>\n            )}\n\n            <PossibleResponses\n              canDrag={!disabled}\n              data={possibleResponses}\n              onAnswerRemove={this.handleOnAnswerRemove}\n              onDragBegin={this.beginDrag}\n              onDragEnd={this.handleOnDragEnd}\n            />\n          </InteractiveSection>)}\n      </div>\n    );\n  }\n}\n\nconst WarningInfo = withStyles({\n  warning: {\n    margin: '0 16px',\n    backgroundColor: '#dddddd',\n    padding: '10px',\n    display: 'flex',\n    alignItems: 'center',\n    width: 'fit-content',\n    '& svg': {\n      height: '30px',\n    },\n    '& h1': {\n      padding: '0px',\n      margin: '0px',\n    },\n  },\n  message: {\n    paddingLeft: '5px',\n    userSelect: 'none',\n  },\n})(({ classes, message }) => (\n  <TransitionGroup>\n    <CSSTransition classNames={'fb'} key=\"fb\" timeout={300}>\n      <div key=\"panel\" className={classes.warning}>\n        <ShowRationale iconSet=\"emoji\" shape=\"square\" />\n        <span\n          className={classes.message}\n          dangerouslySetInnerHTML={{ __html: message }}\n        />\n      </div>\n    </CSSTransition>\n  </TransitionGroup>\n));\n\nWarningInfo.propTypes = {\n  message: PropTypes.string,\n  classes: PropTypes.object.isRequired,\n};\n\nImageClozeAssociationComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  session: PropTypes.object,\n  updateAnswer: PropTypes.func.isRequired,\n};\n\nImageClozeAssociationComponent.defaultProps = {\n  classes: {},\n};\n\nexport default withDragContext(ImageClozeAssociationComponent);\n"],"file":"root.js"}

package/lib/utils-correctness.js

@@ -5,13 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAnswersCorrectness = void 0;
+exports.getUnansweredAnswers = exports.getAnswersCorrectness = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getAllCorrectAnswers = function getAllCorrectAnswers(answers, responses) {
   return answers.map(function (answer) {
@@ -55,6 +57,32 @@ var getUniqueCorrectAnswers = function getUniqueCorrectAnswers(answers, validRes
   return finalAnswers;
 };
 
+var getUnansweredAnswers = function getUnansweredAnswers(answers, validation) {
+  var _validation$validResp = validation.validResponse;
+  _validation$validResp = _validation$validResp === void 0 ? {} : _validation$validResp;
+  var value = _validation$validResp.value;
+  var unansweredAnswers = (value || []).reduce(function (unanswered, response, index) {
+    var isAnswered = !!answers.find(function (answer) {
+      return answer.containerIndex === index;
+    });
+
+    if (!isAnswered) {
+      return [].concat((0, _toConsumableArray2["default"])(unanswered), [{
+        id: "unanswered-".concat(index),
+        value: response.images[0] || '',
+        containerIndex: index,
+        isCorrect: false,
+        hidden: true
+      }]);
+    }
+
+    return unanswered;
+  }, []);
+  return unansweredAnswers;
+};
+
+exports.getUnansweredAnswers = getUnansweredAnswers;
+
 var getAnswersCorrectness = function getAnswersCorrectness(answers, validation) {
   var value = validation.validResponse.value,
       altResponses = validation.altResponses;

package/lib/utils-correctness.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils-correctness.js"],"names":["getAllCorrectAnswers","answers","responses","map","answer","isCorrect","containerIndex","images","includes","value","getValidAnswer","response","filter","res","getUniqueCorrectAnswers","validResponses","finalAnswers","forEach","answer1","valuesToParse","answer2","length","shift","index","finalAnswer","id","valid","getAnswersCorrectness","validation","validResponse","altResponses","allCorrect","uniqueAnswers","noOfCorrect","altUniqueStack","altResponse","altValue","altAllCorrect","sort","a","b","c"],"mappings":"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","sourcesContent":["const getAllCorrectAnswers = (answers, responses) =>\n  answers.map(answer => ({\n    ...answer,\n    isCorrect: (responses[answer.containerIndex].images || []).includes(answer.value)\n  }));\n\nconst getValidAnswer = (answer, response) => (response[answer.containerIndex].images || []).filter(res => res === answer.value);\n\nconst getUniqueCorrectAnswers = (answers, validResponses) => {\n  let finalAnswers = answers;\n\n  answers.forEach((answer1) => {\n    const valuesToParse = answers.filter(answer2 =>\n      (answer2.value === answer1.value) && (answer2.containerIndex === answer1.containerIndex));\n\n    if (valuesToParse.length > 1) {\n      // point only to duplicates but first\n      valuesToParse.shift();\n      // mark duplicates as incorrect\n      valuesToParse.forEach((value, index) => {\n        finalAnswers = finalAnswers.map(finalAnswer => {\n          if (finalAnswer.id === value.id) {\n            let valid = getValidAnswer(finalAnswer, validResponses);\n\n            return {\n              ...finalAnswer,\n              isCorrect: valid.length > index + 1\n            }\n          }\n          return finalAnswer;\n        })\n      });\n    }\n  });\n  return finalAnswers;\n};\n\nexport const getAnswersCorrectness = (answers, validation) => {\n  const { validResponse: { value }, altResponses } = validation;\n\n  const allCorrect = getAllCorrectAnswers(answers, value);\n  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);\n  const noOfCorrect = uniqueAnswers.filter(answer => answer.isCorrect).length;\n\n  // Look for alternate correct responses if there are incorrect responses.\n  if ((noOfCorrect < uniqueAnswers.length) && (altResponses && altResponses.length)) {\n    const altUniqueStack = altResponses.map(altResponse => {\n      const altValue = altResponse.value;\n\n      const altAllCorrect = getAllCorrectAnswers(answers, altValue);\n      return getUniqueCorrectAnswers(altAllCorrect, altValue);\n    });\n    // Return the one with most correct answers.\n    return altUniqueStack.sort((a, b) => b.filter(c => c.isCorrect).length - a.filter(c => c.isCorrect).length)[0];\n  }\n  return uniqueAnswers;\n};\n"],"file":"utils-correctness.js"}
+{"version":3,"sources":["../src/utils-correctness.js"],"names":["getAllCorrectAnswers","answers","responses","map","answer","isCorrect","containerIndex","images","includes","value","getValidAnswer","response","filter","res","getUniqueCorrectAnswers","validResponses","finalAnswers","forEach","answer1","valuesToParse","answer2","length","shift","index","finalAnswer","id","valid","getUnansweredAnswers","validation","validResponse","unansweredAnswers","reduce","unanswered","isAnswered","find","hidden","getAnswersCorrectness","altResponses","allCorrect","uniqueAnswers","noOfCorrect","altUniqueStack","altResponse","altValue","altAllCorrect","sort","a","b","c"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACC,OAAD,EAAUC,SAAV;AAAA,SAC3BD,OAAO,CAACE,GAAR,CAAY,UAAAC,MAAM;AAAA,2CACbA,MADa;AAEhBC,MAAAA,SAAS,EAAE,CAACH,SAAS,CAACE,MAAM,CAACE,cAAR,CAAT,CAAiCC,MAAjC,IAA2C,EAA5C,EAAgDC,QAAhD,CAAyDJ,MAAM,CAACK,KAAhE;AAFK;AAAA,GAAlB,CAD2B;AAAA,CAA7B;;AAMA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACN,MAAD,EAASO,QAAT;AAAA,SAAsB,CAACA,QAAQ,CAACP,MAAM,CAACE,cAAR,CAAR,CAAgCC,MAAhC,IAA0C,EAA3C,EAA+CK,MAA/C,CAAsD,UAAAC,GAAG;AAAA,WAAIA,GAAG,KAAKT,MAAM,CAACK,KAAnB;AAAA,GAAzD,CAAtB;AAAA,CAAvB;;AAEA,IAAMK,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACb,OAAD,EAAUc,cAAV,EAA6B;AAC3D,MAAIC,YAAY,GAAGf,OAAnB;AAEAA,EAAAA,OAAO,CAACgB,OAAR,CAAgB,UAACC,OAAD,EAAa;AAC3B,QAAMC,aAAa,GAAGlB,OAAO,CAACW,MAAR,CAAe,UAAAQ,OAAO;AAAA,aACzCA,OAAO,CAACX,KAAR,KAAkBS,OAAO,CAACT,KAA3B,IAAsCW,OAAO,CAACd,cAAR,KAA2BY,OAAO,CAACZ,cAD/B;AAAA,KAAtB,CAAtB;;AAGA,QAAIa,aAAa,CAACE,MAAd,GAAuB,CAA3B,EAA8B;AAC5B;AACAF,MAAAA,aAAa,CAACG,KAAd,GAF4B,CAG5B;;AACAH,MAAAA,aAAa,CAACF,OAAd,CAAsB,UAACR,KAAD,EAAQc,KAAR,EAAkB;AACtCP,QAAAA,YAAY,GAAGA,YAAY,CAACb,GAAb,CAAiB,UAAAqB,WAAW,EAAI;AAC7C,cAAIA,WAAW,CAACC,EAAZ,KAAmBhB,KAAK,CAACgB,EAA7B,EAAiC;AAC/B,gBAAIC,KAAK,GAAGhB,cAAc,CAACc,WAAD,EAAcT,cAAd,CAA1B;AAEA,mDACKS,WADL;AAEEnB,cAAAA,SAAS,EAAEqB,KAAK,CAACL,MAAN,GAAeE,KAAK,GAAG;AAFpC;AAID;;AACD,iBAAOC,WAAP;AACD,SAVc,CAAf;AAWD,OAZD;AAaD;AACF,GAtBD;AAuBA,SAAOR,YAAP;AACD,CA3BD;;AA6BO,IAAMW,oBAAoB,GAAG,SAAvBA,oBAAuB,CAAC1B,OAAD,EAAU2B,UAAV,EAAyB;AAC3D,8BAAyCA,UAAzC,CAAQC,aAAR;AAAA,6DAAmC,EAAnC;AAAA,MAAyBpB,KAAzB,yBAAyBA,KAAzB;AAEA,MAAMqB,iBAAiB,GAAG,CAACrB,KAAK,IAAI,EAAV,EAAcsB,MAAd,CAAqB,UAACC,UAAD,EAAarB,QAAb,EAAuBY,KAAvB,EAAiC;AAC9E,QAAMU,UAAU,GAAG,CAAC,CAAChC,OAAO,CAACiC,IAAR,CAAa,UAAA9B,MAAM;AAAA,aAAIA,MAAM,CAACE,cAAP,KAA0BiB,KAA9B;AAAA,KAAnB,CAArB;;AAEA,QAAI,CAACU,UAAL,EAAiB;AACf,2DAAWD,UAAX,IAAuB;AACrBP,QAAAA,EAAE,uBAAgBF,KAAhB,CADmB;AAErBd,QAAAA,KAAK,EAAEE,QAAQ,CAACJ,MAAT,CAAgB,CAAhB,KAAsB,EAFR;AAGrBD,QAAAA,cAAc,EAAEiB,KAHK;AAIrBlB,QAAAA,SAAS,EAAE,KAJU;AAKrB8B,QAAAA,MAAM,EAAE;AALa,OAAvB;AAOD;;AAED,WAAOH,UAAP;AACD,GAdyB,EAcvB,EAduB,CAA1B;AAgBA,SAAOF,iBAAP;AACD,CApBM;;;;AAsBA,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACnC,OAAD,EAAU2B,UAAV,EAAyB;AAC5D,MAAyBnB,KAAzB,GAAmDmB,UAAnD,CAAQC,aAAR,CAAyBpB,KAAzB;AAAA,MAAkC4B,YAAlC,GAAmDT,UAAnD,CAAkCS,YAAlC;AAEA,MAAMC,UAAU,GAAGtC,oBAAoB,CAACC,OAAD,EAAUQ,KAAV,CAAvC;AACA,MAAM8B,aAAa,GAAGzB,uBAAuB,CAACwB,UAAD,EAAa7B,KAAb,CAA7C;AACA,MAAM+B,WAAW,GAAGD,aAAa,CAAC3B,MAAd,CAAqB,UAAAR,MAAM;AAAA,WAAIA,MAAM,CAACC,SAAX;AAAA,GAA3B,EAAiDgB,MAArE,CAL4D,CAO5D;;AACA,MAAKmB,WAAW,GAAGD,aAAa,CAAClB,MAA7B,IAAyCgB,YAAY,IAAIA,YAAY,CAAChB,MAA1E,EAAmF;AACjF,QAAMoB,cAAc,GAAGJ,YAAY,CAAClC,GAAb,CAAiB,UAAAuC,WAAW,EAAI;AACrD,UAAMC,QAAQ,GAAGD,WAAW,CAACjC,KAA7B;AAEA,UAAMmC,aAAa,GAAG5C,oBAAoB,CAACC,OAAD,EAAU0C,QAAV,CAA1C;AACA,aAAO7B,uBAAuB,CAAC8B,aAAD,EAAgBD,QAAhB,CAA9B;AACD,KALsB,CAAvB,CADiF,CAOjF;;AACA,WAAOF,cAAc,CAACI,IAAf,CAAoB,UAACC,CAAD,EAAIC,CAAJ;AAAA,aAAUA,CAAC,CAACnC,MAAF,CAAS,UAAAoC,CAAC;AAAA,eAAIA,CAAC,CAAC3C,SAAN;AAAA,OAAV,EAA2BgB,MAA3B,GAAoCyB,CAAC,CAAClC,MAAF,CAAS,UAAAoC,CAAC;AAAA,eAAIA,CAAC,CAAC3C,SAAN;AAAA,OAAV,EAA2BgB,MAAzE;AAAA,KAApB,EAAqG,CAArG,CAAP;AACD;;AACD,SAAOkB,aAAP;AACD,CAnBM","sourcesContent":["const getAllCorrectAnswers = (answers, responses) =>\n  answers.map(answer => ({\n    ...answer,\n    isCorrect: (responses[answer.containerIndex].images || []).includes(answer.value)\n  }));\n\nconst getValidAnswer = (answer, response) => (response[answer.containerIndex].images || []).filter(res => res === answer.value);\n\nconst getUniqueCorrectAnswers = (answers, validResponses) => {\n  let finalAnswers = answers;\n\n  answers.forEach((answer1) => {\n    const valuesToParse = answers.filter(answer2 =>\n      (answer2.value === answer1.value) && (answer2.containerIndex === answer1.containerIndex));\n\n    if (valuesToParse.length > 1) {\n      // point only to duplicates but first\n      valuesToParse.shift();\n      // mark duplicates as incorrect\n      valuesToParse.forEach((value, index) => {\n        finalAnswers = finalAnswers.map(finalAnswer => {\n          if (finalAnswer.id === value.id) {\n            let valid = getValidAnswer(finalAnswer, validResponses);\n\n            return {\n              ...finalAnswer,\n              isCorrect: valid.length > index + 1\n            }\n          }\n          return finalAnswer;\n        })\n      });\n    }\n  });\n  return finalAnswers;\n};\n\nexport const getUnansweredAnswers = (answers, validation) => {\n  const { validResponse: { value } = {}} = validation;\n\n  const unansweredAnswers = (value || []).reduce((unanswered, response, index) => {\n    const isAnswered = !!answers.find(answer => answer.containerIndex === index);\n\n    if (!isAnswered) {\n      return [...unanswered, {\n        id: `unanswered-${index}`,\n        value: response.images[0] || '',\n        containerIndex: index,\n        isCorrect: false,\n        hidden: true\n      }];\n    }\n\n    return unanswered;\n  }, []);\n\n  return unansweredAnswers;\n};\n\nexport const getAnswersCorrectness = (answers, validation) => {\n  const { validResponse: { value }, altResponses } = validation;\n\n  const allCorrect = getAllCorrectAnswers(answers, value);\n  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);\n  const noOfCorrect = uniqueAnswers.filter(answer => answer.isCorrect).length;\n\n  // Look for alternate correct responses if there are incorrect responses.\n  if ((noOfCorrect < uniqueAnswers.length) && (altResponses && altResponses.length)) {\n    const altUniqueStack = altResponses.map(altResponse => {\n      const altValue = altResponse.value;\n\n      const altAllCorrect = getAllCorrectAnswers(answers, altValue);\n      return getUniqueCorrectAnswers(altAllCorrect, altValue);\n    });\n    // Return the one with most correct answers.\n    return altUniqueStack.sort((a, b) => b.filter(c => c.isCorrect).length - a.filter(c => c.isCorrect).length)[0];\n  }\n  return uniqueAnswers;\n};\n"],"file":"utils-correctness.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/image-cloze-association",
-  "version": "3.6.0",
+  "version": "3.6.3-next.1014+b002895e2",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -10,16 +10,18 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/correct-answer-toggle": "^2.3.39",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.3.8",
-    "@pie-lib/render-ui": "^4.11.7",
+    "@pie-lib/math-rendering": "^2.4.3",
+    "@pie-lib/render-ui": "^4.12.9",
+    "classnames": "^2.2.6",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "c8dbb31e012aaa666c88f089238e86992f444986",
+  "gitHead": "b002895e29dec43623f303053f9a2bbefe276040",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -14,6 +14,12 @@ exports[`Root snapshots model renders 1`] = `
       }
     />
   </WithStyles(Typography)>
+  <WithStyles(CorrectAnswerToggle)
+    onToggle={[Function]}
+    show={false}
+    toggled={false}
+  />
+  <br />
   <WithStyles(InteractiveSection)>
     <WithStyles(ImageContainer)
       answers={Array []}

package/src/index.js

@@ -41,6 +41,10 @@ export default class ImageClozeAssociation extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   updateAnswer(data) {
     this._session.answers = data;
 
@@ -62,6 +66,7 @@ export default class ImageClozeAssociation extends HTMLElement {
         session: this._session,
         updateAnswer: this.updateAnswer.bind(this)
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });

package/src/possible-response.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { DragSource } from '@pie-lib/drag';
 import { withStyles } from '@material-ui/core/styles';
 import { color } from '@pie-lib/render-ui';
+import classNames from 'classnames';
 
 import EvaluationIcon from './evaluation-icon';
 import c from './constants';
@@ -27,14 +28,18 @@ export class PossibleResponse extends React.Component {
     const { classes, connectDragSource, containerStyle, data } = this.props;
     const additionalClass = this.getClassname();
     const evaluationStyle = {
-      alignSelf: 'center',
       fontSize: 14,
-      paddingRight: 2
+      position: 'absolute',
+      bottom: '3px',
+      right: '3px'
     };
 
     return connectDragSource(
       <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>
-        <span className={classes.span} dangerouslySetInnerHTML={{__html: data.value}}/>
+        <span
+          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}
+          dangerouslySetInnerHTML={{__html: data.value}}
+        />
         <EvaluationIcon
           isCorrect={data.isCorrect}
           containerStyle={evaluationStyle}
@@ -62,6 +67,7 @@ PossibleResponse.defaultProps = {
 
 const styles = () => ({
   base: {
+    position: 'relative',
     backgroundColor: color.background(),
     border: `1px solid ${color.primary()}`,
     display: 'flex',
@@ -81,6 +87,9 @@ const styles = () => ({
   },
   span: {
     backgroundColor: color.background()
+  },
+  hiddenSpan: {
+    visibility: 'hidden'
   }
 });