{% extends "otree/Page.html" %}
{% load otree static %}


{% block global_styles  %}
<style>
.footer
{
position: relative;
width:980px;
margin:0 auto 0 auto;
padding:5px
}
</style>
{% endblock %}

{% block global_scripts  %}
<hr width="950">
<footer class="footer">
    <div class="container">
        <img src="{% static "global/snf.png" alt="Logo SNSF" %}" width = "125" align="right" hspace="10"/>
        <img src="{% static "global/uzh.jpg" alt="Logo UZH" %}" width = "110" align="right" hspace="10"/>
        <img src="{% static "global/unibas.jpg" alt="Logo Unibas" %}" width = "110" align="right" hspace="10"/>
        <span class="text-muted" style="font-size: 12px">
            <p>www.financialdecisions.psychologie.unibas.ch <br> finanzentscheidungen3@econ.ch<br>
            Unterstützt durch Swiss National Science Foundation PN: 177277</p>
        </span>
    </div>
</footer>





#html template for 6 and 10 item questions, horizontal layout. Important: first delete choices in models.py
#(example: pers_iri_Q1 = models.IntegerField(choices=[[1, ''],)

#use this script for 10 item radio buttons:

<div class='page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='anchor-left'>nie</div>
    </div>
    <div class='column3'>
      <div class='radio-buttons'>{{ form.pers_iri_Q1 }}</div>
    </div>
    <div class='column'>
      <div class='anchor-right'>immer</div>
    </div>
  </div>
  <div class='row'>
    <div class='column'>
      <div class='blank-column'></div>
    </div>
    <div class='column2-long'>
      <div class='choices'>1</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>2</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>3</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>4</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>5</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>6</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>7</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>8</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>9</div>
    </div>
    <div class='column2-long'>
      <div class='choices'>10</div>
    </div>
    <div class='column'>
      <div class='blank-column'></div>
    </div>
  </div>
</div>

#use this script for 6 item radio buttons
<div class='page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='anchor-left'>nie</div>
    </div>
    <div class='column'>
      <div class='radio-buttons'>{{ form.pers_iri_Q3 }}</div>
    </div>
    <div class='column'>
      <div class='anchor-right'>immer</div>
    </div>
  </div>
  <div class='row'>
    <div class='column'>
      <div class='blank-column'></div>
    </div>
    <div class='column2'>
      <div class='choices'>1</div>
    </div>
    <div class='column2'>
      <div class='choices'>2</div>
    </div>
    <div class='column2'>
      <div class='choices'>3</div>
    </div>
    <div class='column2'>
      <div class='choices'>4</div>
    </div>
    <div class='column2'>
      <div class='choices'>5</div>
    </div>
    <div class='column2'>
      <div class='choices'>6</div>
    </div>
    <div class='column'>
      <div class='blank-column'></div>
    </div>
  </div>
</div>