@pie-element/multiple-choice 9.4.1-next.0 → 9.4.1-next.13

package/module/element.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.2.1/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.3.0/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.2.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -8212,6 +8212,143 @@ Checkbox$2.default = _default$3;
   var _Checkbox = _interopRequireDefault(Checkbox$2);
 })(Checkbox$3);
 var Checkbox = getDefaultExportFromCjs(Checkbox$3);
+var Radio$3 = {};
+var Radio$2 = {};
+var RadioButtonUnchecked$1 = {};
+const require$$1$2 = _dll_react;
+var _interopRequireDefault$3 = interopRequireDefault.exports;
+Object.defineProperty(RadioButtonUnchecked$1, "__esModule", {
+  value: true
+});
+RadioButtonUnchecked$1.default = void 0;
+var _react$2 = _interopRequireDefault$3(require$$1$2);
+var _pure$1 = _interopRequireDefault$3(pure$1);
+var _SvgIcon$1 = _interopRequireDefault$3(SvgIcon$2);
+var _ref$2 = _react$2.default.createElement("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+});
+var RadioButtonUnchecked = function RadioButtonUnchecked(props) {
+  return _react$2.default.createElement(_SvgIcon$1.default, props, _ref$2);
+};
+RadioButtonUnchecked = (0, _pure$1.default)(RadioButtonUnchecked);
+RadioButtonUnchecked.muiName = 'SvgIcon';
+var _default$2 = RadioButtonUnchecked;
+RadioButtonUnchecked$1.default = _default$2;
+var RadioButtonChecked$1 = {};
+const require$$1$1 = _dll_react;
+var _interopRequireDefault$2 = interopRequireDefault.exports;
+Object.defineProperty(RadioButtonChecked$1, "__esModule", {
+  value: true
+});
+RadioButtonChecked$1.default = void 0;
+var _react$1 = _interopRequireDefault$2(require$$1$1);
+var _pure = _interopRequireDefault$2(pure$1);
+var _SvgIcon = _interopRequireDefault$2(SvgIcon$2);
+var _ref$1 = _react$1.default.createElement("path", {
+  d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+});
+var RadioButtonChecked = function RadioButtonChecked(props) {
+  return _react$1.default.createElement(_SvgIcon.default, props, _ref$1);
+};
+RadioButtonChecked = (0, _pure.default)(RadioButtonChecked);
+RadioButtonChecked.muiName = 'SvgIcon';
+var _default$1 = RadioButtonChecked;
+RadioButtonChecked$1.default = _default$1;
+const require$$3$1 = _dll_react;
+const require$$4 = _dll_prop_types;
+const require$$5 = _dll_classnames;
+var _interopRequireDefault$1 = interopRequireDefault.exports;
+Object.defineProperty(Radio$2, "__esModule", {
+  value: true
+});
+Radio$2.default = Radio$2.styles = void 0;
+var _extends2 = _interopRequireDefault$1(_extends$1.exports);
+var _objectWithoutProperties2 = _interopRequireDefault$1(objectWithoutProperties.exports);
+var _react = _interopRequireDefault$1(require$$3$1);
+var _propTypes = _interopRequireDefault$1(require$$4);
+var _classnames = _interopRequireDefault$1(require$$5);
+var _SwitchBase = _interopRequireDefault$1(SwitchBase$1);
+var _RadioButtonUnchecked = _interopRequireDefault$1(RadioButtonUnchecked$1);
+var _RadioButtonChecked = _interopRequireDefault$1(RadioButtonChecked$1);
+var _helpers = helpers;
+var _withStyles = _interopRequireDefault$1(withStyles);
+var styles$2 = function styles(theme) {
+  return {
+    root: {
+      color: theme.palette.text.secondary
+    },
+    checked: {},
+    disabled: {},
+    colorPrimary: {
+      '&$checked': {
+        color: theme.palette.primary.main
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
+      }
+    },
+    colorSecondary: {
+      '&$checked': {
+        color: theme.palette.secondary.main
+      },
+      '&$disabled': {
+        color: theme.palette.action.disabled
+      }
+    }
+  };
+};
+Radio$2.styles = styles$2;
+var _ref = _react.default.createElement(_RadioButtonUnchecked.default, null);
+var _ref2 = _react.default.createElement(_RadioButtonChecked.default, null);
+function Radio$1(props) {
+  var classes = props.classes, color = props.color, other = (0, _objectWithoutProperties2.default)(props, ["classes", "color"]);
+  return _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({
+    type: "radio",
+    icon: _ref,
+    checkedIcon: _ref2,
+    classes: {
+      root: (0, _classnames.default)(classes.root, classes[("color").concat((0, _helpers.capitalize)(color))]),
+      checked: classes.checked,
+      disabled: classes.disabled
+    }
+  }, other));
+}
+Radio$1.propTypes = {
+  checked: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  checkedIcon: _propTypes.default.node,
+  classes: _propTypes.default.object.isRequired,
+  color: _propTypes.default.oneOf(['primary', 'secondary', 'default']),
+  disabled: _propTypes.default.bool,
+  disableRipple: _propTypes.default.bool,
+  icon: _propTypes.default.node,
+  id: _propTypes.default.string,
+  inputProps: _propTypes.default.object,
+  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  onChange: _propTypes.default.func,
+  type: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
+};
+Radio$1.defaultProps = {
+  color: 'secondary'
+};
+var _default = (0, _withStyles.default)(styles$2, {
+  name: 'MuiRadio'
+})(Radio$1);
+Radio$2.default = _default;
+(function (exports) {
+  var _interopRequireDefault = interopRequireDefault.exports;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function get() {
+      return _Radio.default;
+    }
+  });
+  var _Radio = _interopRequireDefault(Radio$2);
+})(Radio$3);
+var Radio = getDefaultExportFromCjs(Radio$3);
 var CSSTransition = {
   exports: {}
 };
@@ -8248,14 +8385,14 @@ var removeClass = function removeClass(element, className) {
   if (element.classList) element.classList.remove(className); else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className); else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));
 };
 const require$$0$1 = _dll_prop_types;
-const require$$3$1 = _dll_react;
+const require$$3 = _dll_react;
 (function (module, exports) {
   exports.__esModule = true;
   exports.default = void 0;
   var PropTypes = _interopRequireWildcard(require$$0$1);
   var _addClass = _interopRequireDefault(addClass.exports);
   var _removeClass = _interopRequireDefault(removeClass);
-  var _react = _interopRequireDefault(require$$3$1);
+  var _react = _interopRequireDefault(require$$3);
   var _Transition = _interopRequireDefault(Transition$1);
   var _PropTypes = PropTypes$6;
   function _interopRequireDefault(obj) {
@@ -8433,13 +8570,13 @@ var ReplaceTransition = {
   exports: {}
 };
 const require$$0 = _dll_prop_types;
-const require$$1$2 = _dll_react;
+const require$$1 = _dll_react;
 const require$$2 = _dll_react_dom;
 (function (module, exports) {
   exports.__esModule = true;
   exports.default = void 0;
   var _propTypes = _interopRequireDefault(require$$0);
-  var _react = _interopRequireDefault(require$$1$2);
+  var _react = _interopRequireDefault(require$$1);
   var _reactDom = require$$2;
   var _TransitionGroup = _interopRequireDefault(TransitionGroup.exports);
   function _interopRequireDefault(obj) {
@@ -8553,11 +8690,11 @@ const require$$2 = _dll_react_dom;
   module.exports = exports["default"];
 })(ReplaceTransition, ReplaceTransition.exports);
 getDefaultExportFromCjs(ReplaceTransition.exports);
-var _CSSTransition = _interopRequireDefault$3(CSSTransition.exports);
-var _ReplaceTransition = _interopRequireDefault$3(ReplaceTransition.exports);
-var _TransitionGroup = _interopRequireDefault$3(TransitionGroup.exports);
-var _Transition = _interopRequireDefault$3(Transition$1);
-function _interopRequireDefault$3(obj) {
+var _CSSTransition = _interopRequireDefault(CSSTransition.exports);
+var _ReplaceTransition = _interopRequireDefault(ReplaceTransition.exports);
+var _TransitionGroup = _interopRequireDefault(TransitionGroup.exports);
+var _Transition = _interopRequireDefault(Transition$1);
+function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : {
     default: obj
   };
@@ -8736,143 +8873,6 @@ FeedbackTick.__initStatic();
 var FeedbackTick$1 = styles$b.withStyles(stylesheet, {
   name: 'FeedbackTick'
 })(FeedbackTick);
-var Radio$3 = {};
-var Radio$2 = {};
-var RadioButtonUnchecked$1 = {};
-const require$$1$1 = _dll_react;
-var _interopRequireDefault$2 = interopRequireDefault.exports;
-Object.defineProperty(RadioButtonUnchecked$1, "__esModule", {
-  value: true
-});
-RadioButtonUnchecked$1.default = void 0;
-var _react$2 = _interopRequireDefault$2(require$$1$1);
-var _pure$1 = _interopRequireDefault$2(pure$1);
-var _SvgIcon$1 = _interopRequireDefault$2(SvgIcon$2);
-var _ref$2 = _react$2.default.createElement("path", {
-  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-});
-var RadioButtonUnchecked = function RadioButtonUnchecked(props) {
-  return _react$2.default.createElement(_SvgIcon$1.default, props, _ref$2);
-};
-RadioButtonUnchecked = (0, _pure$1.default)(RadioButtonUnchecked);
-RadioButtonUnchecked.muiName = 'SvgIcon';
-var _default$2 = RadioButtonUnchecked;
-RadioButtonUnchecked$1.default = _default$2;
-var RadioButtonChecked$1 = {};
-const require$$1 = _dll_react;
-var _interopRequireDefault$1 = interopRequireDefault.exports;
-Object.defineProperty(RadioButtonChecked$1, "__esModule", {
-  value: true
-});
-RadioButtonChecked$1.default = void 0;
-var _react$1 = _interopRequireDefault$1(require$$1);
-var _pure = _interopRequireDefault$1(pure$1);
-var _SvgIcon = _interopRequireDefault$1(SvgIcon$2);
-var _ref$1 = _react$1.default.createElement("path", {
-  d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-});
-var RadioButtonChecked = function RadioButtonChecked(props) {
-  return _react$1.default.createElement(_SvgIcon.default, props, _ref$1);
-};
-RadioButtonChecked = (0, _pure.default)(RadioButtonChecked);
-RadioButtonChecked.muiName = 'SvgIcon';
-var _default$1 = RadioButtonChecked;
-RadioButtonChecked$1.default = _default$1;
-const require$$3 = _dll_react;
-const require$$4 = _dll_prop_types;
-const require$$5 = _dll_classnames;
-var _interopRequireDefault = interopRequireDefault.exports;
-Object.defineProperty(Radio$2, "__esModule", {
-  value: true
-});
-Radio$2.default = Radio$2.styles = void 0;
-var _extends2 = _interopRequireDefault(_extends$1.exports);
-var _objectWithoutProperties2 = _interopRequireDefault(objectWithoutProperties.exports);
-var _react = _interopRequireDefault(require$$3);
-var _propTypes = _interopRequireDefault(require$$4);
-var _classnames = _interopRequireDefault(require$$5);
-var _SwitchBase = _interopRequireDefault(SwitchBase$1);
-var _RadioButtonUnchecked = _interopRequireDefault(RadioButtonUnchecked$1);
-var _RadioButtonChecked = _interopRequireDefault(RadioButtonChecked$1);
-var _helpers = helpers;
-var _withStyles = _interopRequireDefault(withStyles);
-var styles$2 = function styles(theme) {
-  return {
-    root: {
-      color: theme.palette.text.secondary
-    },
-    checked: {},
-    disabled: {},
-    colorPrimary: {
-      '&$checked': {
-        color: theme.palette.primary.main
-      },
-      '&$disabled': {
-        color: theme.palette.action.disabled
-      }
-    },
-    colorSecondary: {
-      '&$checked': {
-        color: theme.palette.secondary.main
-      },
-      '&$disabled': {
-        color: theme.palette.action.disabled
-      }
-    }
-  };
-};
-Radio$2.styles = styles$2;
-var _ref = _react.default.createElement(_RadioButtonUnchecked.default, null);
-var _ref2 = _react.default.createElement(_RadioButtonChecked.default, null);
-function Radio$1(props) {
-  var classes = props.classes, color = props.color, other = (0, _objectWithoutProperties2.default)(props, ["classes", "color"]);
-  return _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({
-    type: "radio",
-    icon: _ref,
-    checkedIcon: _ref2,
-    classes: {
-      root: (0, _classnames.default)(classes.root, classes[("color").concat((0, _helpers.capitalize)(color))]),
-      checked: classes.checked,
-      disabled: classes.disabled
-    }
-  }, other));
-}
-Radio$1.propTypes = {
-  checked: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  checkedIcon: _propTypes.default.node,
-  classes: _propTypes.default.object.isRequired,
-  color: _propTypes.default.oneOf(['primary', 'secondary', 'default']),
-  disabled: _propTypes.default.bool,
-  disableRipple: _propTypes.default.bool,
-  icon: _propTypes.default.node,
-  id: _propTypes.default.string,
-  inputProps: _propTypes.default.object,
-  inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-  onChange: _propTypes.default.func,
-  type: _propTypes.default.string,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool])
-};
-Radio$1.defaultProps = {
-  color: 'secondary'
-};
-var _default = (0, _withStyles.default)(styles$2, {
-  name: 'MuiRadio'
-})(Radio$1);
-Radio$2.default = _default;
-(function (exports) {
-  var _interopRequireDefault = interopRequireDefault.exports;
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function get() {
-      return _Radio.default;
-    }
-  });
-  var _Radio = _interopRequireDefault(Radio$2);
-})(Radio$3);
-var Radio = getDefaultExportFromCjs(Radio$3);
 const React$4 = _dll_react;
 const PropTypes$3 = _dll_prop_types;
 const classNames$2 = _dll_classnames;
@@ -8903,6 +8903,24 @@ const styleSheet = theme => ({
     [`& .${CLASS_NAME}`]: {
       paddingRight: theme.spacing.unit
     }
+  },
+  belowLayout: {
+    '& > label': {
+      alignItems: 'flex-start'
+    }
+  },
+  belowLayoutCenter: {
+    justifyContent: 'center',
+    '& > label': {
+      alignItems: 'center'
+    }
+  },
+  belowSelectionComponent: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > span': {
+      paddingLeft: 0
+    }
   }
 });
 const formStyleSheet = {
@@ -8928,7 +8946,7 @@ const StyledFormControlLabel = styles$b.withStyles(formStyleSheet, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$3,
-    lineNumber: 56
+    lineNumber: 74
   }
 }));
 const colorStyle = (varName, fallback) => ({
@@ -8985,7 +9003,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 101
+      lineNumber: 119
     }
   });
 });
@@ -9017,7 +9035,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 129
+      lineNumber: 147
     }
   });
 });
@@ -9040,7 +9058,8 @@ class ChoiceInput extends React$4.Component {
       hideTick: PropTypes$3.bool,
       isEvaluateMode: PropTypes$3.bool,
       choicesLayout: PropTypes$3.oneOf(['vertical', 'grid', 'horizontal']),
-      updateSession: PropTypes$3.func
+      updateSession: PropTypes$3.func,
+      isSelectionButtonBelow: PropTypes$3.bool
     };
   }
   static __initStatic2() {
@@ -9067,18 +9086,20 @@ class ChoiceInput extends React$4.Component {
     return 'choice-' + (Math.random() * 10000).toFixed();
   }
   render() {
-    const {choiceMode, disabled, displayKey, feedback, label, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode, choicesLayout, value, checked} = this.props;
+    const {choiceMode, disabled, displayKey, feedback, label, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode, choicesLayout, value, checked, isSelectionButtonBelow} = this.props;
     const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
     const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
     const holderClassNames = classNames$2(classes.checkboxHolder, {
-      [classes.horizontalLayout]: choicesLayout === 'horizontal'
+      [classes.horizontalLayout]: choicesLayout === 'horizontal',
+      [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',
+      [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid'
     });
-    const choicelabel = React$4.createElement(React$4.Fragment, null, displayKey ? React$4.createElement('span', {
+    const choicelabel = React$4.createElement(React$4.Fragment, null, displayKey && !isSelectionButtonBelow ? React$4.createElement('span', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 219
+        lineNumber: 242
       }
     }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -9087,7 +9108,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 221
+        lineNumber: 244
       }
     })) : React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -9096,7 +9117,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 224
+        lineNumber: 247
       }
     }));
     return React$4.createElement('div', {
@@ -9104,30 +9125,64 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 230
+        lineNumber: 253
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 231
+        lineNumber: 254
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 232
+        lineNumber: 255
       }
     }), React$4.createElement('div', {
       className: classNames$2(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 233
+        lineNumber: 256
+      }
+    }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
+      label: choicelabel,
+      value: value,
+      htmlFor: this.choiceId,
+      labelPlacement: 'top',
+      control: React$4.createElement('span', {
+        className: classes.belowSelectionComponent,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 264
+        }
+      }, React$4.createElement(Tag, {
+        accessibility: accessibility,
+        disabled: disabled,
+        checked: checked,
+        correctness: correctness,
+        value: value,
+        id: this.choiceId,
+        onChange: this.onToggleChoice,
+        style: {
+          padding: 0
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 265
+        }
+      }), displayKey, "."),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 258
       }
-    }, React$4.createElement(StyledFormControlLabel, {
+    }) : React$4.createElement(StyledFormControlLabel, {
       label: choicelabel,
       value: value,
       htmlFor: this.choiceId,
@@ -9142,13 +9197,13 @@ class ChoiceInput extends React$4.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$3,
-          lineNumber: 239
+          lineNumber: 285
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 234
+        lineNumber: 280
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -9157,7 +9212,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 252
+        lineNumber: 297
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -9165,7 +9220,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 253
+        lineNumber: 298
       }
     }));
   }
@@ -9196,7 +9251,7 @@ class Choice extends React$3.Component {
     };
   }
   render() {
-    const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes, choicesLayout, gridColumns, updateSession} = this.props;
+    const {choice, index, choicesLength, showCorrect, isEvaluateMode, choiceMode, disabled, checked, correctness, displayKey, classes, choicesLayout, gridColumns, updateSession, isSelectionButtonBelow} = this.props;
     const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
     const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
     const choiceProps = {
@@ -9212,7 +9267,8 @@ class Choice extends React$3.Component {
       gridColumns,
       updateSession,
       onChange: this.onChange,
-      isEvaluateMode
+      isEvaluateMode,
+      isSelectionButtonBelow
     };
     const names = classNames$1(classes.choice, {
       [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',
@@ -9224,7 +9280,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 63
+        lineNumber: 66
       }
     }, React$3.createElement(ChoiceInput$1, {
       ...choiceProps,
@@ -9232,7 +9288,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 64
+        lineNumber: 67
       }
     }));
   }
@@ -9252,7 +9308,8 @@ Choice.propTypes = {
   correctness: PropTypes$2.string,
   displayKey: PropTypes$2.string,
   choicesLayout: PropTypes$2.oneOf(['vertical', 'grid', 'horizontal']),
-  gridColumns: PropTypes$2.string
+  gridColumns: PropTypes$2.string,
+  isSelectionButtonBelow: PropTypes$2.bool
 };
 var StyledChoice = styles$b.withStyles(theme => ({
   choice: {
@@ -9341,7 +9398,8 @@ class MultipleChoice$1 extends React$2.Component {
       alwaysShowCorrect: PropTypes$1.bool,
       animationsDisabled: PropTypes$1.bool,
       language: PropTypes$1.string,
-      onShowCorrectToggle: PropTypes$1.func
+      onShowCorrectToggle: PropTypes$1.func,
+      isSelectionButtonBelow: PropTypes$1.bool
     };
   }
   constructor(props) {
@@ -9468,19 +9526,19 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 208
+        lineNumber: 210
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 210
+        lineNumber: 212
       }
     }, "Multiple Select Question");
   }
   render() {
-    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, onChoiceChanged, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language} = this.props;
+    const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, onChoiceChanged, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow} = this.props;
     const {showCorrect} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
@@ -9495,7 +9553,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 238
+        lineNumber: 241
       }
     });
     return React$2.createElement('div', {
@@ -9503,21 +9561,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 247
+        lineNumber: 250
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 248
+        lineNumber: 251
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 253
+        lineNumber: 256
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -9527,14 +9585,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 255
+        lineNumber: 258
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 269
+        lineNumber: 272
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -9544,7 +9602,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 270
+        lineNumber: 273
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -9554,7 +9612,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 273
+        lineNumber: 276
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -9565,7 +9623,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 281
+        lineNumber: 284
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -9584,10 +9642,11 @@ class MultipleChoice$1 extends React$2.Component {
       checked: this.getChecked(choice),
       correctness: isEvaluateMode ? this.getCorrectness(choice) : undefined,
       displayKey: this.indexToSymbol(index),
+      isSelectionButtonBelow: isSelectionButtonBelow,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 289
+        lineNumber: 292
       }
     })))));
   }