{{ block title }}

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> 5 / 7 </div>
</div>

<style>
    .progress-bar {
      width: 71.4%;
    }
</style>

<br>

Part 2
{{ endblock }}

{{ block content }}

<div class="row">
<div class="card bg-light m-3">
    <br>
    <!-- <h5>
        <u><strong>Instructions</strong></u>
    </h5> -->
    
    <p>
        Here are a number of characteristics that may or may not apply to you. For example, do you agree that you are someone who <em> likes to spend time with others? </em>
        Please select a response for each statement to indicate the extent to which you agree or disagree with that statement.
    </p>

</div>
</div>

<table class="table table-striped">
    <tr>
        <th></th>
        <th>Disagree strongly</th>
        <th>Disagree a little</th>
        <th>Neutral; no opinion</th>
        <th>Agree a little</th>
        <th>Agree strongly</th>
    </tr>

    <tr>
        <th> <em> I am someone who... </em> </th>
    </tr>    {{ for field in form }}
    <tr>
        <td>{{ field.label }}</td>
        {{ for option in field }}
        <td>{{ option }}</td>
        {{ endfor }}
    </tr>
    {{ endfor }}
</table>

<button class="btn btn-primary" style="float: right;">Next</button>

<script>
    // workaround needed until wtforms #615 is published
    for (let option of document.querySelectorAll('input[type=radio]')) {
        option.required = 'required';
    }
</script>

<!-- Italicize words in form field's label -->
<script>
    $(document).ready(function (e) {
        labels = document.getElementsByTagName("label");

        for (var i = 0; i < labels.length; i++) {
            labels[i].innerHTML = labels[i].innerHTML.replaceAll("&lt;", "<").
                                  replaceAll("&gt;", ">");
        }
    });
</script>

{{ endblock }}