Task: Create a results page showing player's performance across all rounds

Required table format:

| Round | Endowment | Difference | Payoff |
|-------|-----------|------------|---------|
|   1   |    100    |     5      |   95    |
|   2   |    100    |    10      |   90    |
|-------|-----------|------------|---------|
| Total |    200    |    15      |   185   |

Steps:

1. Add NUM_ROUNDS = 3 to Constants
2. Use in_all_rounds() to get data from previous rounds
3. Calculate totals using list comprehension
4. Pass data to template using vars_for_template
5. Create table using template syntax

@staticmethod
def vars_for_template(player):
all_rounds = player.in_all_rounds()
total_payoff = sum(p.payoff for p in all_rounds)
total_diff = sum(p.difference for p in all_rounds)
return {
    'rounds': all_rounds,
    'total_payoff': total_payoff,
    'total_difference': total_diff,
    'total_endowment': C.ENDOWMENT * C.NUM_ROUNDS
}

Results Summary



<table class="table">
<thead>
    <tr>
        <th>Round</th>
        <th>Endowment</th>
        <th>Difference</th>
        <th>Payoff</th>
    </tr>
</thead>
<tbody>
    
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    
    <tr class="table-active">
        <td><strong>Total</strong></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>
</table>

💡 Uses Bootstrap's table classes for styling

Game Logic:

• Two players in each group
• Computer generates a random number
• Both players make guesses
• Group payoff: based on average guess accuracy
• Individual bonus: 20% extra for better guess

Example:

# Computer number: 50
# Player 1 guess: 45 (diff: 5)
# Player 2 guess: 60 (diff: 10)
# Average guess: (45 + 60) / 2 = 52.5
# Base payoff: 100 - |50 - 52.5| = 97.5
# P1 final: 97.5 * 1.2 = 117
# P2 final: 97.5

from otree.api import *

class C(BaseConstants):
NAME_IN_URL = 'group_guessing'
PLAYERS_PER_GROUP = 2
NUM_ROUNDS = 1
ENDOWMENT = cu(100)
BONUS_MULTIPLIER = 1.2
MIN_NUMBER = 0
MAX_NUMBER = 90

class Player(BasePlayer):
guess = models.IntegerField(
    min=C.MIN_NUMBER, max=C.MAX_NUMBER,
    label="Your guess"
)
difference = models.FloatField()  # Individual difference

class Group(BaseGroup):
target_number = models.IntegerField()
avg_guess = models.FloatField()  # Group's average guess
group_difference = models.FloatField()  # Group's accuracy

def creating_session(subsession: Subsession):
for group in subsession.get_groups():
    group.target_number = random.randint(C.MIN_NUMBER, C.MAX_NUMBER)

class MyPage(Page):
form_model = 'player'
form_fields = ['guess']

class ResultsWaitPage(WaitPage):
@staticmethod
def after_all_players_arrive(group: Group):
    players = group.get_players()
    # Calculate average guess
    guesses = [p.guess for p in players]
    group.avg_guess = sum(guesses) / len(guesses)
    
    # Calculate group accuracy
    group.group_difference = abs(group.target_number - group.avg_guess)
    
    # Calculate individual differences
    for p in players:
        p.difference = abs(group.target_number - p.guess)
    
    # Base payoff from group performance
    base_payoff = C.ENDOWMENT - group.group_difference
    
    # Find best performer
    best_player = min(players, key=lambda p: p.difference)
    
    # Assign payoffs
    for p in players:
        if p == best_player:
            p.payoff = base_payoff * C.BONUS_MULTIPLIER
        else:
            p.payoff = base_payoff

page_sequence = [
Instructions, MyPage,
ResultsWaitPage, # Wait for all guesses
Results
]

class Results(Page):
@staticmethod
def vars_for_template(player: Player):
    group = player.group
    base_payoff = C.ENDOWMENT - group.group_difference
    is_best_performer = player.payoff > base_payoff
    return {
        'base_payoff': base_payoff,
        'is_best_performer': is_best_performer
    }

Group Results



<div class="card">
<div class="card-body">
    <h5>Target & Guesses</h5>
    <p>Target number: </p>
    <p>Your guess: </p>
    <p>Group's average guess: </p>
    
    <h5>Performance</h5>
    <p>Group's accuracy: </p>
    <p>Your accuracy: </p>
    
    <h5>Payoffs</h5>
    <p>Base group payoff: </p>
    <p>Your final payoff: 
       
    </p>
</div>
</div>

1. Live Communication Flow:

Browser ─────liveSend()────> Server
↑                           │
│                           │
└────liveRecv()───── live_method()

2. Key Components:

   • live_method: Server-side function processing updates
   • liveSend(): JavaScript function sending data to server
   • liveRecv(): JavaScript callback receiving server response

3. Benefits:

   • Real-time updates without page refresh
   • Group coordination without wait pages
   • Interactive UI elements
   • Immediate feedback to users

Try: https://otree-more-demos.herokuapp.com/demo/go_no_go

1. Add live method to __init__.py:

class Player(BasePlayer):
guess = models.IntegerField(
    min=C.MIN_NUMBER, max=C.MAX_NUMBER,
    label="Your guess"
)
temp_guess = models.IntegerField(blank=True)  # For live updates
partner_guess = models.IntegerField(blank=True)  # Show partner's guess
current_average = models.FloatField(blank=True)  # Live average

def live_guess(player: Player, data):
group = player.group
my_guess = data.get('guess')

# Update current player's temp guess
player.temp_guess = my_guess

# Get partner's guess
partner = group.get_player_by_id(3 - player.id_in_group)  # 1->2, 2->1

response = dict(
    partner_guess=partner.temp_guess if partner.temp_guess else '?',
    my_guess=my_guess
)

# Calculate average if both guesses exist
if partner.temp_guess and my_guess:
    avg = (partner.temp_guess + my_guess) / 2
    response['average'] = round(avg, 1)
    player.current_average = avg

return {0: response}  # Broadcast to all players

Your Decision



<div class="card">
<div class="card-body">
    <p>Please enter your guess:</p>
    
    <!-- Manual field rendering -->
    <div class="form-group">
        <label for="id_guess">Your guess:</label>

    </div>
    
    <!-- Error messages for live updates -->
    <div id="error-message" class="alert alert-danger" 
         style="display: none;">
    </div>
    
    <!-- Live updates -->
    <div class="mt-3">
        <p>Your current guess: <span id="my-guess">not submitted</span></p>
        <p>Partner's guess: <span id="partner-guess">waiting...</span></p>
        <p>Current average: <span id="current-average">-</span></p>
    </div>
</div>
</div>

        




<script>
function liveRecv(data) {
    document.getElementById('my-guess').textContent = data.my_guess;
    document.getElementById('partner-guess').textContent = data.partner_guess;
    if (data.average) {
        document.getElementById('current-average').textContent = data.average;
    }
}

document.getElementById('id_guess').addEventListener('input', function(e) {
    let value = parseInt(this.value);
    if (value >=  && value <= ) {
        liveSend({'guess': value});
        document.getElementById('error-message').style.display = 'none';
    } 
});
</script>

Challenge: Randomize order of apps within session (e.g., C→D or D→C)

Solution 1: Multiple Session Configs

SESSION_CONFIGS = [
dict(
    name='sequence_CD',
    app_sequence=['A', 'B', 'C', 'D', 'E'],
    # ...
),
dict(
    name='sequence_DC',
    app_sequence=['A', 'B', 'D', 'C', 'E'],
    # ...
),
]

Solution 2: Dynamic Routing (Advanced)

# In last page of app B
@staticmethod
def app_after_this_page(player):
# Random assignment stored in participant.vars
if not player.participant.vars.get('app_order'):
    import random
    player.participant.vars['app_order'] = random.choice(['CD', 'DC'])

order = player.participant.vars['app_order']
return 'C' if order == 'CD' else 'D'