oTree Crash Course

Session X - Advanced Templates

Ali Seyhun Saral (Institute for Advanced Study in Toulouse)

IMPRS Be Smart Summer School

2023-08-09

Components of an oTree Experiment

What are template files?

• Templates are HTML files that contain the text and variables that are displayed to the participant

• They are not actual HTML files, but rather HTML files with special syntax which oTree fills some special parts

We can use HTML tags in templates

Paragraphs

• <p>: Paragraphs

<p> This is a paragraph </p>
<p> This is another paragraph </p>

This is a paragraph

This is another paragraph

Bold and italics

• <strong>: Bold
• <em>: Italics

<strong> This is bold </strong>.

<em> This is italic </em>.

You can mix <strong> bold </strong> and <em> italics </em>.

This is bold .

This is italics .

You can mix bold and italics .

Headings

• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings

<h1> Super title </h1>
<h2> Less super title </h2>
<h3> Even less super title </h3>
<h4> An okay title </h4>

Super title

Less super title

Even less super title

An okay title

Images

• <img>: Images

<img src="https://www.saral.it/vehicles.jpeg" width="600" />

Not robots

Lists

• <ul>: Unordered list

<ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

• Item 1
• Item 2
• Item 3

Tables

• <table>: Table
• <tr>: Table row
• <td>: Table data

<table>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
    </tr>
    <tr>
        <td> 4 </td>
        <td> 5 </td>
        <td> 6 </td>
    </tr>
</table>
  

Tables

1	2	3
4	5	6

Making things prettier with Bootstrap

• Bootstrap is a popular CSS framework that makes it easy to make your templates look good

• oTree comes with Bootstrap already installed and loaded

• Documentation

Styling tables with Bootstrap

<table class="table table-striped">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>

Modifying the templates appearance by using CSS

• CSS stands for Cascading Style Sheets
• CSS is a language that describes the style of an HTML document
• CSS describes how HTML elements should be displayed

Example

<style>
    body {
        background-color: lightblue;
    }

    .mytable {
        border: 1px solid black;
    }
</style>

Modifying the templates appearance by using CSS

• One easy way to add CSS to your oTree experiment is to create section with <style> tag.

{{ block title }}
    My oTree Experiment
{{ endblock }}

{{ block content }}
    <style>
        body {
            background-color: lightblue;
        }
    </style>

    Welcome to the experiment.

{{ endblock }}

Creating a div and modifying its appearance

• <div>: A division or section in an HTML document

<div class="mystyle">
    I feel blue today.
</div>

<style>
  .mystyle {
    background-color: lightblue;
    width: 200px;
    height: 100px;
    padding-top: 30px;
    border: 1px solid black;
    text-align: center;
    }
</style>

Modifying the templates appearance by using CSS

Practice (or assignment)

• Go to your pgg app and modify the template so that it looks like this:
  • Bullet list for instructions <ul> <li> </li> </ul>
  • <strong> in two places for bold
  • Check bootstrap documentation to find the container

You can use chatGPT to generate html and css for you

Previewing HTML files in VS Code

• Go to extensions panel and search for live preview

JavaScript

• JavaScript is a programming language that adds interactivity to your pages

• You can add them to your templates by using <script> tag

• Example:

<script>
    alert("Hello World!");
</script>

JavaScript

• It takes a bit more than this session to learn JavaScript so we will not cover it in detail

• Oftentimes you can find examples of JavaScript code online and copy-paste them to your templates

• It runs on the client side (browser)

Lets use chatGPT

Running on the browser

• It is open to manipulation by the user
• You need some extra step to connect it to your models.

Connecting JavaScript to your models

• JavaScript runs on browser and we dont have acess to the users’ JS variables
• We need to create an empty field in our model and then fill it with JS

dieroll = models.IntegerField()

# page
form_fields = ['dieroll']

# JavaScript
document.getElementById('dieroll').value = 4;

# or with the new otree syntax
forminputs.dieroll.value = 4;

We usually should hide the field from the user

• Remove formfields from the page
• Build your own input field

<input type="hidden" name="contribution" id="contribution" />