{{ block styles }}

<link href="{% static 'global/Intro.css' %}" rel="stylesheet">
<link href="{% static 'global/Choice.css' %}" rel="stylesheet">

{{ endblock }}

{{ block content }}
<div class = "game-body">
    <div class="text-container">
        <ul>
            <li>In this study you will make multiple purchasing decisions (<b>{{ C.NumTrials }} rounds</b>) between two real food items.</li>
            <li>In each round, you will see the characteristics of these items:
                <ul>
                    <li>
                        <b>Price:</b> This is the cost you need to pay for the product. 
                        A higher price leads to a lower payout in money.
                    </li>
                    <li>
                        <b>Taste:</b> 1-5 (<img class="symbol" src="{% static C.thumb_symbol %}"/>) rating. 
                        We will ask you in one of the next rounds for those taste ratings. 
                    </li>
                    <li>
                        <b>{{ if Treatment == 0 }} Health 
                            {{ else }} Risk
                            {{ endif }}-Label:</b> 
                            5-point 
                            {{ if Treatment == 0 }} (<img class="symbol" src="{% static C.health_symbol %}" />) 
                            {{ else }} (<img class="symbol" src="{% static C.risk_symbol %}" />)
                            {{ endif }} rating.
                        Products 
                        {{ if Treatment == 0 }} with a higher health score (A is best, E is worst) are healthier than those with a lower health score.  
                            {{ else }} with a lower risk score (one <img class="symbol" src="{% static C.risk_symbol %}" /> is best, five <img class="symbol" src="{% static C.risk_symbol %}" /> are worst) entail less health risks than those with a higher risk score. 
                            {{ endif }}
                    </li>
                </ul>
            </li>
            <li>
                If you are selected for payout, you will receive <b> one chosen food item </b> of one randomly chosen round and a monetary payment of <b> {{ C.Endowment }} - the price of the food item </b>.
            </li>
            <li> 
                Please answer the following questions with regard to the information provided above. To continue, you have to correctly answer all questions and then press <b>next</b>.
            </li>
        </ul>

        {{ formfields }}
        
        <button id="next" class="button next-button"> Next </button>
    </div>
</div>
{{ endblock }}

{{ block scripts }}

<script src="{% static 'global/FriendlyChecks.js' %}"> </script>

<script>
    const bRequireFS    = 'bRequireFS';
    const bCheckFocus   = 'bCheckFocus';
    const defaultPixel  = 'dPixelRatio';
    var TBlur           = new Date().getTime();
    var TFocus          = new Date().getTime();
</script>

{{ endblock }}