{{ extends "global/Page.html" }}
{{ block content }}

<style>
     .otree-body {
        max-width:80%;
         margin-top: 0px;
    }
     .otree-title{ size: 0; height: 0; padding: 0; }

    .circle_green {
        border: 1px solid green; padding: 5px 5px; background: green;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_green_off {
        border: 2px solid green; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_red {
        border: 1px solid red; padding: 5px 5px; background: red;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_red_off {
        border: 2px solid red; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_blue {
        border: 1px solid blue; padding: 5px 5px; background: blue;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .circle_blue_off {
        border: 2px solid blue; padding: 5px 5px;
        border-radius: 100%; margin-left: auto; margin-right: auto; width: 1%;
    }
    .modebar { display: none !important; }

    /* ── Slide card ── */
    .instr-card {
        background: #fff;
        border: 2px solid #dee2e6;
        border-radius: 10px;
        padding: 22px 28px 14px;
        margin-bottom: 20px;
        min-height: 200px;
    }
    .slide-pane { display: none; }
    .slide-pane.active { display: block; }
    .slide-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #dee2e6;
        padding-top: 10px;
        margin-top: 18px;
    }
    .slide-btn {
        background: #0d6efd;
        color: #fff;
        border: none;
        border-radius: 6px;
        padding: 5px 20px;
        font-size: 15px;
        cursor: pointer;
    }
    .slide-btn:disabled { background: #adb5bd; cursor: default; }
    .slide-counter { font-weight: bold; color: #495057; font-size: 15px; }
</style>

<!-- ── SLIDE CARD ── -->
<div class="instr-card">

    <!-- SLIDE 1 -->
    <div class="slide-pane active" id="slide-1">
        <h3>Instructions: Part 1 of each task</h3>
        <ul>
            <li>In this experiment, you will complete <b>5 tasks</b>, each generated by a machine. In <b>Part 1</b> of each task, you will learn about observations <b>generated by the machine</b>. In <b>Part 2</b>, you will make predictions.</li>
        </ul>
        <ul>
            <li><b>Each machine generates 27 observations. Each observation is independent of the other rows.</b> For each observation (see Example below):
                <ul>
                    <li>You can see if the <span style="color:red;">red</span> light is on or off;</li>
                    <li>You can see if the <span style="color:blue;">blue</span> light is on or off;</li>
                    <li>You cannot observe other lights, which could be on or off;</li>
                    <li>The machine either makes a sound or does not make a sound.</li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- SLIDE 2 -->
    <div class="slide-pane" id="slide-2">
        <h3>Prediction Rules</h3>
        <ul>
            <li>The lights and sounds may or may not be related. Even if a pattern exists, <b>the same observable light configuration may not always produce the same sound</b>, as unobservable lights may also affect the sound.</li>
            <span style="display:block; height:6px;"></span>
            <li>Even if a pattern exists, <b>not all the observable lights are necessarily informative about the sound</b>.</li>
        </ul>
        <b>In the example below</b>, for instance, there is a relationship based only on the blue light, with the sound occurring 4 out of 5 times when the blue light is on.
    </div>

    <!-- SLIDE 3 -->
    <div class="slide-pane" id="slide-3">
        <h3>Your Objective</h3>
        <ul>
            <li><b>Your task in Part 1</b> is to learn the relationship (if one exists) between the observable lights and the sound to make predictions about the sound in Part 2.</li>
            <span style="display:block; height:6px;"></span>
            <li>You have a maximum of <b>{{ C.MACHINE_TIMEOUT_MINUTES }} minutes</b> to observe data and take notes before making predictions. <!-- This is just to ensure the smooth operation of the experiment, the time is more than enough to learn the machine. --> Keep in mind that the time only includes the learning phase, not the predictions that you will make in Part 2.</li>
            <span style="display:block; height:6px;"></span>
            <li>In Part 2, you will not have access to the data, but you will be able to access your notes. Notes have a <b>maximum length of 75 characters</b>. <!-- Although you may take notes, this is not a memory task, as predictions are made immediately after learning. --> Only predictions count for payoffs: not your notes or the time you take to complete the task.</li>
            <span style="display:block; height:6px;"></span>
            <li><b>Your task in Part 2</b> is to use your notes to make predictions about the sound.</li>
        </ul>
        <h3>Try out the Notes!</h3>
        <p><b>Write about the relationship involving the blue light and use the notes to try them out!</b> This example is for your understanding only and does not count for payoffs.</p>
    </div>

    <!-- SLIDE 4 – Part 2 try it out -->
    <div class="slide-pane" id="slide-4">
        <h3>Try out the Prediction Interface!</h3>
        <ul>
            <li><b>In Part 2</b> you will face <b>12 prediction trials</b> with varying light configurations, and in each trial, <b>your goal is to predict the corresponding sound</b>.</li>
            <li>Below you are given an <b>example</b> of 1 prediction trial related to the previous example. Remember that this example is for your understanding only and does not count for payoffs.</li>
        </ul>
    </div>

    <!-- SLIDE 5 – Payment -->
    <div class="slide-pane" id="slide-5">
        <h3>Payment</h3>
        <ul>
            <li>You will face <b>5 tasks</b>, each generated by a machine. <b>For payment, one machine and one of your predictions for that machine will be randomly selected.</b></li>
            <li>If your prediction is correct, <b>{{ C.CURRENCY }}{{ C.PAYMENT_PER_CORRECT_DISPLAY }}</b> will be added to your earnings.</li>
            <li>Below you can see how the payment would have worked for the example. <b>Remember that this example is for your understanding only and does not count for payoffs.</b></li>
        </ul>
    </div>

    <!-- NAVIGATION -->
    <div class="slide-nav">
        <button type="button" class="slide-btn" id="btn-prev" onclick="changeSlide(-1)" disabled>&#8592; Back</button>
        <span class="slide-counter" id="slide-counter">1 / 5</span>
        <button type="button" class="slide-btn" id="btn-next" onclick="changeSlide(1)">Next &#8594;</button>
    </div>
</div>

<!-- ── ALWAYS VISIBLE: EXAMPLE DATASET + NOTES ── -->
<div id="part1-example">
<hr style="margin: 20px 0;">
<h3 style="margin-bottom: 10px;">Example Machine</h3>
<p>This is an example with <b>7 observations</b>. The machines in the experiment will have around <b>27 observations</b>.</p>

<table style="width: 90%; border-collapse: collapse;">
    <tr>
        <td style="width: 30%; vertical-align: top; padding-right: 20px;">
            <p id="notes-hint" style="font-size:13px; color:#888; font-style:italic; margin-bottom:4px;">Notes will be enabled on slide 3.</p>
            {{ formfield 'Example_notes' }}
            <script>
                for (let ele of document.getElementsByTagName('textarea')) {
                    if (!ele.name) continue;
                    ele.rows = 6;
                    ele.maxLength = 75;
                    ele.setAttribute('readonly', 'readonly');
                    ele.style.backgroundColor = '#e9ecef';
                    ele.style.cursor = 'not-allowed';
                }
            </script>
        </td>
        <td style="width: 70%; vertical-align: top; padding: 0; overflow-y: auto;">
            {{ table }}
        </td>
    </tr>
</table>

</div>

<div id="part2-guess" style="display: none;">
<hr style="margin: 20px 0;">
<h3 style="margin-bottom: 10px;">Example Machine</h3>
<table style="width: 90%; border-collapse: collapse;">
    <tr>
        <td style="width: 30%; vertical-align: top; padding-right: 20px;">
            <h4>Your notes:</h4>
            <textarea id="slide5-notes" class="form-control" readonly rows="6" style="resize: none; width: 100%;"></textarea>
        </td>
        <td style="width: 70%; vertical-align: top; padding: 0;">
            <table style="width: 100%; border: 0; border-collapse: collapse;">
                <tr>
                    <td style="padding-right: 20px;">{{ table_cont }}</td>
                    <td style="width: 20%; vertical-align: top;">
                        <table>
                            <tr><th>Guess the Sound</th></tr>
                            <tr><td>{{ formfield 'guess_example' }}</td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</div>

<script id="obs-data"   type="application/json">{{ obs_list_json }}</script>
<script id="pred-data"  type="application/json">{{ pred_obs_lights_json }}</script>
<script id="color-data" type="application/json">{{ original_color }}</script>

<div id="payment-sim" style="display: none;">
<hr style="margin: 20px 0;">
<h3 style="margin-bottom: 10px;">Payment Simulation</h3>
<p>Based on your guess in the example above:</p>
<table style="border-collapse: collapse; min-width: 400px;">
    <tr style="background: #f8f9fa;">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Randomly selected task</b></td>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;">Example Machine</td>
    </tr>
    <tr>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Randomly selected observation</b></td>
        <td id="ps-drawn-obs" style="padding: 8px 16px; border: 1px solid #dee2e6;">—</td>
    </tr>
    <tr style="background: #f8f9fa;">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Your prediction</b></td>
        <td id="ps-your-guess" style="padding: 8px 16px; border: 1px solid #dee2e6;">—</td>
    </tr>
    <tr>
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Correct answer</b></td>
        <td id="ps-correct" style="padding: 8px 16px; border: 1px solid #dee2e6;">—</td>
    </tr>
    <tr id="ps-earnings-row">
        <td style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>Earnings added</b></td>
        <td id="ps-earnings" style="padding: 8px 16px; border: 1px solid #dee2e6;"><b>—</b></td>
    </tr>
</table>
</div>

<div id="next-page-div" style="margin-top: 20px; text-align: right; display: none;">
    {{ next_button }}
</div>

<script>
    var currentSlide = 1;
    var totalSlides = 5;

    function changeSlide(dir) {
        if (dir > 0) {
            if (currentSlide === 3) {
                var ta = document.querySelector('textarea[name]');
                if (!ta.value.trim()) {
                    alert('Please write something in the notes before continuing.');
                    return;
                }
            }
            if (currentSlide === 4) {
                var gSel = document.querySelector('select[name="guess_example"]');
                var gChk = document.querySelector('input[name="guess_example"]:checked');
                var guestMade = (gSel && gSel.value !== '') || gChk;
                if (!guestMade) {
                    alert('Please make a guess before continuing.');
                    return;
                }
            }
        }

        document.getElementById('slide-' + currentSlide).classList.remove('active');
        currentSlide += dir;
        document.getElementById('slide-' + currentSlide).classList.add('active');
        document.getElementById('btn-prev').disabled = currentSlide === 1;
        document.getElementById('btn-next').disabled = currentSlide === totalSlides;
        document.getElementById('slide-counter').textContent = currentSlide + ' / ' + totalSlides;

        var ta = document.querySelector('textarea[name]');
        var hint = document.getElementById('notes-hint');
        if (currentSlide === 3) {
            ta.removeAttribute('readonly');
            ta.setAttribute('required', 'required');
            ta.style.backgroundColor = '';
            ta.style.cursor = 'text';
            hint.textContent = 'You can now write your notes!';
            hint.style.color = '#198754';
        } else {
            ta.setAttribute('readonly', 'readonly');
            ta.removeAttribute('required');
            ta.style.backgroundColor = '#e9ecef';
            ta.style.cursor = 'not-allowed';
            hint.textContent = 'Notes will be enabled on slide 3.';
            hint.style.color = '#888';
        }

        if (currentSlide === 4) {
            document.getElementById('slide5-notes').value = ta.value;
            document.getElementById('part1-example').style.display = 'none';
            document.getElementById('part2-guess').style.display = 'block';
            document.getElementById('payment-sim').style.display = 'none';
        } else if (currentSlide === totalSlides) {
            // Read subject's guess
            var gSel = document.querySelector('select[name="guess_example"]');
            var gChk = document.querySelector('input[name="guess_example"]:checked');
            var guessVal = gSel ? gSel.value : (gChk ? gChk.value : '');
            var guessText = guessVal === '1' ? 'Ding' : (guessVal === '0' ? 'No Ding' : '—');
            // Draw a random observation matching prediction lights from example machine
            var obsList = JSON.parse(document.getElementById('obs-data').textContent);
            var predObs = JSON.parse(document.getElementById('pred-data').textContent);
            var matching = obsList.filter(function(o) {
                return JSON.stringify(o[0]) === JSON.stringify(predObs);
            });
            var pool = matching.length > 0 ? matching : obsList;
            var drawn = pool[Math.floor(Math.random() * pool.length)];
            var drawnZ = drawn[1];
            var correctText = drawnZ === 1 ? 'Ding' : 'No Ding';
            var isCorrect = guessVal !== '' && String(drawnZ) === guessVal;
            // Render lights of drawn observation
            var origColor = JSON.parse(document.getElementById('color-data').textContent);
            var colorOrder = origColor === 1 ? ['red', 'blue', 'green'] : ['blue', 'red', 'green'];
            var lightsHtml = '<span style="display:inline-flex;gap:8px;align-items:center;">';
            for (var li = 0; li < drawn[0].length; li++) {
                var cls = drawn[0][li] === 1 ? 'circle_' + colorOrder[li] : 'circle_' + colorOrder[li] + '_off';
                lightsHtml += '<div class="' + cls + '"></div>';
            }
            lightsHtml += '</span>';
            document.getElementById('ps-drawn-obs').innerHTML = lightsHtml + '&nbsp;&nbsp;Sound: <b>' + correctText + '</b>';
            document.getElementById('ps-your-guess').textContent = guessText;
            document.getElementById('ps-correct').textContent = correctText + (isCorrect ? ' ✓' : ' ✗');
            document.getElementById('ps-correct').style.color = isCorrect ? '#198754' : '#dc3545';
            document.getElementById('ps-earnings-row').style.background = isCorrect ? '#d4edda' : '#f8d7da';
            document.getElementById('ps-earnings').innerHTML = isCorrect ? '<b>+{{ C.CURRENCY }}{{ C.PAYMENT_PER_CORRECT_DISPLAY }}</b>' : '<b>+{{ C.CURRENCY }}0.00</b>';
            document.getElementById('part1-example').style.display = 'none';
            document.getElementById('part2-guess').style.display = 'none';
            document.getElementById('payment-sim').style.display = 'block';
        } else {
            document.getElementById('part1-example').style.display = 'block';
            document.getElementById('part2-guess').style.display = 'none';
            document.getElementById('payment-sim').style.display = 'none';
        }

        document.getElementById('next-page-div').style.display = (currentSlide === totalSlides) ? 'block' : 'none';
    }

    document.querySelector('form').addEventListener('submit', function(e) {
        var gSel2 = document.querySelector('select[name="guess_example"]');
        var gChk2 = document.querySelector('input[name="guess_example"]:checked');
        var guessSelected = (gSel2 && gSel2.value !== '') || gChk2;
        if (!guessSelected) {
            e.preventDefault();
            alert('Please make a guess on slide 5 before continuing.');
            document.getElementById('slide-' + currentSlide).classList.remove('active');
            currentSlide = 4;
            document.getElementById('slide-4').classList.add('active');
            document.getElementById('btn-prev').disabled = false;
            document.getElementById('btn-next').disabled = false;
            document.getElementById('slide-counter').textContent = '4 / 5';
            document.getElementById('part1-example').style.display = 'none';
            document.getElementById('part2-guess').style.display = 'block';
            document.getElementById('payment-sim').style.display = 'none';
        }
    });
</script>

{{endblock}}