<section id="openended_${id}" class="open-ended-child" data-state="${state}" data-child-type="${child_type}">

   <div class="error"></div>
   <div class="prompt">
    ${prompt|n}
   </div>
  <textarea rows="${rows}" cols="${cols}" name="answer" class="answer short-form-response" id="input_${id}">${previous_answer|h}</textarea>

  <div class="message-wrapper">
    % if state == 'initial':
      <span class="unanswered" style="display:inline-block;" id="status_${id}">Unanswered</span>
    % elif state in ['done', 'post_assessment'] and correct == 'incorrect':
      <span class="correct" id="status_${id}">Correct</span>
    % elif state in ['done', 'post_assessment'] and correct == 'correct':
      <span class="incorrect" id="status_${id}">Incorrect</span>
    % elif state == 'assessing':
      <span class="grading" id="status_${id}">Submitted for grading</span>
    % endif

    % if hidden:
      <div style="display:none;" name="${hidden}" inputid="input_${id}" />
    % endif
  </div>

  <input type="button" value="Submit" class="submit-button" name="show"/>

  <span id="answer_${id}"></span>

  <input name="reload" class="reload-button" type="button" value="Recheck for Feedback" onclick="document.location.reload(true);" />
  <div class="external-grader-message">
      ${msg|n}
    % if state == 'post_assessment':
    <div class="collapsible evaluation-response">
      <header>
      <a href="#">Respond to Feedback</a>
      </header>
    <section id="evaluation_${id}" class="evaluation">
    <p>How accurate do you find this feedback?</p>
        <div class="evaluation-scoring">
            <ul class="scoring-list">
                <li><input type="radio" name="evaluation-score" id="evaluation-score-5" value="5" /> <label for="evaluation-score-5"> Correct</label></li>
                <li><input type="radio" name="evaluation-score" id="evaluation-score-4" value="4" /> <label for="evaluation-score-4"> Partially Correct</label></li>
                <li><input type="radio" name="evaluation-score" id="evaluation-score-3" value="3" /> <label for="evaluation-score-3"> No Opinion</label></li>
                <li><input type="radio" name="evaluation-score" id="evaluation-score-2" value="2" /> <label for="evaluation-score-2"> Partially Incorrect</label></li>
                <li><input type="radio" name="evaluation-score" id="evaluation-score-1" value="1" /> <label for="evaluation-score-1"> Incorrect</label></li>
            </ul>
        </div>
        <p>Additional comments:</p>
        <textarea rows="${rows}" cols="${cols}" name="feedback_${id}" class="feedback-on-feedback" id="feedback_${id}"></textarea>
    </section>
    </div>
    % endif
  </div>
  <div class="open-ended-alert"></div>
</section>
