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

{% block title %}
    Welcome to the experiment!
{% endblock %}

{% block content %}
<h3>Please watch the video below for instructions</h3>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'j4FvHPECKPE',
          rel : 0,
          playerVars: {
            'playsinline': 1,
            'rel':0,
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
    function onPlayerStateChange(event) {
        if(event.data === 0) {
            document.getElementById("div1").style.visibility = "visible";
            document.getElementById("NextHead").style.visibility = "hidden";
        }
    }

    window.onload = function () {
        if (localStorage.getItem("hasCodeRunBefore") === null) {
            document.getElementById("div1").style.visibility = "hidden";
            localStorage.setItem("hasCodeRunBefore", true);
        } else {
            document.getElementById("div1").style.visibility = "visible";
            document.getElementById("NextHead").style.visibility = "hidden";
        }
    }
    function loadNewVid(vidID){
        player.destroy();
        playerParams.videoId = vidID;
        player = new YT.Player('player', playerParams);
    }

    </script>
<br> <br>
<h3>Text Instructions</h3>

<p>
    You are about to participate in an experiment on the economics of decision-making. <br>
    If you <b>complete</b> this experiment, you will earn <b>${{ Constants.payment_amount }}</b>, which will be paid to you via PayPal at the end of the experiment. <br>
    On average, I expect that the experiment will take approximately 45 minutes. <br>
</p>
<br>
<h3> The Basic Idea </h3>
<p>
    In this experiment, you will have to complete several <b>computerized tasks</b> using your computer. <br>
    There will be 5 categories of computerized tasks in this experiment. <br>
    Each category contains <b>4</b> different levels of tasks, with level 1 being the easiest, and level 4 being the hardest. <br>
    All task categories are designed to be equally difficult, but you may be able to complete tasks from one category quicker than others due to your own aptitudes and abilities.
</p>
<p>
    You will be able to choose which tasks you want to complete - so <i>choosing appropriately</i> will allow you to complete the experiment <b>quicker</b>. <br>
    However, you will <b>not</b> know what a task entails before you make your choice. <br>
    Instead, you will be given a <b>vague description</b> of each task, and have to make your choice based on these vague descriptions. <br>
    You can click the text below to see the vague descriptions of each task category.
</p>
<br>

<details>
    <summary> Click this text to show / hide the vague descriptions of the tasks</summary>
    {{ include 'RET_Choice/Task_Descriptions.html'}}

</details>

<br>

<h3>What's Next?</h3>
<p>
    This experiment has 4 stages. <br>
    First, I will ask you some questions about how much you value completing an unknown task.
    There is a small chance that you will be able to immediately complete the experiment after this stage.     <br>
    Afterwards, you will choose the tasks you want to complete from a specified list. <br>
    Next, I will randomly pick some of your choices, and you will complete the tasks that were randomly picked. <br>
    Finally, you will answer a simple demographic survey at the end of the experiment. <br>
    Please note that you will only be paid if you <b>complete</b> the demographic survey.
</p>


<h3>Quick Questions</h3>
<p>
    Before moving on, please answer the following questions.
</p>

    <label>   How much will you be paid if you <b>complete</b> the experiment?</label>
<div>
    <label>$</label>
    <input name="payment_question">
</div>
{{ formfield_errors 'payment_question' }}

<br>
{{ formfield 'visual_abilities' label="Which task requires the use of visual abilities to interpret a symbol?" }}

{{ formfield 'num_levels' label="How many levels are in each task category?" }}

{{ formfield 'num_categories' label="How many task categories are there?" }}



<h4>The next stage</h4>
<p> As part of this experiment, I want to determine how much you value completing an unknown task. <br>
    I will use a procedure called the switch-point procedure for this purpose. <br>
    Click the next button to learn about the switch-point procedure.
</p>
<div id="div1" style="visibility: hidden;">
        {% next_button %}
</div>

<h2 id="NextHead">Next Button will appear once video has been watched </h2>

{% endblock %}