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

package/src/possible-response.jsx

@@ -3,22 +3,29 @@ 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';
 
-class PossibleResponse extends React.Component {
+export class PossibleResponse extends React.Component {
   getClassname = () => {
-    const { classes, data: { isCorrect } } = this.props;
+    const {
+      classes,
+      data: { isCorrect },
+    } = this.props;
     let styleProp;
 
     switch (isCorrect) {
       case undefined:
-        styleProp = null; break;
+        styleProp = null;
+        break;
       case true:
-        styleProp = 'baseCorrect'; break;
+        styleProp = 'baseCorrect';
+        break;
       default:
-        styleProp = 'baseIncorrect'; break;
+        styleProp = 'baseIncorrect';
+        break;
     }
     return styleProp ? classes[styleProp] : '';
   };
@@ -27,19 +34,20 @@ 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}}/>
-        <EvaluationIcon
-          isCorrect={data.isCorrect}
-          containerStyle={evaluationStyle}
+        <span
+          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}
+          dangerouslySetInnerHTML={{ __html: data.value }}
         />
-      </div>
+        <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />
+      </div>,
     );
   }
 }
@@ -51,33 +59,41 @@ PossibleResponse.propTypes = {
   containerStyle: PropTypes.object,
   data: PropTypes.object.isRequired,
   onDragBegin: PropTypes.func.isRequired,
-  onDragEnd: PropTypes.func.isRequired
+  onDragEnd: PropTypes.func.isRequired,
 };
 
 PossibleResponse.defaultProps = {
   classes: {},
   connectDragSource: () => {},
-  containerStyle: {}
+  containerStyle: {},
 };
 
 const styles = () => ({
   base: {
+    position: 'relative',
     backgroundColor: color.background(),
     border: `1px solid ${color.primary()}`,
     display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '28px',
+    padding: '0 3px',
     marginLeft: 2,
     marginTop: 2,
-    width: 'fit-content'
+    width: 'fit-content',
   },
   baseCorrect: {
-    border: `2px solid ${color.correct()}`
+    border: `2px solid ${color.correct()}`,
   },
   baseIncorrect: {
-    border: `2px solid ${color.incorrect()}`
+    border: `2px solid ${color.incorrect()}`,
   },
   span: {
-    backgroundColor: color.background()
-  }
+    backgroundColor: color.background(),
+  },
+  hiddenSpan: {
+    visibility: 'hidden',
+  },
 });
 
 const Styled = withStyles(styles)(PossibleResponse);
@@ -88,20 +104,24 @@ const tileSource = {
     return canDrag;
   },
   beginDrag(props) {
-    const { data, data: { id, value, containerIndex }, onDragBegin } = props;
+    const {
+      data,
+      data: { id, value, containerIndex },
+      onDragBegin,
+    } = props;
     onDragBegin(data);
     return {
       id,
       value,
-      containerIndex
+      containerIndex,
     };
   },
   endDrag(props) {
     props.onDragEnd();
-  }
+  },
 };
 
 export default DragSource(c.types.response, tileSource, (connect, monitor) => ({
   connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
+  isDragging: monitor.isDragging(),
 }))(Styled);

package/src/possible-responses.jsx

@@ -1,4 +1,4 @@
-import React  from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { DropTarget } from '@pie-lib/drag';
 import { withStyles } from '@material-ui/core';
@@ -7,21 +7,14 @@ import { color } from '@pie-lib/render-ui';
 import PossibleResponse from './possible-response';
 import c from './constants';
 
-const PossibleResponses = ({
-  canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd
-}) => connectDropTarget(
-  <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>
-    {data.map(item => (
-      <PossibleResponse
-        canDrag={canDrag}
-        key={item.id}
-        data={item}
-        onDragBegin={onDragBegin}
-        onDragEnd={onDragEnd}
-      />
-    ))}
-  </div>
-);
+const PossibleResponses = ({ canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd }) =>
+  connectDropTarget(
+    <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>
+      {data.map((item) => (
+        <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />
+      ))}
+    </div>,
+  );
 
 PossibleResponses.propTypes = {
   canDrag: PropTypes.bool.isRequired,
@@ -29,24 +22,24 @@ PossibleResponses.propTypes = {
   data: PropTypes.array.isRequired,
   onAnswerRemove: PropTypes.func.isRequired,
   onDragBegin: PropTypes.func.isRequired,
-  onDragEnd: PropTypes.func.isRequired
+  onDragEnd: PropTypes.func.isRequired,
 };
 
 PossibleResponses.defaultProps = {
-  classes: {}
+  classes: {},
 };
 
-const styles = theme => ({
+const styles = (theme) => ({
   active: {
-    border: `1px solid ${color.primary()}`
+    border: `1px solid ${color.primary()}`,
   },
   base: {
     backgroundColor: color.background(),
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'center',
-    padding: theme.spacing.unit * 2
-  }
+    padding: theme.spacing.unit * 2,
+  },
 });
 
 const Styled = withStyles(styles)(PossibleResponses);
@@ -58,11 +51,10 @@ const tileSource = {
   drop(props, monitor) {
     const item = monitor.getItem();
     props.onAnswerRemove(item);
-  }
+  },
 };
 
 export default DropTarget(c.types.response, tileSource, (connect, monitor) => ({
   connectDropTarget: connect.dropTarget(),
-  isOverCurrent: monitor.isOver({ shallow: true })
+  isOverCurrent: monitor.isOver({ shallow: true }),
 }))(Styled);
-

package/src/root.jsx

@@ -2,113 +2,101 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
 import { withDragContext } from '@pie-lib/drag';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { ShowRationale } from '@pie-lib/icons';
+import { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 
 import Image from './image-container';
 import InteractiveSection from './interactive-section';
 import PossibleResponses from './possible-responses';
-
-import { getAnswersCorrectness } from './utils-correctness';
-import { Collapsible } from '@pie-lib/render-ui';
+import { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';
 import _ from 'lodash';
 
-const generateId = () =>
-  Math.random()
-    .toString(36)
-    .substring(2) + new Date().getTime().toString(36);
+const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
 
 class ImageClozeAssociationComponent extends React.Component {
   constructor(props) {
     super(props);
     const {
-      model: {
-        possibleResponses,
-        responseContainers,
-        duplicateResponses,
-        maxResponsePerZone
-      },
-      session
+      model: { possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone },
+      session,
     } = props;
     let { answers } = session || {};
     // set id for each possible response
-    const possibleResponsesWithIds = (possibleResponses || []).map(
-      (item, index) => ({
-        value: item,
-        id: `${index}`
-      })
-    );
+    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({
+      value: item,
+      id: `${index}`,
+    }));
 
     answers = _(answers || [])
       .groupBy('containerIndex')
       // keep only last maxResponsePerZone answers for each zone
-      .map(grp => grp.slice(-(maxResponsePerZone || 1)))
+      .map((grp) => grp.slice(-(maxResponsePerZone || 1)))
       .flatMap()
       // set id for each answer
       .map((answer, index) => ({ ...answer, id: `${index}` }))
       // return only answer which have a valid container index
-      .filter(answer => answer.containerIndex < responseContainers.length)
+      .filter((answer) => answer.containerIndex < responseContainers.length)
       .value();
 
     const possibleResponsesFiltered = possibleResponsesWithIds.filter(
-      response => !answers.find(answer => answer.value === response.value)
+      (response) => !answers.find((answer) => answer.value === response.value),
     );
     this.state = {
       answers: answers || [],
       draggingElement: { id: '', value: '' },
-      possibleResponses: duplicateResponses
-        ? possibleResponsesWithIds
-        : possibleResponsesFiltered,
+      possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,
       // set id for each response containers
       responseContainers: responseContainers.map((item, index) => ({
         index,
         ...item,
-        id: `${index}`
+        id: `${index}`,
       })),
-      maxResponsePerZone: maxResponsePerZone || 1
+      maxResponsePerZone: maxResponsePerZone || 1,
+      showCorrect: false,
     };
   }
 
-  beginDrag = draggingElement => {
+  beginDrag = (draggingElement) => {
     this.setState({
-      draggingElement
+      draggingElement,
     });
   };
 
   handleOnDragEnd = () => {
     this.setState({
-      draggingElement: { id: '', value: '' }
+      draggingElement: { id: '', value: '' },
     });
   };
 
   handleOnAnswerSelect = (answer, responseContainerIndex) => {
     const {
       model: { duplicateResponses },
-      updateAnswer
+      updateAnswer,
     } = this.props;
     const { answers, possibleResponses, maxResponsePerZone } = this.state;
     let answersToStore;
 
-    if (
-      maxResponsePerZone ===
-      answers.filter(a => a.containerIndex === responseContainerIndex).length
-    ) {
-      const answersInThisContainer = answers.filter(
-        a => a.containerIndex === responseContainerIndex
-      );
-      const answersInOtherContainers = answers.filter(
-        b => b.containerIndex !== responseContainerIndex
-      );
+    if (maxResponsePerZone === answers.filter((a) => a.containerIndex === responseContainerIndex).length) {
+      const answersInThisContainer = answers.filter((a) => a.containerIndex === responseContainerIndex);
+      const answersInOtherContainers = answers.filter((b) => b.containerIndex !== responseContainerIndex);
 
       const shiftedItem = answersInThisContainer[0];
-      answersInThisContainer.shift(); // FIFO
+      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({
           ...shiftedItem,
           containerIndex: '',
-          id: `${_.max(
-            possibleResponses.map(c => parseInt(c.id)).filter(id => !isNaN(id))
-          ) + 1}`
+          id: `${_.max(possibleResponses.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) + 1}`,
         });
       }
 
@@ -121,58 +109,53 @@ class ImageClozeAssociationComponent extends React.Component {
         ...answersInThisContainer, // shifted
         // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?
         // if yes, this should do it: add a.id !== answer.id instead of 'true'
-        ...answersInOtherContainers.filter(a =>
-          duplicateResponses ? true : a.value !== answer.value
-        ), // un-shifted
+        ...answersInOtherContainers.filter((a) => (duplicateResponses ? true : a.value !== answer.value)), // un-shifted
         {
           ...answer,
           containerIndex: responseContainerIndex,
-          ...(duplicateResponses ? { id: generateId() } : {})
-        }
+          ...(duplicateResponses ? { id: generateId() } : {}),
+        },
       ];
     } 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 = [
         // TODO allow duplicates case Question: should we remove answer from a container if dragged to another container?
         // if yes, this should do it: add a.id !== answer.id instead of 'true'
-        ...answers.filter(a =>
-          duplicateResponses ? true : a.value !== answer.value
-        ),
+        ...answers.filter((a) => (duplicateResponses ? a.id !== answer.id : a.value !== answer.value)),
         {
           ...answer,
           containerIndex: responseContainerIndex,
-          ...(duplicateResponses ? { id: generateId() } : {})
-        }
+          ...(duplicateResponses ? { id: generateId() } : {}),
+        },
       ];
     }
 
     this.setState({
+      maxResponsePerZoneWarning: false,
       answers: answersToStore,
       possibleResponses:
         // for single response per container remove answer from possible responses
         duplicateResponses
           ? possibleResponses
-          : possibleResponses.filter(
-              response => response.value !== answer.value
-            )
+          : possibleResponses.filter((response) => response.value !== answer.value),
     });
     updateAnswer(answersToStore);
   };
 
-  handleOnAnswerRemove = answer => {
+  handleOnAnswerRemove = (answer) => {
     const {
       model: { duplicateResponses },
-      updateAnswer
+      updateAnswer,
     } = this.props;
     const { answers, possibleResponses } = this.state;
-    const answersToStore = answers.filter(a => a.id !== answer.id);
-    const shouldNotPushInPossibleResponses =
-      answer.containerIndex === undefined; // don't duplicate possible responses
+    const answersToStore = answers.filter((a) => a.id !== answer.id);
+    const 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:
@@ -182,13 +165,15 @@ class ImageClozeAssociationComponent extends React.Component {
               ...possibleResponses,
               {
                 ...answer,
-                containerIndex: undefined
-              }
-            ]
+                containerIndex: undefined,
+              },
+            ],
     });
     updateAnswer(answersToStore);
   };
 
+  toggleCorrect = (showCorrect) => this.setState({ showCorrect });
+
   render() {
     const {
       model: {
@@ -198,31 +183,61 @@ class ImageClozeAssociationComponent extends React.Component {
         stimulus,
         responseCorrect,
         validation,
-        teacherInstructions
-      }
+        teacherInstructions,
+        prompt,
+        showDashedBorder,
+        mode,
+      },
     } = this.props;
     const {
       answers,
       draggingElement,
       possibleResponses,
-      responseContainers
+      responseContainers,
+      maxResponsePerZone,
+      maxResponsePerZoneWarning,
+      showCorrect,
     } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const showToggle = isEvaluateMode && !responseCorrect;
 
-    const answersToShow =
-      responseCorrect !== undefined
-        ? getAnswersCorrectness(answers, validation, duplicateResponses)
-        : answers;
+    const { validResponse } = validation || {};
+    const correctAnswers = [];
+
+    if (validResponse) {
+      (validResponse.value || []).forEach((container, i) => {
+        (container.images || []).forEach((v) => {
+          correctAnswers.push({
+            value: v,
+            containerIndex: i,
+          });
+        });
+      });
+    }
+
+    const warningMessage =
+      `You’ve reached the limit of ${maxResponsePerZone} responses per area.` +
+      'To add another response, one must first be removed.';
+
+    let answersToShow =
+      responseCorrect !== undefined ? getAnswersCorrectness(answers, validation, duplicateResponses) : answers;
+
+    if (responseCorrect === false && maxResponsePerZone === 1) {
+      answersToShow = [...answersToShow, ...getUnansweredAnswers(answersToShow, validation)];
+    }
 
     return (
       <div>
+        <PreviewPrompt className="prompt" prompt={prompt} />
+
         {teacherInstructions && (
           <Collapsible
             labels={{
               hidden: 'Show Teacher Instructions',
-              visible: 'Hide Teacher Instructions'
+              visible: 'Hide Teacher Instructions',
             }}
           >
-            <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />
+            <PreviewPrompt prompt={teacherInstructions} />
           </Collapsible>
         )}
 
@@ -230,41 +245,100 @@ class ImageClozeAssociationComponent extends React.Component {
           <span dangerouslySetInnerHTML={{ __html: stimulus }} />
         </Typography>
 
-        <InteractiveSection responseCorrect={responseCorrect}>
-          <Image
-            canDrag={!disabled}
-            answers={answersToShow}
-            draggingElement={draggingElement}
-            duplicateResponses={duplicateResponses}
-            image={image}
-            onAnswerSelect={this.handleOnAnswerSelect}
-            onDragAnswerBegin={this.beginDrag}
-            onDragAnswerEnd={this.handleOnDragEnd}
-            responseContainers={responseContainers}
-          />
-
-          <PossibleResponses
-            canDrag={!disabled}
-            data={possibleResponses}
-            onAnswerRemove={this.handleOnAnswerRemove}
-            onDragBegin={this.beginDrag}
-            onDragEnd={this.handleOnDragEnd}
-          />
-        </InteractiveSection>
+        <CorrectAnswerToggle show={showToggle} toggled={showCorrect} onToggle={this.toggleCorrect} />
+        <br />
+
+        {showCorrect && showToggle ? (
+          <InteractiveSection responseCorrect={true}>
+            <Image
+              canDrag={false}
+              answers={correctAnswers}
+              draggingElement={draggingElement}
+              duplicateResponses={duplicateResponses}
+              image={image}
+              onAnswerSelect={this.handleOnAnswerSelect}
+              onDragAnswerBegin={this.beginDrag}
+              onDragAnswerEnd={this.handleOnDragEnd}
+              responseContainers={responseContainers}
+              showDashedBorder={showDashedBorder}
+            />
+          </InteractiveSection>
+        ) : (
+          <InteractiveSection responseCorrect={responseCorrect}>
+            <Image
+              canDrag={!disabled}
+              answers={answersToShow}
+              draggingElement={draggingElement}
+              duplicateResponses={duplicateResponses}
+              image={image}
+              onAnswerSelect={this.handleOnAnswerSelect}
+              onDragAnswerBegin={this.beginDrag}
+              onDragAnswerEnd={this.handleOnDragEnd}
+              responseContainers={responseContainers}
+              showDashedBorder={showDashedBorder}
+            />
+
+            {maxResponsePerZoneWarning && <WarningInfo message={warningMessage} />}
+
+            <PossibleResponses
+              canDrag={!disabled}
+              data={possibleResponses}
+              onAnswerRemove={this.handleOnAnswerRemove}
+              onDragBegin={this.beginDrag}
+              onDragEnd={this.handleOnDragEnd}
+            />
+          </InteractiveSection>
+        )}
       </div>
     );
   }
 }
 
+const WarningInfo = 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',
+  },
+})(({ classes, message }) => (
+  <TransitionGroup>
+    <CSSTransition classNames={'fb'} key="fb" timeout={300}>
+      <div key="panel" className={classes.warning}>
+        <ShowRationale iconSet="emoji" shape="square" />
+        <span className={classes.message} dangerouslySetInnerHTML={{ __html: message }} />
+      </div>
+    </CSSTransition>
+  </TransitionGroup>
+));
+
+WarningInfo.propTypes = {
+  message: PropTypes.string,
+  classes: PropTypes.object.isRequired,
+};
+
 ImageClozeAssociationComponent.propTypes = {
   classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   session: PropTypes.object,
-  updateAnswer: PropTypes.func.isRequired
+  updateAnswer: PropTypes.func.isRequired,
 };
 
 ImageClozeAssociationComponent.defaultProps = {
-  classes: {}
+  classes: {},
 };
 
 export default withDragContext(ImageClozeAssociationComponent);