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

{% block title %}Fragebogen Nr. {{ questionnaire_no }}{% endblock %}

{% block content %}

<style>
    .page-header {
        padding-top: 10px;
    }
    /* Allow resizing images*/
    img { 
        max-width:100%; 
        height:auto; 
    } 
</style>

<div style="width:85%">
Bitte beantworten Sie die folgenden Fragen.
<p></p>

<p></p>
<b>Frage 1:</b> Welches Bild beschreibt Ihr aktuelles Gefühl am besten?
<p></p>
<table style="width:100%">    
  <tr>
      <td style="padding-right:5px">
          unglücklich<br>
          verärgert<br>
          traurig<br>
      </td>        
    <td align="center"><img src="https://www.dropbox.com/s/1a5kiyjiaas419r/Valence%201.png?raw=1" height="140px", width="130px"/></td>
    <td align="center"><img src="https://www.dropbox.com/s/sjqxmcq1zhbm7qj/Valence%202.png?raw=1" height="140px", width="130px"/></td>
    <td align="center"><img src="https://www.dropbox.com/s/xzwhshgc4ow8uos/Valence%203.png?raw=1" height="140px", width="130px"/></td>
      <td align="center"><img src="https://www.dropbox.com/s/6wac8okoczod2d9/Valence%204.png?raw=1" height="140px", width="130px"/></td>
      <td align="center"><img src="https://www.dropbox.com/s/yrihx4s3qjy82v2/Valence%205.png?raw=1" height="140px", width="130px"/></td>
      <td style="padding-left:10px">
          angenehm<br>
          fröhlich<br>
          vergnügt<br>
      </td>        
  </tr>
  <tr>
      <td></td>
    <td align="center">
        <input type="radio" name="valence" value="1" required="" id="id_valence_0">
        </td>
    <td align="center">
        <input type="radio" name="valence" value="2" required="" id="id_valence_1">
        </td>
    <td align="center">
        <input type="radio" name="valence" value="3" required="" id="id_valence_2">
        </td>
    <td align="center">
        <input type="radio" name="valence" value="4" required="" id="id_valence_3">
        </td>
    <td align="center">
        <input type="radio" name="valence" value="5" required="" id="id_valence_4">
        </td>
      <td></td>
  </tr>
</table>
<p></p>

<b>Frage 2:</b> Welches Bild beschreibt Ihr aktuelles Gefühl am besten?
<p></p>
<table style="width:100%">
  <tr>
      <td style="padding-right:15px">
          entspannt<br>
          gelassen<br>
          träge<br>
      </td>      
    <td align="center"><img src="https://www.dropbox.com/s/jy854d7zced1d8e/Arousal%201%20.png?raw=1" height="140px", width="130px"/></td>
    <td align="center"><img src="https://www.dropbox.com/s/ru7hwto6xjt1qol/Arousal%202.png?raw=1" height="140px", width="130px"/></td>
    <td align="center"><img src="https://www.dropbox.com/s/tocap8vrujxnsk1/Arousal%203.png?raw=1" height="140px", width="130px"/></td>
      <td align="center"><img src="https://www.dropbox.com/s/y7yq4l2f8x1uu3l/Arousal%204.png?raw=1" height="140px", width="130px"/></td>
      <td align="center"><img src="https://www.dropbox.com/s/uwkqd6j0n3s1yq8/Arousal%205.png?raw=1" height="140px", width="130px"/></td>
      <td style="padding-left:10px">
          angeregt<br>
          aufgeregt<br>
          nervös<br>
      </td>
  </tr>
  <tr>
      <td></td>
    <td align="center">
        <input type="radio" name="arousal" value="1" required="" id="id_arousal_0">
        </td>
    <td align="center">
        <input type="radio" name="arousal" value="2" required="" id="id_arousal_1">
        </td>
    <td align="center">
        <input type="radio" name="arousal" value="3" required="" id="id_arousal_2">
        </td>
    <td align="center">
        <input type="radio" name="arousal" value="4" required="" id="id_arousal_3">
        </td>
    <td align="center">
        <input type="radio" name="arousal" value="5" required="" id="id_arousal_4">
        </td>
      <td></td>
  </tr>
</table>
<p></p>

<b>Frage 3:</b> Wie risikoreich schätzen Sie Ihr Investment ein?
<p></p>
{% formfield player.perceived_risk label=""%}
<p></p>

<b>Frage 4:</b> Wie sicher sind Sie sich mit Ihren Entscheidungen?
<p></p>
{% formfield player.confidence label=""%}
<p></p>
<button class="otree-btn-next btn btn-primary" style="float: right">Nächste Periode</button>
</div>


{% endblock %}