@pie-element/image-cloze-association 3.5.0 → 3.5.1-beta.587

package/lib/root.js

@@ -31,6 +31,16 @@ var _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 
 var _drag = require("@pie-lib/drag");
 
+var _reactTransitionGroup = require("react-transition-group");
+
+var _icons = require("@pie-lib/icons");
+
+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"));
@@ -39,17 +49,15 @@ var _possibleResponses2 = _interopRequireDefault(require("./possible-responses")
 
 var _utilsCorrectness = require("./utils-correctness");
 
-var _renderUi = require("@pie-lib/render-ui");
-
 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);
@@ -98,8 +106,17 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           return b.containerIndex !== responseContainerIndex;
         });
         var shiftedItem = answersInThisContainer[0];
-        answersInThisContainer.shift(); // FIFO
-        // if duplicates are not allowed, make sure to put the shifted value back in possible responses
+
+        if (maxResponsePerZone === 1) {
+          answersInThisContainer.shift(); // FIFO
+        } else {
+          _this.setState({
+            maxResponsePerZoneWarning: true
+          });
+
+          return;
+        } // if duplicates are not allowed, make sure to put the shifted value back in possible responses
+
 
         if (!duplicateResponses) {
           possibleResponses.push(_objectSpread(_objectSpread({}, shiftedItem), {}, {
@@ -127,11 +144,11 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         } : {})]);
       } else {
         // answers will be:
-        // + if duplicatesAllowed, all the other answers
+        // + if duplicatesAllowed, all the other answers, except the one that was dragged
         //   else: all the answers that are not having the same value
         // + new answer
         answersToStore = [].concat((0, _toConsumableArray2["default"])(answers.filter(function (a) {
-          return duplicateResponses ? true : a.value !== answer.value;
+          return duplicateResponses ? a.id !== answer.id : a.value !== answer.value;
         })), [_objectSpread(_objectSpread({}, answer), {}, {
           containerIndex: responseContainerIndex
         }, duplicateResponses ? {
@@ -140,6 +157,7 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
       }
 
       _this.setState({
+        maxResponsePerZoneWarning: false,
         answers: answersToStore,
         possibleResponses: // for single response per container remove answer from possible responses
         duplicateResponses ? possibleResponses : possibleResponses.filter(function (response) {
@@ -162,6 +180,7 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
       var shouldNotPushInPossibleResponses = answer.containerIndex === undefined; // don't duplicate possible responses
 
       _this.setState({
+        maxResponsePerZoneWarning: false,
         answers: answersToStore,
         // push back into possible responses the removed answer if responses cannot be duplicated
         possibleResponses: duplicateResponses || shouldNotPushInPossibleResponses ? possibleResponses : [].concat((0, _toConsumableArray2["default"])(possibleResponses), [_objectSpread(_objectSpread({}, answer), {}, {
@@ -171,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,
@@ -221,7 +245,8 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           id: "".concat(index)
         });
       }),
-      maxResponsePerZone: _maxResponsePerZone || 1
+      maxResponsePerZone: _maxResponsePerZone || 1,
+      showCorrect: false
     };
     return _this;
   }
@@ -236,27 +261,76 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
           stimulus = _this$props$model.stimulus,
           responseCorrect = _this$props$model.responseCorrect,
           validation = _this$props$model.validation,
-          teacherInstructions = _this$props$model.teacherInstructions;
+          teacherInstructions = _this$props$model.teacherInstructions,
+          prompt = _this$props$model.prompt,
+          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;
+          responseContainers = _this$state3.responseContainers,
+          maxResponsePerZone = _this$state3.maxResponsePerZone,
+          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;
-      return /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+
+      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
+      }), teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           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,
@@ -267,7 +341,10 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
         onAnswerSelect: this.handleOnAnswerSelect,
         onDragAnswerBegin: this.beginDrag,
         onDragAnswerEnd: this.handleOnDragEnd,
-        responseContainers: responseContainers
+        responseContainers: responseContainers,
+        showDashedBorder: showDashedBorder
+      }), maxResponsePerZoneWarning && /*#__PURE__*/_react["default"].createElement(WarningInfo, {
+        message: warningMessage
       }), /*#__PURE__*/_react["default"].createElement(_possibleResponses2["default"], {
         canDrag: !disabled,
         data: possibleResponses,
@@ -280,6 +357,50 @@ var ImageClozeAssociationComponent = /*#__PURE__*/function (_React$Component) {
   return ImageClozeAssociationComponent;
 }(_react["default"].Component);
 
+var WarningInfo = (0, _styles.withStyles)({
+  warning: {
+    margin: '0 16px',
+    backgroundColor: '#dddddd',
+    padding: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    width: 'fit-content',
+    '& svg': {
+      height: '30px'
+    },
+    '& h1': {
+      padding: '0px',
+      margin: '0px'
+    }
+  },
+  message: {
+    paddingLeft: '5px',
+    userSelect: 'none'
+  }
+})(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",
+    timeout: 300
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    key: "panel",
+    className: classes.warning
+  }, /*#__PURE__*/_react["default"].createElement(_icons.ShowRationale, {
+    iconSet: "emoji",
+    shape: "square"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.message,
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }))));
+});
+WarningInfo.propTypes = {
+  message: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired
+};
 ImageClozeAssociationComponent.propTypes = {
   classes: _propTypes["default"].object,
   model: _propTypes["default"].object.isRequired,

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","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","answersToShow","hidden","visible","__html","handleOnAnswerSelect","beginDrag","handleOnDragEnd","handleOnAnswerRemove","React","Component","propTypes","classes","PropTypes","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';\n\nimport Image from './image-container';\nimport InteractiveSection from './interactive-section';\nimport PossibleResponses from './possible-responses';\n\nimport { getAnswersCorrectness } from './utils-correctness';\nimport { Collapsible } from '@pie-lib/render-ui';\nimport _ from 'lodash';\n\nconst generateId = () =>\n  Math.random()\n    .toString(36)\n    .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      answersInThisContainer.shift(); // FIFO\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: `${_.max(\n            possibleResponses.map(c => parseInt(c.id)).filter(id => !isNaN(id))\n          ) + 1}`\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\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 ? true : a.value !== answer.value\n        ),\n        {\n          ...answer,\n          containerIndex: responseContainerIndex,\n          ...(duplicateResponses ? { id: generateId() } : {})\n        }\n      ];\n    }\n\n    this.setState({\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      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      }\n    } = this.props;\n    const {\n      answers,\n      draggingElement,\n      possibleResponses,\n      responseContainers\n    } = this.state;\n\n    const answersToShow =\n      responseCorrect !== undefined\n        ? getAnswersCorrectness(answers, validation, duplicateResponses)\n        : answers;\n\n    return (\n      <div>\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          />\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\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 = () => 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: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },\n      session,\n    } = props;\n    let { answers } = session || {};\n    // set id for each possible response\n    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({\n      value: item,\n      id: `${index}`,\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 ? possibleResponsesWithIds : 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 (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {\n      const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);\n      const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);\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: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,\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) => (duplicateResponses ? true : a.value !== answer.value)), // 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) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),\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((response) => response.value !== answer.value),\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 = 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 ? getAnswersCorrectness(answers, validation, duplicateResponses) : 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 show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} />\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 && <WarningInfo message={warningMessage} />}\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        )}\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 className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />\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,24 +5,26 @@ 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) {
     return _objectSpread(_objectSpread({}, answer), {}, {
-      isCorrect: responses[answer.containerIndex].includes(answer.value)
+      isCorrect: (responses[answer.containerIndex].images || []).includes(answer.value)
     });
   });
 };
 
 var getValidAnswer = function getValidAnswer(answer, response) {
-  return response[answer.containerIndex].filter(function (res) {
+  return (response[answer.containerIndex].images || []).filter(function (res) {
     return res === answer.value;
   });
 };
@@ -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","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].includes(answer.value)\n  }));\n\nconst getValidAnswer = (answer, response) => response[answer.containerIndex].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":"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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) =>\n  (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(\n      (answer2) => answer2.value === answer1.value && answer2.containerIndex === answer1.containerIndex,\n    );\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 [\n        ...unanswered,\n        {\n          id: `unanswered-${index}`,\n          value: response.images[0] || '',\n          containerIndex: index,\n          isCorrect: false,\n          hidden: true,\n        },\n      ];\n    }\n\n    return unanswered;\n  }, []);\n\n  return unansweredAnswers;\n};\n\nexport const getAnswersCorrectness = (answers, validation) => {\n  const {\n    validResponse: { value },\n    altResponses,\n  } = 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.5.0",
+  "version": "3.5.1-beta.587+40df32c2f",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -10,16 +10,19 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/drag": "^1.1.50",
-    "@pie-lib/math-rendering": "^2.3.6",
-    "@pie-lib/render-ui": "^4.11.5",
+    "@pie-lib/correct-answer-toggle": "^2.3.62",
+    "@pie-lib/drag": "^2.1.12",
+    "@pie-lib/math-rendering": "^2.5.12",
+    "@pie-lib/render-ui": "^4.14.12",
+    "classnames": "^2.2.6",
+    "is-plain-object": "^5.0.0",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "8f4eaa4018dffb68e135ec9e274688a8ae05d865",
+  "gitHead": "40df32c2f78966706cb168843567c9df174f1d88",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/__tests__/__snapshots__/{image-container-test.jsx.snap → image-container.test.jsx.snap}

@@ -134,3 +134,23 @@ exports[`Image Container snapshots responseContainers renders 1`] = `
   responseContainers={Array []}
 />
 `;
+
+exports[`Image Container snapshots showDashedBorder renders 1`] = `
+<ImageContainer
+  answers={Array []}
+  canDrag={true}
+  classes={
+    Object {
+      "base": "ImageContainer-base-1",
+    }
+  }
+  draggingElement={Object {}}
+  duplicateResponses={false}
+  image={Object {}}
+  onAnswerSelect={[Function]}
+  onDragAnswerBegin={[Function]}
+  onDragAnswerEnd={[Function]}
+  responseContainers={Array []}
+  showDashedBorder={true}
+/>
+`;

package/src/__tests__/__snapshots__/possible-response.test.jsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Possible Response snapshots canDrag renders 1`] = `""`;
+
+exports[`Possible Response snapshots data renders 1`] = `""`;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Root snapshots model renders 1`] = `
+<div>
+  <WithStyles(PreviewPrompt)
+    className="prompt"
+  />
+  <WithStyles(Typography)>
+    <span
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": undefined,
+        }
+      }
+    />
+  </WithStyles(Typography)>
+  <WithStyles(CorrectAnswerToggle)
+    onToggle={[Function]}
+    show={false}
+    toggled={false}
+  />
+  <br />
+  <WithStyles(InteractiveSection)>
+    <WithStyles(ImageContainer)
+      answers={Array []}
+      canDrag={true}
+      draggingElement={
+        Object {
+          "id": "",
+          "value": "",
+        }
+      }
+      duplicateResponses={false}
+      image={Object {}}
+      onAnswerSelect={[Function]}
+      onDragAnswerBegin={[Function]}
+      onDragAnswerEnd={[Function]}
+      responseContainers={Array []}
+      showDashedBorder={true}
+    />
+    <[object Object]
+      canDrag={true}
+      data={Array []}
+      onAnswerRemove={[Function]}
+      onDragBegin={[Function]}
+      onDragEnd={[Function]}
+    />
+  </WithStyles(InteractiveSection)>
+</div>
+`;

package/src/__tests__/{image-container-test.jsx → image-container.test.jsx}

@@ -11,13 +11,13 @@ const container1 = {
   x: 0,
   y: 0,
   height: '0%',
-  width: '0%'
+  width: '0%',
 };
 const container2 = {
   x: 1,
   y: 1,
   height: '1%',
-  width: '1%'
+  width: '1%',
 };
 
 describe('Image Container', () => {
@@ -33,9 +33,9 @@ describe('Image Container', () => {
         onAnswerSelect: () => {},
         onDragAnswerBegin: () => {},
         onDragAnswerEnd: () => {},
-        responseContainers: []
+        responseContainers: [],
       },
-      opts
+      opts,
     );
 
     return shallow(<ImageContainer {...opts} />);
@@ -73,7 +73,7 @@ describe('Image Container', () => {
           src: 'https://picsum.photos/id/102/200/300',
           width: 0,
           scale: false,
-          height: 0
+          height: 0,
         });
         expect(wrapper).toMatchSnapshot();
       });
@@ -85,5 +85,12 @@ describe('Image Container', () => {
         expect(wrapper).toMatchSnapshot();
       });
     });
+
+    describe('showDashedBorder', () => {
+      it('renders', () => {
+        const wrapper = mkWrapper({ showDashedBorder: true });
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
   });
 });