{{ block title }}{{ endblock }}
{{ block content }}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<p>You will be presented with 6 {{ if not incentivized }}hypothetical {{ endif }}scenarios. Each scenario involves a different person.{{ if incentivized }} <strong>To preserve their anonymity, we always call them "John"—but it is a different person each time.</strong>{{ endif }}</p>
{{ if incentivized }}
<div class="alert alert-warning">
    <p><strong>⚠️ Important:</strong> Your choices in this study can have real consequences.
    We will randomly choose one participant whose choices can be actually implemented.
    </p>
    <p>
    Please answer honestly and carefully, as your decisions may directly affect a real person.
    </p>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="confirmIncentivized">
    <label class="form-check-label" for="confirmIncentivized">
        <strong>I understand that my choices may be actually implemented for a real person.</strong>
    </label>
</div>
{{ else }}
<div class="alert alert-warning">
    <p><strong>⚠️ Important:</strong> All choices in this study are <strong>hypothetical</strong>.
    None of the decisions you make will actually be implemented, even though the instructions may be written as if they will be.
    </p>
    <p>
    Please still answer honestly and carefully, as your responses are valuable for our research.
    </p>
</div>
<div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="confirmHypothetical">
    <label class="form-check-label" for="confirmHypothetical">
        <strong>I understand that all choices are hypothetical and will not be implemented.</strong>
    </label>
</div>
{{ endif }}
<div class="text-end"><button class="btn btn-primary btn-large otree-btn-next" id="nextBtn">Next</button></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var nextBtn = document.getElementById("nextBtn");
        {{ if incentivized }}
        var checkbox = document.getElementById("confirmIncentivized");
        {{ else }}
        var checkbox = document.getElementById("confirmHypothetical");
        {{ endif }}
        nextBtn.disabled = true;
        checkbox.addEventListener("change", function() {
            nextBtn.disabled = !this.checked;
        });
    });
</script>
{{ endblock }}