{{ block title }}Post-Quiz Questions{{ endblock }}
{{ block content }}
<style>
    label[for="id_PEQ3_Gender_Text"] {
        display: none;
    }

    input.form-control {
        max-width: fit-content;
    }

    #gender_text_container {
        display: none;
    }
</style>


{{ formfield 'PEQ3_Gender' }}
{{ formfield 'PEQ3_Age' }}
{{ formfield 'PEQ3_Degree' }}

{{ next_button }}
<div id="gender_text_container">
    {{ formfield 'PEQ3_Gender_Text' }}
</div>
<script>
    $(function () {
        $('input[type=radio]').click(function () {
            let id = this.id;

            if (id === 'id_PEQ3_Gender-2') {
                $("label[for=\"id_PEQ3_Gender-2\"]").append($("#gender_text_container"));
                document.getElementById('id_PEQ3_Gender_Text').value = "";
                $("#gender_text_container").show()
            } else if (id === 'id_PEQ3_Gender-5') {
                $("label[for=\"id_PEQ3_Gender-5\"]").append($("#gender_text_container"));
                document.getElementById('id_PEQ3_Gender_Text').value = "";
                $("#gender_text_container").show()
            } else {
                $("#gender_text_container").hide()
                document.getElementById('id_PEQ3_Gender_Text').value = "NotEnteredByParticipant";
            }
        });
    });
</script>
{{ endblock }}