{{ extends "_static/global/Page.html" }}
{{ load otree static }}

{{ block title }}
{{ endblock }}

{{ block scripts }}
<script>
    // (A) PREVENT CONTEXT MENU FROM OPENING
    window.addEventListener("contextmenu", evt => evt.preventDefault(), false);
    // (B) PREVENT CLIPBOARD COPYING
    window.addEventListener("copy", evt => {
        // (B1) CHANGE THE COPIED TEXT IF YOU WANT
        evt.clipboardData.setData("text/plain", "Copying is not allowed on this page");
        // (B2) PREVENT THE DEFAULT COPY ACTION
        evt.preventDefault();
    }, false);

    window.addEventListener("load", (event) => {  
        let startTime,submitTime
        startTime=Date.now()
        document.getElementById("instructions_clicked").value = 0
        const div = document.querySelectorAll('div')
        div.forEach(function(x){
            if (x.classList.contains('otree-form-errors')){
                x.innerHTML="Please make your choice and guess."
            }
        })
        document.getElementById("ok_button").addEventListener('click', function () {
            submitTime = Date.now()
            if (document.getElementById("time_spent_instructionspractice").value) {
                document.getElementById("time_spent_instructionspractice").value
            } else {
                document.getElementById("time_spent_instructionspractice").value = submitTime - startTime;
            }
            document.getElementById("form").submit();
        })
    });

    
    function show_Instructions() {
        document.getElementById("instructions_clicked").value = 1
        let elem1 = document.getElementById("instructions_button"), text1 = elem1.innerText;
        if (text1 === "Show Instructions"){
            elem1.innerHTML = "Hide Instructions";}
        else{
            elem1.innerHTML = "Show Instructions";
        }
        let x1 = document.getElementById("Instructions");
        if (x1.style.display === "none") {
            x1.style.display = "block";
        }
        else {
            x1.style.display = "none";
        }
    };

    // Delay 
    setTimeout(function () {
        document.getElementById("ok_button").style.visibility = "visible";
    }, 0);

</script>
{{ endblock }}

{{ block styles }}
{{ endblock }}

{{ block content }}
<input name="instructions_clicked" type="hidden" id="instructions_clicked">
<input name="time_spent_instructionspractice" type="hidden" id="time_spent_instructionspractice">

<div class="form-group required">
    <p style="text-align: center">Please choose:</p>
    <div class="radio-options-container">
        <div class="radio-option">
            <label>1</label>
            <input name="choice" type="radio" value="1">
        </div>
        <div class="radio-option">
            <label>2</label>
            <input name="choice" type="radio" value="2">
        </div>
    </div>
</div>

  
<br>

{{ if player.practice == 1  }}
    <div  class="container">
        <div class="centering">
            <button type="button" class="btn btn-primary"  style="visibility: hidden;"  id="ok_button">Receive feedback</button>
        </div>
    </div>
{{ endif }}
{{ if player.practice == 0  }}
    <div class="container">
        <div class="centering">
            <button type="button" class="btn btn-primary"  style="visibility: hidden;" id="ok_button">Next</button>
        </div>
    </div>
{{ endif }}


<div class="container">
    <div class="centering">
        <button  type="button" style="visibility: hidden;"  class="btn btn-secondary" id="instructions_button" onclick="show_Instructions()">
            Show Instructions
        </button>
    </div>
</div>

<div id="Instructions"  style="display: none" class="card bg-light instructions">
    <div class="card-body">
        {{ include "MainTask/InstructionsBase.html"}}
    </div>
</div>


{{ endblock }}