{{ extends 'global/Page.html' }}
{{ block title }}Post-experiment Questionnaire{{ endblock }}

{{ block content }}

For each statement please indicate your level of agreement from 1 to 7.  As shown below where 4 represents neutral or indifference:  

<style>
/* ===== General spacing ===== */
.item{ margin:20px 0 28px 0; }
.item p{ margin:0 0 6px 0; }
.q-label{ margin-bottom:6px; }
.section-title{ font-weight:700; margin-top:12px; }

/* ===== Likert tables (Q1–Q3 and Q5–Q6) ===== */
.likert-tbl{
  border-collapse:separate;
  border-spacing:0;          /* borderless look */
  margin-top:6px;
  margin-left:25px;          /* slight indent under question text */
}
.likert-tbl th,.likert-tbl td{
  border:none;
  padding:4px 12px;
  text-align:center;
  vertical-align:middle;
}

.section-title {
  font-weight: 700;
  margin-top: 12px;
  font-size: 20px; /* ← increase or adjust this value */
}
/* Q1–Q3: two-row header */
.likert-tbl .hdr-top th.anchor-top{ width:120px; text-align:center; }
.likert-tbl .hdr-top th.anchor-top strong{ font-weight:700; }
.likert-tbl .hdr-sub th.anchor-sub{ width:120px; text-align:center; font-style:italic; font-weight:400; }
.likert-tbl .hdr-top th.num{ font-weight:600; font-size:14px; padding-bottom:0; }

/* Q5–Q6: single-row header variant */
.likert-tbl--single .hdr-single th.anchor-single{
  width:150px; text-align:center; font-style:italic; font-weight:600;
}
.likert-tbl--single .hdr-single th.num{ font-weight:600; font-size:14px; }

/* Radio row (all) */
.likert-tbl .radio-row td{ padding-top:2px; }
.likert-tbl input[type="radio"]{
  appearance:auto;
  width:14px; height:14px; margin:0;
  vertical-align:middle;
  accent-color:#2f73c4;     /* highlight color */
  cursor:pointer;
}

/* ===== Q4: Image-based grid (left-aligned) ===== */
.image-radio-grid{
  display:grid;
  grid-template-columns:repeat(4, max-content); /* 1–4 top row */
  column-gap:25px; row-gap:25px;
  justify-content:flex-start; /* left align */
}
.image-radio-grid .image-radio:nth-child(n+5){ grid-row:2; } /* 5–7 second row */

.image-radio{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:150px;
}
.image-radio input{ position:absolute; opacity:0; width:0; height:0; }
.image-radio img{
  width:150px; height:auto;
  border:2px solid #ddd; border-radius:8px;
  transition:transform .1s ease, box-shadow .1s ease, border-color .1s ease;
}
.image-radio .caption{ font-size:13px; margin-top:6px; }
.image-radio:hover img{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,.1); }
.image-radio input:checked + img{ border-color:#2f73c4; box-shadow:0 0 0 3px rgba(47,115,196,.3); }
</style>


<!-- ================= Q1 ================= -->

<div class="item">
  <p class="q-label">1. I think the information I receive is reliable.</p>
  <table class="likert-tbl likert-tbl--single">
    <thead>
      <tr class="hdr-single">
        <th class="anchor-single"><em>Strongly Disagree</em></th>
        {% for i in range(1,8) %}<th class="num">{{ i }}</th>{% endfor %}
        <th class="anchor-single"><em>Strongly Agree</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="peq1" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
<!-- ================= Q2 ================= -->
<div class="item">
  <p>2. To what extent do you feel responsible for the budget reporting decision?</p>
 <table class="likert-tbl likert-tbl--single">
    <thead>
      <tr class="hdr-single">
        <th class="anchor-single"><em>Not at all</em></th>
        {% for i in range(1,8) %}<th class="num">{{ i }}</th>{% endfor %}
        <th class="anchor-single"><em>Very Much</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="peq2" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>


<p class="section-title">Demographic questions:</p>

<div class="item">{{ formfield 'age' }}</div>
<div class="item">{{ formfield 'gender' }}</div>
<div class="item">{{ formfield 'english' }}</div>
<div class="item">{{ formfield 'workexperience' }}</div>
<!-- ================= ai ================= -->
<div class="item">
  <p class="q-label">5. How often do you use AI on a daily basis?</p>
  <table class="likert-tbl likert-tbl--single">
    <thead>
      <tr class="hdr-single">
        <th class="anchor-single"><em>Not at all</em></th>
        {% for i in range(1,8) %}<th class="num">{{ i }}</th>{% endfor %}
        <th class="anchor-single"><em>Very Much</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="aifrequency" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
{{ next_button }}

{{ endblock }}