{% extends "global/Page.html" %}
{% load otree static %}
<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
       <p class="formatting_content">
            Welcome to the third task!
            <br>
                <br>
             You will receive the instructions for this task on the next page.
       </p>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Next</button>
    </p>
</div>
<div class="tab">
      <h2> <span style="font-size:18pt">Example Situation</span> </h2>
      <p>
          <b> Example </b>
           <br>
          Person A is sitting in a cafeteria near the university. Person A notices that another person has left his wallet
          on the table. Person A has to decide what to do. Person A has to choose from four possible actions:
          <br>
                <ul>
                    <li>Take the wallet and keep it;</li>
                    <li>Ask other customers if the wallet belongs to one of them;</li>
                    <li>Leave the wallet there;</li>
                    <li>Give the wallet to the manager of the cafeteria.</li>
                </ul>
            For each action, evaluate according to the <b>opinion of the society</b> and independently of your own opinion,
            whether it is appropriate or not to choose it. “Appropriate” behavior means the behavior that you consider
            most people would agree upon as being “correct” or “moral”.
          <br>
            You can choose from a scale with six points.
            <br>
                <ul>
                    <li>Very inappropriate</li>
                    <li>Inappropriate</li>
                    <li>Rather inappropriate</li>
                    <li>Rather appropriate</li>
                    <li>Appropriate</li>
                    <li>Very appropriate</li>
                </ul>
 </p>
        You will evaluate the actions using a table. To evaluate the behavior you have to mark the corresponding option.
        <br>
        <br>
        Assume, for example, that you want to evaluate:
        <br>
        <br>
         <ul>
                <li>Taking and keeping the wallet as very inappropriate</li>
                <li>Asking other customers if the wallet belongs to them as appropriate</li>
                <li>Leaving the wallet there as rather inappropriate </li>
                <li>Giving the wallet to the manager of the cafeteria as very appropriate </li>
            </ul>
        You would insert the following evaluations.
        <br>
        <br>
         <img src="https://i.imgur.com/pAxyIM8.png" width="750px" height="250px" />
      <p>
         <br>
          Imagine that the action: "Taking and keeping the wallet" is the action randomly selected
          to determine your payment. The table below shows the percentage of other participants who gave a certain
          evaluation. Obviously, you will not get this information in the actual situations. This example should
          help you understand how you can earn additional money.
          <br>
          <br>
         <img src="https://i.imgur.com/Szgrp4i.png" width="800px" height="100px" />
          <br>
          <br>
          If the action "Taking and keeping the wallet" is the actions randomly selected for payment,
          you will earn 8€ only if you select "Very inappropriate" (as it is the most selected choice)
          and 0€ if you select any other option.
          <br>
          <br>
          Please make sure that you understand how you have to use the table to evaluate the actions
          and how you can earn money.
          <br>
          <br>
          After clicking on “next”, the description of the actual situations that you have to evaluate will follow.

 </p>
    <p>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Back</button>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <button class="btn btn-primary">Next</button>
    </p>
</div>

<script>

    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{{ endblock }}