{{ block title }}
   Part I: Task I - Round {{player.round_number}}
{{ endblock }}

{{ block styles}}
<style>
    {
        box-sizing: border-box;
    }
    /* Set additional styling options for the columns*/
    .column {
    float: left;
    width: 50%;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
    }

    table, th, td {
  padding: 5px;}
    </style>
{{endblock}}



{{ block content }}

    <! –– Quiz Section -->

        <b>Question:</b><br>
        {{question_text}}
        <table>
            <tr>  <td style="color: blue"> Option A</td>  <td>{{OptionA}}</td>  </tr>
            <tr>  <td style="color: blue">Option B</td>  <td>{{OptionB}}</td>  </tr>
            <tr>  <td style="color: blue">Option C</td>  <td>{{OptionC}}</td>  </tr>
            <tr>  <td style="color: blue">Option D</td>  <td>{{OptionD}}</td>  </tr>

        </table>


    <div id="Role_and_Options">
        {{if player.answerer == 1}}
        <span style="color: blue; font-weight: bold"> You have been selected at random to submit your group's answer for this round.</span>
        {{formfields}}
        {{else}}
        <span style="color: blue; font-weight: bold"> Another member of your group (selected at random) will submit your group's answer for this round. <br>
        After they submit the answer, you will automatically proceed to the next round.</span>
        {{endif}}

        {{if player.answerer == 1}}
        <button class="otree-btn-next btn btn-primary" id="Role_and_Options" onclick="sendSubmitted()">Submit Answer</button>
        {{endif}}

    </div>


     <! –– Chat Box Section -->
    <hr>
    <div>
            <p>
            <b>Chat Box:</b><br>

            <div class="row">
            <div class="column" >
                <p>You can use the chat box to communicate with other members of your group. Recall the two important rules when using the chat:<br>
                    <ul>
                <li> No personal information,</li>
                <li> No profanity/hate speech. </li>
                   </ul>
                </p>
            </div>
            <div class="column">
                {{ chat nickname=participant.participant_name channel=participant.group_name }}
            </div>
        </div>
        </p>
    </div>



<!-- Modal HTML ---
    {{if player.answerer == 0 and player.group.ans_submitted == True}}
      <div id="myModal" class="modal" tabIndex="-1">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                         <h5 class="modal-title">Notification: </h5>
                         <button type="button" class="btn-close" data-bs-dismiss="modal"
                                 aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                         <p>A member of your group has submitted the answer for this round, please click on 'Proceed to Next Round'.
                         You may click anywhere on your screen to close this box.</p>
                     </div>
                 </div>
             </div>
      </div>
    {{endif}}
-->
{{ endblock }}



{{block scripts}}
<!-- Modal Script ---
     <script>
     $(document).ready(function(){
         $("#myModal").modal('show');
     });
     </script>

--- Refresh page in 15 seconds Script ---
    {{if player.answerer == 0 and player.group.ans_submitted == False}}
    <script>
        setTimeout(function(){
            window.location.reload(1);
            }, 15000);
    </script>
    {{endif}}
-->

    <!-- Role Displayed after 1 minute -->
    {{if player.group.ans_submitted == False}}
    <script>
        document.getElementById("Role_and_Options").style.display = "none";

        function timed_show() {
            document.getElementById("Role_and_Options").style.display = "inline";
        }

        function myFunction() {
            window.location = "Task1.html"
        }

        setTimeout(timed_show, 60000);
    </script>
    {{endif}}

    {{if player.group.ans_submitted == True}}
    <script>
        document.getElementById("Role_and_Options").style.display = "none";

        function timed_show() {
            document.getElementById("Role_and_Options").style.display = "inline";
        }

        function myFunction() {
            window.location = "Task1.html"
        }

        setTimeout(timed_show, 2000);
    </script>
    {{endif}}

    <script>
        function sendSubmitted(){
            liveSend({'submitted':true});
        }
        function liveRecv(data){
            if (data.finished){
                document.getElementById('form').submit();
            }
        }
        document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
        });
    </script>
{{ endblock }}