{% load static %}
{{ block title }}Welcome{{ endblock }}
{{ block content }}

<style>
    .card.welcome-blue-block { background-color: rgba(13, 110, 253, 0.06); border-color: rgba(13, 110, 253, 0.25); }
    .card.welcome-blue-block-bottom { background-color: rgba(13, 110, 253, 0.05); border-color: rgba(13, 110, 253, 0.2); }
</style>
<div class="card bg-light m-3">
    <div class="card-body">
        <h3>Welcome to the Pixel Prediction Study!</h3>
        <p>
            In this study, you will see grids with two pixel colors: red and blue.
            Each image will be 51% one color and 49% the other, chosen randomly.
        </p>

        <div class="text-center mb-3">
            <img src="{% static 'advisor_experiment/example_grid.png' %}" alt="Example pixel grid" class="img-fluid" style="max-width: 260px;">
        </div>

        <div class="card welcome-blue-block mb-3">
            <div class="card-body">
                <p>Your task is to state how confident you are, on a scale of 0 to 100, that there are MORE RED pixels. <br>
                    You will state your confidence that the majority color is Red twice per round: once before consulting an advisor's opinion and once after. <br>
                    <br>
                    You will be asked to complete 20 rounds of this task per block. There are 8 blocks in total.
                </p>
            </div>
        </div>

        <p>
            The task structure will flow as follows:
            You will see the pixel grid, then be asked to adjust the slider (shown below) to state your initial confidence
            that the majority color is red.
        </p>
        <div class="card mb-3">
            <div class="card-body text-center py-3">
                <label class="form-label mb-1">Probability that the majority color is <span style="color: #c00;">Red </span></label>
                <input type="range" id="welcome_example_slider" min="0" max="100" value="50" class="form-range" style="max-width: 300px;">
                <div class="text-muted mt-1"><span id="welcome_example_value">50</span>% chance Red</div>
            </div>
        </div>
        <p>
            You will then get a piece of advice about the color, and be asked to re-evaluate your confidence with a second slider. 
            To see how advisors work, go to the next page!
        </p>
    </div>
</div>

<script>
(function() {
    var ex = document.getElementById('welcome_example_slider');
    var exVal = document.getElementById('welcome_example_value');
    if (ex && exVal) {
        function updateExample() {
            exVal.textContent = ex.value;
        }
        ex.oninput = updateExample;
        updateExample();
    }
})();
</script>

{{ next_button }}

{{ endblock }}