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

{% block title %}
Reaction
{% endblock %}

{% block content %}

<div class="card bg-light">
    <div class="card-body">
        Think about the events described in the preceding article, how do these events make you feel?
        <table cellpadding="4" border="1">
            <tr align="center">
                <td>&nbsp;&nbsp;</td>
                <th><center>Not at All</center></th>
                <th><center>To a Small Extent</center></th>
                <th><center>To a Moderate Extent</center></th>
                <th><center>To a Large Extent</center></th>
                <th><center>To a Great Extent</center></th>
                <th><center>Completely</center></th>
            </tr>
            {% for item in items %}
                <tr>
                    <td width="200">{{ 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>
                    </td>
                </tr>
            {% endfor %}
        </table>
        <br/>
        <p align="right">
            <button>Next Page</button>
        </p>
    </div>
</div>
<br>
{% endblock %}