@instructure/quiz-interactions/es/components/fill_blank/Edit/Edit.examples.js

A React UI component Library for quiz interaction types.

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import FillBlankEdit from './index';

/*
 * This one is still a big ol' work in progress. It needs love,
 * but first the individual components need love.
 */

// This is absurd...
var errors = {
  itemBody: ['Question Stem cannot be blank'],
  interactionData: {
    blanks: {
      $errors: ['You must have a blank'],
      0: {
        choices: {
          $errors: ['You must have more than one choice'],
          0: {
            itemBody: ['Choice cannot be blank']
          }
        }
      }
    }
  },
  scoringData: {
    value: {
      0: {
        scoringData: {
          editDistance: ['Levenshtein Distance must be greater than 0'],
          value: {
            $errors: ['Correct value cannot be blank'],
            1: ['Correct value cannot be blank']
          }
        }
      }
    }
  }
};
var propValues = {
  blank: [{
    id: 'fitb_uuid1',
    answerType: 'openEntry'
  }, {
    id: 'fitb_uuid1',
    answerType: 'wordbank',
    choices: [{
      id: 'choice_uuid1',
      position: 1,
      itemBody: 'one'
    }, {
      id: 'choice_uuid2',
      position: 2,
      itemBody: 'two'
    }, {
      id: 'choice_uuid3',
      position: 3,
      itemBody: 'three'
    }]
  }, {
    id: 'fitb_uuid1',
    answerType: 'dropdown',
    choices: [{
      id: 'choice_uuid1',
      position: 1,
      itemBody: 'one'
    }, {
      id: 'choice_uuid2',
      position: 2,
      itemBody: 'two'
    }, {
      id: 'choice_uuid3',
      position: 3,
      itemBody: 'three'
    }]
  }],
  overrideEditableForRegrading: [true, false],
  errorsAreShowing: [true, false],
  /*
  {
    additionalOptions: [
      null,
      { key: 'optionx', title: 'Option X', component: <div>X</div>, defaultExpanded: true },
      { key: 'optionz', title: 'Option Z', component: <div>Z</div>, defaultExpanded: false }
    ]
  },
  */
  scoring: [{
    id: 'fitb_uuid1',
    scoringAlgorithm: 'TextRegex',
    scoringData: {
      value: '.*three',
      blankText: 'three'
    }
  }, {
    id: 'fitb_uuid1',
    scoringAlgorithm: 'TextCloseEnough',
    scoringData: {
      value: 'thref',
      editDistance: '1',
      blankText: 'three'
    }
  }, {
    id: 'fitb_uuid1',
    scoringAlgorithm: 'TextInChoices',
    scoringData: {
      value: ['one', 'two', 'three'],
      blankText: 'three'
    }
  }, {
    id: 'fitb_uuid1',
    scoringAlgorithm: 'TextEquivalence',
    scoringData: {
      value: 'three',
      blankText: 'three'
    }
  }, {
    id: 'fitb_uuid1',
    scoringAlgorithm: 'TextContainsAnswer',
    scoringData: {
      value: 'xthreex',
      blankText: 'three'
    }
  }, {
    id: 'fitb_uuid1',
    scoringAlgorithm: 'Equivalence',
    scoringData: {
      value: 'choice_uuid3',
      blankText: 'three'
    }
  }]
};
export default {
  component: DragDropContext(HTML5Backend)(FillBlankEdit),
  propValues: propValues,
  getComponentProps: function getComponentProps(props) {
    return {
      enableRichContentEditor: false,
      oneQuestionAtATime: false,
      changeItemState: Function.prototype,
      notifyScreenreader: Function.prototype,
      openImportModal: Function.prototype,
      interactionData: {
        prompt: "<p><strong>Please</strong> fill in all the blanks (".concat(props.blank.answerType, " / ").concat(props.scoring.scoringAlgorithm, ")</p>"),
        stemItems: [{
          id: 'stem_uuid0',
          position: 1,
          type: 'text',
          value: 'Write a number word here: '
        }, {
          id: 'stem_uuid1',
          position: 2,
          type: 'blank',
          blankId: 'fitb_uuid1'
        }],
        blanks: [props.blank]
      },
      errors: errors,
      scoringData: {
        value: [props.scoring]
      }
    };
  },
  filter: function filter(props) {
    // For wordbank and dropdown, the text matching algorithms are not valid
    return props.blank.answerType === 'openEntry' && props.scoring.scoringAlgorithm === 'Equivalence' || props.blank.answerType !== 'openEntry' && props.scoring.scoringAlgorithm !== 'Equivalence';
  }
};