{% block styles %}
<style type="text/css">
  .otree-timer {
       display: none;
   }
   </style>
   {% endblock %}

{% block title %}
<div class="container">
  <div class="row">
      <div class="col-md-12 border rounded p-1 mb-0" id="dark_bg">
          <h1 id="light_txt"> Pregunta 3 </h1>
      </div>
  </div>
</div>
{% endblock %}

{% block content %}
<script>
    function mostrar_error(){
        document.getElementById("error").classList.remove("d-none");
        setTimeout(() => document.getElementById("error").classList.add("d-none"), 6000);
    }
    function verificar_respuesta(){
        if(document.getElementById("id_PCI3-"+ '{{correct_ans}}').checked){
                document.getElementById("btn_avanzar").click();  
        }
        else{
            mostrar_error();
            document.getElementById("intentos").value ++;
        }
    }
</script>
<div class="container">
    <div class="row">
        <div class="col-md-12 border rounded p-1 mb-0" id="dark_bg">
        <br>
        {{ formfield 'PCI3' }}
        </div>
    </div>
  </div>
  <br>
  <br>

  <div class="row d-none" id="error">
    <div class="alert alert-danger" role="alert">
        {{error_msg}}
      </div>
</div>
<div class="row">
    <button type="button" class="btn btn-primary" onclick="verificar_respuesta()">Siguiente</button>
    <button class="d-none" id="btn_avanzar"></button>
    <input type="hidden" name="incorrect_attempts3" id="intentos" value=0>
</div>
</div>
  <br>
  <br>
  <br>
        {% endblock %}