{% block title %}
    Pre-Experiment Survey
{% endblock %}

{% block content %}

<p>
    <strong>Before the actual experiment day</strong>, you are required to complete two short surveys:
    a <em>Sociodemographic Survey</em> and a <em>Music Taste Survey</em>.
    These surveys will help tailor the experiment to you and ensure we gather relevant data.
    Please read and answer the questions carefully.
</p>

<hr>

<h3>2. Sociodemographic Survey</h3>

<h4>Basic Demographics</h4>
<p><strong>1.</strong> {{ formfield 'q1_age' }}</p>
<p><strong>2.</strong> {{ formfield 'q2_gender' }}</p>
<p><strong>3.</strong> {{ formfield 'q3_nationality' }}</p>

<h4>Educational / Professional Background</h4>
<p><strong>4.</strong> {{ formfield 'q4_status' }}</p>
<p><strong>5.</strong> {{ formfield 'q5_degree' }}</p>
<p><strong>6.</strong> {{ formfield 'q6_field_of_study' }}</p>

<h4>Familiarity with Tasks</h4>
<p><strong>7.</strong> {{ formfield 'q7_prior_decision_experiment' }}</p>
<p><strong>8.</strong> {{ formfield 'q8_fin_task_familiarity' }}</p>

<h4>Numerical Task Experience</h4>
<p><strong>9.</strong> {{ formfield 'q9_arithmetic_comfort' }}</p>

<h4>Financial Experience</h4>
<p><strong>10.</strong> {{ formfield 'q10_investing_experience' }}</p>
<p><strong>11.</strong> {{ formfield 'q11_overdrawn_frequency' }}</p>
<p><strong>12.</strong> {{ formfield 'q12_gambling_experience' }}</p>

<hr>

<h3>3. Music Personalization Survey</h3>

<h4>Music Listening Habits</h4>
<p><strong>13.</strong> {{ formfield 'q13_music_frequency' }}</p>

<p id="never_notice" style="display:none; color:#555; font-style:italic;">
    Please answer the rest of the questions as if you had to choose,
    even if you normally do not listen to music while concentrating on
    cognitive or analytical tasks.
</p>


<p><strong>14.</strong> {{ formfield 'q14_lyrics' }}</p>

<p><strong>15.</strong> What type of music do you usually prefer while concentrating on cognitive or analytical tasks?
    <br><em>(Select all that apply)</em>
</p>
<ul>
    <li>{{ formfield 'q15_classical' }}</li>
    <li>{{ formfield 'q15_lofi' }}</li>
    <li>{{ formfield 'q15_ambient' }}</li>
    <li>{{ formfield 'q15_soundtrack' }}</li>
    <li>{{ formfield 'q15_pop' }}</li>
    <li>{{ formfield 'q15_rock' }}</li>
    <li>{{ formfield 'q15_electronic' }}</li>
    <li>{{ formfield 'q15_jazz' }}</li>
    <li>{{ formfield 'q15_other' }}</li>
</ul>

<p><strong>16.</strong> {{ formfield 'q16_music_effect' }}</p>
<p><strong>17.</strong> {{ formfield 'q17_tempo' }}</p>

<p><strong>18.</strong> Preferred instruments while concentrating on cognitive or analytical tasks:
    <br><em>(Select all that apply)</em>
</p>
<ul>
    <li>{{ formfield 'q18_piano' }}</li>
    <li>{{ formfield 'q18_guitar' }}</li>
    <li>{{ formfield 'q18_strings' }}</li>
    <li>{{ formfield 'q18_synth' }}</li>
    <li>{{ formfield 'q18_drums' }}</li>
    <li>{{ formfield 'q18_wind' }}</li>
    <li>{{ formfield 'q18_voice' }}</li>
    <li>{{ formfield 'q18_other' }}</li>
</ul>


<hr>



<h3>Please enter your email address below.</h3>
<p>
    We need your email to send you your personal lab code, which you will use to participate in the experiment on the lab day.
</p>

<p><strong>20.</strong> {{ formfield 'email' }}</p>


<hr>


{{ next_button }}

<script>
    function toggleNeverNotice() {
        const radios = document.querySelectorAll(
            'input[name="q13_music_frequency"]'
        );
        let show = false;

        radios.forEach(r => {
            if (r.checked) {
                const labelText = r.parentElement.textContent.trim().toLowerCase();
                if (labelText.includes("never")) {
                    show = true;
                }
            }
        });

        document.getElementById("never_notice").style.display = show ? "block" : "none";
    }

    document.querySelectorAll(
        'input[name="q13_music_frequency"]'
    ).forEach(r => {
        r.addEventListener("change", toggleNeverNotice);
    });

    toggleNeverNotice();
</script>



{% endblock %}