@instructure/quiz-interactions
Version:
A React UI component Library for quiz interaction types.
82 lines • 2.09 kB
JavaScript
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import FillBlankTake from './index';
var userResponseFromBlank = function userResponseFromBlank(blank) {
if (blank.answerType == 'openEntry') {
return 'freeform answer ʃ̬';
} else {
return blank.choices[0].id;
}
};
export default {
component: DragDropContext(HTML5Backend)(FillBlankTake),
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'
}]
}],
showResponse: [true, false],
// Normal 'readOnly' doesn't work for some reason?
readOnly: [true, false]
},
getComponentProps: function getComponentProps(props) {
return {
interactionData: {
// HTML added for effect
prompt: "\u0283\u032C <strong>Fill in the Blank </strong> (<em>readOnly=".concat(props.readOnly, "</em>)"),
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]
},
userResponse: {
value: [{
id: 'fitb_uuid1',
type: 'Text',
value: props.showResponse ? userResponseFromBlank(props.blank) : ''
}]
},
handleResponseUpdate: Function.prototype
};
}
};