{% 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 questions measure your knowledge of cybersecurity. Kindly answer these
            to the best of your abilities. If you do not know the answer, please select the "I Don't Know" option
            instead of guessing.
        </p>
        <table cellpadding="2">
            {% for item in items %}
                <tr>
                    <td colspan="2">{{ item.2 }}</td>
                </tr>
                <tr>
                    <td><input type="radio" name={{ item.0 }} id={{ item.1 }} value="1" required/></td>
                    <td>{{ item.3 }}</td>
                </tr>
                <tr>
                    <td><input type="radio" name={{ item.0 }} id={{ item.1 }} value="2" required/></td>
                    <td>{{ item.4 }}</td>
                </tr>
                <tr>
                    <td><input type="radio" name={{ item.0 }} id={{ item.1 }} value="3" required/></td>
                    <td>{{ item.5 }}</td>
                </tr>
                <tr>
                    <td><input type="radio" name={{ item.0 }} id={{ item.1 }} value="4" required/></td>
                    <td>{{ item.6 }}</td>
                </tr>
                <tr>
                    <td><input type="radio" name={{ item.0 }} id={{ item.1 }} value="5" required/></td>
                    <td>{{ item.7 }}</td>
                </tr>
                <tr>
                    <td colspan="2">&nbsp;</td>
                </tr>
            {% endfor %}
        </table>
        <br/>
        <p align="right">
            <button>Next Page</button>
        </p>
    </div>
</div>
<br>
{% endblock %}