@instructure/quiz-core 21.0.1-rc.0 → 21.0.1-rc.11

package/es/common/components/resources/quiz/AddContent/Body/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     popoverContentMargin: spacing.medium,
     popoverHeaderBoxBorderWidth: borders.widthSmall,
-    popoverHeaderBoxBorderColor: colors.contrasts.grey1214
+    popoverHeaderBoxBorderColor: colors.tiara
   };
 };
 export default generateComponentTheme;

package/es/common/components/resources/quiz/AddContent/Button/theme.js

@@ -8,16 +8,16 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     attachQuestionButtonHolderZIndex: '2222',
     newItemButtonMargin: spacing.xSmall,
     newItemButtonPadding: spacing.xSmall,
-    newItemButtonBackgroundColor: colors.contrasts.blue4570,
+    newItemButtonBackgroundColor: colors.brand,
     newItemButtonBorderRadius: spacing.large,
-    newItemButtonColor: colors.contrasts.white1010,
-    newItemButtonFocusOutline: "2px solid ".concat(colors.contrasts.blue4570),
+    newItemButtonColor: colors.white,
+    newItemButtonFocusOutline: "2px solid ".concat(colors.brand),
     newItemButtonFocusOutlineOffset: spacing.xxxSmall,
     newItemButtonFontSize: typography.fontSizeMedium,
     newItemButtonFontWeight: typography.fontWeightBold,
     newItemButtonZIndex: '4444',
     newItemButtonBoxShadow: '2px 2px 3px #ddd',
-    newItemButtonEditingBackgroundColor: colors.contrasts.red4570,
+    newItemButtonEditingBackgroundColor: colors.crimson,
     newItemButtonHolderZIndex: '2222',
     newItemButtonTransition: "background-color ".concat(transitions.duration, " linear, transform ").concat(transitions.duration, " ease")
   };

package/es/common/components/resources/quiz/AddContent/Popover/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     borderLineBorderWidth: borders.widthMedium,
-    borderLineBorderColor: colors.contrasts.grey1111
+    borderLineBorderColor: colors.porcelain
   };
 };
 export default generateComponentTheme;

package/es/common/components/resources/sessionItemResult/ResultStimulus/theme.js

@@ -6,16 +6,16 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints;
   return {
     rootBorderWidth: borders.widthSmall,
-    rootBorderColor: colors.contrasts.grey1111,
+    rootBorderColor: colors.porcelain,
     instructionsPaddingTopBottom: spacing.medium,
     instructionsPaddingLeftRight: spacing.large,
     instructionsBorderWidth: borders.widthSmall,
-    instructionsBorderColor: colors.contrasts.grey1111,
+    instructionsBorderColor: colors.porcelain,
     instructionsHeaderPadding: spacing.xSmall,
     instructionsHeaderFontWeight: typography.fontWeightBold,
     infoPaddingTopBottom: spacing.small,
     infoPaddingLeftRight: spacing.medium,
-    infoBackgroundColor: colors.contrasts.grey1111,
+    infoBackgroundColor: colors.porcelain,
     headerPaddingTop: spacing.xSmall,
     headerPaddingBottom: spacing.small,
     titleFontSize: typography.fontSizeMedium,
@@ -26,7 +26,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     phoneInstructionsPaddingLeftRight: spacing.small,
     phoneInfoPadding: spacing.small,
     phoneConnectingLinesBorderWidth: borders.widthSmall,
-    phoneConnectingLinesBorderColor: colors.contrasts.grey1214,
+    phoneConnectingLinesBorderColor: colors.tiara,
     phoneConnectingLinesMargin: spacing.small
   };
 };

package/es/common/components/resources/sessionItemResult/SessionItemResult/theme.js

@@ -6,9 +6,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     sessionItemResultPadding: spacing.small,
     topBorderWidth: borders.widthSmall,
-    topBorderColor: colors.contrasts.grey1214,
+    topBorderColor: colors.tiara,
     resultMargin: spacing.small,
-    pointsColor: colors.contrasts.grey4570,
+    pointsColor: colors.ash,
     pointFontSize: typography.fontSizeXSmall,
     questionFontSize: typography.fontSizeMedium,
     itemFeedbackWrapperMargin: spacing.small,
@@ -17,9 +17,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     itemFeedbackWrapperFontSize: typography.fontSizeSmall,
     itemFeedbackWrapperBorderStyle: borders.borderStyle,
     itemFeedbackWrapperBorderWidth: borders.widthSmall,
-    itemFeedbackWrapperBorderColor: colors.contrasts.grey1214,
+    itemFeedbackWrapperBorderColor: colors.tiara,
     itemFeedbackWrapperStyle: borders.style,
-    itemFeedbackLabelColor: colors.contrasts.grey100100,
+    itemFeedbackLabelColor: colors.oxford,
     itemFeedbackLabelFontSize: typography.fontSizeXSmall,
     itemFeedbackMargin: spacing.xxSmall,
     itemFeedbackTextSize: typography.fontSizeMedium,

package/es/common/components/resources/sessionItemResult/SessionItemResultsList/theme.js

@@ -8,7 +8,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     sessionItemResultsListHeaderWrapperMarginLeftRight: spacing.large,
     sessionItemResultsListHeaderFontSize: typography.fontSizeXLarge,
     sessionItemResultsListMargin: spacing.xSmall,
-    sessionItemResultsListBorderColor: colors.contrasts.grey1214,
+    sessionItemResultsListBorderColor: colors.tiara,
     sessionItemResultsListBorderWidth: borders.widthSmall
   };
 };

package/es/common/components/resources/stimulus/Stimulus/theme.js

@@ -6,7 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     leftPanelPadding: spacing.xxSmall,
     leftPanelBorderWidth: borders.widthSmall,
-    leftPanelBorderColor: colors.contrasts.grey1214,
+    leftPanelBorderColor: colors.tiara,
     rightPanelPadding: spacing.xSmall,
     dragAndDropHandleZIndex: '3333',
     dragAndDropHandleFontSize: typography.fontSizeMedium,

package/es/common/components/resources/stimulus/StimulusEdit/theme.js

@@ -9,7 +9,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     optionPadding: spacing.small,
     stimulusContentPadding: spacing.small,
     stimulusContentPaddingBottom: spacing.small,
-    stimulusButtonsColor: colors.contrasts.grey100100,
+    stimulusButtonsColor: colors.oxford,
     stimulusButtonsZIndex: '3333'
   };
 };

package/es/common/components/resources/stimulus/StimulusEditInfo/index.js

@@ -2,12 +2,16 @@ import { bindActionCreators } from 'redux';
 import { connect } from "../../../../react-redux.js";
 import * as modificationActions from "../../../../actions/modifications.js";
 import { featureOn } from "../../../../../common/util/featureCheck.js";
+import { getActiveQuizId, getQuizById } from "../../../../../common/selectors/quizzes.js";
 import StimulusEditInfo from "./presenter.js";
 function mapStateToProps(state, props) {
+  var quizId = getActiveQuizId(state);
+  var quiz = getQuizById(state, quizId);
   return {
     workingStimulus: props.stimulus.getWorkingInstance(),
     errorsShowing: state.getIn(['errorsShowing', props.guid], props.errorsShowing || false),
-    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation')
+    stimulusOrientationEnabled: featureOn('customizable_stimulus_orientation'),
+    shuffleQuestionsEnabled: quiz.shuffleQuestions
   };
 }
 function mapDispatchToProps(dispatch) {

package/es/common/components/resources/stimulus/StimulusEditInfo/presenter.js

@@ -18,6 +18,7 @@ import { SimpleSelect, TextInput, TOP, withStyleOverrides, FormFieldGroup, FormF
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { Alert } from '@instructure/ui-alerts';
 var _ref3 = jsx(IconUpdownLine, {
   rotate: "90"
 });
@@ -96,6 +97,16 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
         value: "top"
       }, t('Questions below'))));
     }
+  }, {
+    key: "renderPassageAlert",
+    value: function renderPassageAlert(stimulus) {
+      if (!stimulus.passage || !this.props.shuffleQuestionsEnabled) {
+        return null;
+      }
+      return jsx(Alert, {
+        variant: "warning"
+      }, t('The passage sections may not appear in their original order due to the shuffle setting.'));
+    }
   }, {
     key: "renderInstructions",
     value: function renderInstructions(stimulus) {
@@ -146,7 +157,7 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
       }, jsx(Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText(stimulus)), jsx("div", {
+      }, this.headerText(stimulus)), this.renderPassageAlert(stimulus), jsx("div", {
         css: this.props.styles.section
       }, jsx(TextInput, {
         messages: this.inputErrors('title'),
@@ -184,9 +195,11 @@ export var StimulusEditInfo = (_dec = withStyleOverrides(generateStyle, generate
   modifyStimulus: PropTypes.func.isRequired,
   setTitleRef: PropTypes.func,
   stimulusOrientationEnabled: PropTypes.bool.isRequired,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  shuffleQuestionsEnabled: PropTypes.bool
 }, _StimulusEditInfo.defaultProps = {
   isBankedContent: false,
+  shuffleQuestionsEnabled: false,
   setTitleRef: function setTitleRef() {}
 }, _StimulusEditInfo)) || _class);
 export default StimulusEditInfo;

package/es/common/components/resources/stimulus/StimulusEditInfo/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     colors = _ref.colors;
   return {
     sectionPadding: spacing.small,
-    optionalLabelColor: colors.contrasts.grey4570,
+    optionalLabelColor: colors.ash,
     optionalLabelFontSize: typography.fontSizeXSmall,
     urlLabelMargin: spacing.xSmall
   };

package/es/common/components/resources/stimulus/StimulusShow/index.js

@@ -11,13 +11,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconBankLine } from '@instructure/ui-icons';
 import { jsx } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
+import { Flex, withStyleOverrides } from '@instructure/quiz-common';
 import StimulusShowInfo from "../StimulusShowInfo/index.js";
 import ActionButtons from "../../../../../building/components/resources/ActionButtons/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import Overlay from "../../../shared/overlay/index.js";
-import { Flex, withStyleOverrides } from '@instructure/quiz-common';
 var _ref = jsx(IconBankLine, null);
 export var StimulusShow = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_StimulusShow = /*#__PURE__*/function (_Component) {
   _inherits(StimulusShow, _Component);

package/es/common/components/shared/Card/CardContent/theme.js

@@ -6,13 +6,13 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     transitions = _ref.transitions;
   return {
     contentTransitionDuration: transitions.duration,
-    contentBackgroundColor: colors.contrasts.white1010,
+    contentBackgroundColor: colors.white,
     contentMaxWidth: '79.5rem',
     contentMargin: spacing.medium,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneContentMargin: spacing.xSmall,
     contentBoxShadow: shadows.depth1,
-    contentBorderColor: colors.contrasts.grey1214,
+    contentBorderColor: colors.tiara,
     contentBorderRadius: '4px'
   };
 };

package/es/common/components/shared/Card/CardWrapper/theme.js

@@ -3,7 +3,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     breakpoints = _ref.breakpoints,
     transitions = _ref.transitions;
   return {
-    wrapperPadding: spacing.medium,
+    wrapperPadding: spacing.mediumSmall,
     wrapperTransitionDuration: transitions.duration,
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneWrapperPadding: spacing.medium

package/es/common/components/shared/InteractionTypes/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     stimulusDividerBorderWidth: borders.widthSmall,
-    stimulusDividerBorderColor: colors.contrasts.grey4570,
+    stimulusDividerBorderColor: colors.ash,
     stimulusDividerMarginTop: spacing.xSmall,
     stimulusDividerMarginBottom: spacing.small
   };

package/es/common/components/shared/PaginatedCollection/presenter.js

@@ -54,8 +54,8 @@ export var PaginatedCollection = (_dec = withStyleOverrides(generateStyle, gener
       this.getPage(this.props.stateKey, this.props.currentPage, this.props.params);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(_ref) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(_ref) {
       var merge = _ref.merge,
         params = _ref.params,
         set = _ref.set,

package/es/common/components/shared/PaginatedCollection/theme.js

@@ -5,7 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     emptyPadding: spacing.small,
     emptyFontSize: typography.fontSizeLarge,
-    emptyColor: colors.contrasts.grey4570
+    emptyColor: colors.ash
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/TimeUnitsInput/index.js

@@ -179,8 +179,8 @@ export var TimeUnitsInput = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(TimeUnitsInput, [{
-    key: "componentWillMount",
-    value: function componentWillMount() {
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
       var _breakdownSeconds5 = breakdownSeconds(this.props.timeInSeconds, this.props.includeDays),
         days = _breakdownSeconds5.days,
         hours = _breakdownSeconds5.hours,

package/es/common/components/shared/drag_and_drop/DragAndDropZone/theme.js

@@ -4,16 +4,16 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     borders = _ref.borders;
   return {
     DnDZoneBorderWidth: borders.widthSmall,
-    DnDZoneBorderColor: colors.contrasts.grey1214,
-    DnDZoneBackgroundColor: colors.contrasts.grey1111,
+    DnDZoneBorderColor: colors.tiara,
+    DnDZoneBackgroundColor: colors.porcelain,
     DnDZonePadding: spacing.medium,
     // sidebar:
     sidebarDnDZoneBorderWidth: borders.widthSmall,
-    sidebarDnDZoneBorderColor: colors.contrasts.grey100100,
-    sidebarDnDZoneBackgroundColor: colors.contrasts.grey1111,
+    sidebarDnDZoneBorderColor: colors.oxford,
+    sidebarDnDZoneBackgroundColor: colors.porcelain,
     sidebarDnDZonePadding: spacing.small,
     sidebarDnDZoneMargin: spacing.xSmall,
-    sidebarDnDZoneColor: colors.contrasts.grey125125
+    sidebarDnDZoneColor: colors.licorice
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/errors/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     errorFontFamily: typography.fontFamily,
     errorFontSize: typography.fontSizeSmall,
-    errorColor: colors.contrasts.red4570
+    errorColor: colors.crimson
   };
 };
 export default generateComponentTheme;

package/es/common/components/shared/file_selector/theme.js

@@ -3,9 +3,9 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing,
     borders = _ref.borders;
   return {
-    dropzoneBackgroundColor: colors.contrasts.grey1111,
+    dropzoneBackgroundColor: colors.porcelain,
     dropzoneBorderWidth: borders.widthSmall,
-    dropzoneBorderColor: colors.contrasts.grey4570,
+    dropzoneBorderColor: colors.ash,
     dropzonePadding: spacing.medium
   };
 };

package/es/common/components/shared/functionality/makeEditable.js

@@ -55,8 +55,8 @@ var giveEditProps = function giveEditProps(ComposedComponent) {
       return _this;
     }
     _createClass(_Class, [{
-      key: "componentWillMount",
-      value: function componentWillMount() {
+      key: "UNSAFE_componentWillMount",
+      value: function UNSAFE_componentWillMount() {
         this._uniqId = uniqueId("".concat(ComposedComponent.displayName, "_"));
       }
     }, {

package/es/common/components/shared/overlay/theme.js

@@ -4,7 +4,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     spacing = _ref.spacing;
   return {
     overlayZIndex: '2222',
-    overlayBarColor: colors.contrasts.blue4570,
+    overlayBarColor: colors.electric,
     overlayBarSize: '0.3rem'
   };
 };

package/es/common/reducers/taking.js

@@ -67,7 +67,11 @@ var loadResponses = function loadResponses(state, payload) {
   return payload.reduce(modifyResponse, state);
 };
 var markSessionStartedIdentifier = function markSessionStartedIdentifier(state, payload) {
-  return state.get('browserSessionId') === payload.browserSessionId ? state : state.set('browserSessionId', payload.browserSessionId);
+  var needsUpdate = state.get('browserSessionId') !== payload.browserSessionId || state.get('ipAddress') !== payload.ipAddress;
+  return needsUpdate ? state.merge({
+    browserSessionId: payload.browserSessionId,
+    ipAddress: payload.ipAddress
+  }) : state;
 };
 var updateQuizSubmitFlag = function updateQuizSubmitFlag(state, payload) {
   return state.set('submitFlag', payload.value);

package/es/common/selectors/taking.js

@@ -7,6 +7,9 @@ export var getCurrentSessionItemPosition = function getCurrentSessionItemPositio
 export var getBrowserSessionId = function getBrowserSessionId(state) {
   return state.getIn([path, 'browserSessionId']);
 };
+export var getIpAddress = function getIpAddress(state) {
+  return state.getIn([path, 'ipAddress']);
+};
 export var getTimerData = function getTimerData(state) {
   return state.getIn([path, 'timerData'], Map());
 };

package/es/common/util/getClientIpAddress.js

@@ -0,0 +1,35 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import Fetcher from "./Fetcher.js";
+export var getClientIpAddress = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(quizSessionId) {
+    var url, fetcher, _yield$fetcher$get, ip;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            url = "/api/quiz_sessions/".concat(quizSessionId, "/get_ip_address");
+            fetcher = new Fetcher();
+            _context.next = 5;
+            return fetcher.get(url);
+          case 5:
+            _yield$fetcher$get = _context.sent;
+            ip = _yield$fetcher$get.ip;
+            return _context.abrupt("return", ip);
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](0);
+            console.error(_context.t0);
+            return _context.abrupt("return", null);
+          case 14:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 10]]);
+  }));
+  return function getClientIpAddress(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();

package/es/common/util/serializeEvent.js

@@ -1,5 +1,5 @@
 import { QUIZ_SUBMISSION_EVENT, RESPONSE, SESSION_STARTED_OR_RESUMED_EVENT, RCE_EVENT, PAGE_BLURRED_EVENT, PAGE_FOCUSED_EVENT } from '@instructure/quiz-common';
-import { getBrowserSessionId } from "../selectors/taking.js";
+import { getBrowserSessionId, getIpAddress } from "../selectors/taking.js";
 import { getActiveQuizSession } from "../selectors/quizSessions.js";
 var whitelist = [QUIZ_SUBMISSION_EVENT, RESPONSE, SESSION_STARTED_OR_RESUMED_EVENT, RCE_EVENT, PAGE_BLURRED_EVENT, PAGE_FOCUSED_EVENT];
 export function serializeEvent(action, store) {
@@ -10,8 +10,10 @@ export function serializeEvent(action, store) {
   var state = store.getState();
   var quizSession = getActiveQuizSession(state);
   var defaultEventData = {
+    userAgent: navigator.userAgent,
     browserSessionId: getBrowserSessionId(state),
-    clientTimestamp: new Date()
+    clientTimestamp: new Date(),
+    ipAddress: getIpAddress(state)
   };
   var authoritativeData = {
     accountUuid: quizSession.accountUuid,

package/es/index.js

@@ -107,8 +107,7 @@ export { sessionStore } from "./common/util/sessionStore.js";
 export { printWithCss, ensureImagesLoaded } from "./common/util/printUtils.js";
 export { ensureRCEContentIsLoaded } from "./common/util/rceChecker.js";
 export { applyComponentStyleOverride, withStyleOverrides, getThemeByKey, setThemeByKey, getActiveTheme, setActiveTheme } from '@instructure/quiz-common';
-
-// APIs
+export { getClientIpAddress } from "./common/util/getClientIpAddress.js"; // APIs
 export { createQuizEntryRegrade } from "./grading/api/quizEntryRegrades.js";
 export { getQuizEntry } from "./building/api/quizEntries.js";
 export { getItem } from "./building/api/items.js";
@@ -146,7 +145,7 @@ import * as takingActionCreators from "./common/actions/taking.js";
 export { takingActionCreators };
 
 // Selectors
-export { getQuizById, getActiveQuizId, getQuizEntryById, isActiveQuizWorkingInstanceOneQuestionAtATime, getActiveQuiz } from "./common/selectors/quizzes.js";
+export { getQuizById, getActiveQuizId, getQuizEntryById, getQuizEntriesByQuizId, isActiveQuizWorkingInstanceOneQuestionAtATime, getActiveQuiz } from "./common/selectors/quizzes.js";
 export { getItemById } from "./common/selectors/items.js";
 export { fileUploading } from "./common/selectors/calls.js";
 export { isTimeUp, getTimerData, getResponseDataByPosition } from "./common/selectors/taking.js";

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

@@ -6,14 +6,17 @@ var _Event;
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { RESPONSE, SESSION_STARTED_OR_RESUMED_EVENT, RCE_EVENT, PAGE_BLURRED_EVENT, PAGE_FOCUSED_EVENT } from '@instructure/quiz-common';
+import { RESPONSE, SESSION_STARTED_OR_RESUMED_EVENT, RCE_EVENT, PAGE_BLURRED_EVENT, PAGE_FOCUSED_EVENT, QUIZ_SUBMISSION_EVENT } from '@instructure/quiz-common';
 import { Table } from '@instructure/ui-table';
 import ElapsedTime from "../resources/ElapsedTime.js";
 import ResponseEvent from "./ResponseEvent.js";
 import SessionStartEvent from "./SessionStartEvent.js";
+import { SessionSubmitEvent } from "./SessionSubmitEvent.js";
 import RCEEvent from "./RCEEvent.js";
 import PageBlurredEvent from "./PageBlurredEvent.js";
 import PageFocusedEvent from "./PageFocusedEvent.js";
+import { extractSessionData } from "../resources/util/extractSessionData.js";
+import { checkIsBreach } from "../resources/util/checkIsBreach.js";
 var _ref = /*#__PURE__*/React.createElement(PageBlurredEvent, null);
 var _ref2 = /*#__PURE__*/React.createElement(PageFocusedEvent, null);
 export var Event = /*#__PURE__*/function (_Component) {
@@ -25,26 +28,34 @@ export var Event = /*#__PURE__*/function (_Component) {
   }
   _createClass(Event, [{
     key: "renderResponseEvent",
-    value: function renderResponseEvent(event) {
+    value: function renderResponseEvent(event, validationErrors, currentEventData) {
       var item = event.getItem();
       if (!item) {
         return null;
       } else {
         return /*#__PURE__*/React.createElement(ResponseEvent, {
           event: event,
-          item: item
+          item: item,
+          validationErrors: validationErrors,
+          currentEventData: currentEventData
         });
       }
     }
   }, {
     key: "renderPayload",
-    value: function renderPayload(event) {
+    value: function renderPayload(event, validationErrors, currentEventData) {
       switch (event.eventType) {
         case RESPONSE:
-          return this.renderResponseEvent(event);
+          return this.renderResponseEvent(event, validationErrors, currentEventData);
         case SESSION_STARTED_OR_RESUMED_EVENT:
           return /*#__PURE__*/React.createElement(SessionStartEvent, {
-            event: event
+            validationErrors: validationErrors,
+            currentEventData: currentEventData
+          });
+        case QUIZ_SUBMISSION_EVENT:
+          return /*#__PURE__*/React.createElement(SessionSubmitEvent, {
+            validationErrors: validationErrors,
+            currentEventData: currentEventData
           });
         case RCE_EVENT:
           return /*#__PURE__*/React.createElement(RCEEvent, {
@@ -64,8 +75,12 @@ export var Event = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         event = _this$props.event,
-        startTime = _this$props.startTime;
-      var payloadNode = this.renderPayload(event);
+        startTime = _this$props.startTime,
+        firstEvent = _this$props.firstEvent;
+      var currentEventData = extractSessionData(event);
+      var firstEventData = extractSessionData(firstEvent);
+      var validationErrors = checkIsBreach(firstEventData, currentEventData);
+      var payloadNode = this.renderPayload(event, validationErrors, currentEventData);
       if (!payloadNode) return null;
       return /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.Cell, null, /*#__PURE__*/React.createElement(ElapsedTime, {
         eventTime: event.createdDate(),
@@ -82,10 +97,12 @@ Event.displayName = 'Row';
 Event.componentId = "Quizzes".concat(_Event.displayName);
 Event.propTypes = {
   event: ImmutablePropTypes.record,
-  startTime: PropTypes.instanceOf(Date)
+  startTime: PropTypes.instanceOf(Date),
+  firstEvent: ImmutablePropTypes.record
 };
 Event.defaultProps = {
   event: void 0,
-  startTime: void 0
+  startTime: void 0,
+  firstEvent: void 0
 };
 export default Event;

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

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 var _dec, _class, _ResponseEvent;
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { IconImageSolid } from '@instructure/ui-icons';
@@ -14,9 +14,11 @@ import { ToggleDetails } from '@instructure/ui-toggle-details';
 import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
+import { EventDetails } from "../resources/EventDetails.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { withStyleOverrides } from '@instructure/quiz-common';
+import { sessionValidationErrorsPropType, eventDataPropType } from "../../../reporting/components/resources/common/propTypes.js";
 var imgRegex = /<img.*?src=['"](.+)['"]/g;
 export var ResponseEvent = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_ResponseEvent = /*#__PURE__*/function (_Component) {
   _inherits(ResponseEvent, _Component);
@@ -44,13 +46,16 @@ export var ResponseEvent = (_dec = withStyleOverrides(generateStyle, generateCom
   }, {
     key: "renderTextSummary",
     value: function renderTextSummary() {
+      var isBreach = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
       var strippedItemBody = extractTextFromHtml(this.itemBody);
       return jsx("span", null, this.hasMedia() && jsx(IconImageSolid, {
         css: this.props.styles.answerMediaIcon
-      }), t('Answered question {position}: {question}', {
+      }), jsx(Text, {
+        color: isBreach ? 'danger' : 'primary'
+      }, t('Answered question {position}: {question}', {
         position: this.props.event.getIn(['eventData', 'position']),
         question: strippedItemBody
-      }));
+      })));
     }
   }, {
     key: "renderMedia",
@@ -78,16 +83,26 @@ export var ResponseEvent = (_dec = withStyleOverrides(generateStyle, generateCom
   }, {
     key: "render",
     value: function render() {
+      var _this$props = this.props,
+        validationErrors = _this$props.validationErrors,
+        currentEventData = _this$props.currentEventData;
       var responseText = this.getReadableResponseText();
       if (responseText) {
         // If this returns falsey, then we know to just display the stem
         return jsx(ToggleDetails, {
-          summary: this.renderTextSummary()
-        }, this.renderMedia(), responseText);
+          summary: this.renderTextSummary(validationErrors.isBreach)
+        }, this.renderMedia(), jsx(EventDetails, {
+          currentEventData: currentEventData,
+          validationErrors: validationErrors,
+          answerValue: responseText
+        }));
       } else {
         return jsx(Text, {
           size: "small"
-        }, this.renderTextSummary(), this.renderMedia());
+        }, this.renderTextSummary(validationErrors.isBreach), jsx(EventDetails, {
+          currentEventData: currentEventData,
+          validationErrors: validationErrors
+        }), this.renderMedia());
       }
     }
   }, {
@@ -101,6 +116,8 @@ export var ResponseEvent = (_dec = withStyleOverrides(generateStyle, generateCom
 }(Component), _ResponseEvent.displayName = 'ResponseEvent', _ResponseEvent.componentId = "Quizzes".concat(_ResponseEvent.displayName), _ResponseEvent.propTypes = {
   event: ImmutablePropTypes.record.isRequired,
   item: ImmutablePropTypes.record.isRequired,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  validationErrors: sessionValidationErrorsPropType,
+  currentEventData: eventDataPropType
 }, _ResponseEvent)) || _class);
 export default ResponseEvent;