Templates
Overview of the general structure of all html templates for the CET.
Block Styles
{% block styles %}
...
{% endblock %}
In this section you can define graphical options for the elements displayed in Block Content.
Error message
.otree-form-errors {
visibility: hidden;
display: none;
}
visibility: hidden
hides a possible error message, but the element will still take up space on the page.
In contrast, display: none
completely removes the element.
It is possible to show a different error message should participants fail to choose
one of the necessary options to advance (e.g., one of the two options in the CET). The message can be modified
within the {% block content %}
inside this block:
{% if form.errors %}
<div class="alert alert-danger" role="alert">
<p>Please choose one of the required fields.</p>
</div>
{% endif %}
The expression {{ form.choice.errors }}
is inserted in both lines in
{% block content %}
which define the radio buttons to be displayed on the page. See Radio buttons
Timer
This section also includes options to apply and, if necessary, show the timer indicating the remaining
time on a given page. If a timeout is defined (on the page class), the display property can be specified
under .otree-timer
(e.g., “none” or “block”; click here
for more information). Furthermore, it is possible to specify that the timer only appears if a certain
amount of seconds remains before the next page is automatically displayed. Change the number in
if (event.offset.totalSeconds === 10)
according to your preferences.
The remaining code in the block style section is about graphical specifications (see information on “class” below).
Block Content
{% block content %}
...
{% endblock %}
In this section, you define what is to be displayed to the user. The Section is split into two container classes. The Container for Option A and the Container for Option B. Further customizations of the two containers can be done here.