<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import { map } from 'lodash';
import { observer } from 'mobx-react';
import { action } from 'mobx';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import styled from 'styled-components';
import Question  from 'shared/model/exercise/question';
import { Icon } from 'shared';

const StyledTwoStepInfo = styled(Popover)`
  padding: 1rem;
`;

@observer
class QuestionFormatType extends React.Component {

  static propTypes = {
    question: PropTypes.instanceOf(Question).isRequired,
  };

  @action.bound updateRadioFormat(ev) {
    this.props.question.setExclusiveFormat(ev.target.value);
  }

  @action.bound setChoiceRequired(ev) {
    this.props.question.toggleFormat('free-response', ev.target.checked);
  }

  @action.bound preserveOrderClicked(ev) {
    this.props.question.is_answer_order_important = ev.target.checked;
  }

  renderTwoStepInfo() {
    return (
      <OverlayTrigger
        trigger="hover"
        placement="right"
        overlay={
          <StyledTwoStepInfo>
            <>
              <p>
              A two-step question requires students to recall an answer from memory
              before viewing the multiple-choice options.
              Our research shows that retrieval practice helps to improve knowledge retention.
              </p>
              <p>
              Students will be graded only on the multiple-choice step.
              You can view student reponses in the ‘Submission overview’ tab.
              </p>
            </>
          </StyledTwoStepInfo>
        }
      >
        <Icon
          type="question-circle"
          className="question-info-icon"
        />
      </OverlayTrigger>
    );
  }

  render() {
    const { question } = this.props;

    return (
      <div className="format-type">
        {map(question.allowedFormatTypes, (name, id) => (
          <div key={id}>
            <input
              type="radio"
              id={`input-${id}`}
              name={`${question.index}-formats`}
              value={id}
              onChange={this.updateRadioFormat}
              checked={question.hasFormat(id)}
            />
            <label htmlFor={`input-${id}`}>
              {name}
            </label>
          </div>
        ))}
        {question.isMultipleChoice && (
          <div className="multi-choice-boxes">
            <div className="requires-choices">
              <input
                type="checkbox"
                id="input-rq"
                checked={question.hasFormat('free-response')}
                onChange={this.setChoiceRequired}
              />
              <label htmlFor="input-rq">
                Two Step Question
              </label>
              {this.renderTwoStepInfo()}
            </div>
            <div className="order-matters">
              <input
                type="checkbox"
                id="input-om"
                checked={question.is_answer_order_important}
                onChange={this.preserveOrderClicked}
              />
              <label htmlFor="input-om">
                Order Matters
              </label>
            </div>
          </div>
        )}
      </div>
    );
  }
}


export default QuestionFormatType;
<commit_msg>delete unnecesary infoo<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import { map } from 'lodash';
import { observer } from 'mobx-react';
import { action } from 'mobx';
import { Popover, OverlayTrigger } from 'react-bootstrap';
import styled from 'styled-components';
import Question  from 'shared/model/exercise/question';
import { Icon } from 'shared';

const StyledTwoStepInfo = styled(Popover)`
  padding: 1rem;
`;

@observer
class QuestionFormatType extends React.Component {

  static propTypes = {
    question: PropTypes.instanceOf(Question).isRequired,
  };

  @action.bound updateRadioFormat(ev) {
    this.props.question.setExclusiveFormat(ev.target.value);
  }

  @action.bound setChoiceRequired(ev) {
    this.props.question.toggleFormat('free-response', ev.target.checked);
  }

  @action.bound preserveOrderClicked(ev) {
    this.props.question.is_answer_order_important = ev.target.checked;
  }

  renderTwoStepInfo() {
    return (
      <OverlayTrigger
        trigger="hover"
        placement="right"
        overlay={
          <StyledTwoStepInfo>
            <>
              <p>
              A two-step question requires students to recall an answer from memory
              before viewing the multiple-choice options.
              Our research shows that retrieval practice helps to improve knowledge retention.
              </p>
            </>
          </StyledTwoStepInfo>
        }
      >
        <Icon
          type="question-circle"
          className="question-info-icon"
        />
      </OverlayTrigger>
    );
  }

  render() {
    const { question } = this.props;

    return (
      <div className="format-type">
        {map(question.allowedFormatTypes, (name, id) => (
          <div key={id}>
            <input
              type="radio"
              id={`input-${id}`}
              name={`${question.index}-formats`}
              value={id}
              onChange={this.updateRadioFormat}
              checked={question.hasFormat(id)}
            />
            <label htmlFor={`input-${id}`}>
              {name}
            </label>
          </div>
        ))}
        {question.isMultipleChoice && (
          <div className="multi-choice-boxes">
            <div className="requires-choices">
              <input
                type="checkbox"
                id="input-rq"
                checked={question.hasFormat('free-response')}
                onChange={this.setChoiceRequired}
              />
              <label htmlFor="input-rq">
                Two Step Question
              </label>
              {this.renderTwoStepInfo()}
            </div>
            <div className="order-matters">
              <input
                type="checkbox"
                id="input-om"
                checked={question.is_answer_order_important}
                onChange={this.preserveOrderClicked}
              />
              <label htmlFor="input-om">
                Order Matters
              </label>
            </div>
          </div>
        )}
      </div>
    );
  }
}


export default QuestionFormatType;

{'fraction_non_alphanumeric': 0.11483850834763613, 'fraction_numerical': 0.0003120611639881417, 'mean_word_length': 1.7440068493150684, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 63, 'https://': 0, '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': '7056911', 'n_tokens_mistral': 1732, 'n_tokens_neox': 1686, 'n_words': 349}