@pie-element/hotspot 5.9.1-next.36 → 5.9.1-next.51

package/configure/src/root.jsx

@@ -8,7 +8,6 @@ import Info from '@material-ui/icons/Info';
 import Tooltip from '@material-ui/core/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
-import classNames from 'classnames';
 import { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
 
 const { Panel, toggle } = settings;
@@ -108,193 +107,172 @@ export class Root extends React.Component {
     };
 
     return (
-      <div className={classes.base}>
-        <layout.ConfigLayout
-          hideSettings={settingsPanelDisabled}
-          settings={
-            <Panel
-              model={model}
-              onChangeModel={onModelChangedByConfig}
-              configuration={configuration}
-              onChangeConfiguration={onConfigurationChanged}
-              groups={{
-                Settings: panelSettings,
-                Properties: panelProperties,
-              }}
+      <layout.ConfigLayout
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            onChangeModel={onModelChangedByConfig}
+            configuration={configuration}
+            onChangeConfiguration={onConfigurationChanged}
+            groups={{
+              Settings: panelSettings,
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        {teacherInstructionsEnabled && (
+          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={onTeacherInstructionsChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
             />
-          }
-        >
-          <div className={classes.regular}>
-            {teacherInstructionsEnabled && (
-              <InputContainer label={teacherInstructions.label} className={classes.prompt}>
-                <EditableHtml
-                  markup={model.teacherInstructions || ''}
-                  onChange={onTeacherInstructionsChanged}
-                  imageSupport={imageSupport}
-                  nonEmpty={false}
-                  toolbarOpts={toolbarOpts}
-                  spellCheck={spellCheckEnabled}
-                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
-                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                />
-              </InputContainer>
-            )}
+          </InputContainer>
+        )}
 
-            {promptEnabled && (
-              <InputContainer label={prompt.label} className={classes.prompt}>
-                <EditableHtml
-                  markup={model.prompt || ''}
-                  onChange={onPromptChanged}
-                  imageSupport={imageSupport}
-                  nonEmpty={false}
-                  toolbarOpts={toolbarOpts}
-                  spellCheck={spellCheckEnabled}
-                  maxImageWidth={defaultImageMaxWidth}
-                  maxImageHeight={defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                />
-              </InputContainer>
-            )}
+        {promptEnabled && (
+          <InputContainer label={prompt.label} className={classes.promptContainer}>
+            <EditableHtml
+              markup={model.prompt || ''}
+              onChange={onPromptChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={defaultImageMaxWidth}
+              maxImageHeight={defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+            />
+          </InputContainer>
+        )}
 
-            {rationaleEnabled && (
-              <InputContainer label={rationale.label} className={classes.prompt}>
-                <EditableHtml
-                  markup={model.rationale || ''}
-                  onChange={onRationaleChanged}
-                  imageSupport={imageSupport}
-                  toolbarOpts={toolbarOpts}
-                  spellCheck={spellCheckEnabled}
-                  maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
-                  maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                />
-              </InputContainer>
-            )}
+        <div className={classes.flexContainer}>
+          <Typography className={classes.subheading} variant="subheading">
+            Define Hotspot
+          </Typography>
+          <Tooltip
+            classes={{ tooltip: classes.tooltip }}
+            disableFocusListener
+            disableTouchListener
+            placement={'left'}
+            title={validationMessage}
+          >
+            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
+          </Tooltip>
+        </div>
 
-            <div className={classNames(classes.label, classes.flexContainer)}>
-              <Typography className={classes.subheading} variant="subheading">
-                Define Hotspot
-              </Typography>
-              <Tooltip
-                classes={{ tooltip: classes.tooltip }}
-                disableFocusListener
-                disableTouchListener
-                placement={'left'}
-                title={validationMessage}
-              >
-                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />
-              </Tooltip>
-            </div>
+        <HotspotPalette
+          hotspotColor={model.hotspotColor}
+          hotspotList={model.hotspotList}
+          outlineColor={model.outlineColor}
+          outlineList={model.outlineList}
+          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}
+          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}
+        />
 
-            <HotspotPalette
-              hotspotColor={model.hotspotColor}
-              hotspotList={model.hotspotList}
-              outlineColor={model.outlineColor}
-              outlineList={model.outlineList}
-              onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}
-              onOutlineColorChange={(color) => this.handleColorChange('outline', color)}
-            />
+        <HotspotContainer
+          dimensions={model.dimensions}
+          imageUrl={model.imageUrl}
+          multipleCorrect={model.multipleCorrect}
+          hasErrors={!!shapesError || !!selectionsError}
+          hotspotColor={model.hotspotColor}
+          outlineColor={model.outlineColor}
+          onUpdateImageDimension={onUpdateImageDimension}
+          onUpdateShapes={onUpdateShapes}
+          onImageUpload={onImageUpload}
+          shapes={model.shapes}
+          strokeWidth={model.strokeWidth}
+          preserveAspectRatioEnabled={preserveAspectRatio.enabled}
+        />
+        {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
 
-            <HotspotContainer
-              dimensions={model.dimensions}
-              imageUrl={model.imageUrl}
-              multipleCorrect={model.multipleCorrect}
-              hasErrors={!!shapesError || !!selectionsError}
-              hotspotColor={model.hotspotColor}
-              outlineColor={model.outlineColor}
-              onUpdateImageDimension={onUpdateImageDimension}
-              onUpdateShapes={onUpdateShapes}
-              onImageUpload={onImageUpload}
-              shapes={model.shapes}
-              strokeWidth={model.strokeWidth}
-              preserveAspectRatioEnabled={preserveAspectRatio.enabled}
-            />
-            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
-            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
+        {model.imageUrl && (
+          <React.Fragment>
+            <Typography variant="subheading">Image Dimensions</Typography>
 
-            {model.imageUrl && (
-              <div>
-                <Typography className={classes.label} variant="subheading">
-                  Image Dimensions
-                </Typography>
+            <div className={classes.dimensions}>
+              <NumberTextField
+                key="hotspot-manual-width"
+                label="Width"
+                value={model.dimensions.width}
+                min={0}
+                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
+                showErrorWhenOutsideRange
+                className={classes.field}
+              />
 
-                <div className={classes.dimensions}>
-                  <NumberTextField
-                    key="hotspot-manual-width"
-                    label="Width"
-                    value={model.dimensions.width}
-                    min={0}
-                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}
-                    showErrorWhenOutsideRange
-                    className={classes.field}
-                  />
+              <NumberTextField
+                key="hotspot-manual-height"
+                label="Height"
+                value={model.dimensions.height}
+                min={0}
+                onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
+                showErrorWhenOutsideRange
+                className={classes.field}
+              />
+            </div>
+          </React.Fragment>
+        )}
 
-                  <NumberTextField
-                    key="hotspot-manual-height"
-                    label="Height"
-                    value={model.dimensions.height}
-                    min={0}
-                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}
-                    showErrorWhenOutsideRange
-                    className={classes.field}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
-        </layout.ConfigLayout>
-      </div>
+        {rationaleEnabled && (
+          <InputContainer label={rationale.label} className={classes.promptContainer}>
+            <EditableHtml
+              markup={model.rationale || ''}
+              onChange={onRationaleChanged}
+              imageSupport={imageSupport}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+            />
+          </InputContainer>
+        )}
+      </layout.ConfigLayout>
     );
   }
 }
 
 const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 3,
-  },
-  container: {
-    display: 'flex',
-    marginTop: theme.spacing.unit,
-  },
   dimensions: {
     display: 'flex',
+    marginBottom: theme.spacing.unit * 1.5,
   },
   field: {
     flex: 1,
     width: '90%',
   },
-  label: {
-    marginTop: theme.spacing.unit * 4,
-  },
-  prompt: {
+  promptContainer: {
     paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
     width: '100%',
   },
   subheading: {
     marginRight: theme.spacing.unit,
   },
-  regular: {
-    marginBottom: theme.spacing.unit * 3,
-  },
-  switchElement: {
-    justifyContent: 'space-between',
-    margin: 0,
-  },
   flexContainer: {
     display: 'flex',
     alignItems: 'center',
   },
   tooltip: {
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
     whiteSpace: 'pre',
     maxWidth: '500px',
   },
   errorText: {
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
     color: theme.palette.error.main,
     paddingTop: theme.spacing.unit,
   },

package/lib/hotspot/container.js

@@ -191,7 +191,8 @@ exports.Container = Container;
 var styles = function styles(theme) {
   return {
     base: {
-      marginTop: theme.spacing.unit * 3,
+      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 2,
       position: 'relative'
     },
     image: {

package/lib/hotspot/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","position","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles, polygons },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 3,\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEaA,S;;;;;;;;;;;;;;;oGAMG,UAACC,SAAD,EAAYC,SAAZ;AAAA,aAA2BD,SAAS,GAAGC,SAAH,GAAe,CAACA,SAApD;AAAA,K;wGAEI,UAACD,SAAD,EAAYE,QAAZ,EAAyB;AACzC,UAAIA,QAAQ,IAAIF,SAAhB,EAA2B;AACzB,eAAO,qBAAP;AACD;;AAED,UAAIE,QAAQ,IAAI,CAACF,SAAjB,EAA4B;AAC1B,eAAO,gCAAP;AACD;;AAED,UAAI,CAACE,QAAD,IAAaF,SAAjB,EAA4B;AAC1B,eAAO,4BAAP;AACD;;AAED,aAAO,IAAP;AACD,K;;;;;;WArBD,oBAAWG,KAAX,EAAkB;AAChB,UAAMC,aAAa,GAAG,KAAKC,KAAL,CAAWC,OAAX,CAAmBC,OAAnB,CAA2BC,MAA3B,CAAkC,UAACC,MAAD;AAAA,eAAYA,MAAM,CAACC,EAAP,KAAcP,KAAK,CAACO,EAAhC;AAAA,OAAlC,EAAsE,CAAtE,CAAtB;AACA,aAAO,CAAC,CAACN,aAAT;AACD;;;WAoBD,kBAAS;AAAA;;AACP,wBAaI,KAAKC,KAbT;AAAA,UACEM,OADF,eACEA,OADF;AAAA,8CAEEC,UAFF;AAAA,UAEuBC,QAFvB,yBAEgBC,KAFhB;AAAA,UAEyCC,UAFzC,yBAEiCC,MAFjC;AAAA,UAGEC,QAHF,eAGEA,QAHF;AAAA,UAIEC,YAJF,eAIEA,YAJF;AAAA,UAKEC,QALF,eAKEA,QALF;AAAA,UAMEC,cANF,eAMEA,cANF;AAAA,UAOEC,YAPF,eAOEA,YAPF;AAAA,UAQEC,cARF,eAQEA,cARF;AAAA,2CASEC,MATF;AAAA,UASYC,UATZ,sBASYA,UATZ;AAAA,UASwBC,QATxB,sBASwBA,QATxB;AAAA,UAUSC,KAVT,eAUEC,KAVF;AAAA,UAWEC,WAXF,eAWEA,WAXF;AAAA,UAYEC,WAZF,eAYEA,WAZF;AAeA,UAAMf,KAAK,GAAGD,QAAQ,GAAGa,KAAzB;AACA,UAAMV,MAAM,GAAGD,UAAU,GAAGW,KAA5B;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEf,OAAO,CAACmB,IAAxB;AAA8B,QAAA,KAAK,EAAE;AAAEC,UAAAA,OAAO,EAAEH,WAAW,GAAG;AAAzB;AAArC,SACGT,QAAQ,gBACP;AAAK,QAAA,SAAS,EAAER,OAAO,CAACqB;AAAxB,sBACE;AACE,QAAA,GAAG,EAAC,eADN;AAEE,QAAA,SAAS,EAAErB,OAAO,CAACsB,KAFrB;AAGE,QAAA,MAAM,EAAC,MAHT;AAIE,QAAA,GAAG,EAAEd,QAJP;AAKE,QAAA,KAAK,EAAE;AAAEL,UAAAA,KAAK,EAALA,KAAF;AAASE,UAAAA,MAAM,EAANA,MAAT;AAAiBkB,UAAAA,QAAQ,EAAEpB,KAA3B;AAAkCqB,UAAAA,SAAS,EAAEnB;AAA7C;AALT,QADF,CADO,GAUL,IAXN,eAaE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAEL,OAAO,CAACyB,KADrB;AAEE,QAAA,MAAM,EAAEpB,MAAM,GAAGY,WAFnB;AAGE,QAAA,KAAK,EAAEd,KAAK,GAAGc,WAHjB;AAIE,QAAA,CAAC,EAAEA,WAAW,GAAG,CAJnB;AAKE,QAAA,CAAC,EAAEA,WAAW,GAAG;AALnB,sBAOE,gCAAC,iBAAD,QACGJ,UAAU,CAACa,GAAX,CAAe,UAAClC,KAAD,EAAW;AACzB,YAAMD,QAAQ,GAAG,MAAI,CAACoC,UAAL,CAAgBnC,KAAhB,CAAjB;;AACA,YAAMH,SAAS,GAAGoB,cAAc,GAAG,MAAI,CAACmB,WAAL,CAAiBpC,KAAK,CAACqC,OAAvB,EAAgCtC,QAAhC,CAAH,GAA+CuC,SAA/E;AACA,YAAMC,YAAY,GAAGtB,cAAc,GAAG,MAAI,CAACuB,eAAL,CAAqBxC,KAAK,CAACqC,OAA3B,EAAoCtC,QAApC,CAAH,GAAmD,IAAtF;AACA,YAAM0C,aAAa,GAAG,CAAC,EAAExB,cAAc,IAAIS,WAAlB,IAAiC1B,KAAK,CAACqC,OAAzC,CAAvB;AAEA,4BACE,gCAAC,qBAAD;AACE,UAAA,KAAK,EAAEd,KADT;AAEE,UAAA,cAAc,EAAEN,cAFlB;AAGE,UAAA,SAAS,EAAEpB,SAHb;AAIE,UAAA,YAAY,EAAE0C,YAJhB;AAKE,UAAA,QAAQ,EAAEzB,QALZ;AAME,UAAA,QAAQ,EAAEf,QANZ;AAOE,UAAA,MAAM,EAAEC,KAAK,CAACa,MAPhB;AAQE,UAAA,YAAY,EAAEE,YARhB;AASE,UAAA,EAAE,EAAEf,KAAK,CAACO,EATZ;AAUE,UAAA,GAAG,EAAEP,KAAK,CAACO,EAVb;AAWE,UAAA,OAAO,EAAEY,cAXX;AAYE,UAAA,YAAY,EAAED,YAZhB;AAaE,UAAA,KAAK,EAAElB,KAAK,CAACW,KAbf;AAcE,UAAA,CAAC,EAAEX,KAAK,CAAC0C,CAdX;AAeE,UAAA,CAAC,EAAE1C,KAAK,CAAC2C,CAfX;AAgBE,UAAA,WAAW,EAAElB,WAhBf;AAiBE,UAAA,aAAa,EAAEgB,aAjBjB;AAkBE,UAAA,kBAAkB,EAAEf;AAlBtB,UADF;AAsBD,OA5BA,CADH,EA8BGJ,QAAQ,CAACY,GAAT,CAAa,UAACU,OAAD,EAAa;AACzB,YAAM7C,QAAQ,GAAG,MAAI,CAACoC,UAAL,CAAgBS,OAAhB,CAAjB;;AACA,YAAM/C,SAAS,GAAGoB,cAAc,GAAG,MAAI,CAACmB,WAAL,CAAiBQ,OAAO,CAACP,OAAzB,EAAkCtC,QAAlC,CAAH,GAAiDuC,SAAjF;AACA,YAAMC,YAAY,GAAGtB,cAAc,GAAG,MAAI,CAACuB,eAAL,CAAqBI,OAAO,CAACP,OAA7B,EAAsCtC,QAAtC,CAAH,GAAqD,IAAxF;AACA,YAAM0C,aAAa,GAAG,CAAC,EAAExB,cAAc,IAAIS,WAAlB,IAAiCkB,OAAO,CAACP,OAA3C,CAAvB;AAEA,4BACE,gCAAC,mBAAD;AACE,UAAA,KAAK,EAAEd,KADT;AAEE,UAAA,cAAc,EAAEN,cAFlB;AAGE,UAAA,SAAS,EAAE,CAAC,CAACpB,SAHf;AAIE,UAAA,YAAY,EAAE0C,YAJhB;AAKE,UAAA,QAAQ,EAAEzB,QALZ;AAME,UAAA,QAAQ,EAAEf,QANZ;AAOE,UAAA,YAAY,EAAEgB,YAPhB;AAQE,UAAA,EAAE,EAAE6B,OAAO,CAACrC,EARd;AASE,UAAA,GAAG,EAAEqC,OAAO,CAACrC,EATf;AAUE,UAAA,OAAO,EAAEY,cAVX;AAWE,UAAA,YAAY,EAAED,YAXhB;AAYE,UAAA,MAAM,EAAE0B,OAAO,CAACC,MAZlB;AAaE,UAAA,WAAW,EAAEpB,WAbf;AAcE,UAAA,aAAa,EAAEgB,aAdjB;AAeE,UAAA,kBAAkB,EAAEf;AAftB,UADF;AAmBD,OAzBA,CA9BH,CAPF,CAbF,CADF;AAiFD;;;EA5H4BoB,kBAAMC,S;;;;AA+HrC,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBtB,IAAAA,IAAI,EAAE;AACJuB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAD5B;AAEJC,MAAAA,YAAY,EAAEJ,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAF/B;AAGJE,MAAAA,QAAQ,EAAE;AAHN,KADmB;AAMzBxB,IAAAA,KAAK,EAAE;AACLyB,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KANkB;AAWzB5B,IAAAA,cAAc,EAAE;AACdyB,MAAAA,QAAQ,EAAE,UADI;AAEd3C,MAAAA,KAAK,EAAE;AAFO,KAXS;AAezBsB,IAAAA,KAAK,EAAE;AACLyB,MAAAA,IAAI,EAAE,CADD;AAELC,MAAAA,GAAG,EAAE,CAFA;AAGLL,MAAAA,QAAQ,EAAE;AAHL,KAfkB;AAoBzBM,IAAAA,MAAM,EAAE;AACNC,MAAAA,YAAY,sBAAeC,gBAAMhD,QAAN,EAAf,CADN;AAENiD,MAAAA,WAAW,sBAAeD,gBAAMhD,QAAN,EAAf,CAFL;AAGNkD,MAAAA,MAAM,EAAE,OAHF;AAINC,MAAAA,MAAM,EAAE,WAJF;AAKNpD,MAAAA,MAAM,EAAE,MALF;AAMNyC,MAAAA,QAAQ,EAAE,UANJ;AAONY,MAAAA,KAAK,EAAE,OAPD;AAQNvD,MAAAA,KAAK,EAAE;AARD;AApBiB,GAAZ;AAAA,CAAf;;AAgCAf,SAAS,CAACuE,SAAV,GAAsB;AACpB3D,EAAAA,OAAO,EAAE4D,sBAAUC,MAAV,CAAiBC,UADN;AAEpB7D,EAAAA,UAAU,EAAE2D,sBAAUC,MAAV,CAAiBC,UAFT;AAGpBxD,EAAAA,QAAQ,EAAEsD,sBAAUG,IAAV,CAAeD,UAHL;AAIpBvD,EAAAA,YAAY,EAAEqD,sBAAUI,MAAV,CAAiBF,UAJX;AAKpBtD,EAAAA,QAAQ,EAAEoD,sBAAUI,MAAV,CAAiBF,UALP;AAMpBrD,EAAAA,cAAc,EAAEmD,sBAAUG,IAAV,CAAeD,UANX;AAOpBnD,EAAAA,cAAc,EAAEiD,sBAAUK,IAAV,CAAeH,UAPX;AAQpBpD,EAAAA,YAAY,EAAEkD,sBAAUI,MAAV,CAAiBF,UARX;AASpBnE,EAAAA,OAAO,EAAEiE,sBAAUC,MAAV,CAAiBC,UATN;AAUpBlD,EAAAA,MAAM,EAAEgD,sBAAUC,MAAV,CAAiBC,UAVL;AAWpB7C,EAAAA,WAAW,EAAE2C,sBAAUM,MAXH;AAYpBlD,EAAAA,KAAK,EAAE4C,sBAAUM,MAZG;AAapBhD,EAAAA,WAAW,EAAE0C,sBAAUG;AAbH,CAAtB;AAgBA3E,SAAS,CAAC+E,YAAV,GAAyB;AACvBnD,EAAAA,KAAK,EAAE;AADgB,CAAzB;;eAIe,wBAAWwB,MAAX,EAAmBpD,SAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles, polygons },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

package/lib/hotspot/index.js

@@ -25,8 +25,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
 var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 
 var _renderUi = require("@pie-lib/render-ui");
@@ -132,11 +130,7 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
       var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
-      return /*#__PURE__*/_react["default"].createElement("div", null, showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
-        show: showCorrectAnswerToggle,
-        toggled: showCorrect,
-        onToggle: this.onToggle.bind(this)
-      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement("br", null), teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      return /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
@@ -145,12 +139,14 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "prompt",
         prompt: teacherInstructions
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+      })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "prompt",
         prompt: prompt
-      })), imageUrl ? /*#__PURE__*/_react["default"].createElement(_container["default"], {
+      }), showCorrectAnswerToggle && /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
+        show: showCorrectAnswerToggle,
+        toggled: showCorrect,
+        onToggle: this.onToggle.bind(this)
+      }), imageUrl ? /*#__PURE__*/_react["default"].createElement(_container["default"], {
         isEvaluateMode: isEvaluateMode,
         session: session,
         dimensions: dimensions,
@@ -168,8 +164,7 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
         labels: {
           hidden: 'Show Rationale',
           visible: 'Hide Rationale'
-        },
-        className: classes.collapsible
+        }
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         className: "prompt",
         prompt: rationale
@@ -192,8 +187,7 @@ HotspotComponent.defaultProps = {
 var styles = function styles(theme) {
   return {
     collapsible: {
-      paddingTop: theme.spacing.unit * 2,
-      paddingBottom: theme.spacing.unit * 2
+      marginBottom: theme.spacing.unit * 2
     },
     prompt: {
       fontSize: 'inherit'

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","onToggle","bind","hidden","visible","collapsible","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","paddingTop","spacing","unit","paddingBottom","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div>\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n        {showCorrectAnswerToggle && <br />}\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        <Typography className={classes.prompt}>\n          <PreviewPrompt className=\"prompt\" prompt={prompt} />\n        </Typography>\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  collapsible: {\n    paddingTop: theme.spacing.unit * 2,\n    paddingBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "5.9.1-next.36+9353f7376",
+  "version": "5.9.1-next.51+a42a408d1",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -21,7 +21,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "9353f73768c78233621ab11119b1961af018a7e4",
+  "gitHead": "a42a408d1d238e52cbcf907fbbaec2ee98550385",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/container.jsx

@@ -136,7 +136,8 @@ export class Container extends React.Component {
 
 const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 3,
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
     position: 'relative',
   },
   image: {

package/src/hotspot/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
 import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
 import { Collapsible, hasText, PreviewPrompt } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
@@ -22,10 +21,11 @@ class HotspotComponent extends React.Component {
       mutations.forEach(() => {
         const target = document.getElementById('question-container')?.style?.cssText;
         const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
-
         const zoomParsed = zoom?.replace(/\s/g, '');
+
         if (zoomParsed) {
           const newScale = parseFloat(zoomParsed) / 100;
+
           if (newScale !== this.state.scale) {
             this.setState({
               scale: parseFloat(zoomParsed) / 100,
@@ -40,6 +40,7 @@ class HotspotComponent extends React.Component {
     });
 
     const target = document.getElementById('question-container');
+
     if (target) {
       this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
     }
@@ -81,14 +82,6 @@ class HotspotComponent extends React.Component {
 
     return (
       <div>
-        {showCorrectAnswerToggle && (
-          <CorrectAnswerToggle
-            show={showCorrectAnswerToggle}
-            toggled={showCorrect}
-            onToggle={this.onToggle.bind(this)}
-          />
-        )}
-        {showCorrectAnswerToggle && <br />}
         {teacherInstructions && hasText(teacherInstructions) && (
           <Collapsible
             labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
@@ -98,9 +91,15 @@ class HotspotComponent extends React.Component {
           </Collapsible>
         )}
 
-        <Typography className={classes.prompt}>
-          <PreviewPrompt className="prompt" prompt={prompt} />
-        </Typography>
+        {prompt && <PreviewPrompt className="prompt" prompt={prompt} />}
+
+        {showCorrectAnswerToggle && (
+          <CorrectAnswerToggle
+            show={showCorrectAnswerToggle}
+            toggled={showCorrect}
+            onToggle={this.onToggle.bind(this)}
+          />
+        )}
 
         {imageUrl ? (
           <Container
@@ -121,7 +120,7 @@ class HotspotComponent extends React.Component {
         ) : null}
 
         {rationale && hasText(rationale) && (
-          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>
+          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>
             <PreviewPrompt className="prompt" prompt={rationale} />
           </Collapsible>
         )}
@@ -143,8 +142,7 @@ HotspotComponent.defaultProps = {
 
 const styles = (theme) => ({
   collapsible: {
-    paddingTop: theme.spacing.unit * 2,
-    paddingBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
   },
   prompt: {
     fontSize: 'inherit',