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

{% block title %}
    End Questionnaire
{% endblock %}



{% block app_styles %}
<style type="text/css">
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer2 {
  width: 100%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.center {
border: 5px solid #FFFF00;
text-align: center;
}

.display {
    border: 10px solid red;
}

.important {
        font-size: 14pt;
        font-weight: bold;
    }

th {
    border: 1px solid black;
    font-size: 16pt;
    width: 650px;
    text-align: right;
    font-weight:normal;
    }

td {
    font-size: 14pt;
    border: 1px solid black;
    text-align: center;
    }

table {

    }

.history td {
    font-size: 16pt;
    }

.history th {
    font-size: 12pt;
    width: 100px;
    text-align: center;
    }

</style>
{% endblock %}

{% block content %}
The following questionnaire is for research purposes only. Your answers will stay anonymous. Your
payment will be prepared while you answer this questionnaire. We thank you for your cooperation.
<br>
<p></p>
1. How old are you? <br>
<input name="age"  type="number" style="width: 4em" min="16" max = "99">
{{ formfield_errors 'age' }}

<p></p>
{{formfield 'sex' label='2. What is your sex?'}}

<p></p>
{{formfield 'major' label='3. What is your major field of study?'}}

<p></p>
4. What is your current GPA ?<br>
<input name="GPA"  type="number" style="width: 4em"  step="0.01" min="0" max="4">
{{ formfield_errors 'GPA' }}
<p></p>

5. How do you see yourself: are you a person who is generally willing to take risks, or do you try to avoid
taking risks?
<br><br>
Scale from 0 to 10, where a 0 means you are completely unwilling to take risks and a 10 means you are
very willing to take risks. You can also use the values in-between to indicate where you fall on the scale.
<br><br>
<center>
       <div style="border: thin solid LightGray ">
      <tr>
          <th>completely unwilling &nbsp;&nbsp;&nbsp;&nbsp; </th> <th> </th> <th>{{form.risk}}</th> <th>very willing</th>
      </tr>
</div>
</center>

<p></p>
{% next_button %}

{% endblock %}