@instructure/quiz-core 20.8.1-rc.0 → 20.8.1-rc.2

package/es/moderating/components/events/ResponseEvent.js

@@ -60,7 +60,8 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
       var strippedItemBody = extractTextFromHtml(this.itemBody);
       return /*#__PURE__*/React.createElement("span", null, this.hasMedia() && /*#__PURE__*/React.createElement(IconImageSolid, {
         className: styles.answerMediaIcon
-      }), t('Answered: {question}', {
+      }), t('Answered question {position}: {question}', {
+        position: this.props.event.getIn(['eventData', 'position']),
         question: strippedItemBody
       }));
     }

package/es/moderating/components/resources/ModerateTable/presenter.js

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -10,11 +11,14 @@ var _dec, _class, _class2, _temp;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import classNames from 'classnames';
 import { Text } from '@instructure/ui-text';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconInfoLine, IconConfigureLine } from '@instructure/ui-icons';
 import { themeable } from '@instructure/ui-themeable';
 import t from '@instructure/quiz-i18n/es/format-message';
 import ModerateTableRow from "../ModerateTableRow/index.js";
@@ -23,24 +27,27 @@ import OutstandingQuizzesModal from "../OutstandingQuizzesModal/index.js";
 import ModerateTray from "../../sidebar/ModerateTray/index.js";
 import Spinner from "../../../../common/components/shared/spinner/Spinner.js";
 var styles = {
-  componentId: 'esFtE',
+  componentId: 'eDRzW',
   template: function template(theme) {
-    return "\n\n.esFtE_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.esFtE_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}");
+    return "\n\n.eDRzW_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.eDRzW_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}\n\n.eDRzW_eeML{display:inline-block;transition:transform 0.3s}\n\n.eDRzW_XujX{transform:scaleX(-1)}");
   },
-  'emptyText': 'esFtE_bwKH',
-  'page': 'esFtE_xNcP'
+  'emptyText': 'eDRzW_bwKH',
+  'page': 'eDRzW_xNcP',
+  'scoreToggleWrapper': 'eDRzW_eeML',
+  'mirror': 'eDRzW_XujX'
 };
 import theme from "./theme.js";
 import ResetQuiz from "../../sidebar/ResetQuiz/index.js";
 import { OUTSTANDING_QUIZZES_MODAL } from '@instructure/quiz-common';
-import { IconInfoLine } from '@instructure/ui-icons';
 import { chunk } from 'lodash';
 
 var _ref2 = /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(IconInfoLine, null));
 
-var _ref4 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref4 = /*#__PURE__*/React.createElement(IconConfigureLine, null);
 
-var _ref5 = /*#__PURE__*/React.createElement(ResetQuiz, null);
+var _ref5 = /*#__PURE__*/React.createElement(Spinner, null);
+
+var _ref6 = /*#__PURE__*/React.createElement(ResetQuiz, null);
 
 export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ModerateTable, _Component);
@@ -58,6 +65,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
+      displayScoreAsPercentage: true,
       // To support voiceover when the table changes
       moderatePanelIterations: 0,
       selectedStudent: null,
@@ -150,6 +158,18 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
       _this.pollAutogradingStatus(submittedQuizSessions);
     };
 
+    _this.handleScoreToggle = function () {
+      _this.setState(function (prevState) {
+        return {
+          displayScoreAsPercentage: !prevState.displayScoreAsPercentage
+        };
+      });
+    };
+
+    _this.scoreToggleScreenreaderMessage = function () {
+      return _this.state.displayScoreAsPercentage ? t('Toggle scores to raw points') : t('Toggle scores to percentages');
+    };
+
     _this.openModalOnClick = function () {
       _this.props.openModal(OUTSTANDING_QUIZZES_MODAL);
     };
@@ -231,7 +251,8 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           onModerateLogClick: onModerateLogClick,
           rowData: rowData,
           shouldRenderModerateButton: shouldRenderModerateButton,
-          focusTarget: _this2.state.selectedStudent
+          focusTarget: _this2.state.selectedStudent,
+          displayScoreAsPercentage: _this2.state.displayScoreAsPercentage
         });
       });
     }
@@ -291,6 +312,20 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         afterSubmit: this.props.afterManualSubmit
       })));
     }
+  }, {
+    key: "renderScoreToggle",
+    value: function renderScoreToggle() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles.scoreToggleWrapper, _defineProperty({}, styles.mirror, !this.state.displayScoreAsPercentage))
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        size: "small",
+        margin: "0 x-small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: this.scoreToggleScreenreaderMessage(),
+        onClick: this.handleScoreToggle
+      }, _ref4));
+    }
   }, {
     key: "renderTable",
     value: function renderTable() {
@@ -305,7 +340,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         id: "moderation-table-attempts"
       }, t('Attempts')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-score"
-      }, t('Score')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-time"
       }, t('Time')), !this.props.anonymousGrading && /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: "moderation-table-log"
@@ -325,7 +360,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
           isFetching = _this$props5.isFetching,
           tableData = _this$props5.tableData,
           emptyMessage = _this$props5.emptyMessage;
-      if (isFetching || this.state.isWaiting) return _ref4;
+      if (isFetching || this.state.isWaiting) return _ref5;
       if (tableData.length) return this.renderTable();
       return /*#__PURE__*/React.createElement("span", {
         className: styles.emptyText
@@ -340,7 +375,7 @@ export var ModerateTable = (_dec = themeable(theme, styles), _dec(_class = (_tem
         className: styles.page
       }, /*#__PURE__*/React.createElement(ModerateTray, {
         onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && _ref5, this.props.children), this.renderContent());
+      }, !this.props.anonymousGrading && _ref6, this.props.children), this.renderContent());
     }
   }]);
 

package/es/moderating/components/resources/ModerateTableRow/presenter.js

@@ -143,8 +143,12 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
         var message = t('No Score');
 
         if (result.get('score') != null) {
-          var percentage = result.get('score') / result.get('pointsPossible');
-          message = _this3.formatPercentMax2FractionDigits(percentage);
+          if (_this3.props.displayScoreAsPercentage) {
+            var percentage = result.get('score') / result.get('pointsPossible');
+            message = _this3.formatPercentMax2FractionDigits(percentage);
+          } else {
+            message = "".concat(t.number(result.get('score')), "/").concat(t.number(result.get('pointsPossible')));
+          }
         }
 
         if (result.get('pointsPossible') === 0) {
@@ -360,6 +364,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
   return ModerateTableRow;
 }(withI18nSupport(Component)), _class2.propTypes = {
   anonymousGrading: PropTypes.bool.isRequired,
+  displayScoreAsPercentage: PropTypes.bool,
   onModerateButtonClick: PropTypes.func.isRequired,
   onModerateLogClick: PropTypes.func.isRequired,
   onAccommodationsClick: PropTypes.func,
@@ -380,6 +385,7 @@ export var ModerateTableRow = (_dec = themeable(theme, styles), _dec(_class = (_
   shouldRenderModerateButton: PropTypes.bool,
   focusTarget: PropTypes.string
 }, _class2.defaultProps = {
+  displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,
   focusTarget: null,
   onAccommodationsClick: null

package/lib/moderating/components/events/ResponseEvent.js

@@ -83,7 +83,8 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var strippedItemBody = (0, _quizInteractions.extractTextFromHtml)(this.itemBody);
       return /*#__PURE__*/_react.default.createElement("span", null, this.hasMedia() && /*#__PURE__*/_react.default.createElement(_uiIcons.IconImageSolid, {
         className: styles.answerMediaIcon
-      }), (0, _formatMessage.default)('Answered: {question}', {
+      }), (0, _formatMessage.default)('Answered question {position}: {question}', {
+        position: this.props.event.getIn(['eventData', 'position']),
         question: strippedItemBody
       }));
     }

package/lib/moderating/components/resources/ModerateTable/presenter.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ModerateTable = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -27,6 +29,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _uiText = require("@instructure/ui-text");
 
 var _uiLink = require("@instructure/ui-link");
@@ -37,6 +41,10 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiTable = require("@instructure/ui-table");
 
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiIcons = require("@instructure/ui-icons");
+
 var _uiThemeable = require("@instructure/ui-themeable");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -57,26 +65,28 @@ var _index5 = _interopRequireDefault(require("../../sidebar/ResetQuiz/index.js")
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _uiIcons = require("@instructure/ui-icons");
-
 var _lodash = require("lodash");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'esFtE',
+  componentId: 'eDRzW',
   template: function template(theme) {
-    return "\n\n.esFtE_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.esFtE_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}");
+    return "\n\n.eDRzW_bwKH{display:block;margin:".concat(theme.emptyTextMargin || 'inherit', " 0 0 0}\n\n.eDRzW_xNcP{background-color:").concat(theme.pageBackgroundColor || 'inherit', ";flex:1;overflow:auto}\n\n.eDRzW_eeML{display:inline-block;transition:transform 0.3s}\n\n.eDRzW_XujX{transform:scaleX(-1)}");
   },
-  'emptyText': 'esFtE_bwKH',
-  'page': 'esFtE_xNcP'
+  'emptyText': 'eDRzW_bwKH',
+  'page': 'eDRzW_xNcP',
+  'scoreToggleWrapper': 'eDRzW_eeML',
+  'mirror': 'eDRzW_XujX'
 };
 
 var _ref2 = /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiIcons.IconInfoLine, null));
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconConfigureLine, null);
+
+var _ref5 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
 
-var _ref5 = /*#__PURE__*/_react.default.createElement(_index5.default, null);
+var _ref6 = /*#__PURE__*/_react.default.createElement(_index5.default, null);
 
 var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ModerateTable, _Component);
@@ -94,6 +104,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 
     _this = _super.call.apply(_super, [this].concat(args));
     _this.state = {
+      displayScoreAsPercentage: true,
       // To support voiceover when the table changes
       moderatePanelIterations: 0,
       selectedStudent: null,
@@ -184,6 +195,18 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       _this.pollAutogradingStatus(submittedQuizSessions);
     };
 
+    _this.handleScoreToggle = function () {
+      _this.setState(function (prevState) {
+        return {
+          displayScoreAsPercentage: !prevState.displayScoreAsPercentage
+        };
+      });
+    };
+
+    _this.scoreToggleScreenreaderMessage = function () {
+      return _this.state.displayScoreAsPercentage ? (0, _formatMessage.default)('Toggle scores to raw points') : (0, _formatMessage.default)('Toggle scores to percentages');
+    };
+
     _this.openModalOnClick = function () {
       _this.props.openModal(_quizCommon.OUTSTANDING_QUIZZES_MODAL);
     };
@@ -263,7 +286,8 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           onModerateLogClick: onModerateLogClick,
           rowData: rowData,
           shouldRenderModerateButton: shouldRenderModerateButton,
-          focusTarget: _this2.state.selectedStudent
+          focusTarget: _this2.state.selectedStudent,
+          displayScoreAsPercentage: _this2.state.displayScoreAsPercentage
         });
       });
     }
@@ -323,6 +347,20 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         afterSubmit: this.props.afterManualSubmit
       })));
     }
+  }, {
+    key: "renderScoreToggle",
+    value: function renderScoreToggle() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.scoreToggleWrapper, (0, _defineProperty2.default)({}, styles.mirror, !this.state.displayScoreAsPercentage))
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        size: "small",
+        margin: "0 x-small",
+        withBackground: false,
+        withBorder: false,
+        screenReaderLabel: this.scoreToggleScreenreaderMessage(),
+        onClick: this.handleScoreToggle
+      }, _ref4));
+    }
   }, {
     key: "renderTable",
     value: function renderTable() {
@@ -337,7 +375,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         id: "moderation-table-attempts"
       }, (0, _formatMessage.default)('Attempts')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-score"
-      }, (0, _formatMessage.default)('Score')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Score'), this.renderScoreToggle()), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-time"
       }, (0, _formatMessage.default)('Time')), !this.props.anonymousGrading && /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
         id: "moderation-table-log"
@@ -357,7 +395,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           isFetching = _this$props5.isFetching,
           tableData = _this$props5.tableData,
           emptyMessage = _this$props5.emptyMessage;
-      if (isFetching || this.state.isWaiting) return _ref4;
+      if (isFetching || this.state.isWaiting) return _ref5;
       if (tableData.length) return this.renderTable();
       return /*#__PURE__*/_react.default.createElement("span", {
         className: styles.emptyText
@@ -372,7 +410,7 @@ var ModerateTable = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         className: styles.page
       }, /*#__PURE__*/_react.default.createElement(_index4.default, {
         onClose: this.onCloseTray
-      }, !this.props.anonymousGrading && _ref5, this.props.children), this.renderContent());
+      }, !this.props.anonymousGrading && _ref6, this.props.children), this.renderContent());
     }
   }]);
   ModerateTable.displayName = "ModerateTable";

package/lib/moderating/components/resources/ModerateTableRow/presenter.js

@@ -175,8 +175,12 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         var message = (0, _formatMessage.default)('No Score');
 
         if (result.get('score') != null) {
-          var percentage = result.get('score') / result.get('pointsPossible');
-          message = _this3.formatPercentMax2FractionDigits(percentage);
+          if (_this3.props.displayScoreAsPercentage) {
+            var percentage = result.get('score') / result.get('pointsPossible');
+            message = _this3.formatPercentMax2FractionDigits(percentage);
+          } else {
+            message = "".concat(_formatMessage.default.number(result.get('score')), "/").concat(_formatMessage.default.number(result.get('pointsPossible')));
+          }
         }
 
         if (result.get('pointsPossible') === 0) {
@@ -391,6 +395,7 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   return ModerateTableRow;
 }((0, _quizCommon.withI18nSupport)(_react.Component)), _class2.propTypes = {
   anonymousGrading: _propTypes.default.bool.isRequired,
+  displayScoreAsPercentage: _propTypes.default.bool,
   onModerateButtonClick: _propTypes.default.func.isRequired,
   onModerateLogClick: _propTypes.default.func.isRequired,
   onAccommodationsClick: _propTypes.default.func,
@@ -411,6 +416,7 @@ var ModerateTableRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   shouldRenderModerateButton: _propTypes.default.bool,
   focusTarget: _propTypes.default.string
 }, _class2.defaultProps = {
+  displayScoreAsPercentage: true,
   shouldRenderModerateButton: true,
   focusTarget: null,
   onAccommodationsClick: null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.8.1-rc.0+7ddfe123f",
+  "version": "20.8.1-rc.2+bc1306e58",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.1.0",
-    "@instructure/quiz-common": "20.8.1-rc.0+7ddfe123f",
-    "@instructure/quiz-i18n": "20.8.1-rc.0+7ddfe123f",
-    "@instructure/quiz-interactions": "20.8.1-rc.0+7ddfe123f",
-    "@instructure/quiz-number-input": "20.8.1-rc.0+7ddfe123f",
-    "@instructure/quiz-rce": "20.8.1-rc.0+7ddfe123f",
+    "@instructure/quiz-common": "20.8.1-rc.2+bc1306e58",
+    "@instructure/quiz-i18n": "20.8.1-rc.2+bc1306e58",
+    "@instructure/quiz-interactions": "20.8.1-rc.2+bc1306e58",
+    "@instructure/quiz-number-input": "20.8.1-rc.2+bc1306e58",
+    "@instructure/quiz-rce": "20.8.1-rc.2+bc1306e58",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.8.1-rc.0+7ddfe123f",
+    "instructure-validations": "20.8.1-rc.2+bc1306e58",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.8.1-rc.0+7ddfe123f",
+    "quiz-presets": "20.8.1-rc.2+bc1306e58",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ddfe123f7affbad1dc83267ac782ef96b1b24c0"
+  "gitHead": "bc1306e580538ad70310d908839cf09aa59d240e"
 }