Experimental Economics: Data Workflow

Lecture 5b: Advanced Topics

1 Style

1.1 Appearance of pages

• You can control the appearance of pages (templates) with style files
  • HTML tags
  • CSS files
    • Colors, fonts, spaces, borders

→

1.2 HTML tags: Headings and paragaphs

<h1>Instructions</h1>

  <h2> Part 1 </h2>

      <p>In the first part of the experiment you are going to choose between couples of lotteries. </p>

[...]
     

• Headings (titles subtitles)
  • Highlight the headings with tags `<h#> </h#>
    • Hyerarchical structure
      • <h1> Section</h1>
        • <h2> Subsection </h2>
          • <h3> Subsubsection </h3>
            • …
• Paragraphs
  • Block of text on a new line <p> YOR TEXT HERE </p>

1.3 HTML tags: tables

[...]
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col" colspan="2" style="text-align:center">A</th>
            <th scope="col" ></th>
            <th scope="col" colspan="2"  style="text-align:center">B</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td > p/10 of €A<sub>1</sub>  </td>
            <td> (1-p)/10 of €A<sub>2</sub></td>
            <td style="font-weight: bold">{{ form.HL }}</td>
            <td>p/10 of €B<sub>1</sub></td>
            <td >(1-p)/10 of €B<sub>2</sub> </td>
          </tr>
        </tbody>
        </table>

• Table allows to arrange text in rows and columns
  • Typical structure
    • ```html

      Header 1	Header 2	Header 3
      1	2	3
      4	5	6

• Rows <tr> </tr>
• Column names <th> </th>
• Cells <td> </td>

1.4 HTML tags: divisions

[...]

<div class="container" style="font-size:18pt">
  <div class="row">
    &nbsp;
  </div>
  <div class="row" style="padding-left:135px;">
    <div class="col-md-10">
    </div>
    <div class="col-md-2">
      <button name="btn_submit" value="True" class="btn btn-primary btn-large">
         <span style="font-size:18pt">Continue</span>
     </button>
    </div>
  </div>
</div>

• Divisions or sections with <div> </div>
  • Possible to use styles for div with class
    • See Bootstrap
• Buttons
  • A clickable element
    • Different classes available in Bootstrap

1.5 Style up your pages

• To provide your pages with a coherent and adequate style you can use a css file
• In you app create a folder named static and a subfolder with the name of your app (similar to what you do for images)
  • Put your file .css in that path
    • Colors, fonts, …
• To “call” your .css file insert this in your templates

{{ block styles }}
<style type="text/css">
</style>
<link href="{{ static "styles/mystyle.css" %}" rel="stylesheet">
{{ endblock }}

1.6 Example 1: clean and effective

• To change the appearance we “apply” the following style changes in our mystyle.css

.box {
    border-style: solid;
    border-color: #0275d8;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
}

.table {
    width: 90%;
    border: 2px solid;
    text-align:center;
    border-color: #686868;
}


h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24pt;
    font-weight: bold;
    color: #0275d8;
    text-align: center;
    width: 100%;
    margin: 0px 0 10px 0;
}

h2 {
    font-size: 18pt;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    color: #0275d8;
    text-align: left;
    width: 100%;
    margin: 40px 0 10px 0;
}

p {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12pt;
    line-height: 1.5em;
}

li {
    font-size: 12pt;
}

input[type=radio] {
    transform: scale(1.2);
    margin: 12px -10px 0px -30px;
}

1.7 Example 2: funny and messy

.box {
    border-style: solid;
    border-color: #905b04;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-right: 20px;
    border-width:1em;
    background: rgb(11, 20, 3)
}

.table {
    width: 90%;
     font-family: 'Homemade Apple', cursive;
    border: 2px solid;
    text-align:center;
    border-color: #686868;
     color:white;
}

h1 {
    font-family: 'Permanent Marker', cursive;
    font-size: 24pt;
    font-weight: bold;
    color: #ad5d61;
    text-align: center;
    width: 100%;
    margin: 0px 0 10px 0;
}

h2 {
    font-size: 18pt;
    font-family: 'Permanent Marker', cursive;
    font-weight: bold;
    color: #4548fb;
    text-align: left;
    width: 100%;
    margin: 40px 0 10px 0;
}

p {
    font-family: 'Homemade Apple', cursive;
    font-size: 14pt;
    line-height: 1.5em;
    color:white;
}

li { 
    font-family: 'Homemade Apple', cursive;
    font-size: 14pt;
     color:white;
}

input[type=radio] {
    transform: scale(1.2);
    margin: 12px -10px 0px -30px;
}

• In addition, to call special characters, insert

{{ block scripts }}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Permanent+Marker&family=Sacramento&display=swap" rel="stylesheet">
{{ endblock }}

1.8 Icons

• You can add icons to your pages
  • A repository of icons can be found at Iconify
    • Let’s say you wan to add these icons to your template
      
• Where you want to insert the icons in the .html template

<span class="iconify" data-icon="logos:css-3" data-inline="false" ></span>
<span class="iconify" data-icon="logos:html-5" data-inline="false"></span>
<span class="iconify" data-icon="logos:javascript" data-inline="false"></span>

• In the .html template then add

{{ block scripts }}
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
{{ endblock }}

2 Dynamic graphs

2.1 Responsive graphs

• It is possible to draw dynamic responsive graphs (see PGG)
  • We rely on Highcharts library under a Creative Commons Attribution-NonCommercial 3.0

2.2 Code

• In subfolder static/name_of_app we insert
  • The JavaScript file hihcharts.js
    • Library needed to create the graph
  • The JavaScript file miografico.js
    • Contains a function to draw the graph

• In the template the graph is “inserted” with
  • id=graph should match $('#graph').highcharts({ ...

     <div class="col-sm-6">
         <div id="graph" style="width:100%; height:300px;"> </div>
     </div>

function draw_graph(history_contrib,round_number){
  $('#graph').highcharts({
      chart: {
          type: 'line'
      },
      title: {
          text: 'Total earnings from the project'
      },
      xAxis: {
        allowDecimals: false,
         accessibility: {
            rangeDescription: 'Range: 1 to 10'
        }
      },
      yAxis: {
          title: {
              text: 'Points'
          }
      },
        plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 1
        }
    },
      series: [{
          name: 'Total earnings',
          color: '#79dcb4',
          data: history_contrib
      }]
  });
}

3 Appendix

3.1 Assignment

• Improve the style of the app TG

3.2 OTree code

• Styles

Download styles.zip

3.3 References