{{ extends 'global/Page.html' }}
{{ block title }}Post-Experiment Survey{{ endblock }}

{{ block content }}

<p><b>Question 10</b></p>

{{ formfield 'school_choice_exp' }}

<div id="school-choice-desc" style="display: none;">
    <p><label for="id_school_choice_desc">Briefly share your experience with this process. (optional)</label></p>
    <textarea id="id_school_choice_desc" name="school_choice_desc" rows="4" style="width: 100%;"></textarea>
</div>

<script>
    function toggleDesc() {
        var selected = document.querySelector('input[name="school_choice_exp"]:checked');
        var box = document.getElementById('school-choice-desc');
        box.style.display = (selected && selected.value === 'True') ? 'block' : 'none';
    }
    document.querySelectorAll('input[name="school_choice_exp"]').forEach(function(el) {
        el.addEventListener('change', toggleDesc);
    });
</script>

<p></p>
{{ next_button }}

{{ endblock }}