@instructure/quiz-interactions/src/records/interactions/multiple_choice.js

A React UI component Library for quiz interaction types.

import React from 'react'
import {v4 as uuid} from 'uuid'
import {rule, each, onSelf} from 'instructure-validations'

import {RichContentRenderer} from '@instructure/quiz-rce/components/RichContentRenderer/index'

import {MULTIPLE_CHOICE_SLUG} from '../../interaction_slugs'
import InteractionType from '../InteractionType'

import {noDuplicatesMessage, presenceMessage} from '../../util/validationHelpers'
import t from '@instructure/quiz-i18n/format-message'

function newChoiceId() {
  return uuid()
}

const eachChoiceRule = {itemBody: [rule('presence', {message: presenceMessage(t('Answer'))})]}

export default class MultipleChoiceInteractionType extends InteractionType {
  constructor(obj) {
    super()
    super.initializeProps(obj)
  }

  slug = MULTIPLE_CHOICE_SLUG
  translatedName = t('Multiple Choice')
  defaultProperties = {shuffleRules: {choices: {shuffled: false, toLock: []}}}
  getDefaultScoringData = intData => ({value: intData.choices[0].id})
  getDefaultInteractionData = () => ({
    choices: [
      {id: newChoiceId(), itemBody: '', position: 1},
      {id: newChoiceId(), itemBody: '', position: 2},
      {id: newChoiceId(), itemBody: '', position: 3},
      {id: newChoiceId(), itemBody: '', position: 4},
    ],
  })

  getRenderedResponse = (responseValue, interactionData) => {
    const choice = interactionData.choices.find(c => c.id === responseValue)
    return <RichContentRenderer content={choice ? choice.itemBody : ''} />
  }

  static validations() {
    return {
      interactionData: {
        choices: [
          each(eachChoiceRule),
          rule('noDuplicates', {
            field: 'itemBody',
            message: noDuplicatesMessage(t('Answer')),
          }),
          onSelf(rule('listSize', {minMessage: t('You must have at least two choices'), min: 2})),
        ],
      },
      scoringData: {value: [rule('presence', {message: t('You must select a correct answer')})]},
    }
  }
}