{% extends "experiment/Instrument.html" %}
{% load otree static %}

{% block title %}
    Participant Survey
{% endblock %}

{% block content %}

<div class="card bg-light">
    <div class="card-body">
        <p align="justify">
            <b>Directions: </b>The following statements measure personal traits relevant to this survey. Please indicate
            your feelings towards each of these statements by selecting the corresponding circle.
        </p>
        <table align="center" cellpadding="4" border="1">
            <tr>
                <td>&nbsp;</td>
                <th><center>Strongly Disagree</center></th>
                <th><center>Disagree</center></th>
                <th><center>Somewhat Disagree</center></th>
                <th><center>Somewhat Agree</center></th>
                <th><center>Agree</center></th>
                <th><center>Strongly Agree</center></th>
            </tr>
            {% for item in items %}
                <tr>
                    <td>{{ item.2 }}</td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="1" required/></td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="2" required/></td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="3" required/></td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="4" required/></td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="5" required/></td>
                    <td align="center"><input type="radio" name={{ item.0 }}  id={{ item.1 }} value="6" required/></td>
                </tr>
            {% endfor %}
        </table>
        <br/>
        <p align="right">
            <button>Next Page</button>
        </p>
    </div>
</div>
<br>
{% endblock %}