### Defining Main Content Block in oTree Template Source: https://github.com/otree-org/otree/blob/lite/payment_info/PaymentInfo.html This snippet defines the 'content' block, which encapsulates the primary instructional text for participants. It includes examples of messages tailored for 'Laboratory' and 'Classroom' settings, demonstrating how static text and conditional information can be presented within an oTree page. ```Jinja2/Django Template {{ block content }}\n\n_Below are examples of messages that could be displayed for different experimental settings._\n\n**Laboratory:**\n\nPlease remain seated until your number is called. Then take your number card, and proceed to the cashier.\n\n_Note: For the cashier in the laboratory, oTree can print a list of payments for all participants as a PDF._\n\n**Classroom:**\n\n_If you want to keep track of how students did, the easiest thing is to assign the starting links to students by name. It is even possible to give each student a single permanent link for a whole semester using Rooms; so no need to waste time in each lecture with handing out new links and keeping track of which student uses which link. Alternatively, you may just give students anonymous links or secret nicknames._\n\n{{ endblock }} ``` -------------------------------- ### Starting Main Content Block (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/matching_pennies/Choice.html This snippet marks the beginning of the main content area for an oTree page. All content following this tag until an {{ endblock }} will be rendered as the primary body of the page. ```oTree Template {{ block content }} ``` -------------------------------- ### Starting Main Content Block (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/dictator/Offer.html This snippet marks the beginning of the main content area of the oTree page using the 'block' tag. All subsequent HTML and template logic intended for the main body of the page should follow this tag. ```oTree Template {{ block content }} ``` -------------------------------- ### Defining Main Content Block Start (oTree) Source: https://github.com/otree-org/otree/blob/lite/cournot/Results.html This snippet marks the beginning of the 'content' block, which serves as the primary container for all dynamic and static elements displayed on the results page. This block is typically extended from a base template. ```Django Template {{ block content }} ``` -------------------------------- ### Defining an oTree Introduction Page Template Source: https://github.com/otree-org/otree/blob/lite/bargaining/Introduction.html This snippet illustrates the fundamental structure of an oTree page template. It sets the page title using a 'block title', defines the main content area with 'block content', includes content from an external HTML file ('instructions.html'), and provides a 'next_button' for user progression. ```Django Template Language {{ block title }}Introduction{{ endblock }} {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Defining Page Content and Navigation in oTree Template Source: https://github.com/otree-org/otree/blob/lite/trust/Introduction.html This snippet defines the 'content' block, which serves as the main body of the page. It includes content from 'instructions.html' using the 'include_sibling' tag and adds a 'next_button' to allow participants to advance to the next page in the oTree sequence. ```Django Template {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Defining Page Content and Navigation in OTree Template Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/Introduction.html This snippet defines the main content area of an OTree page. It includes content from an external file named 'instructions.html' using `include_sibling` and provides a 'Next' button for user progression using `next_button`. ```Django Template {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Defining an oTree Introduction Page Template Source: https://github.com/otree-org/otree/blob/lite/traveler_dilemma/Introduction.html This snippet illustrates the fundamental structure of an oTree page using its templating language. It defines a 'title' block for the page's heading, a 'content' block that dynamically includes HTML from a related template file ('instructions.html'), and a 'next_button' to allow participants to proceed to the subsequent page. ```oTree Template Language {{ block title }}Introduction{{ endblock }} {{ block content }} {{ include\_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Defining Page Content and Including Sibling in OTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Introduction.html This snippet defines the main content block of an OTree page. It includes content from a sibling template file named 'instructions.html' and renders a 'next' button for navigation. ```Django Template {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Displaying Game Constants in OTree Instructions (Templating) Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/instructions.html This snippet illustrates how to embed dynamic game parameters within instructional text using a templating language, commonly found in frameworks like oTree. It showcases variables for group size, maximum guess, jackpot amount, and the number of rounds, which are populated from the application's constants or context. This approach ensures that game rules and values can be easily updated without modifying the static instructional text. ```Templating (Jinja2/Django) {{ C.PLAYERS_PER_GROUP }} {{ C.GUESS_MAX }} {{ C.JACKPOT }} {{ C.NUM_ROUNDS }} ``` -------------------------------- ### Defining oTree Page Structure with Blocks and Navigation Source: https://github.com/otree-org/otree/blob/lite/cournot/Introduction.html This snippet illustrates the fundamental structure of an oTree page using Django template syntax. It defines a 'title' block for the page's heading and a 'content' block for the main body. It also demonstrates including content from a separate 'instructions.html' file and rendering the standard oTree 'next_button' for participant navigation. ```HTML Template {{ block title }}Introduction{{ endblock }} {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Using Special oTree Template Tags Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/Results.html This snippet showcases two specific oTree template tags: {{ next_button }} which renders a button to advance to the next page in the oTree session, and {{ include_sibling 'instructions.html' }} which embeds content from another template file located in the same app directory. ```oTree Template {{ next_button }} {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Page Content Block and Inclusions - OTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Introduction.html This snippet defines the main 'content' block for the page. It includes another HTML file, 'instructions.html', using `include_sibling` for modularity and displays a 'next' button, which is typical for navigating between pages in OTree experiments. ```OTree Template {{ block content }} {{ include_sibling 'instructions.html' }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Displaying Trust Game Content for Participant B Source: https://github.com/otree-org/otree/blob/lite/trust_simple/SendBack.html This comprehensive snippet defines the main content area for Participant B. It includes an external `instructions.html` file for detailed guidance and dynamically displays the `group.sent_amount` sent by Participant A and the `tripled_amount` received by Participant B, providing crucial game information. ```oTree Template {{ block content }} {{ include_sibling 'instructions.html' }} You are Participant B. Participant A sent you {{ group.sent_amount }} and you received {{ tripled_amount }}. ``` -------------------------------- ### Including Sibling Instructions Template - oTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Bid.html This snippet includes the content of another template file named 'instructions.html' located in the same directory as the current template. This allows for modular content reuse, such as common instructions. ```oTree Template {{ include\_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Page Title in OTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Introduction.html This snippet defines the title block for an OTree page. The content 'Introduction' will be rendered as the page's title. ```Django Template {{ block title }}Introduction{{ endblock }} ``` -------------------------------- ### Including Sibling Template (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/dictator/Offer.html This snippet includes the content of another template file, 'instructions.html', located in the same directory as the current template. It allows for modularity and reuse of common content across pages. ```oTree Template {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Page Title in oTree Template Source: https://github.com/otree-org/otree/blob/lite/trust/Introduction.html This snippet defines the 'title' block for an oTree page, setting its content to 'Introduction'. This title is typically displayed in the browser tab or as a heading on the page, providing a clear identifier for the current section. ```Django Template {{ block title }}Introduction{{ endblock }} ``` -------------------------------- ### Defining Player Request Page - oTree Template Source: https://github.com/otree-org/otree/blob/lite/bargaining/Request.html This snippet defines the structure of a player's request page in an oTree application. It sets the page title, displays form fields for player input, provides a 'Next' button, and includes content from an external 'instructions.html' file. ```oTree Template {{ block title }}Request{{ endblock }} {{ block content }} How much will you demand for yourself? {{ formfields }} {{ next\_button }} {{ include\_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Defining oTree Participant Choice Page (HTML/Jinja2) Source: https://github.com/otree-org/otree/blob/lite/trust/Send.html This snippet defines an oTree template page for a participant's decision-making. It sets the page title, displays the participant's endowment using a variable, renders form fields for user input, provides a 'next' button for navigation, and includes an external 'instructions.html' file for additional context or rules. ```oTree/Jinja2 {{ block title }}Your Choice{{ endblock }} {{ block content }} You are Participant A. Now you have {{C.ENDOWMENT}}. How much will you send to participant B? {{ formfields }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Displaying Experiment Results in oTree Template Source: https://github.com/otree-org/otree/blob/lite/traveler_dilemma/Results.html This oTree template snippet renders various experiment outcomes, including player claims, the group's lower claim, player adjustments, and final payoffs. It also includes a 'next' button for navigation and embeds an 'instructions.html' sibling template. It uses Django/Jinja2 templating syntax to access and display data from the `player` and `group` objects. ```Django Template Language {{ block title }}Results{{ endblock }} {{ block content }} You claimed {{ player.claim }} The other traveler claimed {{ other_player_claim }} Winning claim (i.e. lower claim) {{ group.lower_claim }} Your adjustment {{ player.adjustment }} Thus you receive {{ player.payoff }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Defining Player Choice Page Layout in oTree Template Source: https://github.com/otree-org/otree/blob/lite/volunteer_dilemma/Decision.html This oTree template snippet establishes the fundamental structure for a player's decision page. It uses `block` tags to define a title and main content area, includes `formfields` for rendering input elements, provides a `next_button` for progression, and integrates an external `instructions.html` template. ```oTree Template {{ block title }}Your Choice{{ endblock }} {{ block content }} {{ formfields }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Opening Page Content Block - oTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Bid.html This snippet initiates the main content block of the oTree page, where all subsequent UI elements, text, and other template logic will be rendered. It acts as a container for the page's primary display. ```oTree Template {{ block content }} ``` -------------------------------- ### Navigation and Sibling Inclusion in oTree Template Source: https://github.com/otree-org/otree/blob/lite/trust/Results.html This snippet includes the 'next_button' for advancing to the next page in the oTree session and 'include_sibling' to embed content from another template file ('instructions.html') located in the same directory. ```oTree Template {{ next_button }} {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Participant B's Choice Page in oTree Source: https://github.com/otree-org/otree/blob/lite/trust/SendBack.html This snippet defines the HTML structure and dynamic content for a participant's decision-making page in an oTree experiment. It displays received amounts, prompts for input using 'formfields', and includes a navigation button and external instructions. ```Jinja2 {{ block title }}Your Choice{{ endblock }} {{ block content }} You are Participant B. Participant A sent you {{ group.sent_amount }} and you received {{ tripled_amount }}. Now you have {{ tripled_amount }}. How much will you send to participant A? {{ formfields }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Defining Page Title Block - OTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Introduction.html This snippet defines a 'title' block, a standard OTree (and Django template) mechanism to specify the title of a page. The text 'Introduction' will be rendered as the page's title. ```OTree Template {{ block title }}Introduction{{ endblock }} ``` -------------------------------- ### Extending OTree Base Page and Defining Global Blocks - Jinja2 Source: https://github.com/otree-org/otree/blob/lite/_templates/global/Page.html This Jinja2 template snippet establishes the basic structure for an OTree application page. It extends the `otree/Page.html` base template, ensuring proper inheritance of OTree's core layout. Additionally, it defines empty `global_styles` and `global_scripts` blocks, which serve as placeholders for app-specific CSS and JavaScript, allowing developers to inject custom styling or behavior into the page. ```Jinja2 {{ extends "otree/Page.html" }} {{ load otree }} {{ block global\_styles }} {{ endblock }} {{ block global\_scripts }} {{ endblock }} ``` -------------------------------- ### Navigation Button and Template Inclusion in OTree Source: https://github.com/otree-org/otree/blob/lite/prisoner/Results.html This snippet includes two common oTree template features: 'next_button' and 'include_sibling'. 'next_button' renders a standard 'Next' button that advances the participant to the subsequent page in the experiment. 'include_sibling' embeds the content of another template file, 'instructions.html', located in the same directory, allowing for modular template design. ```OTree Template {{ next_button }} {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Including Sibling Template File in oTree Template Source: https://github.com/otree-org/otree/blob/lite/prisoner/Decision.html This snippet includes the content of another HTML template file, 'instructions.html', located in the same directory as the current template. This promotes modularity and reusability of common content. ```oTree Template {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Page Title in OTree Template Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/Introduction.html This snippet demonstrates how to define the title of an OTree page using the `block` and `endblock` tags. The text 'Introduction' will be rendered as the page's title. ```Django Template {{ block title }}Introduction{{ endblock }} ``` -------------------------------- ### Rendering Form Fields and Next Button in oTree Template Source: https://github.com/otree-org/otree/blob/lite/trust_simple/SendBack.html This snippet renders all form fields associated with the current oTree page using `{{ formfields }}` and provides a `{{ next_button }}` for the participant to submit their choice and proceed to the next stage of the game. It also properly closes the main content block defined earlier. ```oTree Template {{ formfields }} {{ next_button }} {{ endblock }} ``` -------------------------------- ### Displaying Player Results in oTree Template (Jinja2) Source: https://github.com/otree-org/otree/blob/lite/public_goods_simple/Results.html This snippet defines the structure of an oTree results page using Jinja2 templating. It dynamically displays a player's initial endowment, their contribution, the group's total contribution, their individual share, and their final payoff. It also includes a 'next' button to proceed. ```Jinja2 {{ block title }}Results{{ endblock }} {{ block content }} You started with an endowment of {{ C.ENDOWMENT }}, of which you contributed {{ player.contribution }}. Your group contributed {{ group.total\_contribution }}, resulting in an individual share of {{ group.individual\_share }}. Your profit is therefore {{ player.payoff }}. {{ next\_button }} {{ endblock }} ``` -------------------------------- ### Rendering Next Button - oTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Bid.html This snippet renders the standard 'Next' button, which, when clicked, submits the form and navigates the participant to the subsequent page in the experiment sequence. It's a crucial element for progression. ```oTree Template {{ next\_button }} ``` -------------------------------- ### Displaying Game Results in oTree Template Source: https://github.com/otree-org/otree/blob/lite/bargaining/Results.html This oTree template renders the results page for a game, showing individual player inputs (player.request), the other participant's input (other_player_request), the sum of demands for the group (group.total_requests), and the player's final payoff (player.payoff). It also includes a 'next' button for navigation and incorporates content from an 'instructions.html' sibling file. ```Django Template Language {{ block title }}Results{{ endblock }} {{ block content }}\n\nYou demanded\n\n{{ player.request }}\n\nThe other participant demanded\n\n{{ other_player_request }}\n\nSum of your demands\n\n{{ group.total_requests }}\n\nThus you earn\n\n{{ player.payoff }}\n\n{{ next_button }}\n\n{{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Including Sibling Template - oTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Decide.html The `include_sibling` tag is used to embed content from another template file located in the same directory as the current template. Here, 'instructions.html' is included, typically to display instructions relevant to the current page. ```oTree Template {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Rendering Navigation Next Button (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/matching_pennies/Choice.html This snippet is an oTree-specific tag that renders the standard 'Next' button. This button allows participants to submit their choices and proceed to the subsequent page in the experiment flow, ensuring proper navigation. ```oTree Template {{ next\_button }} ``` -------------------------------- ### Including Sibling Template (oTree) Source: https://github.com/otree-org/otree/blob/lite/cournot/Results.html This snippet includes the content of another template file named 'instructions.html' from the same directory as the current template. This is useful for modularizing template content. ```Django Template {{ include_sibling 'instructions.html' }} ``` -------------------------------- ### Defining Page Title in oTree Template Source: https://github.com/otree-org/otree/blob/lite/payment_info/PaymentInfo.html This snippet defines a 'title' block using Jinja2/Django template syntax within an oTree application. The text 'Thank you' will be rendered as the page's title, typically appearing in the browser tab or as a main heading, depending on the base template. ```Jinja2/Django Template {{ block title }}Thank you{{ endblock }} ``` -------------------------------- ### Rendering Player and Group Results in oTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Results.html This snippet defines the structure and content of an oTree results page. It uses template variables to display player-specific data like 'price' and 'payoff', group-level data like 'winning_price', and conditional logic to show if a product was sold. It also includes a navigation button and embeds content from another template file. ```oTree Template {{ block title }}Results{{ endblock }} {{ block content }} Your price {{ player.price }} Lowest price {{ group.winning_price }} Was your product sold? {{ if player.is_winner }} Yes {{ else }} No {{ endif }} Your payoff {{ player.payoff }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Displaying Dynamic Variables in oTree Templates Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/Results.html This snippet illustrates how to output dynamic data from the oTree context, including player guesses, calculated group averages, the best guess, and individual player payoffs. Variables are accessed using dot notation (e.g., group.two_thirds_avg, player.guess). ```oTree Template {{ sorted_guesses }} {{ group.two_thirds_avg }} {{ group.best_guess }} {{ player.guess }} {{ player.payoff }} ``` -------------------------------- ### Rendering Next Button (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/dictator/Offer.html This snippet renders the standard 'Next' button for navigating to the subsequent page in the oTree sequence. It automatically handles form submission and page progression. ```oTree Template {{ next_button }} ``` -------------------------------- ### Rendering All Page Form Fields (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/matching_pennies/Choice.html This snippet is an oTree-specific tag that automatically renders all form fields defined in the corresponding `Page` class (e.g., in _builtin.py or the app's models.py). It simplifies the process of displaying input elements for participant choices. ```oTree Template {{ formfields }} ``` -------------------------------- ### Defining Player Guess Page Content (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/guess_two_thirds/Guess.html This snippet defines the main content block for an oTree page where players submit their guess. It conditionally displays a history of 'two-thirds average' values from previous rounds if the current round is not the first. It also includes standard oTree form fields, a 'next' button, and embeds content from an 'instructions.html' sibling file. ```oTree Template {{ block title }}Your Guess{{ endblock }} {{ block content }} {{ if player.round_number > 1 }} Here were the two-thirds-average values in previous rounds: {{ two_thirds_avg_history }} {{ endif }} {{ formfields }} {{ next_button }} {{ include_sibling 'instructions.html' }} {{ endblock }} ``` -------------------------------- ### Defining Main Content Block - oTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Decide.html This snippet initiates the main content area of the oTree page using the `block content` tag. All subsequent elements until `endblock` will be rendered within this primary body section of the page. ```oTree Template {{ block content }} ``` -------------------------------- ### Defining Page Title Block - oTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Decide.html This snippet uses the `block title` and `endblock` tags to define the title that appears in the browser tab or window. The content 'Set Your Price' is dynamically inserted into the base template's title block. ```oTree Template {{ block title }}Set Your Price{{ endblock }} ``` -------------------------------- ### Displaying Minimum Bid Constant - oTree Template Source: https://github.com/otree-org/otree/blob/lite/common_value_auction/Bid.html This snippet displays the constant value `BID_MIN`, indicating the minimum allowed bid amount. This constant is accessed from the `C` (Constants) object, ensuring consistency across the experiment. ```oTree Template {{ C.BID\_MIN }} ``` -------------------------------- ### Rendering Next Button - oTree Template Source: https://github.com/otree-org/otree/blob/lite/bertrand/Decide.html The `next_button` tag generates a standard 'Next' button, which allows participants to proceed to the subsequent page in the oTree sequence. This tag automatically handles form submission and navigation. ```oTree Template {{ next_button }} ``` -------------------------------- ### Defining Page Title (oTree Template) Source: https://github.com/otree-org/otree/blob/lite/dictator/Offer.html This snippet uses the 'block' tag to define the title that appears in the browser tab or window. The content 'Your Decision' is dynamically inserted into the HTML