{{ block title }}Questionnaire{{ endblock }}

{{ block content }}

<p class="text-muted mb-4" style="max-width:680px; margin:0 auto;">
  Please answer all questions before receiving your payment.
  Your responses are completely confidential and used only for research purposes.
</p>

<div style="max-width:680px; margin:0 auto;">

  {# Q1: Age #}
  <div class="mb-4">
    <label><strong>1. What is your age?</strong></label><br>
    <input type="number" name="q_age" min="10" max="100"
           value="{{ val_age }}" class="form-control" style="max-width:120px;">
    {{ form.q_age.errors }}
  </div>

  {# Q2: Student status + sub-questions #}
  <div class="mb-3">
    <label><strong>2. Are you currently a student?</strong></label><br>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="q_is_student" value="1"
        {% if val_is_student == 1 %}checked{% endif %}>
      <label class="form-check-label">Yes</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="q_is_student" value="0"
        {% if val_is_student == 0 %}checked{% endif %}>
      <label class="form-check-label">No</label>
    </div>
    {{ form.q_is_student.errors }}
  </div>

  {# Student sub-questions (no separate number) #}
  <div id="student-section" style="display:none; margin-left:20px; margin-bottom:16px;">
    <div class="mb-3">
      <label><strong>Please indicate your field of study:</strong></label><br>
      <input type="text" name="q_field_of_study" value="{{ val_field_of_study }}"
             class="form-control" placeholder="e.g. Economics, Engineering, …">
      {{ form.q_field_of_study.errors }}
    </div>
    <div class="mb-3">
      <label><strong>What is your year of study?</strong></label><br>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="1" {% if val_year_of_study == 1 %}checked{% endif %}><label class="form-check-label">1st year undergraduate</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="2" {% if val_year_of_study == 2 %}checked{% endif %}><label class="form-check-label">2nd year undergraduate</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="3" {% if val_year_of_study == 3 %}checked{% endif %}><label class="form-check-label">3rd year undergraduate</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="4" {% if val_year_of_study == 4 %}checked{% endif %}><label class="form-check-label">4th year undergraduate</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="5" {% if val_year_of_study == 5 %}checked{% endif %}><label class="form-check-label">5th year undergraduate</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="6" {% if val_year_of_study == 6 %}checked{% endif %}><label class="form-check-label">M.A.</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="7" {% if val_year_of_study == 7 %}checked{% endif %}><label class="form-check-label">Ph.D.</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="8" {% if val_year_of_study == 8 %}checked{% endif %}><label class="form-check-label">Post-doctoral student</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_year_of_study" value="9" {% if val_year_of_study == 9 %}checked{% endif %}><label class="form-check-label">Does not apply</label></div>
      {{ form.q_year_of_study.errors }}
    </div>
  </div>

  {# Non-student sub-question (no separate number) #}
  <div id="nonstudent-section" style="display:none; margin-left:20px; margin-bottom:16px;">
    <div class="mb-3">
      <label><strong>What is your highest level of education?</strong></label><br>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="1" {% if val_highest_education == 1 %}checked{% endif %}><label class="form-check-label">Primary School</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="2" {% if val_highest_education == 2 %}checked{% endif %}><label class="form-check-label">High School</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="3" {% if val_highest_education == 3 %}checked{% endif %}><label class="form-check-label">Some College/University</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="4" {% if val_highest_education == 4 %}checked{% endif %}><label class="form-check-label">Undergraduate Degree</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="5" {% if val_highest_education == 5 %}checked{% endif %}><label class="form-check-label">Graduate or Professional Degree</label></div>
      <div class="form-check"><input class="form-check-input" type="radio" name="q_highest_education" value="6" {% if val_highest_education == 6 %}checked{% endif %}><label class="form-check-label">Does not apply</label></div>
      {{ form.q_highest_education.errors }}
    </div>
  </div>

  {# Q3: Gender #}
  <div class="mb-3">
    <label><strong>3. Gender:</strong></label><br>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_gender" value="1" {% if val_gender == 1 %}checked{% endif %}><label class="form-check-label">Female</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_gender" value="2" {% if val_gender == 2 %}checked{% endif %}><label class="form-check-label">Male</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_gender" value="3" {% if val_gender == 3 %}checked{% endif %}><label class="form-check-label">I self-identify as</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_gender" value="4" {% if val_gender == 4 %}checked{% endif %}><label class="form-check-label">I prefer not to answer</label></div>
    {{ form.q_gender.errors }}
    <div id="gender-other-section" style="display:none; margin-left:20px; margin-top:6px;">
      <input type="text" name="q_gender_self_identify" value="{{ val_gender_self }}"
             class="form-control" placeholder="Please specify…" style="max-width:300px;">
      {{ form.q_gender_self_identify.errors }}
    </div>
  </div>



  {# Q4: Risk willingness #}
  <div class="mb-4">
    <label><strong>4. How willing are you to take risks, in general?</strong></label>
    <p class="text-muted small mb-1">Enter a number from 0 to 10, where 0 = not at all willing and 10 = very willing.</p>
    <table class="mb-1" style="font-size:0.85rem; color:#6c757d;">
      <tr>
        <td>0</td><td>&nbsp;&nbsp;</td><td>1</td><td>&nbsp;&nbsp;</td><td>2</td><td>&nbsp;&nbsp;</td>
        <td>3</td><td>&nbsp;&nbsp;</td><td>4</td><td>&nbsp;&nbsp;</td><td>5</td><td>&nbsp;&nbsp;</td>
        <td>6</td><td>&nbsp;&nbsp;</td><td>7</td><td>&nbsp;&nbsp;</td><td>8</td><td>&nbsp;&nbsp;</td>
        <td>9</td><td>&nbsp;&nbsp;</td><td>10</td>
      </tr>
    </table>
    <input type="number" name="q_risk_willingness" min="0" max="10"
           value="{{ val_risk }}" class="form-control" style="max-width:100px;">
    {{ form.q_risk_willingness.errors }}
  </div>

  {# Q5: Appraisal bias #}
  <div class="mb-4">
    {% if role == 'Appraiser' %}
    <label><strong>5. In coming up with your appraisals, which statement best describes your choices?</strong></label>
    {% else %}
    <label><strong>5. Overall, how did you perceive the expert's appraisals?</strong></label>
    {% endif %}
    <div class="form-check mt-2"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="1" {% if val_appraisal_bias == 1 %}checked{% endif %}><label class="form-check-label">Always favored the buyer</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="2" {% if val_appraisal_bias == 2 %}checked{% endif %}><label class="form-check-label">Usually favored the buyer</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="3" {% if val_appraisal_bias == 3 %}checked{% endif %}><label class="form-check-label">Sometimes favored the buyer</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="4" {% if val_appraisal_bias == 4 %}checked{% endif %}><label class="form-check-label">Neutral</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="5" {% if val_appraisal_bias == 5 %}checked{% endif %}><label class="form-check-label">Sometimes favored the seller</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="6" {% if val_appraisal_bias == 6 %}checked{% endif %}><label class="form-check-label">Usually favored the seller</label></div>
    <div class="form-check"><input class="form-check-input" type="radio" name="q_appraisal_bias" value="7" {% if val_appraisal_bias == 7 %}checked{% endif %}><label class="form-check-label">Always favored the seller</label></div>
    {{ form.q_appraisal_bias.errors }}
  </div>

  {# Q6: Instruction clarity #}
  <div class="mb-4">
    <label><strong>6. How clear were the instructions?</strong></label>
    <p class="text-muted small mb-1">Enter a number from 1 to 7, where 1 = very unclear and 7 = very clear.</p>
    <table class="mb-1" style="font-size:0.85rem; color:#6c757d;">
      <tr>
        <td>1</td><td>&nbsp;&nbsp;</td><td>2</td><td>&nbsp;&nbsp;</td><td>3</td><td>&nbsp;&nbsp;</td>
        <td>4</td><td>&nbsp;&nbsp;</td><td>5</td><td>&nbsp;&nbsp;</td><td>6</td><td>&nbsp;&nbsp;</td><td>7</td>
      </tr>
    </table>
    <input type="number" name="q_instruction_clarity" min="1" max="7"
           value="{{ val_clarity }}" class="form-control" style="max-width:100px;">
    {{ form.q_instruction_clarity.errors }}
  </div>

  {# Q7: Comments #}
  <div class="mb-4">
    <label><strong>7. Do you have any comments or feedback about the experiment?</strong> (optional)</label><br>
    <textarea name="q_comments" class="form-control" rows="3"
              placeholder="Any thoughts, confusion, or suggestions…">{{ val_comments }}</textarea>
  </div>

  {{ next_button }}

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {

  function updateStudentSections() {
    var val = null;
    document.querySelectorAll('input[name="q_is_student"]').forEach(function(r) { if (r.checked) val = r.value; });
    document.getElementById('student-section').style.display    = (val === '1') ? 'block' : 'none';
    document.getElementById('nonstudent-section').style.display = (val === '0') ? 'block' : 'none';
  }

  function updateGenderOther() {
    var val = null;
    document.querySelectorAll('input[name="q_gender"]').forEach(function(r) { if (r.checked) val = r.value; });
    document.getElementById('gender-other-section').style.display = (val === '3') ? 'block' : 'none';
  }

  document.querySelectorAll('input[name="q_is_student"]').forEach(function(r) { r.addEventListener('change', updateStudentSections); });
  document.querySelectorAll('input[name="q_gender"]').forEach(function(r)     { r.addEventListener('change', updateGenderOther); });

  updateStudentSections();
  updateGenderOther();
});
</script>

{{ endblock }}