{{ 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 1 </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_PCI1-"+ '{{ 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 'PCI1' }}
        </div>
    </div>

    <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_attempts1" id="intentos" value=0>
    </div>
  </div>
  <br>
  <br>
  <br>

  {{ endblock }}