<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 RadioButton 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 = {
      type: "radio",
      defaultChecked: this.checkedStatus(),
      disabled: this.props.isDisabled,
      name: this.props.name,
      id: this.props.id,
      style: { position:"absolute" },
      onClick: () => { this.answerSelected(); }
    };
    if (this.showIncorrectAndChecked()) {
      inputProps["aria-invalid"] = true;
      inputProps["aria-describedby"] = this.feedbackId();
    } else if (this.showCorrectAndChecked()) {
      inputProps["aria-invalid"] = false;
      inputProps["aria-describedby"] = this.feedbackId();
    }
    if (this.props.addRef) {
      inputProps["ref"] = (node) => {
        this.props.setRef(node);
      };
    }
    return (
      <div>
        {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}}>
            </span>
          </label>
          <div>
            {this.isQuizPage() ? this.answerFeedback() : ""}
          </div>
        </div>
      </div>
    );
  }

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

    if (this.isQuizPage()) {
      if (this.showCorrectAndChecked()) {
        qStyles = {...styles.btnQuestion, ...styles.btnQuestionCorrect};
      } else if (this.showIncorrectAndChecked()) {
        qStyles = {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
      }
    }

    return qStyles;
  }

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

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

    return lStyles;
  }

  isQuizPage() {
    return this.props.assessmentKind === "formative" || this.props.assessmentKind === "practice";
  }

  showCorrectAndChecked() {
    return this.props.showAsCorrect === true && this.props.checked === true;
  }

  showIncorrectAndChecked() {
    return this.props.showAsCorrect === false && this.props.checked === true;<commit_msg>Change display setting on label<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 RadioButton 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 = {
      type: "radio",
      defaultChecked: this.checkedStatus(),
      disabled: this.props.isDisabled,
      name: this.props.name,
      id: this.props.id,
      style: { position:"absolute" },
      onClick: () => { this.answerSelected(); }
    };
    if (this.showIncorrectAndChecked()) {
      inputProps["aria-invalid"] = true;
      inputProps["aria-describedby"] = this.feedbackId();
    } else if (this.showCorrectAndChecked()) {
      inputProps["aria-invalid"] = false;
      inputProps["aria-describedby"] = this.feedbackId();
    }
    if (this.props.addRef) {
      inputProps["ref"] = (node) => {
        this.props.setRef(node);
      };
    }
    return (
      <div>
        {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}}>
            </span>
          </label>
          <div>
            {this.isQuizPage() ? this.answerFeedback() : ""}
          </div>
        </div>
      </div>
    );
  }

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

    if (this.isQuizPage()) {
      if (this.showCorrectAndChecked()) {
        qStyles = {...styles.btnQuestion, ...styles.btnQuestionCorrect};
      } else if (this.showIncorrectAndChecked()) {
        qStyles = {...styles.btnQuestion, ...styles.btnQuestionIncorrect};
      }
    }

    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;
  }

  isQuizPage() {
    return this.props.assessmentKind === "formative" || this.props.assessmentKind === "practice";
  }

  showCorrectAndChecked() {
    return this.props.showAsCorrect === true && this.props.checked === true;
  }

  showIncorrectAndChecked() {
    return this.props.showAsCorrect === false && this.props.checked === true;
{'fraction_non_alphanumeric': 0.14487738829547164, 'fraction_numerical': 0.005115089514066497, 'mean_word_length': 2.6933333333333334, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 29, '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': '2225131', 'n_tokens_mistral': 2008, 'n_tokens_neox': 1968, 'n_words': 467}