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

package/src/root.jsx

@@ -6,11 +6,12 @@ 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 { getUnansweredAnswers, getAnswersCorrectness } from './utils-correctness';
 import _ from 'lodash';
 
 const generateId = () =>
@@ -64,6 +65,7 @@ class ImageClozeAssociationComponent extends React.Component {
         id: `${index}`,
       })),
       maxResponsePerZone: maxResponsePerZone || 1,
+      showCorrect: false
     };
   }
 
@@ -200,6 +202,8 @@ class ImageClozeAssociationComponent extends React.Component {
     updateAnswer(answersToStore);
   };
 
+  toggleCorrect = showCorrect => this.setState({ showCorrect });
+
   render() {
     const {
       model: {
@@ -212,6 +216,7 @@ class ImageClozeAssociationComponent extends React.Component {
         teacherInstructions,
         prompt,
         showDashedBorder,
+        mode,
       },
     } = this.props;
     const {
@@ -221,17 +226,38 @@ class ImageClozeAssociationComponent extends React.Component {
       responseContainers,
       maxResponsePerZone,
       maxResponsePerZoneWarning,
+      showCorrect
     } = this.state;
+    const isEvaluateMode = mode === 'evaluate';
+    const showToggle = isEvaluateMode && !responseCorrect;
+
+    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.';
 
-    const answersToShow =
+    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} />
@@ -243,7 +269,7 @@ class ImageClozeAssociationComponent extends React.Component {
               visible: 'Hide Teacher Instructions',
             }}
           >
-            <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />
+            <PreviewPrompt prompt={teacherInstructions} />
           </Collapsible>
         )}
 
@@ -251,32 +277,55 @@ 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}
-            showDashedBorder={showDashedBorder}
-          />
-
-          {maxResponsePerZoneWarning && (
-            <WarningInfo message={warningMessage} />
-          )}
-
-          <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>
     );
   }

package/src/utils-correctness.js

@@ -35,6 +35,28 @@ const getUniqueCorrectAnswers = (answers, validResponses) => {
   return finalAnswers;
 };
 
+export const getUnansweredAnswers = (answers, validation) => {
+  const { validResponse: { value } = {}} = validation;
+
+  const unansweredAnswers = (value || []).reduce((unanswered, response, index) => {
+    const isAnswered = !!answers.find(answer => answer.containerIndex === index);
+
+    if (!isAnswered) {
+      return [...unanswered, {
+        id: `unanswered-${index}`,
+        value: response.images[0] || '',
+        containerIndex: index,
+        isCorrect: false,
+        hidden: true
+      }];
+    }
+
+    return unanswered;
+  }, []);
+
+  return unansweredAnswers;
+};
+
 export const getAnswersCorrectness = (answers, validation) => {
   const { validResponse: { value }, altResponses } = validation;