{{ 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: 'vkqZ8p7eP4Q',
          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>
<p>
    You are about to participate in an experiment on the economics of decision-making. <br>
    The experiment consists of up to three sessions:
</p>
<ul>
    <li> The current session (online) </li>
    <li> A second session at {{player.participant.sample_meal_time}}-time (12:30pm) on {{player.participant.sample_meal_day}}
    the {{player.participant.sample_meal_date}} </li>
    <li> A third session at {{player.participant.next_meal_time}}-time (12:30pm) on
 {{player.participant.next_meal_day}} the {{player.participant.next_meal_date}}</li>
</ul>
All subjects will be required to complete the first and third sessions, but some subjects will not need to complete the
second session.
</p>

<p>
    If you <b>complete</b> this experiment, you will earn a <b>minimum</b> of <b>${{ C.PAYMENT_AMOUNT }}</b>,
    which will be paid to you in cash at the third session. <br>
    Depending on the choices you make today, you will receive one of the following:
<ul>
    <li> A food sample plus $10 at the second session and a full meal plus at least $10 at the third session OR</li>
    <li> A full meal plus at least $10 at the third session OR </li>
    <li> At least $10 plus an additional cash payment at the third session </li>
</ul>
    Please note that you will not be required nor forced to eat any of the foods in this experiment. The foods have been
chosen such that you should want to eat them (a free lunch!).</p> <br>
<p>
    On average, I expect that the current session of the experiment will take approximately <b>X</b> minutes. <br>
</p>
<br>
<h3> The Basic Idea </h3>
<p>
    All the choices you make today will determine the food you are served at the second session and third sessions -
    so <i>choosing appropriately</i> will allow you to eat the foods you <b>prefer</b>. <br>
    You can click the text below to see the descriptions of each meal.
</p>

<details>
    <summary> Click this text to show / hide the descriptions of the foods available</summary>
    {{ include 'Choice/Food_Descriptions.html'}}
</details>

<br>

<h3>What's Next?</h3>
<p>
    The current session has 4 stages. <br>
    First, I will ask you some questions about how much you value the different meals. <br>
    Afterwards, you will choose a lunch sample for the second session and a
    {{player.participant.next_meal_time}} menu for the third session from a specified list. <br>
    Third, you will complete a box choice task to earn a bonus payment. <br>
    Finally, you will answer some simple questions about yourself at the end of the session. <br>
</p>
<p>
    At the second session, you will be able to try your chosen lunch sample (if applicable).
    At the third session, you will be able to choose a meal from the {{player.participant.next_meal_time}} menu you
    chose in this session. <br>
    Please note that you will only be paid if you <b>complete</b> all parts of this experiment.
</p>

<h3>Calculation of earnings</h3>

<p>You will be paid (in a combination of food and money) based on either your decisions in Part 1, or Part 2 (but not both). There is a 20% chance
that Part 1 will be used to calculate your earnings, and an 80% chance that Part 2 will be chosen. </p>

<p>In <b>addition</b> you will also be paid for your choices in Part 3. Part 4 does not affect your payment,
but you are still required to complete Part 4 in order to complete the experiment.</p>

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

    <label>   What is the <b>minimum</b> amount that you will paid for this experiment?</label>
<div>
    <label>$</label>
    <input name="payment_question">
</div>
{{ formfield_errors 'payment_question' }}

<br>



{{ formfield 'Tried_Fancy_Pizza'  }}
{{ formfield 'Tried_Cheap_Pizza'  }}
{{ formfield 'Tried_Fancy_Taco'  }}
{{ formfield 'Tried_Cheap_Taco'  }}



<h4>The next stage</h4>
<p> As part of this experiment, I want to determine how much you value each meal. <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 }}