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

{% block head_title %}
    Study
{% endblock %}

{% block styles %}

    <style type="text/css">
        h1 {text-align: center; font-size: 35px;}

        td {
          border: none !important;
        }

        .radiobutton input[type="radio"]{
            margin-right:8px;
        }

    </style>

{% endblock %}


{% block content %}

    <h1>Survey</h1>



    <div class="table">

        <p style="text-align: justify; font-size: 18px; font-weight: bold;">
                Question 1
        </p>
        <p style="font-size: 18px;">

            Have you played this game before? <br> <br>


        <span class="radiobutton"><input type="radio" name="nonogram_before" id="1" value="1"><label for="1">I play this game fairly often. </label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="nonogram_before" id="2" value="2"><label for="2">I have played this game before. </label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="nonogram_before" id="3" value="3"><label for="3">I have never played this game before. </label></span>
        </p>


        <p style="text-align: justify; font-size: 18px; font-weight: bold;">
                Question 2
        </p>
        <p style="font-size: 18px;">

            Have you played other similar puzzle games before, for example, Sudoku? <br> <br>


        <span class="radiobutton"><input type="radio" name="othergame_before" id="4" value="1"><label for="4">I play puzzle games fairly often. </label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="othergame_before" id="5" value="2"><label for="5">I have played puzzle games before.</label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="othergame_before" id="6" value="3"><label for="6">I have never played puzzle games before. </label></span>
        </p>



    </div>


    <p id="abc" style="color: black; text-align: center; font-size: 18px;"></p>




    <br>
    <center><button class="otree-btn-next btn btn-primary" onclick="myFunction()">Next</button></center>

{% endblock %}


{% block scripts %}
    <script type="text/javascript">

        function myFunction() {
              if (!$("input[name='nonogram_before']:checked").val() || !$("input[name='othergame_before']:checked").val() ) {
                   document.getElementById('abc').innerHTML = "Please make sure that you answered all the questions!";
                   event.preventDefault();
              }
        }



    </script>
{% endblock %}