{{ block title }}
    Hi Paul
{{ endblock }}

{{ block styles }}
<style>
.responsive {
  width: 100%;
  height: auto;
}
</style>

{{ endblock }}

{{ block content }}
<p>
Erinnerst du dich an mich?
    <p>
        <img src="{{ static 'pari.jpg' }}" class="responsive"/>

    </p>
<div style="text-align:center">

  <tr>
    <th><input type="button" id="b_yes" name="b_yes" class="otree-btn-next btn btn-primary" value="Klar!"/>
</th>
    <th><input type="button" id="b_no" name="b_no" class="otree-btn-next btn btn-primary" value="Ähm.."/>
</th>
  </tr>
    </div>

<br>
<br>

<input type="hidden" name="c_yes" id="c_yes" required  class="form-control">
<input type="hidden" name="c_no" id="c_no" required  class="form-control">

<button class="otree-btn-next btn btn-primary" style="display:none;" id="next_page">Submit</button>
{% endblock %}

{% block scripts %}
<script>
    b_yes = document.getElementById("b_yes")
    b_no = document.getElementById("b_no")
    b_yes.addEventListener('click', click_illu1)
    b_no.addEventListener('click', click_illu2)

    function click_illu1() {
        var c_yes = document.getElementById('c_yes');
        c_yes.value = 1;
        var c_no = document.getElementById('c_no');
        c_no.value = 0;
        var next_button = document.getElementById("next_page");
        next_button.click();
        console.log("this is the value", c_yes.value, c_no.value)
    }

    function click_illu2() {
        var c_no = document.getElementById('c_no');
        c_no.value = 1;
        var c_yes = document.getElementById('c_yes');
        c_yes.value = 0;
        var next_button = document.getElementById("next_page");
        next_button.click();
        console.log("this is the value", c_yes.value, c_no.value)

    }

</script>

{{ endblock }}