<section id="inputtype_${id}" class="jsinput"
    data="${gradefn}"
    % if saved_state:
    data-stored="${saved_state|x}"
    % endif
    % if get_statefn:
    data-getstate="${get_statefn}"
    % endif
    % if set_statefn:
    data-setstate="${set_statefn}"
    % endif
    data-sop="false"
    data-processed="false"
    >

  <div class="script_placeholder" data-src="${jschannel_loader}"/>
  <div class="script_placeholder" data-src="${jsinput_loader}"/>
  % if status == 'unsubmitted':
  <div class="unanswered" id="status_${id}">
  % elif status == 'correct':
  <div class="correct" id="status_${id}">
  % elif status == 'incorrect':
  <div class="incorrect" id="status_${id}">
  % elif status == 'incomplete':
  <div class="incorrect" id="status_${id}">
  % endif

  <iframe name="iframe_${id}"
      id="iframe_${id}"
      sandbox="allow-scripts allow-popups allow-same-origin allow-forms allow-pointer-lock"
      seamless="seamless"
      frameborder="0"
      src="${html_file}"
      height="${int(height) + 100}"
      width="${width}"
      />
  <input type="hidden" name="input_${id}" id="input_${id}"
    waitfor=""
    value="${value|h}"/>

    <br/>
    <p id="answer_${id}" class="answer"></p>

    <div class="indicator-container">
        <span class="status ${status.classname}" data-tooltip="${status.display_tooltip}">
            <span class="sr">${status.display_name}</span>
            <span class="status-icon" aria-hidden="true"></span>
        </span>
    </div>
    <br/> <br/>

    <div class="error_message" style="padding: 5px 5px 5px 5px; background-color:#FA6666; height:60px;width:400px; display: none"></div>

  % if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
  </div>
  % endif

  % if msg:
      <span class="message">${msg|n}</span>
  % endif
</section>
