<commit_before>import React from 'react';

class MultiChoice extends React.Component {
  render () {
    return (
      <div>Multiple Choice Test

      <ul className="answers">
      <input className='with-gap' type="radio" name="q1" value="a" id="a1" onClick={console.log('test')} /><label htmlFor="a1">Answer 1</label><br />
      <input className='with-gap' type="radio" name="q1" value="b" id="a2" /><label htmlFor="a2">Answer 2</label><br />
      <input className='with-gap' type="radio" name="q1" value="c" id="a3" /><label htmlFor="a3">Answer 3</label><br />
      <input className='with-gap' type="radio" name="q1" value="d" id="a4" /><label htmlFor="a4">Answer 4</label><br />
      </ul>
      </div>
    )
  }
}

export default MultiChoice;<commit_msg>(feat) Add submission and answer check<commit_after>import React from 'react';
import { Button } from 'react-bootstrap';

class MultiChoice extends React.Component {
  constructor() {
    super()

    this.state = {
      name: 'Multiple Choice Challenge!',
      description: 'Answer the question by submitting the correct answer.',
      session: {
        question: 'What kind of scoping does JavaScript use?',
        choices: ['Literal', 'Lexical', 'Segmental', 'Sequential'],
        answer: 'b',
        explanation: 'Like most modern programming languages, JavaScript uses lexical scoping. This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked.',
        type: 'multichoice'
      },
      selected: ''
    };
  }

  _submit () {
    if (this.state.selected === this.state.session.answer) {
      console.log('true');
      return true;
    } else {
      console.log('false');
      return false;
    }
  }

  _selected (answer) {
    console.log('inside answer');
    console.log(answer);
    this.setState({
      selected: answer
    });
  }

  render () {
    return (
      <div>
      <p>{this.state.session.description}</p>
      <ul className="answers">
      <input className='with-gap' type="radio" name="q1" value="a" id="a1" onClick={this._selected.bind(this, 'a')} />
        <label htmlFor="a1">{this.state.session.choices[0]}</label><br />
      <input className='with-gap' type="radio" name="q1" value="b" id="a2" onClick={this._selected.bind(this, 'b')} />
        <label htmlFor="a2">{this.state.session.choices[1]}</label><br />
      <input className='with-gap' type="radio" name="q1" value="c" id="a3" onClick={this._selected.bind(this, 'c')} />
        <label htmlFor="a3">{this.state.session.choices[2]}</label><br />
      <input className='with-gap' type="radio" name="q1" value="d" id="a4" onClick={this._selected.bind(this, 'd')} />
        <label htmlFor="a4">{this.state.session.choices[3]}</label><br />
      </ul>
      <Button bsStyle='primary' bsSize='large' onClick={this._submit.bind(this)}>Submit</Button>
      </div>
    )
  }
}

export default MultiChoice;
{'fraction_non_alphanumeric': 0.17615539182853315, 'fraction_numerical': 0.010716677829872739, 'mean_word_length': 3.4251851851851853, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, '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': '4324716', 'n_tokens_mistral': 967, 'n_tokens_neox': 935, 'n_words': 222}