{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Part 5{% endblock %}

{% block content %}
<style>
    .instruction-container {
        max-width: 800px;
        margin: auto;
        font-size: 16px;
        line-height: 1.5;
    }
    .button-container { text-align: center; margin-top: 30px; }
    .next-button {
        background-color: #007bff; color: white; border: none;
        padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer;
    }
    .next-button:hover { background-color: #0056b3; }

    .scale-wrap{ max-width:680px; margin:8px auto 16px; }
.likert-anchors{
  display:flex; justify-content:space-between; font-weight:600; margin-bottom:6px;
}

/* 让 0–6 的单选横向铺开（兼容 oTree 不同模板结构） */
.scale-wrap .controls,
.scale-wrap .form-check-group,
.scale-wrap .form-check-list,
.scale-wrap .radio-group{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:nowrap;
}
.scale-wrap label{ margin:0; text-align:center; }


</style>

<div class="instruction-container">
    <h2 style="text-align: center;">Task 2</h2>
</div>

<p>
To What extent are you experiencing the emotion of "fear" at the moment?
</p>

{# 只有一个题目时，用 formfield 渲染最简洁 #}
<!-- 放在问题文本下面，替代你原来的 {{ formfield 'fear_level' }} 那一行 -->
<div class="scale-wrap">
  <div class="likert-anchors">
    <span>Not at all</span>
    <span>A lot</span>
  </div>
  {{ formfield 'fear_level' label='' }}

</div>



<div class="button-container">
    <button type="submit" class="next-button">Next</button>
</div>
{% endblock %}

{% block scripts %}
<script>
  // 前端也设为必答（双保险）
  for (let option of document.querySelectorAll('input[type=radio]')) {
      option.required = 'required';
  }
</script>
{% endblock %}