<div id="inputtype_{{ id }}"
     class="jsinput"
     data="{{ gradefn }}"
     {% if saved_state %}data-stored="{{ saved_state }}"{% endif %}
     {% if initial_state %}data-initial-state="{{ initial_state }}"{% endif %}
     {% if get_statefn %}data-getstate="{{ get_statefn }}"{% endif %}
     {% if set_statefn %}data-setstate="{{ set_statefn }}"{% endif %}
     {% if sop %}data-sop="{{ sop }}"{% endif %}
     data-processed="false">
    <div class="script_placeholder" data-src="{{ jschannel_loader }}" />
    <div class="script_placeholder" data-src="{{ jsinput_loader }}" />
    {% if status == 'unsubmitted' or status == 'submitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        <div class="{{ status.classname }}">
        {% endif %}
        <iframe name="iframe_{{ id }}"
                id="iframe_{{ id }}"
                sandbox="allow-scripts allow-popups allow-same-origin allow-forms allow-pointer-lock allow-downloads"
                seamless="seamless"
                frameborder="0"
                src="{{ html_file }}"
                height="{{ height }}"
                width="{{ width }}"
                title="{{ title }}" />
        <input type="hidden"
               name="input_{{ id }}"
               id="input_{{ id }}"
               waitfor=""
               value="{{ value }}" />
        <br />
        <p id="answer_{{ id }}" class="answer"></p>
        <div class="indicator-container">{% include "status_span.html" with status=status status_id=id %}</div>
        <div class="error_message"
             style="padding: 5px 5px 5px 5px;
                    background-color:#FA6666;
                    height:60px;
                    width:400px;
                    display: none"></div>
        {% if status == 'unsubmitted' or status == 'submitted' or status == 'correct' or status == 'incorrect' or status == 'partially-correct' or status == 'incomplete' %}
        </div>
    {% endif %}
    {% if msg %}<span class="message" tabindex="-1">{{ msg|safe }}</span>{% endif %}
</div>
