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

A React UI component Library for quiz interaction types.

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

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

import {MULTIPLE_ANSWER_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()
}

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

  slug = MULTIPLE_ANSWER_SLUG
  translatedName = t('Multiple Answer')
  defaultProperties = {shuffleRules: {choices: {shuffled: false, toLock: []}}}
  getDefaultScoringData = intData => ({value: [intData.choices[0].id, intData.choices[1].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 = {choices: []}) => {
    return compact(
      responseValue.map(value => {
        const choice = interactionData.choices.find(choice => choice.id === value)
        if (choice !== void 0) {
          return <RichContentRenderer key={choice.id} content={choice ? choice.itemBody : ''} />
        } else {
          return null
        }
      }),
    )
  }

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

    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: [
          onSelf(
            rule('listSize', {
              minMessage: t('You must select at least one correct answer'),
              min: 1,
            }),
          ),
        ],
      },
    }
  }

  hasResponse(resp) {
    return resp.length > 0
  }
}