{{ 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, .otree-btn-next { 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; }
    
    .btn-submit { background: #007bff; color: #ffffff; border: none; padding: 12px 40px; font-size: 1.2rem; font-weight: bold; cursor: pointer; border-radius: 4px; transition: background 0.2s; }
    .btn-submit:hover { background: #0056b3; }

    .hidden { display: none !important; }

    .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;
    }

    .transition-container { max-width: 700px; margin: 80px auto; background-color: #ffffff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-align: center; }
    .transition-icon { font-size: 3rem; margin-bottom: 20px; }
    .transition-title { font-size: 1.6rem; font-weight: bold; color: #2c3e50; margin-bottom: 25px; }
    .transition-info { background-color: #e8f4f8; border-left: 5px solid #17a2b8; padding: 20px; border-radius: 4px; text-align: left; font-size: 1.1rem; line-height: 1.7; color: #333; margin-bottom: 30px; }
    .btn-continue { 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; }
    .btn-continue:hover { background: #0056b3; }
</style>

<div id="survey-section" class="survey-container">
    <div class="survey-title">Task Evaluation</div>
    <div class="survey-desc">
        Please indicate your level of agreement with the following statements.<br>
        <strong>( 1 = Strongly Disagree &nbsp;&nbsp;|&nbsp;&nbsp; 7 = Strongly Agree )</strong>
    </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="q1_rules" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q1_rules" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q1_rules" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q1_rules" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q1_rules" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q1_rules" value="6"></td>
                <td class="radio-cell"><input type="radio" name="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="q2_tickets" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q2_tickets" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q2_tickets" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q2_tickets" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q2_tickets" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q2_tickets" value="6"></td>
                <td class="radio-cell"><input type="radio" name="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="q4_engaging" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q4_engaging" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q4_engaging" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q4_engaging" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q4_engaging" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q4_engaging" value="6"></td>
                <td class="radio-cell"><input type="radio" name="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="q6_focused" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q6_focused" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q6_focused" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q6_focused" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q6_focused" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q6_focused" value="6"></td>
                <td class="radio-cell"><input type="radio" name="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="q7_repetitive" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q7_repetitive" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q7_repetitive" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q7_repetitive" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q7_repetitive" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q7_repetitive" value="6"></td>
                <td class="radio-cell"><input type="radio" name="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="q9_identify_best" value="1" required></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="2"></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="3"></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="4"></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="5"></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="6"></td>
                <td class="radio-cell"><input type="radio" name="q9_identify_best" value="7"></td>
            </tr>
        </tbody>
    </table>

    <div class="section-title">Your Beliefs About the Options</div>
    <p style="margin-bottom: 20px; color: #444; font-size: 1.05rem;">
        Based on your experience in the task you just completed, what do you think was the
        probability of receiving a reward from each option? Please enter a number between 0 and 100 for each.
    </p>

    <div class="belief-grid">
        <div class="belief-card">
            <div class="belief-card-title">Option A</div>
            <select name="p1_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="p1_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="p1_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>

    <div style="text-align: center; margin-top: 30px;">
        <button type="button" class="btn-submit" onclick="showTransition()">Next</button>
    </div>
</div>


<div id="transition-section" class="transition-container hidden">
    <div class="transition-icon">📋</div>
    <div class="transition-title">Before You Continue</div>
    <div class="transition-info">
        As you move to the next task, the point total displayed on your screen will reset to 0. This is because the next task has a <strong>separate €5 prize draw</strong>.<br><br>
        Your lottery tickets from the previous task are safely stored. You will receive new instructions before the next task begins.
    </div>
    <button type="submit" class="otree-btn-next btn-continue" style="display: inline-block !important;">Continue to Next Task</button>
</div>


<script>
    function showTransition() {
        var names = ['q1_rules', 'q2_tickets', 'q4_engaging', 'q6_focused', 'q7_repetitive', 'q9_identify_best'];
        for (var i = 0; i < names.length; i++) {
            if (!document.querySelector('input[name="' + names[i] + '"]:checked')) {
                alert("Please answer all questions before continuing.");
                return;
            }
        }
        /* Validate belief selects */
        var beliefs = ['p1_belief_alpha', 'p1_belief_beta', 'p1_belief_gamma'];
        for (var i = 0; i < beliefs.length; i++) {
            var sel = document.querySelector('select[name="' + beliefs[i] + '"]');
            if (!sel || sel.value === '') {
                alert("Please select a probability estimate for each option.");
                return;
            }
        }
        document.getElementById('survey-section').classList.add('hidden');
        document.getElementById('transition-section').classList.remove('hidden');
        window.scrollTo(0, 0);
    }
</script>

{{ endblock }}