@instructure/quiz-interactions/es/components/hotspot/Result/Result.examples.js

A React UI component Library for quiz interaction types.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
import imageUrl from '../exampleImage.png';
export default {
  propValues: {
    shape: [{
      type: 'square',
      correctAnswer: [{
        x: 0.3,
        y: 0.3
      }, {
        x: 0.7,
        y: 0.7
      }]
    }, {
      type: 'oval',
      correctAnswer: [{
        x: 0.3,
        y: 0.3
      }, {
        x: 0.7,
        y: 0.7
      }]
    }, {
      type: 'polygon',
      correctAnswer: [{
        x: 0.3,
        y: 0.3
      }, {
        x: 0.7,
        y: 0.2
      }, {
        x: 0.8,
        y: 0.4
      }, {
        x: 0.5,
        y: 0.5
      }, {
        x: 0.7,
        y: 0.7
      }, {
        x: 0.2,
        y: 0.6
      }, {
        x: 0.3,
        y: 0.3
      }]
    }, {}],
    results: [{
      score: 1,
      response: {
        x: 0.4,
        y: 0.4
      }
    }, {
      score: 0,
      response: {
        x: 0.9,
        y: 0.9
      }
    }, {
      score: void 0,
      response: {
        x: 0.7,
        y: 0.7
      }
    }, {
      score: 0,
      response: void 0
    }, {
      score: 0,
      response: null
    }, {
      score: 1,
      response: void 0
    }, {
      score: void 0,
      response: void 0
    }, {
      score: void 0,
      response: {}
    }, {
      score: void 0,
      response: null
    }, null]
  },
  getComponentProps: function getComponentProps(props) {
    var results = props.results,
      shape = props.shape;
    var itemBody = "Hotspot Result: shape ".concat(shape.type);
    if (results) {
      if (typeof results.response === 'undefined') {
        itemBody += ' - response hidden';
      } else if (!results.response) {
        itemBody += ' - no response';
      } else if (results.response.x == null || results.response.y == null) {
        itemBody += ' - empty response';
      }
      if (results.score === 1) {
        itemBody += ' - correct';
      } else if (results.score === 0) {
        itemBody += ' - incorrect';
      }
    } else {
      itemBody += ' - no results';
    }
    var scoredData = {
      value: results && _objectSpread(_objectSpread({}, shape), {}, {
        resultScore: results.score,
        userResponse: results.response
      })
    };
    return {
      itemBody: itemBody,
      interactionData: {
        imageUrl: imageUrl
      },
      scoredData: scoredData
      // We don't need the unknown results when we actually have a shape
    };
  },
  filter: function filter(props) {
    var results = props.results,
      shape = props.shape;
    var _ref = results && results.response || {},
      x = _ref.x,
      y = _ref.y;
    return shape.type && x && y && typeof results.score === 'undefined';
  }
};