{{ block title }}

{{ endblock }}
{{ block content }}

    Welcome
    {{ next_button }}

{{ endblock }}

{{ block title }}
Rank your favorite drinks
{{ endblock }}
{{ block content }}


<ul id="items" class="list-group list-group-numbered" style="cursor: move">
    {{ for choice in C.CHOICES }}
    <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
    {{ endfor }}
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    let el = document.getElementById('items');
    let sortable = Sortable.create(el, {
        onChange: function (evt) {
            forminputs.ranking.value = sortable.toArray().join(',');
        }
    });
</script>

<input type="hidden" name="ranking" id="ranking">

{{ formfield_errors 'ranking' }}

<p>
    {{ next_button }}

</p>

{{ endblock }}

from otree.api import *

doc = """
Menu with an 'other' option that lets you type in a valueInput manually
"""


class C(BaseConstants):
    NAME_IN_URL = 'question_with_other_option'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    native_language = models.StringField(
        choices=['German', 'English', 'Chinese', 'Turkish', 'Other']
    )
    native_language_other = models.StringField(
        label="You selected 'other'. What is your native language?"
    )


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['native_language']


class MyPage2(Page):
    @staticmethod
    def is_displayed(player: Player):
        return player.native_language == 'Other'

    form_model = 'player'
    form_fields = ['native_language_other']


page_sequence = [MyPage, MyPage2]

{{ block title }}
    Page title
{{ endblock }}

{{ block content }}

    {{ formfields }}

    {{ next_button }}
{{ endblock }}

{{ block title }}
    Page title
{{ endblock }}
{{ block content }}

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{{ block title }}
    Task
{{ endblock }}
{{ block content }}

    <p>Continue the experiment...</p>

    {{ next_button }}

{{ endblock }}

from otree.api import *

doc = """Timeout on a WaitPage (exit the experiment)"""

class C(BaseConstants):
    NAME_IN_URL = 'wait_page_timeout'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1
    TIMEOUT = 15


class Subsession(BaseSubsession):
    pass


def creating_session(subsession: Subsession):
    import random

    for p in subsession.get_players():
        p.completion_code = random.randint(10 ** 6, 10 ** 7)


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    timeout = models.FloatField()
    completion_code = models.IntegerField()


# PAGES
class MyPage(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        import time

        # 15 seconds on wait page max
        player.timeout = time.time() + C.TIMEOUT


class ResultsWaitPage(WaitPage):
    template_name = 'wait_page_timeout/ResultsWaitPage.html'

    @staticmethod
    def js_vars(player: Player):
        return dict(timeout=C.TIMEOUT)

    @staticmethod
    def vars_for_template(player: Player):
        import time

        timeout_happened = time.time() > player.timeout
        return dict(timeout_happened=timeout_happened)


class Task(Page):
    pass


page_sequence = [MyPage, ResultsWaitPage, Task]

{{ block title }}
    Welcome
{{ endblock }}
{{ block content }}

    <p>Press next to continue...</p>
    {{ next_button }}

{{ endblock }}

{{ extends 'otree/WaitPage.html' }}

{{ block title }}
Please wait
{{ endblock }}
{{ block content }}

{{ if timeout_happened }}
    <p>
        No other players showed up in time.
        Please submit this HIT with completion code <b>{{ player.completion_code }}</b>
    </p>
{{ else }}
    <p>
        If you are left waiting for longer than {{ C.TIMEOUT }} seconds,
        the game will end.
    </p>

    <script>
        setInterval(function () {
            window.location.reload();
        }, js_vars.timeout * 1000);

    </script>
{{ endif }}

{{ endblock }}

{{ block title }}
    Task.
{{ endblock }}

{{ block content }}

    <p>You are not using a mobile browser, so you can continue.</p>

    {{ next_button }}
{{ endblock }}

from otree.api import *

doc = """Detect and block mobile browsers"""


class C(BaseConstants):
    NAME_IN_URL = 'detect_mobile'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    is_mobile = models.BooleanField()


# PAGES
class MobileCheck(Page):
    form_model = 'player'
    form_fields = ['is_mobile']

    def error_message(player: Player, values):
        if values['is_mobile']:
            return "Sorry, this experiment does not allow mobile browsers."


class Task(Page):
    pass


page_sequence = [MobileCheck, Task]

{{ block title }}
Start
{{ endblock }}
{{ block content }}

<input type="hidden" name="is_mobile" id="is_mobile">

<p>Please click next.</p>

{{ next_button }}

<script>
    function isMobile() {
        const toMatch = [
            /Android/i,
            /iPhone/i,
            /iPad/i,
        ];

        return toMatch.some((item) => navigator.userAgent.match(item));
    }

    // here is an alternative technique that checks screen resolution
    // function isMobile() {
    //     return ((window.innerWidth <= 800) && (window.innerHeight <= 600));
    // }

    forminputs.is_mobile.value = isMobile() ? 1 : 0;

</script>

{{ endblock }}

from otree.api import *

doc = """group_by_arrival_time timeout (continue with solo task)"""


class C(BaseConstants):
    NAME_IN_URL = 'gbat_fallback_solo_task_part1'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


def group_by_arrival_time_method(subsession, waiting_players):
    print('waiting_players', waiting_players)
    if len(waiting_players) >= 2:
        return waiting_players[:2]
    for player in waiting_players:
        if waiting_too_long(player):
            # make a single-player group.
            print('waiting too long, making 1 player group')
            return [player]


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    favorite_color = models.StringField()


def waiting_too_long(player: Player):
    participant = player.participant

    import time

    # assumes you set wait_page_arrival in PARTICIPANT_FIELDS.
    return time.time() - participant.wait_page_arrival > 60


class GBAT(WaitPage):
    group_by_arrival_time = True

    @staticmethod
    def app_after_this_page(player: Player, upcoming_apps):
        # if it's a solo group (1 player), skip this app
        # and go to the next app (which in this case is a
        # single-player task)
        if len(player.get_others_in_group()) == 0:
            return upcoming_apps[0]


class GroupTask(Page):
    form_model = 'player'
    form_fields = ['favorite_color']


class MyWait(WaitPage):
    pass


class Results(Page):
    pass


page_sequence = [GBAT, GroupTask, MyWait, Results]

{{ block title }}
    Results
{{ endblock }}

{{ block content }}

    <p>The colors chosen in your group were:</p>

    <ul>
        {{ for p in group.get_players() }}
            <li>{{ p.favorite_color }}</li>
        {{ endfor }}
    </ul>

    {{ next_button }}
{{ endblock }}

{{ block content }}

    <p>Your game goes here...</p>
    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


class C(BaseConstants):
    NAME_IN_URL = 'gbat_fallback_smaller_group_part0'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


class MyPage(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        participant = player.participant

        import time

        participant.wait_page_arrival = time.time()


page_sequence = [MyPage]

{{ block title }}
    Welcome
{{ endblock }}
{{ block content }}

    <p>
        Welcome! Please press next.
        You will be placed in a group of 4.
        However, if not enough players show up, a smaller group may be formed
        with whoever is available.
    </p>

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Of course oTree has a readymade chat widget described here: 
https://otree.readthedocs.io/en/latest/multiplayer/chat.html

But you can use this if you want a chat box that is more easily customizable,
or if you want programmatic access to the chat messages. 

This app can also help you learn about live pages in general.
"""


class C(BaseConstants):
    NAME_IN_URL = 'chat_from_scratch'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


class Message(ExtraModel):
    group = models.Link(Group)
    sender = models.Link(Player)
    text = models.StringField()


def to_dict(msg: Message):
    return dict(sender=msg.sender.id_in_group, text=msg.text)


# PAGES
class MyPage(Page):
    @staticmethod
    def js_vars(player: Player):
        return dict(my_id=player.id_in_group)

    @staticmethod
    def live_method(player: Player, data):
        my_id = player.id_in_group
        group = player.group

        if 'text' in data:
            text = data['text']
            msg = Message.create(group=group, sender=player, text=text)
            return {0: [to_dict(msg)]}
        return {my_id: [to_dict(msg) for msg in Message.filter(group=group)]}


page_sequence = [MyPage]

<div id="chat_messages">
</div>

<div>
    <input type="text" id="chat_input">
    <button type="button" onclick="sendMsg()">Send</button>
</div>
<script>

    let chat_input = document.getElementById('chat_input');

    chat_input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendMsg();
        }
    });

    function sendMsg() {
        let text = chat_input.value.trim();
        if (text) {
            liveSend({'text': text});
        }
        chat_input.value = '';
    }

    let chat_messages = document.getElementById('chat_messages');

    function liveRecv(messages) {
        for (let msg of messages) {
            let msgSpan = document.createElement('span');
            msgSpan.textContent = msg.text;
            let sender = msg.sender === js_vars.my_id ? 'Me' : `Player ${msg.sender}`;
            let row = `<div><b>${sender}</b>: ${msgSpan.innerHTML}</div>`;
            chat_messages.insertAdjacentHTML('beforeend', row);
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

</script>

{{ block content }}

{{ include_sibling 'chat.html' }}

{{ endblock }}

from otree.api import *


doc = """
'Are you sure?' popup based on the user's input
"""


class C(BaseConstants):
    NAME_IN_URL = 'are_you_sure'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    contribution = models.CurrencyField(
        min=0, max=100, label="How much of your 100 points do you want to contribute?"
    )
    reason = models.LongStringField(
        blank=True,
        label="Please write a message to your teammates explaining your decision",
    )


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['contribution', 'reason']


page_sequence = [MyPage]

{{ block content }}

    <p><i>This page warns if the user contributes 0 or their explanation is too short.</i></p>

    {{ formfields }}

    <button type="button" class="btn btn-primary" onclick="checkSubmit()">Next</button>

    <script>
        function checkSubmit() {
            let form = document.getElementById('form');
            let isValid = form.reportValidity();
            if (!isValid) return;

            let warnings = [];

            let contribution = forminputs.contribution.value;
            if (contribution === '0') {
                warnings.push("Are you sure you don't want to contribute anything?");
            }

            let reason = forminputs.reason.value;
            if (reason.length < 10) {
                warnings.push("Are you sure you don't want to give a longer explanation?")
            }

            if (warnings.length > 0) {
                warnings.push("Press OK to proceed anyway.")
                let confirmed = window.confirm(warnings.join('\r\n'));
                if (!confirmed) return;
            }

            form.submit();
        }
    </script>


{{ endblock }}

{{ block content }}
    <p>Thank you for participating in part 1.</p>
    <p>
        Please come back after <b>{{ player.part2_start_time_readable }}</b>
        to take part in the next phase.
    </p>
{{ endblock }}

{{ block title }}
    Survey
{{ endblock }}
{{ block content }}

    <p><i>The first phase of your experiment goes here...</i></p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Longitudinal study (2-part study taking place across days/weeks)

Another way to do longitudinal studies is just to give participants a Room URL.
Since that URL is persistent, you can create a new session when the next phase has begun.

But the technique here has the advantage of storing both phases together in a single session.
For example, you can easily compare the user's answer to their answer in the previous phase.
"""


class C(BaseConstants):
    NAME_IN_URL = 'longitudinal'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    question = models.StringField()
    part2_start_time = models.FloatField()
    part2_start_time_readable = models.StringField()


# PAGES
class Part1(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        from datetime import datetime, timedelta

        t = datetime.now() + timedelta(weeks=1)
        # or can make it for a specific date:
        # start = datetime.strptime('2022-07-15', '%Y-%m-%d')

        # .timestamp() gives you an integer (a.k.a. 'epoch time')
        player.part2_start_time = t.timestamp()
        # print('player.part2_start_time is', player.part2_start_time)
        # this gives you a formatted date you can display to users
        player.part2_start_time_readable = t.strftime('%A, %B %d')


def still_waiting_for_part_2(player: Player):
    import time

    # returns True if the current time is before the designated start time
    return time.time() < player.part2_start_time


class Bridge(Page):
    """
    If the user arrives at this page after part 2 is ready, this page will
    be skipped entirely.
    """

    @staticmethod
    def is_displayed(player: Player):
        return still_waiting_for_part_2(player)

    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        return "Player somehow tried to proceed past a page with no next button"


class Part2(Page):
    pass


page_sequence = [Part1, Bridge, Part2]

{{ block title }}
    Survey
{{ endblock }}
{{ block content }}

    <p><i>The second phase of your experiment goes here...</i></p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *

doc = """
Simple version of comprehension test
"""


class C(BaseConstants):
    NAME_IN_URL = 'comprehension_test_simple'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    quiz1 = models.IntegerField(label='What is 2 + 2?')
    quiz2 = models.IntegerField(label="What year did COVID-19 start?")
    quiz3 = models.BooleanField(label="Is 9 a prime number?")


class MyPage(Page):
    form_model = 'player'
    form_fields = ['quiz1', 'quiz2', 'quiz3']

    @staticmethod
    def error_message(player: Player, values):
        solutions = dict(quiz1=4, quiz2=2019, quiz3=False)

        if values != solutions:
            return "One or more answers were incorrect."


class Results(Page):
    pass


page_sequence = [MyPage, Results]

{{ block title }}
    Thank you
{{ endblock }}

{{ block content }}
    <p>You answered all questions correctly</p>
{{ endblock }}

{{ block title }}
    Comprehension test
{{ endblock }}
{{ block content }}

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{{ block title }}
    End
{{ endblock }}
{{ block content }}

    The session is finished.

{{ endblock }}

from otree.api import *


class C(BaseConstants):
    NAME_IN_URL = 'random_num_rounds'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 20


class Subsession(BaseSubsession):
    pass


def creating_session(subsession: Subsession):
    import random

    for p in subsession.get_players():
        p.participant.num_rounds = random.randint(1, 20)


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    num_rounds = models.IntegerField()


# PAGES
class MyPage(Page):
    @staticmethod
    def is_displayed(player: Player):
        """
        Skip this page if the round number has exceeded the participant's designated
        number of rounds.
        """

        participant = player.participant

        return player.round_number < participant.num_rounds


class End(Page):
    @staticmethod
    def is_displayed(player: Player):
        return player.round_number == C.NUM_ROUNDS


page_sequence = [MyPage, End]

{{ block title }}
    Round {{ subsession.round_number }}
{{ endblock }}
{{ block content }}

    <p>
        This player will continue for {{ participant.num_rounds }} rounds.
    </p>

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Sliders and checkboxes that don't get wiped out on form reload.
Also works for text/number inputs, etc. 
"""


class C(BaseConstants):
    NAME_IN_URL = 'persist_raw'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    f_int = models.IntegerField(min=10)
    f_bool1 = models.BooleanField(blank=True)
    f_bool2 = models.BooleanField(blank=True)
    f_bool3 = models.BooleanField(blank=True)
    f_bool4 = models.BooleanField(blank=True)
    f_bool5 = models.BooleanField(blank=True)


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = [
        'f_int',
        'f_bool1',
        'f_bool2',
        'f_bool3',
        'f_bool4',
        'f_bool5',
    ]


page_sequence = [MyPage]

{{ block content }}

<p>
    If you've used raw HTML widgets (slider/checkbox),
    you may have noticed that they are wiped out on when the form is re-rendered
    to show errors.
    This page contains simple code to overcome that limitation.
</p>

<p>
    To test, modify the form fields, then submit the page.
    (The form will fail validation until you set the slider to the correct value.)
</p>

<label class="col-form-label">
    Here is a slider:
</label>

<div style="display: flex">
    0
    &nbsp;
    <input type="range" name="f_int" min="0" max="10" style="flex: 1" class="persist">
    &nbsp;
    10
</div>
{{ formfield_errors 'f_int' }}
<br>

<p>Here are some checkboxes:</p>
<input type="checkbox" name="f_bool1" value="1" class="persist">
<input type="checkbox" name="f_bool2" value="1" class="persist">
<input type="checkbox" name="f_bool3" value="1" class="persist">
<input type="checkbox" name="f_bool4" value="1" class="persist">
<input type="checkbox" name="f_bool5" value="1" class="persist">

<br><br>
{{ next_button }}

{#
INSTRUCTIONS
(1) make sure your _static/ folder contains persist-raw.js
(2) copy the below 'script' tag into your template
(2) add class="persist" to your raw HTML inputs
#}

<script src="{{ static 'persist-raw.js' }}"></script>

{{ endblock }}

{{ block content }}
<p>
    A player in your group dropped out.
    Therefore, you will be forwarded to the next app.
</p>
{{ next_button }}

{{ endblock }}

{{ block title }}
    Dropout check
{{ endblock }}
{{ block content }}
    <p>
        Important: click "next" before the timeout occurs.
        Otherwise you will be considered a dropout.
    </p>

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Dropout detection for multiplayer game (end the game)
"""


class C(BaseConstants):
    NAME_IN_URL = 'dropout_end_game'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 5


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    has_dropout = models.BooleanField(initial=False)


class Player(BasePlayer):
    is_dropout = models.BooleanField()


class Game(Page):
    timeout_seconds = 10


class DropoutTest(Page):
    timeout_seconds = 10

    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        group = player.group
        if timeout_happened:
            group.has_dropout = True
            player.is_dropout = True


class WaitForOthers(WaitPage):
    pass


class DropoutHappened(Page):
    @staticmethod
    def is_displayed(player: Player):
        group = player.group
        return group.has_dropout

    @staticmethod
    def app_after_this_page(player: Player, upcoming_apps):
        return upcoming_apps[0]


page_sequence = [Game, DropoutTest, WaitForOthers, DropoutHappened]

{{ block title }}
    Game, round {{ subsession.round_number }}
{{ endblock }}
{{ block content }}

    <p><i>Your game goes here...</i></p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Configurable players per group.
See here: https://otree.readthedocs.io/en/latest/treatments.html#configure-sessions
"""


class C(BaseConstants):
    NAME_IN_URL = 'configurable_players_per_group'
    # Since Constants does not have access to the session config,
    # (it is loaded when the server starts, rather than for each session)
    # we set the groups manually inside creating_session.
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


def creating_session(subsession: Subsession):
    session = subsession.session
    ppg = session.config['players_per_group']
    players = subsession.get_players()
    matrix = []
    for i in range(0, len(players), ppg):
        matrix.append(players[i : i + ppg])
    # print('matrix is', matrix)
    subsession.set_group_matrix(matrix)


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


class MyPage(Page):
    pass


page_sequence = [MyPage]

from otree.api import *


doc = """
Images in radio button choices
"""


def make_image_data(image_names):
    return [dict(name=name, path='shapes/{}'.format(name)) for name in image_names]


class C(BaseConstants):
    NAME_IN_URL = 'image_choices'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    img_choice = models.StringField()


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['img_choice']

    @staticmethod
    def vars_for_template(player: Player):
        image_names = [
            'circle-blue.svg',
            'plus-green.svg',
            'star-red.svg',
            'triangle-yellow.svg',
        ]
        return dict(image_data=make_image_data(image_names))


page_sequence = [MyPage]

{{ block content }}

    <p>Choose your favorite image.</p>
    {{ for image in image_data }}
        <label style="text-align: center">
            <img src="{{ static image.path }}" width="200px">
            <br>
            <input type="radio" name="img_choice" value="{{ image.name }}" class="persist">
        </label>
    {{ endfor }}
    {{ formfield_errors 'img_choice' }}

    <br>
    {{ next_button }}

    <script src="{{ static 'persist-raw.js' }}"></script>

{{ endblock }}

from otree.api import *


doc = """
Select a random round for payment
"""


class C(BaseConstants):
    NAME_IN_URL = 'pay_random_round'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 4
    ENDOWMENT = cu(100)


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    give_amount = models.CurrencyField(
        min=0, max=100, label="How much do you want to give?"
    )


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['give_amount']

    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        import random

        participant = player.participant

        # if it's the last round
        if player.round_number == C.NUM_ROUNDS:
            random_round = random.randint(1, C.NUM_ROUNDS)
            participant.selected_round = random_round
            player_in_selected_round = player.in_round(random_round)
            player.payoff = C.ENDOWMENT - player_in_selected_round.give_amount


class Results(Page):
    @staticmethod
    def is_displayed(player: Player):
        return player.round_number == C.NUM_ROUNDS


page_sequence = [MyPage, Results]

{{ block content }}
    {{ if subsession.round_number == C.NUM_ROUNDS }}
    <p>
        Round {{ participant.selected_round }} was randomly selected for payment.
        Your final payoff is therefore {{ player.payoff }}.
    </p>
    {{ endif }}

{{ endblock }}

{{ block title }}
    Round {{ subsession.round_number }}
{{ endblock }}
{{ block content }}

    <p>You have {{ C.ENDOWMENT }} to split between you and another player.</p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Quiz with explanation. Re-display the previous page's form as read-only, with answers/explanation.
"""


class C(BaseConstants):
    NAME_IN_URL = 'quiz_with_explanation'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


def get_quiz_data():
    return [
        dict(
            name='a',
            solution=True,
            explanation="3 is prime. It has no factorization other than 1 and itself.",
        ),
        dict(
            name='b',
            solution=False,
            explanation="2 + 2 is 4.",
        ),
    ]


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    a = models.BooleanField(label="Is 3 a prime number?")
    b = models.IntegerField(label="What is 2 + 2?")


class MyPage(Page):
    form_model = 'player'
    form_fields = ['a', 'b']

    @staticmethod
    def vars_for_template(player: Player):
        fields = get_quiz_data()
        return dict(fields=fields, show_solutions=False)


class Results(Page):
    form_model = 'player'
    form_fields = ['a', 'b']

    @staticmethod
    def vars_for_template(player: Player):
        fields = get_quiz_data()
        # we add an extra entry 'is_correct' (True/False) to each field
        for d in fields:
            d['is_correct'] = getattr(player, d['name']) == d['solution']
        return dict(fields=fields, show_solutions=True)

    @staticmethod
    def error_message(player: Player, values):
        for field in values:
            if getattr(player, field) != values[field]:
                return "A field was somehow changed but this page is read-only."


page_sequence = [MyPage, Results]

{{ block title }}
    Results
{{ endblock }}
{{ block content }}

    <style>
        /*
        interestingly, 'readonly' doesn't apply to radio buttons.
        so we set 'pointer-events: none' to prevent clicking a radio.
        (it can also be done through JS but doesn't hurt to have this extra measure)
        (note: radio buttons can also be changed using the keyboard)

        note: we don't set 'disabled' because disabled inputs don't get
        submitted by the form, and therefore the server would complain that the form is missing.
         */
        input, label {
            pointer-events: none;
        }

        .solution-incorrect {
            color: red;
        }

        .solution-correct {
            color: green;
        }
    </style>

    <p>Here are your answers along with the solutions.</p>

    {{ include_sibling 'form.html' }}

    {{ next_button }}

    <script>
        //
        for (let input of document.getElementsByTagName('input')) {
            input.readOnly = true;
        }

        // workaround for radio buttons. disable all radio buttons that aren't already checked.
        // this prevents changing a radio.
        $(':radio:not(:checked)').attr('disabled', true);
    </script>

{{ endblock }}

{{ block title }}
    Quiz
{{ endblock }}
{{ block content }}

    {{ include_sibling 'form.html' }}
    {{ next_button }}

{{ endblock }}

{{ for d in fields }}
    {{ formfield d.name }}
    {{ if show_solutions }}
        {{ if d.is_correct }}
        <p class="solution-correct">
            Correct.
        </p>
        {{ else }}
        <p class="solution-incorrect">
            {{ d.explanation }}
        </p>
        {{ endif }}
    {{ endif }}
{{ endfor }}

from otree.api import *


doc = """
Your app description
"""


class C(BaseConstants):
    NAME_IN_URL = 'gbat_keep_same_groups_part0'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# PAGES
class MyPage(Page):
    pass


page_sequence = [MyPage]

{{ block title }}
    Page title
{{ endblock }}
{{ block content }}

    <p><i>
        This would just be the first app that appears first in the app sequence,
        to filter out some users before doing
        group_by_arrival_time.
        Maybe it asks for their consent, or has them do some real-effort task,
        to filter out people who are likely to drop out.
    </i></p>

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Sequential game (asymmetric)
"""


class C(BaseConstants):
    NAME_IN_URL = 'sequential'
    PLAYERS_PER_GROUP = 3
    NUM_ROUNDS = 1
    MAIN_TEMPLATE = __name__ + '/Decide.html'


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    mixer = models.StringField(
        choices=['Pineapple juice', 'Orange juice', 'Cola', 'Milk'],
        label="Choose a mixer",
        widget=widgets.RadioSelect,
    )
    liqueur = models.StringField(
        choices=['Blue curacao', 'Triple sec', 'Amaretto', 'Kahlua'],
        label="Choose a liqueur",
        widget=widgets.RadioSelect,
    )
    spirit = models.StringField(
        choices=['Vodka', 'Rum', 'Gin', 'Tequila'],
        label="Choose a spirit",
        widget=widgets.RadioSelect,
    )


class Player(BasePlayer):
    pass


# PAGES
class P1(Page):
    form_model = 'group'
    form_fields = ['mixer']
    template_name = C.MAIN_TEMPLATE

    @staticmethod
    def is_displayed(player: Player):
        return player.id_in_group == 1


class WaitPage1(WaitPage):
    pass


class P2(Page):
    form_model = 'group'
    form_fields = ['liqueur']
    template_name = C.MAIN_TEMPLATE

    @staticmethod
    def is_displayed(player: Player):
        return player.id_in_group == 2


class WaitPage2(WaitPage):
    pass


class P3(Page):
    form_model = 'group'
    form_fields = ['spirit']
    template_name = C.MAIN_TEMPLATE

    @staticmethod
    def is_displayed(player: Player):
        return player.id_in_group == 3


class WaitPage3(WaitPage):
    pass


class Results(Page):
    @staticmethod
    def vars_for_template(player: Player):
        group = player.group
        return dict(players_with_contributions=group.get_players())


page_sequence = [P1, WaitPage1, P2, WaitPage2, P3, WaitPage3, Results]

{{ block title }}
    Results
{{ endblock }}

{{ block content }}
    <p>The cocktail consists of {{ group.mixer }}, {{ group.liqueur }}, and {{ group.spirit }}</p>
{{ endblock }}

{{ block title }}
    Make a cocktail!
{{ endblock }}
{{ block content }}

    <ul>
        <li>This is a sequential game with {{ C.PLAYERS_PER_GROUP }} players.</li>
        <li>You are player {{ player.id_in_group }}.</li>
        <li>The objective is to make a cocktail with 3 ingredients. Each player chooses one ingredient.</li>
    </ul>

    {{ if player.id_in_group >= 2}}
        <p>Player 1 chose {{ group.mixer }}.</p>
    {{ endif }}

    {{ if player.id_in_group >= 3}}
        <p>Player 2 chose {{ group.liqueur }}.</p>
    {{ endif }}

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{{ block content }}
    Sorry, you gave too many wrong answers to the comprehension test.
{{ endblock }}

from otree.api import *

doc = """
Comprehension test. If the user fails too many times, they exit.
"""


class C(BaseConstants):
    NAME_IN_URL = 'comprehension_test_complex'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    num_failed_attempts = models.IntegerField(initial=0)
    failed_too_many = models.BooleanField(initial=False)
    quiz1 = models.IntegerField(label='What is 2 + 2?')
    quiz2 = models.StringField(
        label='What is the capital of Canada?',
        choices=['Ottawa', 'Toronto', 'Vancouver'],
    )
    quiz3 = models.IntegerField(label="What year did COVID-19 start?")
    quiz4 = models.BooleanField(label="Is 9 a prime number")


class MyPage(Page):
    form_model = 'player'
    form_fields = ['quiz1', 'quiz2', 'quiz3', 'quiz4']

    @staticmethod
    def error_message(player: Player, values):
        # alternatively, you could make quiz1_error_message, quiz2_error_message, etc.
        # but if you have many similar fields, this is more efficient.
        solutions = dict(quiz1=4, quiz2='Ottawa', quiz3=2019, quiz4=False)

        # error_message can return a dict whose keys are field names and whose
        # values are error messages
        errors = {name: 'Wrong' for name in solutions if values[name] != solutions[name]}
        # print('errors is', errors)
        if errors:
            player.num_failed_attempts += 1
            if player.num_failed_attempts >= 3:
                player.failed_too_many = True
                # we don't return any error here; just let the user proceed to the
                # next page, but the next page is the 'failed' page that boots them
                # from the experiment.
            else:
                return errors


class Failed(Page):
    @staticmethod
    def is_displayed(player: Player):
        return player.failed_too_many


class Results(Page):
    pass


page_sequence = [MyPage, Failed, Results]

{{ block title }}
    Thank you
{{ endblock }}

{{ block content }}
    <p>You answered all questions correctly</p>
{{ endblock }}

{{ block title }}
    Page title
{{ endblock }}
{{ block content }}

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


class C(BaseConstants):
    NAME_IN_URL = 'pass_data_between_apps2'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# PAGES
class MyPage(Page):
    pass


page_sequence = [MyPage]

{{ block title }}
    App 2
{{ endblock }}
{{ block content }}

    <p>
        In the previous app, you said your main language is
        <b>{{ participant.language}}</b>.
    </p>

{{ endblock }}

from otree.api import *


doc = """
Rank players
"""


class C(BaseConstants):
    NAME_IN_URL = 'rank_players'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    age = models.IntegerField(label="Enter your age")
    rank = models.IntegerField()


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['age']


class ResultsWaitPage(WaitPage):
    @staticmethod
    def after_all_players_arrive(group: Group):
        players = group.get_players()
        # to do descending, use -p.age
        players.sort(key=lambda p: p.age)
        for i in range(len(players)):
            # this code checks if there is a tie and then assigns the same rank
            # if you don't need to deal with ties, then you can delete this.
            if i > 0 and players[i].age == players[i - 1].age:
                rank = players[i - 1].rank
            else:
                rank = i + 1
            players[i].rank = rank


class Results(Page):
    @staticmethod
    def vars_for_template(player: Player):
        group = player.group
        return dict(num_players=len(group.get_players()))


page_sequence = [MyPage, ResultsWaitPage, Results]

{{ block title }}
    Results
{{ endblock }}

{{ block content }}
    <p>
        Your age is {{ player.age }}.
        In your group of {{ num_players }} players,
        your rank is {{ player.rank }}
        (youngest to oldest).
    </p>
{{ endblock }}

{{ block content }}

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

from otree.api import *


class C(BaseConstants):
    NAME_IN_URL = 'placeholder'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# PAGES
class MyPage(Page):
    pass


page_sequence = [MyPage]

{{ block title }}
    Placeholder
{{ endblock }}
{{ block content }}

    <p><i>This app is just a placeholder.</i></p>

{{ endblock }}

from otree.api import *


doc = """
Reads groups from a CSV file.
Inside this app, you will find a groups6.csv,
which defines the groups in the case where there are 6 players.
You can edit the file in Excel, or in plain text.
In the below example, there are 5 rows, defining 5 rounds. 
In each row, empty cells are used to separate groups. 
So, in round 1, there are 3 groups: players 1&4, 2&5, 3&6:
1,4,,2,5,,3,6
1,2,,3,4,,6,5
1,3,,6,2,,5,4
1,6,,5,3,,4,2
1,5,,4,6,,2,3
If you want to create a session with a different number of players, 
such as 12, you would need to create a file called groups12.csv.
"""


def make_group(comma_delim_string):
    return [int(x) for x in comma_delim_string.split(',')]


class C(BaseConstants):
    NAME_IN_URL = 'groups_csv'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 5


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# FUNCTIONS
def creating_session(subsession: Subsession):
    session = subsession.session

    if subsession.round_number == 1:
        num_participants = session.num_participants
        fn = 'groups_csv/groups{}.csv'.format(num_participants)
        with open(fn) as f:
            matrices = []
            for line in f:
                line = line.strip()
                group_specs = line.split(',,')
                matrix = [make_group(spec) for spec in group_specs]
                matrices.append(matrix)
            session.matrices = matrices
    this_round_matrix = session.matrices[subsession.round_number - 1]
    subsession.set_group_matrix(this_round_matrix)
    # print('this_round_matrix', this_round_matrix)


# PAGES
class MyPage(Page):
    pass


page_sequence = [
    MyPage,
]

{{ block title }}
    Page title
{{ endblock }}

{{ block content }}

    <p>
        No content here; this app is just to demonstrate group shuffling
        (look at the groups in the admin interface).
    </p>

    {{ next_button }}

{{ endblock }}

from otree.api import *

doc = """
Table where each row has a left/right choice,
like the strategy method.
This app enforces a single switching point
"""


class C(BaseConstants):
    NAME_IN_URL = 'radio_switching_point'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    left_side_amount = models.IntegerField(initial=10)
    switching_point = models.IntegerField()


# PAGES
class Decide(Page):
    form_model = 'player'
    form_fields = ['switching_point']

    @staticmethod
    def vars_for_template(player: Player):
        return dict(right_side_amounts=range(10, 21, 1))


class Results(Page):
    pass


page_sequence = [Decide, Results]

{{ block title }}
    Results
{{ endblock }}

{{ block content }}

    <p>Your switching point was {{ player.switching_point }}</p>

{{ endblock }}

{{ block title }}
Choose a value for each row
{{ endblock }}

{{ block content }}

<input type="hidden" name="switching_point">
{{ formfield_errors 'switching_point' }}

<table class="table table-striped">
    <colgroup>
        <col width="45%">
        <col width="10%">
        <col width="45%">
    </colgroup>
    <tr>
        <td align="right"><b>Option A</b></td>
        <td></td>
        <td align="left"><b>Option B</b></td>
    </tr>
    {{ for amount in right_side_amounts }}
    <tr>
        <td align="right">
            <b>{{ player.left_side_amount }}</b> now
        <td align="middle">
            <input type="radio"
                   value="left"
                   name="{{ amount }}"
                   required>&nbsp;&nbsp;
            <input type="radio"
                   name="{{ amount }}"
                   value="right" data-amount="{{ amount }}"
                   required>
        </td>
        <td align="left">
            <b>{{ amount }} </b> next month
    </tr>
    {{ endfor }}
</table>


<button type="button" class="btn btn-primary" onclick="submitForm()">Next</button>


{{ endblock }}


{{ block scripts }}
<script>
    let allRadios = document.querySelectorAll('input[type=radio]')
    function submitForm() {
        let form = document.getElementById('form');
        if (form.reportValidity()) {
            let allChoicesAreOnLeft = true;
            for (let radio of allRadios) {
                if (radio.value === 'right' && radio.checked) {
                    forminputs.switching_point.value = radio.dataset.amount;
                    allChoicesAreOnLeft = false;
                    break;
                }
            }
            if (allChoicesAreOnLeft) {
                // '9999' represents the valueInput if the user didn't click the right side for any choice
                // it means their switching point is off the scale. you can change 9999 to some other valueInput
                // that is larger than any right-hand-side choice.
                forminputs.switching_point.value = '9999';
            }
            form.submit();
        }
    }

    function onRadioClick(evt) {
        let clickedRadio = evt.target;
        let afterClickedRadio = false;
        let clickedRightRadio = clickedRadio.value === 'right';

        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
                continue;
            }
            if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
            if (!clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
                aRadio.checked = true;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        for (let radio of document.querySelectorAll('input[type=radio]')) {
            radio.onchange = onRadioClick;
        }
    });

</script>
{{ endblock }}

from otree.api import *


doc = """
Ranking your top N choices from a list of options.
"""


class C(BaseConstants):
    NAME_IN_URL = 'rank_topN'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1
    CHOICES = ['Martini', 'Margarita', 'White Russian', 'Pina Colada', 'Gin & Tonic']


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


def make_rank_field(label):
    return models.StringField(choices=C.CHOICES, label=label)


class Player(BasePlayer):
    rank1 = make_rank_field("Top choice")
    rank2 = make_rank_field("Second choice")
    rank3 = make_rank_field("Third choice")


class MyPage(Page):
    form_model = 'player'
    form_fields = ['rank1', 'rank2', 'rank3']

    @staticmethod
    def error_message(player: Player, values):
        choices = [values['rank1'], values['rank2'], values['rank3']]
        # set() gives you distinct elements. if a list's length is different from its
        # set length, that means it must have duplicates.
        if len(set(choices)) != len(choices):
            return "You cannot choose the same item twice"


class Results(Page):
    pass


page_sequence = [MyPage, Results]

{{ block content }}

    <p>Your top choices are {{ player.rank1}}, {{ player.rank2}}, and {{ player.rank3 }}.</p>

{{ endblock }}

{{ block title }}
Rank your favorite drinks
{{ endblock }}
{{ block content }}

{{ formfields }}

{{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Similar to the basic gbat_treatments app, except:
-   Treatments are balanced rather than independently randomized.
-   The game persists for multiple rounds
"""


class C(BaseConstants):
    NAME_IN_URL = 'gbat_treatments_complex'
    PLAYERS_PER_GROUP = 2
    NUM_ROUNDS = 3
    # boolean works when there are 2 TREATMENTS
    # if you have >2 TREATMENTS, change this to numbers or strings like
    # [1, 2, 3] or ['A', 'B', 'C'], etc.
    TREATMENTS = [True, False]


class Subsession(BaseSubsession):
    num_groups_created = models.IntegerField(initial=0)


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


class GBATWaitPage(WaitPage):
    group_by_arrival_time = True

    @staticmethod
    def is_displayed(player: Player):
        """only do GBAT in the first round. this way, players stay in the same group
        for all rounds."""
        return player.round_number == 1

    @staticmethod
    def after_all_players_arrive(group: Group):
        subsession = group.subsession

        # % is the modulus operator.
        # so when num_groups_created exceeds the max list index,
        # we go back to 0, thus creating a cycle.
        idx = subsession.num_groups_created % len(C.TREATMENTS)

        treatment = C.TREATMENTS[idx]
        for p in group.get_players():
            # since we want the treatment to persist for all rounds, we need to assign it
            # in a participant field (which persists across rounds)
            # rather than a group field, which is specific to the round.
            p.participant.time_pressure = treatment

        subsession.num_groups_created += 1


class MyPage(Page):
    pass


page_sequence = [GBATWaitPage, MyPage]

{{ block title }}
    Round {{ subsession.round_number }}
{{ endblock }}
{{ block content }}

    <p>
        Your group is assigned to the
        {{ if participant.time_pressure }}
            "time-pressure"
        {{ else }}
            "non-time-pressure"
        {{ endif }}
        treatment.
    </p>

    {{ next_button }}
{{ endblock }}

from otree.api import *


doc = """
Your app description
"""


class C(BaseConstants):
    NAME_IN_URL = 'random_num_rounds_multiplayer_end'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# PAGES
class MyPage(Page):
    pass


page_sequence = [MyPage]

{{ block title }}
    Page title
{{ endblock }}

{{ block content }}

    {{ next_button }}
{{ endblock }}

{{ block content }}
    Thank you.
{{ endblock }}

from otree.api import *


doc = """
An image that changes when you move a slider.
If your image is a some kind of chart, it's better to use Highcharts than static images.
See the SVO example.
"""


class C(BaseConstants):
    NAME_IN_URL = 'slider_graphic'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    feeling = models.IntegerField(min=0, max=3)


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['feeling']

    @staticmethod
    def vars_for_template(player: Player):
        img_paths = ['slider_graphic/{}.svg'.format(i) for i in range(4)]
        return dict(img_paths=img_paths)


page_sequence = [MyPage]

{{ block content }}

    <style>
        .slider-graphic {
            display: none;
            width: 6em;
        }
    </style>


    <p>Drag the slider to indicate how you feel right now.</p>
    <input type="range" name="feeling" value="1" min="0" max="3" oninput="changeGraphic(this)">
    {{ for img_path in img_paths }}
        <img src="{{ static img_path }}" class="slider-graphic">
    {{ endfor }}

    <script>
        let graphics = document.getElementsByClassName('slider-graphic');

        function changeGraphic(input) {
            for (let img of graphics) {
                img.style.display = 'none';
            }
            graphics[parseInt(input.value)].style.display = 'block';
        }
    </script>

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
Your app description
"""


class C(BaseConstants):
    NAME_IN_URL = 'input_calculation'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1
    APR = 0.07


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    amount = models.CurrencyField(min=0, max=100000)
    num_years = models.IntegerField(min=1, max=50)


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['amount', 'num_years']

    @staticmethod
    def js_vars(player: Player):
        return dict(APR=C.APR)


page_sequence = [MyPage]

{{ block content }}
    <p>Thank you...</p>
{{ endblock }}

{{ block content }}

<p>Choose what investment to make at an APR of {{ C.APR }}</p>

{{ formfields }}
<br>
<p>Your investment will be worth:</p>
<h2><span id="projection"></span> <small>points</small></h2>

{{ next_button }}

<script>
    let projectionEle = document.getElementById('projection');

    function recalc() {
        let amount = parseFloat(forminputs.amount.value);
        let numYears = parseInt(forminputs.num_years.value);

        // isNaN is the javascript function that checks whether the value is a valid
        // number. need to check this because the field might be empty or
        // the user might have typed something other than a number.
        if (isNaN(amount) || isNaN(numYears)) {
            projectionEle.innerText = '';
        } else {
            let projection = amount * Math.pow((1 + js_vars.APR), numYears);
            projectionEle.innerText = Math.round(projection);
        }
    }

    forminputs.amount.oninput = recalc;
    forminputs.num_years.oninput = recalc;
</script>

{{ endblock }}

from otree.api import *


doc = """
Radio buttons in various layouts, looping over radio choices
"""


class C(BaseConstants):
    NAME_IN_URL = 'radio'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    f1 = models.IntegerField(
        widget=widgets.RadioSelect, choices=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    )
    f2 = models.IntegerField(
        widget=widgets.RadioSelect, choices=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    )


# PAGES
class MyPage(Page):
    form_model = 'player'
    form_fields = ['f1', 'f2']



page_sequence = [MyPage]

{{ block content }}

<p><i>Radio buttons without labels (visual/analog scale, similar to a slider)</i></p>
<p>
    Least &nbsp;
    {{ for choice in form.f1 }}
    {{ choice }}
    {{ endfor }}
    &nbsp; Most
</p>
{{ formfield_errors 'f1' }}
<br>

<p><i>Labels under radio buttons</i></p>
<div style="display: flex">
        {{ for choice in form.f2 }}
        <div style="flex: 1; text-align: center">
            {{ choice }}
            <br>
            <span style="text-align: center">{{ choice.label }}</span>
        </div>
        {{ endfor }}
</div>
{{ formfield_errors 'f2' }}
<br>

{# todo: radio buttons laid out individually, no loop (by index) #}

{{ next_button }}

{{ endblock }}

from otree.api import *


class C(BaseConstants):
    NAME_IN_URL = 'appcopy1'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    bbb = models.IntegerField(widget=widgets.RadioSelectHorizontal)


def bbb_choices(player: Player):
    return [1, 2, 3]


class MyPage(Page):
    # every page needs an explicit template_name
    template_name = 'appcopy1/MyPage.html'

    form_model = 'player'
    form_fields = ['bbb']


page_sequence = [MyPage]

{{ block title }}
    App A
{{ endblock }}
{{ block content }}

    <p><i>This app gets repeated, with another app in between.</i></p>

    {{ formfields }}
    {{ next_button }}

{{ endblock }}

{{ block content }}

    <p>A random app will now be chosen for payment.</p>
    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
App where we choose the app to be paid
"""


class C(BaseConstants):
    NAME_IN_URL = 'pay_random_app3'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    app_to_pay = models.StringField()


class PayRandomApp(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        import random

        participant = player.participant

        # print('participant.app_payoffs is', participant.app_payoffs)

        apps = [
            'pay_random_app1',
            'pay_random_app2',
        ]
        app_to_pay = random.choice(apps)
        participant.payoff = participant.app_payoffs[app_to_pay]
        player.app_to_pay = app_to_pay


class Results(Page):
    pass


page_sequence = [PayRandomApp, Results]

{{ block title }}
    Final Results
{{ endblock }}
{{ block content }}
    <p>
        The app that was randomly chosen for payment is {{ player.app_to_pay }}.
        You payoff from that app (and therefore your total payoff)
        is {{ participant.payoff }}.
    </p>
{{ endblock }}

{{ block title }}
    Page 1
{{ endblock }}
{{ block content }}

    <p><i>Click next...</i></p>

    {{ next_button }}

{{ endblock }}

{{ block title }}
    Page 2
{{ endblock }}
{{ block content }}

    <p>You must stay on this page for at least 10 seconds.</p>

    {{ next_button }}

{{ endblock }}

{{ block title }}
    Page 3
{{ endblock }}
{{ block content }}

{{ endblock }}

from otree.api import *


doc = """
Minimum time on a page
"""


class C(BaseConstants):
    NAME_IN_URL = 'min_time_on_page'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):

    pass


class Player(BasePlayer):
    page_pass_time = models.FloatField()


class Page1(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        import time

        player.page_pass_time = time.time() + 10


# PAGES
class Page2(Page):
    @staticmethod
    def error_message(player: Player, values):
        import time

        if time.time() < player.page_pass_time:
            return "You cannot pass this page yet."


class Page3(Page):
    pass


page_sequence = [Page1, Page2, Page3]

{{ block content }}
    {{ include_sibling 'progress.html' }}

    {{ next_button }}

{{ endblock }}

{{ block content }}
    {{ include_sibling 'progress.html' }}

    {{ next_button }}

{{ endblock }}

from otree.api import *


doc = """
All you need is a participant field called 'progress' then keep adding 1 to it.
"""


class C(BaseConstants):
    NAME_IN_URL = 'progress_bar'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 5


class Subsession(BaseSubsession):
    pass


def creating_session(subsession: Subsession):
    for player in subsession.get_players():
        participant = player.participant
        participant.progress = 1


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


class Page1(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        participant = player.participant
        # remember to add 'progress' to PARTICIPANT_FIELDS.
        participant.progress += 1


class Page2(Page):
    @staticmethod
    def before_next_page(player: Player, timeout_happened):
        participant = player.participant
        # progress can be defined in different ways, not only by page number
        # (especially if pages get skipped)
        # so feel free to do things like:
        # - incrementing by more than 1:
        # participant.progress += 2
        # - setting to a specific valueInput:
        # participant.progress = 8
        participant.progress += 1


page_sequence = [Page1, Page2]

<!--
Simplest way to calculate the "max" is to run through the experiment
once and then see what participant.progress is at the very end,
then plug that in here.

if you want a prettier progress bar, you can use Bootstrap's.
-->
<p>
    <label>Step {{ participant.progress }} of 10
        <progress value="{{ participant.progress }}" max="10">
        </progress>
    </label>
</p>

{{ block title }}
    Task A
{{ endblock }}

{{ block content }}


    {{ next_button }}

{{ endblock }}

{{ block title }}
    Task C
{{ endblock }}
{{ block content }}

    {{ next_button }}

{{ endblock }}

import random
from otree.api import *

doc = """
For each participant, randomize the order of tasks A, B, and C.
Task B has 2 pages, which are always shown in the same order.
The page_sequence contains all tasks;
in each round we show a randomly determined subset of pages.
"""


class C(BaseConstants):
    NAME_IN_URL = 'random_task_order'
    PLAYERS_PER_GROUP = None
    TASKS = ['A', 'B', 'C']
    NUM_ROUNDS = len(TASKS)


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


class Player(BasePlayer):
    pass


# FUNCTIONS
def creating_session(subsession: Subsession):
    if subsession.round_number == 1:
        for p in subsession.get_players():
            round_numbers = list(range(1, C.NUM_ROUNDS + 1))
            random.shuffle(round_numbers)
            task_rounds = dict(zip(C.TASKS, round_numbers))
            # print('player', p.id_in_subsession)
            # print('task_rounds is', task_rounds)
            p.participant.task_rounds = task_rounds


# PAGES
class TaskA(Page):
    @staticmethod
    def is_displayed(player: Player):
        participant = player.participant

        return player.round_number == participant.task_rounds['A']


class TaskB1(Page):
    @staticmethod
    def is_displayed(player: Player):
        participant = player.participant

        return player.round_number == participant.task_rounds['B']


class TaskB2(Page):
    @staticmethod
    def is_displayed(player: Player):
        participant = player.participant

        return player.round_number == participant.task_rounds['B']


class TaskC(Page):
    @staticmethod
    def is_displayed(player: Player):
        participant = player.participant

        return player.round_number == participant.task_rounds['C']


page_sequence = [
    TaskA,
    TaskB1,
    TaskB2,
    TaskC,
]