 ArbitraryHtml = require './html'
 
 idCounter = 0
+
+Answer = React.createClass
+  displayName: 'Answer'
+
+  render: ->
+    {answer, iter, qid, type, correct_answer_id, hasCorrectAnswer, chosen_answer, onChangeAnswer} = @props
+    qid ?= "auto-#{idCounter++}"
+
+    isChecked = answer.id in chosen_answer
+    isCorrect = answer.id is correct_answer_id
+
+    isCorrect = (answer.correctness is '1.0') if answer.correctness?
+
+    classes = ['answers-answer']
+    classes.push('answer-checked') if isChecked
+    classes.push('answer-correct') if isCorrect
+    classes = classes.join(' ')
+
+    unless (hasCorrectAnswer or type is 'teacher-review')
+      radioBox = <input
+        type='radio'
+        className='answer-input-box'
+        checked={isChecked}
+        id="#{qid}-option-#{iter}"
+        name="#{qid}-options"
+        onChange={onChangeAnswer(answer)}
+      />
+
+    if type is 'teacher-review'
+      percent = Math.round(answer.selected_count / answered_count * 100) or 0
+      selectedCount = <div
+        className='selected-count'
+        data-count="#{answer.selected_count}"
+        data-percent="#{percent}">
+      </div>
+
+
+    <div className={classes} key="#{qid}-option-#{iter}">
+      {selectedCount}
+      {radioBox}
+      <label
+        htmlFor="#{qid}-option-#{iter}"
+        className='answer-label'>
+        <div className='answer-letter' />
+        <ArbitraryHtml className='answer-content' html={answer.content_html} />
+      </label>
+    </div>
+
+
 
 module.exports = React.createClass
   displayName: 'Question'

            block={true}/>
        </div>

    answers = _.map @props.model.answers, (answer, i) =>
      isChecked = answer.id in [@props.answer_id, @state.answer_id]
      isCorrect = answer.id is @props.correct_answer_id

      isCorrect = (answer.correctness is '1.0') if answer.correctness?

      classes = ['answers-answer']
      classes.push('answer-checked') if isChecked
      classes.push('answer-correct') if isCorrect
      classes = classes.join(' ')

      unless (hasCorrectAnswer or type is 'teacher-review')
        radioBox = <input
          type='radio'
          className='answer-input-box'
          checked={isChecked}
          id="#{qid}-option-#{i}"
          name="#{qid}-options"
          onChange={@onChangeAnswer(answer)}
        />

      if type is 'teacher-review'
        percent = Math.round(answer.selected_count / answered_count * 100) or 0
        selectedCount = <div
          className='selected-count'
          data-count="#{answer.selected_count}"
          data-percent="#{percent}">
        </div>


      <div className={classes} key="#{qid}-option-#{i}">
        {selectedCount}
        {radioBox}
        <label
          htmlFor="#{qid}-option-#{i}"
          className='answer-label'>
          <div className='answer-letter' />
          <ArbitraryHtml className='answer-content' html={answer.content_html} />
        </label>
      </div>

    classes = ['question']
    classes.push('has-correct-answer') if hasCorrectAnswer

      <ArbitraryHtml className='question-stem' block={true} html={html} />
      {@props.children}
      <div className='answers-table'>
        {answers}
      </div>
      {feedback}
      <div className="exercise-uid">{@props.exercise_uid}</div>
