{{ extends 'global/Page.html' }}
{{ block title }}Questionnaire{{ endblock }}

{{ block content }}

<style>
    body { background-color: #f4f6f8 !important; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    .page-header { display: none !important; }
    
    .survey-container { max-width: 900px; margin: 40px auto; background-color: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .survey-title { font-size: 1.8rem; text-align: center; margin-bottom: 10px; font-weight: bold; color: #2c3e50; }
    .survey-desc { text-align: center; color: #666666; font-size: 1.1rem; margin-bottom: 30px; }
    
    .section-title { font-size: 1.3rem; font-weight: bold; color: #007bff; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-top: 40px; margin-bottom: 20px; }
    
    .likert-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
    .likert-table th, .likert-table td { padding: 15px 10px; text-align: center; border-bottom: 1px solid #eeeeee; vertical-align: middle; }
    .likert-table th { background-color: #f8f9fa; font-weight: bold; color: #444; font-size: 0.95rem; }
    .likert-table .question-text { text-align: left; font-size: 1.05rem; font-weight: 500; color: #333; width: 45%; }
    
    .radio-cell input[type="radio"] { transform: scale(1.3); cursor: pointer; accent-color: #007bff; }
    .radio-cell:hover { background-color: #f1f7fd; }
    
    .form-group { margin-bottom: 25px; }
    .form-label { font-weight: bold; font-size: 1.05rem; display: block; margin-bottom: 10px; color: #333; }
    .radio-option { display: block; margin-bottom: 8px; font-size: 1.05rem; cursor: pointer; }
    .radio-option input[type="radio"] { transform: scale(1.2); margin-right: 10px; cursor: pointer; accent-color: #007bff; }
    .form-control { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; font-family: inherit; }
    textarea.form-control { resize: vertical; min-height: 80px; }
    
    .btn-submit { background: #007bff; color: #ffffff; border: none; padding: 15px 40px; font-size: 1.2rem; font-weight: bold; cursor: pointer; border-radius: 4px; transition: background 0.2s; width: 100%; }
    .btn-submit:hover { background: #0056b3; }

    .belief-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
        margin-bottom: 10px;
    }
    .belief-card {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 16px;
        text-align: center;
    }
    .belief-card-title {
        font-weight: bold;
        font-size: 1.05rem;
        margin-bottom: 10px;
        color: #2c3e50;
    }
    .belief-select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1.05rem;
        font-family: inherit;
        background: #fff;
        color: #333;
        cursor: pointer;
        appearance: auto;
    }
    .belief-note {
        color: #888;
        font-size: 0.85rem;
        margin-top: 15px;
        font-style: italic;
    }
</style>

<div class="survey-container">
    <div class="survey-title">Final Questionnaire</div>
    <div class="survey-desc">
        Thank you for completing the tasks. Please answer the following questions about the task you have just completed.
    </div>

    <!-- ═══ PART 1: TASK EVALUATION ═══ -->
    <div class="section-title">Part 1: Task Evaluation</div>
    <div style="text-align: center; margin-bottom: 15px; font-weight: bold;">( 1 = Strongly Disagree &nbsp;&nbsp;|&nbsp;&nbsp; 7 = Strongly Agree )</div>
    <table class="likert-table">
        <thead>
            <tr>
                <th>Statements</th>
                <th>1<br><small>Strongly<br>Disagree</small></th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7<br><small>Strongly<br>Agree</small></th>
            </tr>
        </thead>
        <tbody>
            <tr><td class="question-text">1. I understood the rules of this task.</td>
                <td class="radio-cell"><input type="radio" name="p2_q1_rules" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q1_rules" value="7"></td></tr>
            <tr><td class="question-text">2. I understood how points in this task translated into lottery tickets.</td>
                <td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q2_tickets" value="7"></td></tr>
            <tr><td class="question-text">3. I found this task engaging.</td>
                <td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q4_engaging" value="7"></td></tr>
            <tr><td class="question-text">4. I was able to stay focused during this task.</td>
                <td class="radio-cell"><input type="radio" name="p2_q6_focused" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q6_focused" value="7"></td></tr>
            <tr><td class="question-text">5. This task felt repetitive.</td>
                <td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q7_repetitive" value="7"></td></tr>
            <tr><td class="question-text">6. I actively tried to identify which option performed best.</td>
                <td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="1" required></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="2"></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="3"></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="4"></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="5"></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="6"></td><td class="radio-cell"><input type="radio" name="p2_q9_identify_best" value="7"></td></tr>
        </tbody>
    </table>

    <!-- ═══ PART 2: BELIEF ELICITATION ═══ -->
    <div class="section-title">Part 2: Your Beliefs About the Options</div>
    <p style="margin-bottom: 20px; color: #444; font-size: 1.05rem;">
        Based on your experience in the <strong>most recent task</strong>, what do you think was the
        probability of receiving a reward from each option? Please select your best estimate for each.
    </p>

    <div class="belief-grid">
        <div class="belief-card">
            <div class="belief-card-title">Option A</div>
            <select name="p2_belief_alpha" class="belief-select" required>
                <option value="" disabled selected>Select...</option>
                <option value="0">0%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
            </select>
        </div>
        <div class="belief-card">
            <div class="belief-card-title">Option B</div>
            <select name="p2_belief_beta" class="belief-select" required>
                <option value="" disabled selected>Select...</option>
                <option value="0">0%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
            </select>
        </div>
        <div class="belief-card">
            <div class="belief-card-title">Option C</div>
            <select name="p2_belief_gamma" class="belief-select" required>
                <option value="" disabled selected>Select...</option>
                <option value="0">0%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
            </select>
        </div>
    </div>
    <p class="belief-note">
        There are no right or wrong answers — we are interested in your impression based on your experience.
    </p>

    <!-- ═══ PART 3: BACKGROUND ═══ -->
    <div class="section-title">Part 3: Background & Experience</div>

    <div class="form-group">
        <label class="form-label">How often do you play video games?</label>
        <label class="radio-option"><input type="radio" name="video_game_freq" value="Never" required> Never</label>
        <label class="radio-option"><input type="radio" name="video_game_freq" value="Less than once a month"> Less than once a month</label>
        <label class="radio-option"><input type="radio" name="video_game_freq" value="1–3 times a month"> 1–3 times a month</label>
        <label class="radio-option"><input type="radio" name="video_game_freq" value="1–2 times a week"> 1–2 times a week</label>
        <label class="radio-option"><input type="radio" name="video_game_freq" value="3 or more times a week"> 3 or more times a week</label>
    </div>

    <!-- ═══ PART 4: DEMOGRAPHICS ═══ -->
    <div class="section-title">Part 4: Demographics</div>

    <div class="form-group" style="display: flex; gap: 20px;">
        <div style="flex: 1;">
            <label class="form-label">Age</label>
            <input type="number" name="age" class="form-control" min="16" max="99" placeholder="e.g. 22" required>
        </div>
        <div style="flex: 1;">
            <label class="form-label">Gender</label>
            <select name="gender" class="form-control" required>
                <option value="" disabled selected>Select...</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Diverse">Diverse / Other</option>
                <option value="Prefer not to say">Prefer not to say</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="form-label">Current level of study</label>
        <label class="radio-option"><input type="radio" name="study_level" value="Bachelor" required> Bachelor</label>
        <label class="radio-option"><input type="radio" name="study_level" value="Master"> Master</label>
        <label class="radio-option"><input type="radio" name="study_level" value="PhD"> PhD</label>
        <label class="radio-option"><input type="radio" name="study_level" value="Other"> Other</label>
    </div>

    <div class="form-group">
        <label class="form-label">Field of study (Optional)</label>
        <input type="text" name="field_of_study" class="form-control" placeholder="e.g. Economics, Computer Science...">
    </div>

    <div class="form-group">
        <label class="form-label">Approximately how much money do you have available to spend per month (after rent and fixed costs)?</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="Less than 500" required> Less than €500</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="500-800"> €500 – €800</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="800-1200"> €800 – €1,200</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="1200-1600"> €1,200 – €1,600</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="1600-2000"> €1,600 – €2,000</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="More than 2000"> More than €2,000</label>
        <label class="radio-option"><input type="radio" name="monthly_budget" value="Prefer not to say"> Prefer not to say</label>
    </div>

    <div class="form-group">
        <label class="form-label">Have you taken coursework in probability, statistics or economics?</label>
        <label class="radio-option"><input type="radio" name="coursework" value="Yes" required> Yes</label>
        <label class="radio-option"><input type="radio" name="coursework" value="No"> No</label>
    </div>

    <div class="form-group">
        <label class="form-label">Have you taken part in an economic experiment before?</label>
        <label class="radio-option"><input type="radio" name="prev_econ_exp" value="Yes" required> Yes</label>
        <label class="radio-option"><input type="radio" name="prev_econ_exp" value="No"> No</label>
    </div>

    <div class="form-group">
        <label class="form-label">Did you encounter any technical issues? (Optional)</label>
        <textarea name="tech_issues" class="form-control" placeholder="e.g. lag, display problems, buttons not responding..."></textarea>
    </div>

    <div class="form-group">
        <label class="form-label">Any other comments or feedback? (Optional)</label>
        <textarea name="comments" class="form-control" placeholder="Anything you'd like to share about your experience..."></textarea>
    </div>

    <div style="text-align: center; margin-top: 40px;">
        <button type="submit" class="otree-btn-next btn-submit">CONTINUE</button>
    </div>
</div>

{{ endblock }}