<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>
  <h4>Response</h4>
  <textarea rows="${rows}" cols="${cols}" name="answer" class="answer short-form-response" id="input_${id}">${previous_answer|h}</textarea>

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

    % endif

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

  <div class="file-upload"></div>

  <input type="button" value="Submit" class="submit-button" name="show"/>
  <input name="skip" class="skip-button" type="button" value="Skip Post-Assessment"/>

  <div class="open-ended-action"></div>

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