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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'Field_Behavior/css/custom.css' %}" rel="stylesheet">
{% endblock %}



{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}

{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

    <div class="wrapper">

       <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Progress Bar -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        <label>
            Block {{ section }} von {{ section_total }}
        </label>
        <div class="progress">
            <div class="progress-bar-task" role="progressbar" style="width:{{ section_progress }}%;">
                <span class="sr-only"></span>
            </div>
        </div>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Progress Bar -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
        <label>
            Aufgabe {{ page }} von {{ total }}
        </label>
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width:{{ progress }}%;">
                <span class="sr-only"></span>
            </div>
        </div>
        <div class="progress-vspace"></div>

        <!-- ------------------------------------------------------------------------------------------------------- -->
        <!-- Table - Field Behavior and Perception Question -->
        <!-- ------------------------------------------------------------------------------------------------------- -->
         <div class="card">
            <div class="card-header">
                Bitte gib bei folgenden Aussagen an, wie zutreffend sie für dich sind.
            </div>

             <div style="padding: 5px 15px;">
                 <p>Wie oft nimmst du an Preisausschreiben oder Glücksspielen teil?</p>
             </div>

             <table class ="table">
                 <tbody>
                 <tr>
                     <td class="label_numbers">1</td>
                     <td class="label_numbers">2</td>
                     <td class="label_numbers">3</td>
                     <td class="label_numbers">4</td>
                     <td class="label_numbers">5</td>
                 </tr>

                 <tr>
                     <td align="center"> <input type="radio" name="gambling" value="1" required> </td>
                     <td align="center"> <input type="radio" name="gambling" value="2" required> </td>
                     <td align="center"> <input type="radio" name="gambling" value="3" required> </td>
                     <td align="center"> <input type="radio" name="gambling" value="4" required> </td>
                     <td align="center"> <input type="radio" name="gambling" value="5" required> </td>
                 </tr>
                 </tbody>
             </table>

             <table class="table">
                 <tbody>
                 <tr>
                     <td class="label_descriptions">nie</td>
                     <td class="label_descriptions">selten</td>
                     <td class="label_descriptions">gelegentlich</td>
                     <td class="label_descriptions">oft</td>
                     <td class="label_descriptions">sehr oft</td>
                 </tr>
                 </tbody>
             </table>


             <div style="padding: 5px 15px;padding-top: 30px">
                 <p>Bist du im Allgemeinen ein risikobereiter Mensch oder versuchst du, Risiken zu vermeiden?</p>
             </div>

             <table class ="table">
                 <tbody>
                 <tr>
                     <td class="label_numbers">0</td>
                     <td class="label_numbers">1</td>
                     <td class="label_numbers">2</td>
                     <td class="label_numbers">3</td>
                     <td class="label_numbers">4</td>
                     <td class="label_numbers">5</td>
                     <td class="label_numbers">6</td>
                     <td class="label_numbers">7</td>
                     <td class="label_numbers">8</td>
                     <td class="label_numbers">9</td>
                     <td class="label_numbers">10</td>
                 </tr>

                 <tr>
                     <td align="center"> <input type="radio" name="general_risk" value="0" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="1" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="2" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="3" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="4" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="5" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="6" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="7" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="8" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="9" required> </td>
                     <td align="center"> <input type="radio" name="general_risk" value="10" required> </td>
                 </tr>
                 </tbody>
             </table>

             <table class="table">
                 <tbody>
                 <tr>
                     <td class="label_11likert">
                         <div style="padding-left: 20px">gar nicht risikobereit</div>
                     </td>
                     <td class="label_11likert">
                         <div style="text-align: right;padding-right: 20px">sehr risikobereit</div>
                     </td>
                 </tr>
                 </tbody>
             </table>

              <div style="padding: 5px 15px;padding-top: 30px">
                 <p>Ich spare regelmäßig Geld (z.B. Sparbuch, Sparschwein, ...).</p>
             </div>

             <table class ="table">
                 <tbody>
                 <tr>
                     <td class="label_numbers">1</td>
                     <td class="label_numbers">2</td>
                     <td class="label_numbers">3</td>
                     <td class="label_numbers">4</td>
                     <td class="label_numbers">5</td>
                 </tr>

                 <tr>
                     <td align="center"> <input type="radio" name="saving" value="1" required> </td>
                     <td align="center"> <input type="radio" name="saving" value="2" required> </td>
                     <td align="center"> <input type="radio" name="saving" value="3" required> </td>
                     <td align="center"> <input type="radio" name="saving" value="4" required> </td>
                     <td align="center"> <input type="radio" name="saving" value="5" required> </td>
                 </tr>
                 </tbody>
             </table>

             <table class="table">
                 <tbody>
                 <tr>
                     <td class="label_descriptions">völlig unzutreffend</td>
                     <td class="label_descriptions">eher unzutreffend</td>
                     <td class="label_descriptions">teils-teils</td>
                     <td class="label_descriptions">eher zutreffend</td>
                     <td class="label_descriptions">völlig zutreffend</td>
                 </tr>
                 </tbody>
             </table>


             <div style="padding: 5px 15px;padding-top: 30px">
                 <p>Ich bin gut darin, Versuchungen zu widerstehen.</p>
             </div>

             <table class ="table">
                 <tbody>
                 <tr>
                     <td class="label_numbers">1</td>
                     <td class="label_numbers">2</td>
                     <td class="label_numbers">3</td>
                     <td class="label_numbers">4</td>
                     <td class="label_numbers">5</td>
                 </tr>

                 <tr>
                     <td align="center"> <input type="radio" name="temptation" value="1" required> </td>
                     <td align="center"> <input type="radio" name="temptation" value="2" required> </td>
                     <td align="center"> <input type="radio" name="temptation" value="3" required> </td>
                     <td align="center"> <input type="radio" name="temptation" value="4" required> </td>
                     <td align="center"> <input type="radio" name="temptation" value="5" required> </td>
                 </tr>
                 </tbody>
             </table>

             <table class="table">
                 <tbody>
                 <tr>
                     <td class="label_descriptions">völlig unzutreffend</td>
                     <td class="label_descriptions">eher unzutreffend</td>
                     <td class="label_descriptions">teils-teils</td>
                     <td class="label_descriptions">eher zutreffend</td>
                     <td class="label_descriptions">völlig zutreffend</td>
                 </tr>
                 </tbody>
             </table>

            <p>

            </p>
        </div>
    </div>

<div style="text-align: center">
  <button class="otree-btn-next btn btn-primary">Weiter</button>
</div>
{% endblock %}