<span>
  <input type="hidden" class="imageinput" src="${src}" name="input_${id}" id="input_${id}" value="${value}" />
  <div id="imageinput_${id}" onclick="image_input_click('${id}',event);" style = "background-image:url('${src}');width:${width}px;height:${height}px;position: relative; left: 0; top: 0;">
      <img src="${STATIC_URL}green-pointer.png" id="cross_${id}" style="position: absolute;top: ${gy}px;left: ${gx}px;" />
  </div>

  % if status == 'unsubmitted':
  <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}">
    <span class="sr">Status: unanswered</span>
  </span>
  % elif status == 'correct':
  <span class="correct" id="status_${id}" aria-describedby="input_${id}">
    <span class="sr">Status: correct</span>
  </span>
  % elif status == 'incorrect':
  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
    <span class="sr">Status: incorrect</span>
  </span>
  % elif status == 'incomplete':
  <span class="incorrect" id="status_${id}" aria-describedby="input_${id}">
    <span class="sr">Status: incorrect</span>
  </span>
  % endif
</span>
