<section id="designprotein2dinput_${id}" class="designprotein2dinput">
    <div class="script_placeholder" data-src="/static/js/capa/protex/protex.nocache.js?raw"/>
    <div class="script_placeholder" data-src="${applet_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="incomplete" id="status_${id}">
    % endif

    <div id="protex_container"></div>
    <input type="hidden" name="target_shape" id="target_shape" value ="${target_shape}"></input>
    <input type="hidden" name="input_${id}" id="input_${id}" aria-describedby="answer_${id}" value="${value|h}"/>

    <p class="status" aria-describedby="input_${id}">
      % if status == 'unsubmitted':
      unanswered
      % elif status == 'correct':
      correct
      % elif status == 'incorrect':
      incorrect
      % elif status == 'incomplete':
      incomplete
      % endif
    </p>

    <p id="answer_${id}" class="answer"></p>
  % if status in ['unsubmitted', 'correct', 'incorrect', 'incomplete']:
  </div>
% endif
</section>
