{{ extends "global/Page.html" }}
{{ block title }}
The decision task
{{ endblock }}

{{ block content }}

<p>
    You will be asked to select one out of 11 options. The table below shows the 11 options and their consequences:
</p>

<ul>
    <li>
       Column 1 indicates the number of the choice.
    </li>
    <li>
       Column 2 shows the different investments that you can make to mitigate climate change.
    </li>
    <li>
        Column 3 shows the amount of money that you will keep for yourself (your remaining balance).
    </li>
    <li>
        Column 4 shows for each investment the corresponding number of trees that will be planted.
    </li>
    <li>
        Column 5 shows the total amount of CO<sub>2</sub> that will be offset by the planted trees during their lifetime.
    </li>
    <li>
        Column 6 helps you better understand the positive environmental effect of your investment. The lifetime
        CO<sub>2</sub> offset is translated into how many kilometers travelled by an average passenger car can be offset
        by your choice.
    </li>
</ul>

<img src="{{ static 'imgs/tree-task-table.jpg' }}" style="width: 100%"/>

<br>
<br>

<h4>Example</h4>

<p>
    Now suppose you receive {{ endowment }} and you select "Choice {{ C.EX_CHOICE }} trees".
</p>

<ul>
    <li>
        You invest {{ investment }} (column 2) of your {{ endowment }} to mitigate climate change.
    </li>
    <li>
        Thus, you keep {{ rem_balance }} for yourself (column 3). The money that you invest to mitigate climate change
        will be used to plant {{ planted_trees }} trees (column 4) that lead to the trees' lifetime CO<sub>2</sub>
        offset of {{ co2_offset }} kg (column 5).
    </li>
    <li>
        This means that the lifetime CO<sub>2</sub> absorption of the {{ planted_trees }} trees planted will offset
        about {{ km_offset }} km (column 6) travelled by an average passenger car.
    </li>
</ul>

<br>

<h4>Comprehension check</h4>

<p>To ensure that we have explained the decision task comprehensibly, we ask you to answer the following questions.</p>

<p>Please assume that you selected <b>"Choice {{ C.COMP_CHECK_CHOICE }} trees".</b></p>

{{ formfields }}

    {{ next_button }}
{{ endblock }}

{{ block scripts }}

<script>
    // script so that the number-inputs do not change when scrolling up or down
    document.addEventListener("wheel", function(event){
        if(document.activeElement.type === "number"){
            document.activeElement.blur();
        }
    });
</script>

{{ endblock }}