{{ block title }}Lottery Task Instructions{{ endblock }}

{{ block content }}
<div class="exp-card">

    {{ risk_instructions_html|safe }}

    <h3>Example</h3>
    <p>Below is an example of how a situation looks. The numbers in the actual task may be
    different.</p>

    <div style="display:flex; gap:20px; margin:20px 0; justify-content:center;">
        <div style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                    padding:20px; text-align:center;">
            <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                        color:#6b7280; margin-bottom:8px;">Option A</div>
            <svg id="ex-left-viz" width="100%" viewBox="-100 -100 200 200"
                 style="display:block; margin:8px auto 0; max-width:200px;"></svg>
            <div id="ex-left-viz-prob" style="text-align:center; font-size:1rem;
                 color:#1e2228; margin-top:6px;"></div>
        </div>
        <div style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                    padding:20px; text-align:center;">
            <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                        color:#6b7280; margin-bottom:8px;">Option B</div>
            <svg id="ex-right-viz" width="100%" viewBox="-100 -100 200 200"
                 style="display:block; margin:8px auto 0; max-width:200px;"></svg>
            <div id="ex-right-viz-prob" style="text-align:center; font-size:1rem;
                 color:#1e2228; margin-top:6px;"></div>
        </div>
    </div>

    <p style="color:#6b7280; font-size:.9rem;">
        In Option A, there is a 100% probability of receiving 10 MU. In Option B, there is a
        50% probability of receiving 11 MU and a 50% probability of receiving 9 MU.
    </p>

</div>

<div style="display:flex; justify-content:flex-end; margin-top:24px;">
    {{ next_button }}
</div>

<script>
// Option A: certain 10 MU. Option B: 50/50 between 11 and 9 MU.
const EX_LEFT  = { left_outcome: 10, right_outcome: 10, probability_left: 1.0 };
const EX_RIGHT = { left_outcome: 11, right_outcome: 9,  probability_left: 0.5 };

window.addEventListener('DOMContentLoaded', function() {
    drawRiskWheel('ex-left-viz',  EX_LEFT);
    drawRiskWheel('ex-right-viz', EX_RIGHT);
});

function drawRiskWheel(svgId, opt) {
    const svg = document.getElementById(svgId);
    if (!svg) return;
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    svg.setAttribute('viewBox', '-100 -100 200 200');

    const ns = 'http://www.w3.org/2000/svg';
    const R = 80, ORANGE = '#E07B2A', PURPLE = '#7C5CBF';

    function mkEl(tag, attrs) {
        const el = document.createElementNS(ns, tag);
        for (const [k,v] of Object.entries(attrs)) el.setAttribute(k, v);
        return el;
    }
    function mkText(txt, x, y, size) {
        const el = document.createElementNS(ns, 'text');
        el.setAttribute('x', x); el.setAttribute('y', y);
        el.setAttribute('fill', 'white'); el.setAttribute('font-family', 'sans-serif');
        el.setAttribute('font-size', size || 16); el.setAttribute('font-weight', '700');
        el.setAttribute('text-anchor', 'middle'); el.setAttribute('dominant-baseline', 'central');
        el.textContent = txt + ' MU';
        return el;
    }

    const pLeft  = parseFloat(opt.probability_left);
    const pRight = 1 - pLeft;
    const lOut   = opt.left_outcome;
    const rOut   = opt.right_outcome;
    const certain = (lOut === rOut) || pLeft >= 0.999;

    svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R, fill:ORANGE}));

    if (!certain) {
        const halfSweep = pRight * Math.PI;
        const tx = Math.cos(-halfSweep) * R, ty = Math.sin(-halfSweep) * R;
        const bx = Math.cos( halfSweep) * R, by = Math.sin( halfSweep) * R;
        svg.appendChild(mkEl('path', {
            d: `M0,0 L${tx},${ty} A${R},${R} 0 ${pRight > 0.5 ? 1 : 0},1 ${bx},${by} Z`,
            fill: PURPLE
        }));
        svg.appendChild(mkEl('circle', {cx:0, cy:0, r:R,
            fill:'none', stroke:'white', 'stroke-width':'1', opacity:'0.25'}));
        svg.appendChild(mkText(lOut, -(R * 0.48), 0, 16));
        svg.appendChild(mkText(rOut,  (R * 0.48), 0, 16));
    } else {
        svg.appendChild(mkText(lOut, 0, 0, 19));
    }

    // Probability label
    const probEl = document.getElementById(svgId + '-prob');
    if (probEl) {
        probEl.textContent = pRight === 0 ? '100%' :
            Math.round(pLeft*100) + '% / ' + Math.round(pRight*100) + '%';
    }
}
</script>

{{ endblock }}