{% 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>Question 1</h1>



    <div class="table">

        <p style="text-align: justify; font-size: 18px;">
                    Podcast question 1
        </p>
        <p style="font-size: 18px;">
        <span class="radiobutton"><input type="radio" name="podcast1" id="1" value="Option 1"><label for="1">Option 1 </label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="podcast1" id="2" value="Option 2"><label for="2">Option 2 </label></span>
        <br>
        <span class="radiobutton"><input type="radio" name="podcast1" id="3" value="Option 3"><label for="3">Option 3 </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='podcast1']:checked").val()) {
                   document.getElementById('abc').innerHTML = "Please make sure to answer the question!";
                   event.preventDefault();
              }
        }



    </script>
{% endblock %}