<commit_before>"use strict";

import React from "react";
import AssessmentActions from "../../actions/assessment";
import AssessmentStore from "../../stores/assessment";
import Styles from "../../themes/selection.js";

const styles = Styles;

export default class CheckBox extends React.Component {
  render() {
    let btnLabelStyles = this.props.showAsCorrect !== null ? {...styles.btnLabel, ...{cursor: "default", padding: "11px 11px 6px"}} : {...styles.btnLabel, ...{cursor: "pointer", padding: "11px 11px 6px"}};

    /**
     * Note on dangerouslySetInnerHTML Usage
     *
     * It is generally not a good idea to use dangerouslySetInnerHTML because it
     * may expose applications to XSS attacks. We are opting to use it here and
     * and in other places in the code base because the assessment content is
     * is stored in (and returned from) the DB as XML, which limits our options
     * in how we can handle assessment "material" on the frontend.
     *
     * READ: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
     */
    const inputProps = {
      style: { margin: 0, position: "absolute" },
      type: "checkbox",
      defaultChecked: this.props.checked,
      name: this.props.name,
      id: this.props.id,
      onClick: () => { this.answerSelected(); }
    };
    if (this.selectedCorrectAnswer()) {
      inputProps["aria-invalid"] = false;
      inputProps["aria-describedby"] = this.feedbackId();
    } else if (this.unselectedCorrectAnswer() || this.selectedIncorrectAnswer()) {
      inputProps["aria-invalid"] = true;
      inputProps["aria-describedby"] = this.feedbackId();
    }
    if (this.props.addRef) {
      inputProps["ref"] = (node) => {
        this.props.setRef(node);
      };
    }
    return (
      <div className="checkbox-wrapper">
        {this.renderAnswerIndicator()}
        <div style={this.getButtonQuestionStyles()}>
          <label htmlFor={inputProps["id"]} className="btn btn-block btn-question" style={btnLabelStyles}>
            <input { ...inputProps }/>
            <span
              style={{paddingLeft: "25px"}}
              dangerouslySetInnerHTML={{__html: this.props.item.material}}
              />
          </label>
          <div>
            {this.answerFeedback()}
          </div>
        </div>
      </div>
    );
  }

  feedbackId() {
    return this.props.id + "Hint";
  }

  renderAnswerIndicator() {
    if (this.isAnswerKeyPage() && this.props.showAsCorrect) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          aria-label="Correct Answer"
          alt="Icon indicating the correct answer"
          style={styles.checkStyleCorrect}
          />
      );
    } else {
      return this.getAnswerIndicator();
    }
  }

  isAnswerKeyPage() {
    return !this.props.assessmentKind && this.props.isDisabled;
  }

  getAnswerIndicator() {
    if (this.selectedCorrectAnswer()) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          alt="Correct"
          style={styles.checkStyleCorrect}
          />
      );
    } else if (this.unselectedCorrectAnswer()) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          alt="Correct but not Selected"
          style={styles.checkStyleCorrect}
          />
      );
    } else if (this.selectedIncorrectAnswer()) {
      return (
        <img
          src="/assets/incorrect.png"
          className="wrongIndicator"
          alt="Incorrect"
          style={styles.checkStyleWrong}
          />
      );
    }
  }

  getButtonQuestionStyles() {
    if (this.shouldShowAnswerFeedback()) {
      return this.getButtonStyles();
    }

    return styles.btnQuestion;
  }

  getButtonStyles() {
    if (this.selectedCorrectAnswer()) {
      return {...styles.btnQuestion, ...styles.btnQuestionCorrect};
    } else if (this.unselectedCorrectAnswer()) {
      return {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
    } else if (this.selectedIncorrectAnswer()) {
      return {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
    } else {
      return styles.btnQuestion;
    }
  }

  answerFeedback() {
    if (this.shouldShowAnswerFeedback()) {<commit_msg>Update checkbox styles to use same format as radio<commit_after>"use strict";

import React from "react";
import AssessmentActions from "../../actions/assessment";
import AssessmentStore from "../../stores/assessment";
import Styles from "../../themes/selection.js";

const styles = Styles;

export default class CheckBox extends React.Component {
  render() {
    let btnQuestionStyles = this.getBtnQuestionStyles();
    let btnLabelStyles = this.getBtnLabelStyles();

    /**
     * Note on dangerouslySetInnerHTML Usage
     *
     * It is generally not a good idea to use dangerouslySetInnerHTML because it
     * may expose applications to XSS attacks. We are opting to use it here and
     * and in other places in the code base because the assessment content is
     * is stored in (and returned from) the DB as XML, which limits our options
     * in how we can handle assessment "material" on the frontend.
     *
     * READ: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
     */
    const inputProps = {
      style: { margin: 0, position: "absolute" },
      type: "checkbox",
      defaultChecked: this.props.checked,
      name: this.props.name,
      id: this.props.id,
      onClick: () => { this.answerSelected(); }
    };
    if (this.selectedCorrectAnswer()) {
      inputProps["aria-invalid"] = false;
      inputProps["aria-describedby"] = this.feedbackId();
    } else if (this.unselectedCorrectAnswer() || this.selectedIncorrectAnswer()) {
      inputProps["aria-invalid"] = true;
      inputProps["aria-describedby"] = this.feedbackId();
    }
    if (this.props.addRef) {
      inputProps["ref"] = (node) => {
        this.props.setRef(node);
      };
    }
    return (
      <div className="checkbox-wrapper">
        {this.renderAnswerIndicator()}
        <div className="btn btn-block btn-question" style={btnQuestionStyles}>
          <label htmlFor={inputProps["id"]} style={btnLabelStyles}>
            <input { ...inputProps }/>
            <span
              style={{paddingLeft: "25px"}}
              dangerouslySetInnerHTML={{__html: this.props.item.material}}
              />
          </label>
          <div>
            {this.answerFeedback()}
          </div>
        </div>
      </div>
    );
  }

  feedbackId() {
    return this.props.id + "Hint";
  }

  renderAnswerIndicator() {
    if (this.isAnswerKeyPage() && this.props.showAsCorrect) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          aria-label="Correct Answer"
          alt="Icon indicating the correct answer"
          style={styles.checkStyleCorrect}
          />
      );
    } else {
      return this.getAnswerIndicator();
    }
  }

  isAnswerKeyPage() {
    return !this.props.assessmentKind && this.props.isDisabled;
  }

  getAnswerIndicator() {
    if (this.selectedCorrectAnswer()) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          alt="Correct"
          style={styles.checkStyleCorrect}
          />
      );
    } else if (this.unselectedCorrectAnswer()) {
      return (
        <img
          src="/assets/correct.png"
          className="correctIndicator"
          alt="Correct but not Selected"
          style={styles.checkStyleCorrect}
          />
      );
    } else if (this.selectedIncorrectAnswer()) {
      return (
        <img
          src="/assets/incorrect.png"
          className="wrongIndicator"
          alt="Incorrect"
          style={styles.checkStyleWrong}
          />
      );
    }
  }

  getBtnQuestionStyles() {
    let qStyles = { ...styles.btnQuestion };

    if (this.shouldShowAnswerFeedback()) {
      if (this.selectedCorrectAnswer()) {
        qStyles =  {...styles.btnQuestion, ...styles.btnQuestionCorrect};
      } else if (this.unselectedCorrectAnswer()) {
        qStyles =  {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
      } else if (this.selectedIncorrectAnswer()) {
        qStyles =  {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
      } else {
        qStyles =  {...styles.btnQuestion};
      }
    }

    return qStyles;
  }

  getBtnLabelStyles() {
    let lStyles = {...styles.btnLabel, ...{display: "block", padding: "11px 11px 6px"} };

    if (this.props.showAsCorrect !== null) {
      lStyles = {...styles.btnLabel, ...{cursor: "default", display: "block", padding: "11px 11px 6px"}}
    } else {
      lStyles = {...styles.btnLabel, ...{cursor: "pointer", display: "block", padding: "11px 11px 6px"}}
    }

    return lStyles;
  }
  
  answerFeedback() {
    if (this.shouldShowAnswerFeedback()) {
{'fraction_non_alphanumeric': 0.13512608792680206, 'fraction_numerical': 0.00345904931934836, 'mean_word_length': 2.3381750465549347, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 35, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2875849', 'n_tokens_mistral': 2630, 'n_tokens_neox': 2554, 'n_words': 560}