@instructure/quiz-core 22.16.1 → 22.18.0

package/src/common/util/interactionTypePropsHelper.js

@@ -0,0 +1,91 @@
+import {RichContentInput} from '@instructure/quiz-rce/components/RichContentInput/index'
+import t from '@instructure/quiz-i18n/format-message'
+
+export const propsForInteractionEdit = (props, additionalOptions) => {
+  const item = props.workingItem.toJS()
+  const changeItemState = (newState, inputId) => {
+    props.clearValidationErrorsFromApi && props.clearValidationErrorsFromApi(inputId)
+    props.changeItemState(item.id, newState)
+  }
+
+  const mediaUpload = (file, callback) => {
+    const onUploadError = () => {
+      props.addError(t('There was an error uploading your file.'))
+    }
+
+    props.interactionFileUpload(props.parentType, props.parentId, file, callback, onUploadError)
+  }
+
+  const onModalOpen = () => {
+    props.occludeQuizEntries(true)
+  }
+
+  const onModalClose = () => {
+    props.occludeQuizEntries(false)
+  }
+
+  const setOneQuestionAtATime = event => {
+    return props.setOneQuestionAtATime(props.quizId, event.target.checked)
+  }
+
+  return {
+    additionalOptions: additionalOptions,
+    answerFeedbackEnabled: props.answerFeedbackEnabled,
+    answerFeedback: item.answerFeedback,
+    appContainer: props.appContainer,
+    changeItemState: changeItemState,
+    errors: props.workingItem.getErrors().toJS(),
+    validationErrorsFromApi: props.validationErrorsFromApi,
+    errorsAreShowing: props.errorsAreShowing,
+    fitbCommonWordbankEnabled: props.fitbCommonWordbankEnabled,
+    interactionData: item.interactionData,
+    interactionType: props.entry.getInteractionType(),
+    // SHIM: canvas-rce breaks on null values now
+    // this is a shim until canvas-rce deals with
+    // null values better
+    itemBody: item.itemBody || '',
+    itemId: item.id,
+    mediaUpload,
+    notifyScreenreader: props.screenreaderNotification,
+    onModalOpen,
+    onModalClose,
+    oneQuestionAtATime: props.oneQuestionAtATime,
+    openImportModal: props.openImportModal,
+    parentType: props.parentType,
+    partialDeepScoringEnabled: props.partialDeepScoringEnabled,
+    partialScoringEnabled: props.partialScoringEnabled,
+    pointsChange: props.handleQuizEntryPointsChange,
+    properties: item.properties,
+    override: props.override,
+    overrideEditableForItem: props.overrideEditableForItem,
+    overrideEditableForRegrading: props.overrideEditableForRegrading,
+    richContentEditor: RichContentInput,
+    scoringAlgorithm: item.scoringAlgorithm,
+    scoringData: item.scoringData,
+    setOneQuestionAtATime,
+    stemErrors: props.workingItem.errorsFor('itemBody').toJS(),
+    initialFocusId: props.initialFocusId,
+    calculatorType: item.calculatorType,
+    multipleHotSpotEnabled: props.multipleHotSpotEnabled,
+    showCalculatorOption: props.showCalculatorOption,
+    separatorConfig: props.separatorConfig,
+    multipleAnswerFeedbackEnabled: props.multipleAnswerFeedbackEnabled,
+    isSurvey: props.isSurvey,
+  }
+}
+
+export const propsForInteractionShow = (item, props = {}) => {
+  return {
+    itemId: item.id,
+    interactionData: item.interactionData,
+    // SHIM: canvas-rce breaks on null values now
+    // this is a shim until canvas-rce deals with
+    // null values better
+    itemBody: item.itemBody || '',
+    properties: item.properties,
+    notifyScreenreader: true,
+    scoringData: item.scoringData,
+    separatorConfig: props.separatorConfig,
+    isSurvey: props.isSurvey,
+  }
+}

package/src/common/util/interactionTypeRecordForItem.js

@@ -0,0 +1,53 @@
+const {pascalize} = require('humps')
+
+import InteractionType from '@instructure/quiz-interactions/records/InteractionType'
+import CategorizationInteractionType from '@instructure/quiz-interactions/records/interactions/categorization'
+import EssayInteractionType from '@instructure/quiz-interactions/records/interactions/essay'
+import FileUploadInteractionType from '@instructure/quiz-interactions/records/interactions/file_upload'
+import FillBlankInteractionType from '@instructure/quiz-interactions/records/interactions/fill_blank'
+import FormulaInteractionType from '@instructure/quiz-interactions/records/interactions/formula'
+import HotSpotInteractionType from '@instructure/quiz-interactions/records/interactions/hotspot'
+import MatchingInteractionType from '@instructure/quiz-interactions/records/interactions/matching'
+import MultipleAnswerInteractionType from '@instructure/quiz-interactions/records/interactions/multiple_answer'
+import MultipleChoiceInteractionType from '@instructure/quiz-interactions/records/interactions/multiple_choice'
+import NumericInteractionType from '@instructure/quiz-interactions/records/interactions/numeric'
+import OrderingInteractionType from '@instructure/quiz-interactions/records/interactions/ordering'
+import RichFillBlankInteractionType from '@instructure/quiz-interactions/records/interactions/rich_fill_blank'
+import TrueFalseInteractionType from '@instructure/quiz-interactions/records/interactions/true_false'
+
+const interactions = {
+  InteractionType,
+  CategorizationInteractionType,
+  EssayInteractionType,
+  FileUploadInteractionType,
+  FillBlankInteractionType,
+  FormulaInteractionType,
+  HotSpotInteractionType,
+  MatchingInteractionType,
+  MultipleAnswerInteractionType,
+  MultipleChoiceInteractionType,
+  NumericInteractionType,
+  OrderingInteractionType,
+  RichFillBlankInteractionType,
+  TrueFalseInteractionType,
+}
+
+const slugToNameMap = {
+  'multi-answer': 'MultipleAnswer',
+  choice: 'MultipleChoice',
+}
+
+const interactionTypeRecordForItem = intTypeSlug => {
+  if (!intTypeSlug) {
+    return InteractionType
+  }
+
+  let componentKey = slugToNameMap[intTypeSlug]
+  if (!componentKey) {
+    componentKey = pascalize(intTypeSlug)
+  }
+  const recordName = `${componentKey}InteractionType`
+  return interactions[recordName] || InteractionType
+}
+
+export default interactionTypeRecordForItem

package/src/common/util/isMissing.js

@@ -0,0 +1,5 @@
+export const isMissing = value => {
+  return (typeof value === 'number') === false
+}
+
+export const UNKNOWN_PERCENTAGE_VALUE = 'UNKNOWN_PERCENTAGE'

package/src/common/util/jsonify.js

@@ -0,0 +1,27 @@
+// used for testing fetch calls that expect a
+// promise returned by jsonify
+
+export function jsoniblePromise(resolutionValue, options = {}) {
+  const resolvePromise = new Promise((resolve, reject) => {
+    resolve(resolutionValue)
+  })
+
+  return {
+    status: options.status || 200,
+    headers: {
+      get: attr => {
+        return {
+          'Content-Type': options.contentType || 'application/json; charset=utf-8',
+          ...(options.headers || {}),
+        }[attr]
+      },
+    },
+    json: () => {
+      return resolvePromise
+    },
+  }
+}
+
+export default res => {
+  return res.json()
+}

package/src/common/util/keyboardClickable.js

@@ -0,0 +1,9 @@
+const keyboardClickable = e => {
+  if (e.keyCode === 13 || e.keyCode === 32) {
+    e.preventDefault()
+    e.target.click()
+    e.stopPropagation()
+  }
+}
+
+export default keyboardClickable

package/src/common/util/localStoreService.js

@@ -0,0 +1,38 @@
+export class LocalStoreService {
+  constructor(storage) {
+    try {
+      this.storage = storage || window.localStorage
+    } catch {
+      this.storage = undefined
+    }
+    this.isEnabled = this.checkStorageEnabled()
+  }
+
+  checkStorageEnabled() {
+    if (!this.storage) return false
+
+    const testKey = 'localStorageCheck'
+    const testValue = 'just checking'
+
+    try {
+      this.set(testKey, testValue)
+      return this.get(testKey) === testValue
+    } catch {
+      return false
+    }
+  }
+
+  get(key) {
+    return this.storage.getItem(key)
+  }
+
+  set(key, value) {
+    return value ? this.storage.setItem(key, value) : this.remove(key)
+  }
+
+  remove(key) {
+    return this.storage.removeItem(key)
+  }
+}
+
+export default LocalStoreService

package/src/common/util/mathRenderingUtils.js

@@ -0,0 +1,8 @@
+import {
+  ensureMathIsReady as mathIsReady,
+  ensureMathRendered as mathRendered,
+} from '@instructure/quiz-rce/components/RichContentRenderer/mathRenderer'
+
+// This is needed because of ES Modul Export of RCE is not supported by Sinon
+export const ensureMathIsReady = mathIsReady
+export const ensureMathRendered = mathRendered

package/src/common/util/maxContent.js

@@ -0,0 +1,9 @@
+import t from '@instructure/quiz-i18n/format-message'
+import {BUILD_CHAR_LIMIT} from '@instructure/quiz-common/constants'
+
+export default (val, options) => {
+  const limit = options.limit || BUILD_CHAR_LIMIT
+  if (val && JSON.stringify(val).length > limit) {
+    return t('Maximum content exceeded')
+  }
+}

package/src/common/util/modalHelpers.js

@@ -0,0 +1,6 @@
+import {Map} from 'immutable'
+
+export function getModalTrigger(state) {
+  const modalOptions = state.modal.get('options') || Map()
+  return modalOptions.get('modalTrigger')
+}

package/src/common/util/noop.js

@@ -0,0 +1,3 @@
+export function noop() {}
+
+export default noop

package/src/common/util/persistedState.js

@@ -0,0 +1,39 @@
+import {Map} from 'immutable'
+import store from 'store'
+
+import {sessionStore} from './sessionStore'
+import {
+  ACTIVE_QUESTION,
+  CACHED_SESSION_ID,
+  QUIZ_PRINT_FONT_SIZE_PREFERENCE,
+} from '@instructure/quiz-common/constants'
+
+class PersistedState {
+  /**
+   * Some of our redux store values are stored in browser client-side storage
+   * for easy recall in the event of a page refresh, etc. This provides a single
+   * place to load all of those values in a form mimicking our redux store so
+   * that it can easily be used, for example, for setting the redux initial
+   * state.
+   *
+   * See also src/common/middleware/persistedStorageMiddleware.js for how these
+   * values are set.
+   */
+  load() {
+    if (!sessionStore.enabled) {
+      return
+    }
+
+    return {
+      taking: Map({
+        sessionIdForCurrentItem: store.get(CACHED_SESSION_ID),
+        currentSessionItemPosition: parseInt(store.get(ACTIVE_QUESTION), 10) || 1,
+      }),
+      printing: Map({
+        fontSizePreference: store.get(QUIZ_PRINT_FONT_SIZE_PREFERENCE),
+      }),
+    }
+  }
+}
+
+export default new PersistedState()

package/src/common/util/printUtils.js

@@ -0,0 +1,47 @@
+export const printWithCss = (cssClass, timeout = 0) => {
+  const rootElement =
+    document.querySelector('#new-quizzes-root') ||
+    document.querySelector('#native_quiz_container') ||
+    document.querySelector('html')
+
+  if (!rootElement || !cssClass) {
+    return setTimeoutPromise(timeout).then(() => window.print())
+  }
+
+  rootElement.classList.add(cssClass)
+  return setTimeoutPromise(timeout).then(() => {
+    window.print()
+    rootElement.classList.remove(cssClass)
+  })
+}
+
+const setTimeoutPromise = delay => {
+  return new Promise((resolve, reject) => {
+    try {
+      setTimeout(() => {
+        resolve()
+      }, delay)
+    } catch (e) {
+      reject(e)
+    }
+  })
+}
+
+export const ensureImagesLoaded = () =>
+  new Promise(resolve => {
+    setTimeoutPromise(0).then(() => {
+      Promise.all(
+        Array.from(document.images)
+          .filter(img => !img.complete)
+          .map(
+            img =>
+              new Promise(resolve => {
+                img.addEventListener('load', resolve)
+                img.addEventListener('error', resolve)
+              }),
+          ),
+      ).then(result => {
+        resolve(result)
+      })
+    })
+  })

package/src/common/util/rceChecker.js

@@ -0,0 +1,5 @@
+import {ensureMathIsReady, ensureMathRendered} from './mathRenderingUtils'
+import {ensureImagesLoaded} from './printUtils'
+
+export const ensureRCEContentIsLoaded = async () =>
+  ensureMathIsReady().then(ensureMathRendered).then(ensureImagesLoaded)

package/src/common/util/renderAlerts.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import {liveRegion, politeLiveRegion} from '@instructure/quiz-common/alertHelpers'
+import {POLITE, ASSERTIVE} from '@instructure/quiz-common/constants'
+import {SDKStoreProvider} from '../react-redux'
+import Alerts from '../components/alerts'
+
+// alert has to be in the html on render in
+// order for screenreaders to pick up on role="alert",
+// so we're rendering a sub-app into it so that so that
+// we dont accidentally remove it with react
+
+export function renderAlerts(store) {
+  ReactDOM.render(
+    <SDKStoreProvider store={store}>
+      <Alerts politeness={ASSERTIVE} />
+    </SDKStoreProvider>,
+    liveRegion(),
+  )
+
+  if (politeLiveRegion()) {
+    ReactDOM.render(
+      <SDKStoreProvider store={store}>
+        <Alerts politeness={POLITE} />
+      </SDKStoreProvider>,
+      politeLiveRegion(),
+    )
+  }
+}
+
+export default renderAlerts

package/src/common/util/serializeEvent.js

@@ -0,0 +1,60 @@
+import {
+  QUIZ_SUBMISSION_EVENT,
+  RESPONSE,
+  SESSION_STARTED_OR_RESUMED_EVENT,
+  RCE_EVENT,
+  PAGE_BLURRED_EVENT,
+  PAGE_FOCUSED_EVENT,
+} from '@instructure/quiz-common/constants'
+import {getBrowserSessionId, getIpAddress} from '../selectors/taking'
+import {getActiveQuizSession} from '../selectors/quizSessions'
+import {Set} from 'immutable'
+import {getCurrentSessionLock} from './sessionLockHelpers'
+
+const whitelist = [
+  QUIZ_SUBMISSION_EVENT,
+  RESPONSE,
+  SESSION_STARTED_OR_RESUMED_EVENT,
+  RCE_EVENT,
+  PAGE_BLURRED_EVENT,
+  PAGE_FOCUSED_EVENT,
+]
+
+export function serializeEvent(action, store) {
+  const {type} = action
+  if (!whitelist.includes(type)) {
+    return false
+  }
+
+  const state = store.getState()
+  const quizSession = getActiveQuizSession(state)
+
+  const defaultEventData = {
+    userAgent: navigator.userAgent,
+    browserSessionId: getBrowserSessionId(state),
+    clientTimestamp: new Date(),
+    ipAddress: getIpAddress(state),
+    multipleSessionAttempt: false,
+  }
+
+  if ((state.features ?? Set()).includes('detect_multiple_sessions')) {
+    defaultEventData.sessionLock = getCurrentSessionLock()
+  }
+
+  const authoritativeData = {
+    accountUuid: quizSession.accountUuid,
+    eventCreationToken: quizSession.eventCreationToken,
+    eventType: type,
+    quizSessionId: quizSession.id,
+    rootAccountUuid: quizSession.rootAccountUuid,
+  }
+
+  return Object.assign(
+    {
+      eventData: Object.assign({}, action.payload, defaultEventData),
+    },
+    authoritativeData,
+  )
+}
+
+export default serializeEvent

package/src/common/util/sessionLockHelpers.js

@@ -0,0 +1,74 @@
+/**
+ * SessionLock Helpers for quiz-core package
+ * Provides access to sessionLock from localStorage for use in serialization and event tracking
+ */
+
+const STORAGE_KEY = 'sessionLocks'
+const CURRENT_SESSION_KEY = 'currentParticipantSessionId'
+
+/**
+ * Gets the current active participantSessionId
+ * This is stored in sessionStorage (not localStorage) so each browser tab
+ * maintains its own session context. This prevents false "multiple session"
+ * warnings when refreshing the same tab.
+ * @returns {string|null}
+ */
+function getCurrentParticipantSessionId() {
+  try {
+    return sessionStorage.getItem(CURRENT_SESSION_KEY)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Gets the sessionLock for a specific participantSessionId
+ * @param {string} participantSessionId
+ * @returns {string|null}
+ */
+export function getSessionLock(participantSessionId) {
+  try {
+    if (!participantSessionId) return null
+
+    const locks = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}')
+    return locks[participantSessionId] || null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Gets the sessionLock for the current active session
+ * Used by serializeEvent to include sessionLock in event data
+ * @returns {string|null}
+ */
+export function getCurrentSessionLock() {
+  try {
+    const currentSessionId = getCurrentParticipantSessionId()
+    if (!currentSessionId) return null
+
+    return getSessionLock(currentSessionId)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Sets the current active participantSessionId
+ * Should be called by the app when a quiz session becomes active
+ * Uses sessionStorage (not localStorage) so each browser tab maintains
+ * its own session context. This prevents false "multiple session" warnings
+ * when refreshing the same tab.
+ * @param {string|null} participantSessionId
+ */
+export function setCurrentParticipantSessionId(participantSessionId) {
+  try {
+    if (participantSessionId) {
+      sessionStorage.setItem(CURRENT_SESSION_KEY, participantSessionId)
+    } else {
+      sessionStorage.removeItem(CURRENT_SESSION_KEY)
+    }
+  } catch (e) {
+    console.error('Failed to set current participant session ID', e)
+  }
+}

package/src/common/util/sessionStore.js

@@ -0,0 +1,57 @@
+/**
+ * A store that behaves like https://github.com/marcuswestin/store.js but writes
+ * to sessionStorage instead of localStorage, because some things you want to be
+ * accessible to only a single browser window/tab.
+ */
+export class SessionStore {
+  constructor(storage) {
+    let newStorage = storage
+    if (newStorage === void 0) {
+      // Chrome raises a DOMException when trying to access sessionStorage if
+      // it has been disabled
+      try {
+        newStorage = window.sessionStorage
+      } catch {
+        // continue regardless of error
+      }
+    }
+
+    this.storage = newStorage
+    this.enabled = this.checkStorageEnabled()
+  }
+
+  checkStorageEnabled() {
+    if (!this.storage) {
+      return false
+    }
+    const testKey = 'storageCheck'
+    const testValue = 'just checking'
+    let result
+    try {
+      this.set(testKey, testValue)
+      result = this.get(testKey)
+    } catch {
+      // continue regardless of error
+    }
+    return result === testValue
+  }
+
+  get(key) {
+    return this.storage.getItem(key)
+  }
+
+  set(key, value) {
+    if (value) {
+      return this.storage.setItem(key, value)
+    } else {
+      return this.remove(key)
+    }
+  }
+
+  remove(key) {
+    return this.storage.removeItem(key)
+  }
+}
+
+const newSessionStore = new SessionStore()
+export {newSessionStore as sessionStore}

package/src/common/util/useRemoteComponent.js

@@ -0,0 +1,105 @@
+// @ts-check
+import {useCallback, useEffect, useRef, useState} from 'react'
+import t from '@instructure/quiz-i18n/format-message'
+
+/**
+ * Custom hook to load and render a remote component asynchronously.
+ *
+ * @param {() => Promise<{
+ *   render: (container: HTMLElement, props: unknown) => void,
+ *   unmount?: () => void
+ * }>} loadRemoteModule - A function that returns a promise resolving to the remote component module
+ * @param {unknown | undefined} props - Props to pass to the remote component when rendering
+ * @param {boolean} enabled - Whether the remote component should be loaded and rendered
+ *
+ * @returns {{
+ *   containerRef: React.MutableRefObject<HTMLDivElement | null>,
+ *   componentActivityState: 'idle' | 'pending' | 'success' | 'error',
+ *   componentError: Error | null,
+ *   unmount: () => void
+ * }} An object containing the container ref and unmount function
+ */
+export function useRemoteComponent(loadRemoteModule, props, enabled = true) {
+  const mountCancelled = useRef(false)
+
+  const [componentActivityState, setComponentActivityState] = useState(
+    /** @type {'idle' | 'pending' | 'success' | 'error'} */ ('idle'),
+  )
+
+  const [componentError, setComponentError] = useState(/** @type {Error | null} */ (null))
+
+  /**
+   * @type {React.MutableRefObject<{
+   *   render: (container: HTMLElement, props: unknown) => void,
+   *   unmount?: () => void
+   * } | null>}
+   */
+  const remoteModuleRef = useRef(null)
+
+  /**
+   * @type {React.MutableRefObject<HTMLDivElement | null>}
+   */
+  const containerRef = useRef(null)
+
+  // Note: This workflow can be converted to a TanStack Query hook in the future.
+  useEffect(() => {
+    if (loadRemoteModule == null || !enabled || componentActivityState === 'error') {
+      return
+    }
+
+    mountCancelled.current = false
+    setComponentActivityState('idle')
+
+    async function loadModule() {
+      try {
+        if (remoteModuleRef.current) {
+          setComponentActivityState('success')
+          return remoteModuleRef.current
+        }
+
+        setComponentActivityState('pending')
+        const module = await loadRemoteModule()
+        setComponentActivityState('success')
+
+        return module
+      } catch (error) {
+        setComponentActivityState('error')
+        setComponentError(new Error(t('Failed to load remote module: {error}', {error})))
+      }
+    }
+
+    loadModule().then(module => {
+      if (module) {
+        remoteModuleRef.current = module
+      }
+
+      const container = containerRef.current
+
+      if (container == null || module == null || mountCancelled.current) {
+        return
+      }
+
+      module.render(container, props)
+    })
+
+    return () => {
+      mountCancelled.current = true
+    }
+  }, [loadRemoteModule, props, enabled])
+
+  const unmount = useCallback(() => {
+    if (mountCancelled.current || !containerRef.current) {
+      return
+    }
+
+    const module = remoteModuleRef.current
+
+    if (!module) {
+      return
+    }
+
+    module.unmount?.()
+  }, [])
+
+  return {containerRef, componentActivityState, componentError, unmount}
+}