{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}


{% block title %}
{% endblock %}

{% block content %}

    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    Your task:
                </h4>
            </div>
            <div>
                On the next page, there is a list with different personality traits.
                Probably, some personality traits will fully apply to you, while others do not apply to you at all.
                Other traits may apply to you to some extent.
                <br><br>
                Please rate each trait, as it applies to you, on the following scale:
                <br><br>
                1 = <b>does not apply to you at all</b>.
                <br>
                7 = <b>does fully apply to you</b>.
                <br><br>
                Values between 1 and 7 are possible if you do not fully agree or disagree.
            </div>
        </div>
    </div>

    <br><br>
    {% next_button %}

{% endblock %}


{% block scripts %}
    <script type="application/javascript">
        .panel - heading.accordion - toggle
        :
        after
        {
            /* symbol for "opening" panels */
            font - family
        :
            'Glyphicons Halflings';
            /* essential for enabling glyphicon */
            content: "\e114";
            /* adjust as needed, taken from bootstrap.css */
            float: right;
            /* adjust as needed */
            color: grey;
            /* adjust as needed */
        }
        .panel - heading.accordion - toggle.collapsed
        :
        after
        {
            /* symbol for "collapsed" panels */
            content: "\e080";
            /* adjust as needed, taken from bootstrap.css */
        }
    </script>
{% endblock %}