@instructure/quiz-interactions/src/components/hotspot/Result/styles.js

A React UI component Library for quiz interaction types.

const generateStyle = (componentTheme, props) => {
  const getStatus = () => {
    const {resultScore} = props.scoredData.value || {}
    if (resultScore === 1) {
      return 'correct'
    } else if (resultScore <= 0) {
      return 'incorrect'
    }
    return 'unknown'
  }

  const userResponseWrapperVariants = {
    correct: {border: `${componentTheme.wrapperBorderWidth} solid ${componentTheme.correctColor}`},
    incorrect: {
      border: `${componentTheme.wrapperBorderWidth} solid ${componentTheme.incorrectColor}`,
    },
    unknown: {border: `${componentTheme.wrapperBorderWidth} solid ${componentTheme.unknownColor}`},
  }

  const userResponseTargetVariants = {
    correct: {backgroundColor: componentTheme.correctColor},
    incorrect: {backgroundColor: componentTheme.incorrectColor},
    unknown: {backgroundColor: componentTheme.unknownColor},
  }

  return {
    userResponseWrapper: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: '50%',
      boxShadow: `0 0 0 1px ${componentTheme.userResponseShadowColor}`,
      width: '1.2rem',
      height: '1.2rem',
      /* This is done to center the bullseye */
      position: 'absolute',
      transform: 'translate(-50%, -50%)',
      ...userResponseWrapperVariants[getStatus()],
    },
    userResponseTarget: {
      borderRadius: '50%',
      boxShadow: `0 0 0 1px ${componentTheme.userResponseShadowColor}`,
      width: '0.5rem',
      height: '0.5rem',
      ...userResponseTargetVariants[getStatus()],
    },
  }
}

export default generateStyle