@instructure/quiz-interactions/src/records/interactions/ordering.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} from 'instructure-validations'

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

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

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

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

  slug = ORDERING_SLUG
  translatedName = t('Ordering')
  defaultProperties = {
    includeLabels: true,
    displayAnswersParagraph: false,
    topLabel: '',
    bottomLabel: '',
  }
  getDefaultInteractionData = () => {
    const choiceIdA = uuid()
    const choiceIdB = uuid()
    const choiceIdC = uuid()
    const choiceIdD = uuid()
    return {
      itemBody: '',
      choices: {
        [choiceIdA]: {id: choiceIdA, itemBody: ''},
        [choiceIdB]: {id: choiceIdB, itemBody: ''},
        [choiceIdC]: {id: choiceIdC, itemBody: ''},
        [choiceIdD]: {id: choiceIdD, itemBody: ''},
      },
    }
  }
  getDefaultScoringData = intData => {
    return {value: Object.keys(intData.choices).map(uuid => uuid)}
  }

  static validations() {
    return {
      interactionData: {
        choices: [
          each({
            itemBody: [
              rule('presence', {
                message: presenceMessage(t('Choice')),
              }),
            ],
          }),
          rule('noDuplicates', {
            field: 'itemBody',
            message: noDuplicatesMessage(t('Choice')),
          }),
        ],
      },
    }
  }

  getDefaultUserResponse(intData) {
    return {value: intData.shuffledOrder || Object.keys(intData.choices)}
  }

  getRenderedResponse = (responseValue, interactionData = {choices: {}}) => {
    return compact(
      responseValue.map(id => {
        const choice = interactionData.choices[id]
        if (choice !== void 0) {
          return <RichContentRenderer key={id} content={choice.itemBody} />
        } else {
          return null
        }
      }),
    )
  }
}