{{ block title }}

{{ endblock }}
{{ block content }}


<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Add this line to your code -->
    <div class="modal-dialog">
        <div class="modal-content">
           
            <div class="modal-body">

           
        </div>
    </div>
</div>
</div>


<div class="mycontainer"> 
        
    <div class="title"> 

    
        <div class="title-wrapper">
            <div class="title_left">     
          {{ if group.GameMode == "Independent" }}
           <img src="/static/display_image/ind.png">
          {{endif}}
          {{ if group.GameMode == "Cooperation" }}
         <img src="/static/display_image/co.png">
          {{endif}}
          {{ if group.GameMode == "Competition" }}
           <img src="/static/display_image/com.png">
          {{endif}}
          {{ if group.GameMode == "Divergent" }}
          <img src="/static/display_image/Div.png">
          {{endif}}
                
            </div> 
            <div class="title_right"> <p> <b>What do you choose? </b>  </p> </div>
        </div>
    </div>
         
          
  <div class="raw">
      <div class="raw_left"> <a href="#"  onClick = "chooseStone()"> <img class='stone_img' src="/static/display_image/stone.jpeg">
      </a>  </div>
      <div class="raw_right"> <a href="#"  onClick = "chooseTree()">        <img class='tree_img' src="/static/display_image/tree.jpeg">
      </a> </div>
  </div>
  
          
  </div>




<style>

.modal-content{
     background-color:rgb(163, 1, 1);
     color:white
}
.modal-content {
    overflow:hidden;
}
.modal-footer button {
    background-color: white;
    color: black;}
    .modal-footer button:hover {
    background-color: white;
    color: black;}

.container{
    width: 100%;
    height: 100vh;
    outline-style: solid;
    background-color:aliceblue;
}
.otree-body{
    padding: 0;
    max-width: calc(100vw - 375px);
    max-height: calc(100vh - 16px);
}
.title{
    width: 100%;
    height: 20.3vh;
    border-bottom: 3px solid black;
    display: flex;
    align-items: center;
}
.page-header {
    margin-top: 3px;
    margin-bottom: 0;
    padding-top: 0;
}

.score{
    
    min-width: 173px;
    height: 100%;
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 3px solid black;
    /* border-right-style: solid; */
    width: 173px;
    padding-top: 18px;
}

.score p{
    
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    line-height: 30px;
    color: black;
    
}

.title_left{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    max-height: 250px;
    padding-left: 32px;
}

.title_left img{
    
    height: 80%;
    width: 80%;

}
.title-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.otree-title {
    margin-bottom: 0;
    padding: 0;
}
.title_right{
    height: 100%;
    flex: 1;
    margin-left: -120px;
}

.title_right p {
    text-align: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 4vh;
    line-height: 30px;
    padding-top: 18px;
    color: black;
    
    
}
.raw{
    width: 100%;
    height: 79.8vh;
    display: flex;
    justify-content: space-between;
}

.raw_score{
    display: flex;
    flex-direction: column;
    min-width: 173px;
    max-width: 173px;
    justify-content: space-between;
    height: 97.5%;
    border-right: 3px solid black;
}

.you{
    width: 100%;
    border-bottom: 3px solid black;
    height: 35vh;
    /* border-bottom: solid; */
    text-align: center;
    height: 40vh;
    
}

.you p {
    align-content: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    color: blue;
    padding-top: 50px;
    line-height: 2.25;
}

.op{
    width: 100%;
    height: 34vh;
    text-align: center;
    
}

.op p {
    align-content: center;
    font-family: 'Oxygen', sans-serif;
    font-size: 3vh;
    color: orange;
    margin-left: 0;
    padding-top: 16px;
    line-height: 2.3;
}


.raw_left{
    width: 42%;
    height: 70vh;
    position: relative;
    float: left;
}

.raw_left a img{
    display: block;
    width: 35%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    border-style: solid;
}


.raw_left a{

    color: aliceblue;
}


.raw_left a :hover{

outline-style: solid;
outline-color: red;
cursor: pointer;
}

.raw_left a :-webkit-any-link:hover{
outline-style: solid;
outline-color: red;
cursor: pointer;
}



a:-webkit-any-link {
    color: aliceblue;
    cursor: pointer;
}



.raw_right{
    width: 42%;
    height: 70vh;
    float: right;
}
.raw_right a img{
    display: block;
    width: 45%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    border-style: solid;
}

.raw_right a{

    color: aliceblue;
}


.raw_right a :hover{

outline-style: solid;
outline-color: red;
cursor: pointer;
}

.raw_right a :-webkit-any-link:hover{
outline-style: solid;
outline-color: red;
cursor: pointer;
}



a:-webkit-any-link {
    color: aliceblue;
    cursor: pointer;
}




@media screen and  (min-width: 1900px) and (max-width: 2200px) {
   
   .score p {
       font-size: 35px;
     }
   
   .title_left img {
       height: 100%;
       width: 100%;
   }
   
   
   }
   
   @media screen and (min-width: 2200px) and (max-width: 2500px) {
      
   
   .title_left img {
       height: 120%;
       width: 120%;
       margin-left: 180px;
   }
   
   
   .otree-btn-next{
       padding: 15px 50px;
       /* margin: -16px; */
       font-size: 20px;
       margin-top: -190px;
       margin-left: 220px;
   }
   }
   
   @media screen and  (min-width: 2500px) {
   
       .score p {
       font-size: 25px;
     }
   
     .otree-btn-next{
       padding: 15px 50px;
       /* margin: -16px; */
       font-size: 20px;
       margin-top: -190px;
       margin-left: 220px;
   }
     
   
   .title_left img {
       height: 140%;
       width: 140%;
       margin-left: 300px;
   }
   
   }
   
   
   
   
   
   

</style>




<div>
    {{ formfields }}
</div>


<script>
let start_time;

window.addEventListener("load", function(){

  document.getElementsByClassName('mb-3 _formfield')[0].style.display = 'none';
  document.getElementsByClassName('mb-3 _formfield')[1].style.display = 'none';

  start_time = Number(new Date());
})
      function chooseStone() {
      document.getElementById("id_Choose-0").checked = true;
      document.getElementById("id_chooseflag-1").checked = true;
      const end_time = (Number(new Date()) - start_time) / 1000;
     document.getElementById('id_reactiontime').value = end_time;
      // alert(end_time)
      document.getElementById('form').submit();
  
     }
      function chooseTree() {
      document.getElementById("id_Choose-1").checked = true;
      document.getElementById("id_chooseflag-1").checked = true;
      const end_time = (Number(new Date()) - start_time) / 1000;

      document.getElementById('id_reactiontime').value = end_time;
      // alert(end_time)
      document.getElementById('form').submit();
  
     }

  </script>




{{if player.round_number > 1 }}
{{ if player.id_in_group == 1 }}
{{ if group.Lastchoosep1 == 'Tree' }}


<script>
    window.addEventListener("load", function(){

    $('.tree_img').css('border', '3px dashed blue');

 
});

</script>
{{endif}}

{{ if group.Lastchoosep1 == 'Stone' }}

<script>
    window.addEventListener("load", function(){

    $('.stone_img').css('border', '3px dashed blue');

 
});

</script>
{{endif}}
{{endif}}
{{ if player.id_in_group == 2 }}
{{ if group.Lastchoosep2 == 'Tree' }}


<script>
    window.addEventListener("load", function(){

    $('.tree_img').css('border', '3px dashed blue');

 
});

</script>
{{endif}}

{{ if group.Lastchoosep2 == 'Stone' }}

<script>
    window.addEventListener("load", function(){

    $('.stone_img').css('border', '3px dashed blue');

 
});

</script>
{{endif}}
{{endif}}
{{endif}}





<!--
{{ if player.id_in_group == 1 }}

<script>
    $('input[type="radio"]').on('click', function(e) {
  result= $('input[type="radio"]:checked').val();
  localStorage.setItem('actualp1', JSON.stringify(result))

end_time =  Number(new Date())
spent_time=(end_time -start_time)/1000
document.getElementById('id_actualTime').value =spent_time;
document.getElementById('form').submit();
});

</script>

{{else}}
<script>
  $('input[type="radio"]').on('click', function(e) {

result= $('input[type="radio"]:checked').val();
localStorage.setItem('actualp2', JSON.stringify(result))

end_time =  Number(new Date())
spent_time=(end_time -start_time)/1000
document.getElementById('id_actualTime').value =spent_time;
document.getElementById('form').submit();
});

</script>
{{endif}} -->

{{if player.round_number <= C.demo_trial }}

<script>


    window.onload = () => {


    var counter=setInterval(timer, {{C.t2}}); //1000 will  run it every 1 second
    
    
    function timer()
    {
        clearInterval(counter);
        selectedSide=Math.round( Math.random())
    document.getElementById('id_Choose-'+selectedSide+'').checked = true;
    document.getElementById("id_chooseflag-0").checked = true;


    if (selectedSide==0){
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p>  You Didn't Choose , so we Randomly selected  <strong> Stone </strong> for you</p>`      
)
}

else{
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p>  You Didn't Choose , so we Randomly selected  <strong> Tree </strong> for you</p>`      
)
} 



       
$('#onload').modal({backdrop: 'static', keyboard: false})  

$('#onload').modal('show');




setTimeout(function() {


$("#onload").modal("hide");
document.getElementById('form').submit();

}, {{C.t}});

}
         
 


}

</script>

{{else}}

<script>


    window.onload = () => {


    var counter=setInterval(timer, {{C.t}}); //1000 will  run it every 1 second


    function timer()
    {
        clearInterval(counter);
        selectedSide=Math.round( Math.random())
    document.getElementById('id_Choose-'+selectedSide+'').checked = true;
    document.getElementById("id_chooseflag-0").checked = true;


    if (selectedSide==0){
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p>  You Didn't Choose , so we Randomly selected  <strong> Stone </strong> for you</p>`
)
}

else{
document.querySelector('.modal-body').insertAdjacentHTML(
'afterbegin',
` <p>  You Didn't Choose , so we Randomly selected  <strong> Tree </strong> for you</p>`
)
}




$('#onload').modal({backdrop: 'static', keyboard: false})

$('#onload').modal('show');




setTimeout(function() {


$("#onload").modal("hide");
document.getElementById('form').submit();

}, {{C.t}});

}




}

</script>

{{endif}}

{{ endblock }}