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

{{ block content }}

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

<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, 4 × 4 layout) ===== */
.image-radio-grid{
  display:grid;
  grid-template-columns:repeat(4, max-content);
  column-gap:25px; 
  row-gap:25px;
  justify-content:flex-start;
}

.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>1. I feel that the budget decision is my own work.</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 class="q-label">2.	When making the decision, I felt the AI system's presence.  </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="peq2" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ================= Q3 ================= -->
<div class="item">
  <p>3.	I was focused on making an accurate estimate.</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="peq3" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ================= Q4 ================= -->
<div class="item">
  <p>4.	I was concerned about making money for myself.</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="peq4" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>


<b> Please refer to the study you completed and the budget decision and answer the following questions. </b>
<!-- ================= Q1 ================= -->
<div class="item">
  <p>1. How do you view the role of the AI system in your decision making</p>
 <table class="likert-tbl likert-tbl--single">
    <thead>
      <tr class="hdr-single">
        <th class="anchor-single"><em>Primarily a decision aid </em></th>
        {% for i in range(1,8) %}<th class="num">{{ i }}</th>{% endfor %}
        <th class="anchor-single"><em> Primarily a partner involved in my decision making</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="peq5" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ================= Q6 ================= -->
<div class="item">
  <p>2. Who do you think is responsible for the budget reporting decision? </p>
  <table class="likert-tbl likert-tbl--single">
    <thead>
      <tr class="hdr-single">
        <th class="anchor-single"><em>Me</em></th>
        {% for i in range(1,8) %}<th class="num">{{ i }}</th>{% endfor %}
        <th class="anchor-single"><em>The AI system</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="peq6" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ================= Q7 ================= -->
<div class="item">
  <p>3. To what extent do you think the AI system is a separate entity in the budgeting process?</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="peq7" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>



<!-- ================= Q8 ================= -->
<div class="item">
  <p class="q-label">4.	When making the decision, to what extent did you consider what the AI system would expect you to do?</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="peq8" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

<!-- ================= Q9 ================= -->

<div class="item">
  <p class="q-label">5. How competent do you believe the AI system is at assisting with budget estimates?</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 Competent</em></th>
      </tr>
    </thead>
    <tbody>
      <tr class="radio-row">
        <td></td>
        {% for i in range(1,8) %}<td><input type="radio" name="peq9" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>


<br>
<br>
<br>
<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. In general, how often do you use AI?</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>
<!-- ================= ai ================= -->
<div class="item">
  <p class="q-label">6. In general, how much do you trust AI in information collection and analysis?</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="aitrust" value="{{ i }}" required></td>{% endfor %}
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
{{ next_button }}

{{ endblock }}