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

{% block title %}
Phase 1: Task-Solving Stage
{% endblock %}

{% block content %}

<style>
* {
  box-sizing: border-box;
}

.otree-timer {
  height:4%; 
  font-size: 18px; 
}

.img-container {
  float: left;
  width: 50%;
  padding: 5px;
}

.chat-container {
  float: right;
  width: 50%;
  padding: 5px;
}

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

input[type="button"] {
  background-color:#DDEEFF;
  color: black;
  border: solid #7788AA 2px;
  width:100%;
  font-family: Arial, Helvetica, sans-serif;
}
  
input[type="text"] {
  background-color:white;
  border: solid #7788AA 2px;
  width:100%;
  font-family: Arial, Helvetica, sans-serif;
}

.calculator {
  float: right;
  width: 30%;
  padding: 150px;
}

.modal2 {
  display: none; 
  position: absolute; 
  z-index: 2;  
  left: 0;
  top: 0;
  width: 100%; 
  height: 120%;
  min-height: 1000px; 
  min-width: 1500px; 
  overflow: auto;
  background-color: rgb(0,0,0); 
  background-color: white; 
}

.modal2Text {
  position: absolute;
  left:20%;
  top: 15%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}

</style>

<p> 
  Your role: <b>{{ player.role }}</b><br>
  Calculate the number of 4s in the grid. You will need information from the other members in your team. 
</p>

<div class="clearfix">
  <div class="img-container">
    <img src="{% static image_path_1 %}" style="width:90%" />
  </div>
  <div class="chat-container">
    <div>Task number {{ player.round_number }} has begun:</div>
    {% chat nickname=player.role %}
  </div> 
</div>

<table class="calculator" border="1">
         <tr>
            <td colspan="3"><input type="text" id="result"/></td>
            <td><input type="button" value="c" onclick="clr()"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="1" onclick="dis('1')"/> </td>
            <td><input type="button" value="2" onclick="dis('2')"/> </td>
            <td><input type="button" value="3" onclick="dis('3')"/> </td>
            <td><input type="button" value="/" onclick="dis('/')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="4" onclick="dis('4')"/> </td>
            <td><input type="button" value="5" onclick="dis('5')"/> </td>
            <td><input type="button" value="6" onclick="dis('6')"/> </td>
            <td><input type="button" value="-" onclick="dis('-')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="7" onclick="dis('7')"/> </td>
            <td><input type="button" value="8" onclick="dis('8')"/> </td>
            <td><input type="button" value="9" onclick="dis('9')"/> </td>
            <td><input type="button" value="+" onclick="dis('+')"/> </td>
         </tr>
         <tr>
            <td><input type="button" value="." onclick="dis('.')"/> </td>
            <td><input type="button" value="0" onclick="dis('0')"/> </td>
            <td><input type="button" value="=" onclick="solve()"/> </td>
            <td><input type="button" value="*" onclick="dis('*')"/> </td>
         </tr>
      </table>


{% formfield player.s1_task_answers %}
 
 <input type="hidden" name="s1_timeSpent" id="s1_timeSpent"/> 

    {% next_button %}

<div id="myModal2" class="modal2">  
  <div class="modal2Text"><p>
    The timer has now reached 0. The Phase 1 task-solving stage is over.
    <br><br>
    Please wait while the next page loads (where the results and payment information is shown). This can sometimes take up to a minute.
    <br><br>
    Do not refresh your page at this time.
  </p></div>
</div>      

<button type="button" id="toggle_instructions" onClick="toggle_instructions()" class="instructionsButton">Instructions</button>

<iframe id="instructions" class="instructions" src="https://docs.google.com/presentation/d/e/2PACX-1vSW8lWzetOXBeatjs-SRQNFhqQkubMauLXHgLvS2eMZ5C2u5OAg1LQiZPkW0RMwWqmjAOQyEgxoL1rh/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>  

<script>

//Page Timer
var pageTimeElapsed = 0;
var pageTimerID = -1;
var time_left = js_vars.time_left;

var modal2 = document.getElementById("myModal2");

function pageTick() {
  pageTimeElapsed++
  document.getElementById("s1_timeSpent").value = pageTimeElapsed;

  if (pageTimeElapsed >= time_left) {
    modal2.style.display = "block";
    if(pageTimerID != -1){
      clearInterval(pageTimerID);
      pageTimerID = -1;
    };
  };
};

window.onload = function() { 
  if(pageTimerID == -1){
    pageTimerID = setInterval(pageTick, 1000);
  } 
};

//calculator
function dis(val) {
  document.getElementById("result").value+=val
}
           
function solve() {
  let x = document.getElementById("result").value
  let y = eval(x)
  document.getElementById("result").value = y
}
           
function clr() {
  document.getElementById("result").value = ""
}  


</script> 

{% endblock %}