@instructure/quiz-interactions/es/components/categorization/Example/index.js

A React UI component Library for quiz interaction types.

import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
var _dec, _class, _CategorizationExample;
function _callSuper(_this, derived, args) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;
    try {
      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
    } catch (e) {
      return false;
    }
  }
  derived = _getPrototypeOf(derived);
  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
}
/** @jsx jsx */
/* eslint-disable react/jsx-no-literals */
import { Component } from 'react';
import PropTypes from 'prop-types';
import { Heading } from '@instructure/ui-heading';
import { jsx } from '@instructure/emotion';
import CategorizationEdit from '../Edit';
import CategorizationShow from '../Show';
import CategorizationTake from '../Take';
import CategorizationResult from '../Result';
import generateStyle from '../../common/example/default';
import generateComponentTheme from '../../common/example/defaultTheme';
import { withStyleOverrides } from '@instructure/quiz-common';
var noop = function noop() {};

/**
---
category: Categorization
---
  Categorization Example.

  ```jsx_example
    const WrappedExample = DragDropContext(HTML5Backend)(CategorizationExample);

    <SettingsSwitcher locales={LOCALES}>
      <WrappedExample />
    </SettingsSwitcher>
  ```
**/
var CategorizationExample = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_CategorizationExample = /*#__PURE__*/function (_Component) {
  function CategorizationExample(props) {
    var _this2;
    _classCallCheck(this, CategorizationExample);
    _this2 = _callSuper(this, CategorizationExample);
    _defineProperty(_this2, "handleChangeItemState", function (itemState) {
      var newState = {};
      if (itemState.scoringData) {
        newState.userResponse = _this2.transformUserResponse(itemState.scoringData);
      }
      var updatedState = Object.assign({}, itemState, newState);
      _this2.setState(updatedState);
    });
    _defineProperty(_this2, "handleResponseUpdate", function (userResponse) {
      _this2.setState({
        userResponse: {
          value: userResponse
        }
      });
    });
    _this2.state = {};
    if (props.useDefaultData) {
      Object.assign(_this2.state, {
        itemBody: 'Match the name of the celestial body on the left with its correct classification:',
        interactionData: {
          categories: {
            category_uuid1: {
              id: 'category_uuid1',
              itemBody: 'Planet'
            },
            category_uuid2: {
              id: 'category_uuid2',
              itemBody: 'Moon'
            }
          },
          distractors: {
            answer_uuid3: {
              id: 'answer_uuid3',
              itemBody: 'Mars'
            },
            answer_uuid4: {
              id: 'answer_uuid4',
              itemBody: 'Europa'
            },
            answer_uuid5: {
              id: 'answer_uuid5',
              itemBody: 'Venus'
            },
            answer_uuid6: {
              id: 'answer_uuid6',
              itemBody: 'Phobos'
            },
            answer_uuid7: {
              id: 'answer_uuid7',
              itemBody: 'Deimos'
            },
            answer_uuid8: {
              id: 'answer_uuid8',
              itemBody: 'Jupiter'
            },
            answer_uuid9: {
              id: 'answer_uuid9',
              itemBody: 'America'
            },
            answer_uuid10: {
              id: 'answer_uuid10',
              itemBody: 'Asia'
            }
          }
        },
        scoringData: {
          value: [{
            id: 'category_uuid1',
            scoringAlgorithm: 'AllOrNothing',
            scoringData: {
              value: ['answer_uuid3', 'answer_uuid5', 'answer_uuid8']
            }
          }, {
            id: 'category_uuid2',
            scoringAlgorithm: 'AllOrNothing',
            scoringData: {
              value: ['answer_uuid4', 'answer_uuid6', 'answer_uuid7']
            }
          }]
        },
        userResponse: {
          value: [{
            id: 'category_uuid1',
            value: ['answer_uuid3', 'answer_uuid5', 'answer_uuid8'],
            type: 'ArrayText'
          }, {
            id: 'category_uuid2',
            value: ['answer_uuid4', 'answer_uuid6', 'answer_uuid7'],
            type: 'ArrayText'
          }]
        }
      });
      _this2.state.scoredData = _this2.transformScoredData();
    }
    return _this2;
  }
  _inherits(CategorizationExample, _Component);
  return _createClass(CategorizationExample, [{
    key: "getResultScore",
    value: function getResultScore(scoringData, categoryId, answerId) {
      var scoringDataCategory = scoringData.value.find(function (category) {
        return category.id === categoryId;
      });
      return scoringDataCategory.scoringData.value.includes(answerId) ? 1 : 0;
    }
  }, {
    key: "transformScoredData",
    value: function transformScoredData() {
      var _this3 = this;
      var newValues = {};
      this.state.userResponse.value.forEach(function (userResponseValue) {
        var obj = {};
        Object.keys(_this3.state.interactionData.distractors).forEach(function (answerId) {
          obj[answerId] = {
            resultScore: _this3.getResultScore(_this3.state.scoringData, userResponseValue.id, answerId),
            userResponded: userResponseValue.value.includes(answerId)
          };
        });
        newValues[userResponseValue.id] = {
          value: obj
        };
      });
      return {
        value: newValues
      };
    }
  }, {
    key: "transformUserResponse",
    value: function transformUserResponse(scoringData) {
      var userResponse = scoringData.value.map(function (item) {
        return {
          id: item.id,
          value: item.scoringData.value
        };
      });
      return {
        value: userResponse
      };
    }
  }, {
    key: "renderEdit",
    value: function renderEdit() {
      return jsx("div", {
        title: "edit"
      }, jsx(Heading, {
        level: "h2"
      }, "Edit"), jsx(CategorizationEdit, {
        changeItemState: this.handleChangeItemState,
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        itemId: this.state.itemId,
        scoringData: this.state.scoringData
      }));
    }
  }, {
    key: "renderShow",
    value: function renderShow() {
      return jsx("div", {
        title: "show"
      }, jsx(Heading, {
        level: "h2"
      }, "Show"), jsx(CategorizationShow, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoringData: this.state.scoringData
      }));
    }
  }, {
    key: "renderTake",
    value: function renderTake() {
      return jsx("div", {
        title: "take"
      }, jsx(Heading, {
        level: "h2"
      }, "Take"), jsx(CategorizationTake, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        userResponse: this.state.userResponse,
        handleResponseUpdate: this.handleResponseUpdate,
        notifyScreenreader: noop
      }));
    }
  }, {
    key: "renderResult",
    value: function renderResult() {
      return jsx("div", {
        title: "result"
      }, jsx(Heading, {
        level: "h2"
      }, "Result"), jsx(CategorizationResult, {
        interactionData: this.state.interactionData,
        itemBody: this.state.itemBody,
        scoredData: this.transformScoredData()
      }));
    }
  }, {
    key: "render",
    value: function render() {
      return jsx("div", null, jsx("div", {
        css: this.props.styles.row
      }, jsx("div", {
        css: this.props.styles.panel
      }, this.renderEdit()), jsx("div", {
        css: this.props.styles.panel
      }, this.renderShow())), jsx("div", {
        css: this.props.styles.row
      }, jsx("div", {
        css: this.props.styles.panel
      }, this.renderTake()), jsx("div", {
        css: this.props.styles.panel
      }, this.renderResult())));
    }
  }]);
}(Component), _defineProperty(_CategorizationExample, "displayName", 'CategorizationExample'), _defineProperty(_CategorizationExample, "componentId", "Quizzes".concat(_CategorizationExample.displayName)), _defineProperty(_CategorizationExample, "propTypes", {
  useDefaultData: PropTypes.bool,
  styles: PropTypes.object
}), _defineProperty(_CategorizationExample, "defaultProps", {
  useDefaultData: true
}), _CategorizationExample)) || _class);
export { CategorizationExample as default };