{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    Before you begin ... (Page 1/12)
{% endblock %}
{% block content %}
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="card card-body bg-light instructions">
    <ul>
        <li>
            Please read the instructions carefully and be aware that you cannot go back to previous screens.
        </li>
        <li>
            This study is anonymous, and your data will only be used for research purposes.
        </li>
        <li>
            There is no psychological discomfort, no physical discomfort, nor any deception in this study.
        </li>
        <li>
            Participation is completely voluntary and you can quit at any time.
        </li>
    </ul>

    <p>Thank you,</p>

    <p>The research team</p>
    </div>
<br>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="6LddnMgUAAAAAI5WBwMn_wrnt6Ct7AvKsaBF9ciF"></div>
      <br>
      <button class="otree-btn-next btn btn-primary" type="submit">Next</button>
    </form>
{% endblock %}

{% block scripts %}
<script>
    window.onload = function() {
    var recaptcha = document.querySelector('#g-recaptcha-response');
    recaptcha.required = true;
    recaptcha.oninvalid = function(e) {
    alert("Please complete the Captcha");
      }
   }
</script>
{% endblock %}