{{ block title }}Threshold Task{{ endblock }}

{{ block content }}
<div id="task-app">

    <div class="card">
        <p style="color:#6b7280; margin-bottom:20px; text-align:center;">
            Move the slider to set your personal threshold for this decision.
        </p>

        <!-- Progress bar -->
        <div style="margin-bottom:16px;">
            <div style="height:6px; background:#ddd8ce; border-radius:3px; overflow:hidden;">
                <div id="progress-fill" style="height:100%; background:#2a6e7c; transition:width .3s; width:0%"></div>
            </div>
            <div id="progress-label" style="font-size:.8rem; color:#6b7280; margin-top:4px; text-align:right;"></div>
        </div>

        <!-- Option boxes -->
        <div style="display:flex; gap:16px; margin:20px 0; justify-content:center; align-items:stretch;">

            <div id="box-left"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; text-align:center; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Left Option</div>
                <svg id="left-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="left-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; min-height:32px;"></div>
            </div>

            <div id="box-right"
                 style="flex:1; max-width:300px; border:2px solid #ddd8ce; border-radius:8px;
                        padding:20px; text-align:center; user-select:none;">
                <div style="font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
                            color:#6b7280; margin-bottom:8px;">Right Option</div>
                <svg id="right-viz" width="100%" viewBox="-100 -100 200 200"
                     style="display:block; margin:8px auto 0; max-width:260px;"></svg>
                <div id="right-people" style="display:flex; flex-wrap:nowrap; gap:2px;
                     justify-content:center; margin-top:10px; min-height:32px;"></div>
            </div>
        </div>

        <!-- Threshold slider -->
        <div style="text-align:center; margin-top:16px;">
            <div style="display:flex; justify-content:space-between; max-width:500px;
                        margin:0 auto 4px; font-size:.8rem; color:#6b7280;">
                <span>Always Left</span>
                <span>Always Right</span>
            </div>
            <div style="position:relative; width:100%; max-width:500px;
                 height:20px; margin:10px auto; cursor:pointer;">
                <div id="slider-placeholder"
                     style="position:absolute; top:50%; left:0; right:0; transform:translateY(-50%);
                             height:6px; background:#ddd8ce; border-radius:3px; pointer-events:none;">
                </div>
                <input type="range" id="threshold-slider" min="0" max="11" value="5"
                       style="position:absolute; top:0; left:0; width:100%; height:100%;
                              opacity:0; accent-color:#2a6e7c; cursor:pointer; margin:0;"
                       onmousedown="onSliderActivate(this)" ontouchstart="onSliderActivate(this)"
                       oninput="onSliderChange(this.value)">
            </div>
            <div style="font-size:.95rem; color:#1e2228; margin-top:10px; min-height:1.4em;">
                <strong id="slider-label-text"></strong>
            </div>
        </div>

        <div style="display:flex; justify-content:flex-end; margin-top:28px;">
            <button type="button" id="btn-next" onclick="advanceSituation()"
                    style="padding:10px 28px; background:#2a6e7c; color:#fff; border:none;
                           border-radius:8px; font-size:1rem; cursor:pointer;
                           opacity:.4; pointer-events:none;">
                Next →
            </button>
        </div>
    </div>

    <!-- Single hidden field: all decisions as JSON, mirrors pref_decisions_data pattern -->
    <input type="hidden" id="id_threshold_decisions_data" name="threshold_decisions_data" value="{}">

</div>

<script type="application/json" id="situations-data">{{ situations }}</script>

<script>
const TASK_TYPE          = "{{ task_type }}";
const DICTATOR_ENDOWMENT = {{ dictator_endowment }};
const BLOCK_TOTAL        = {{ num_pairs }};
const SITUATIONS         = JSON.parse(document.getElementById('situations-data').textContent);

let currentIdx   = 0;
let sliderTouched = false;
let sitStartTime = null;
const allDecisions = {};

window.addEventListener('DOMContentLoaded', () => { loadSituation(0); });

function loadSituation(idx) {
    currentIdx    = idx;
    sliderTouched = false;
    sitStartTime = Date.now();

    // Update progress
    const pct = Math.round((idx / BLOCK_TOTAL) * 100);
    document.getElementById('progress-fill').style.width = pct + '%';
    document.getElementById('progress-label').textContent =
        'Decision ' + (idx + 1) + ' of ' + BLOCK_TOTAL;

    // Reset slider to hidden/untouched state
    const slider = document.getElementById('threshold-slider');
    slider.value = '5';
    slider.style.opacity = '0';
    document.getElementById('slider-placeholder').style.display = '';

    // Reset label and people icons
    document.getElementById('slider-label-text').textContent = '';
    renderPeople('left-people',  0, 10, true);
    renderPeople('right-people', 0, 10, true);

    // Reset box borders
    document.getElementById('box-left').style.border  = '2px solid #ddd8ce';
    document.getElementById('box-right').style.border = '2px solid #ddd8ce';

    lockNext();

    const btn = document.getElementById('btn-next');
    btn.textContent = (idx === BLOCK_TOTAL - 1) ? 'Submit →' : 'Next →';

    // Draw option visualisations
    const sit = SITUATIONS[idx];
    if (TASK_TYPE === 'lottery') {
        drawRiskWheel('left-viz',  sit.left);
        drawRiskWheel('right-viz', sit.right);
    } else {
        drawDictatorCard('left-viz',  sit.left,  DICTATOR_ENDOWMENT);
        drawDictatorCard('right-viz', sit.right, DICTATOR_ENDOWMENT);
    }
}

function onSliderActivate(slider) {
    if (slider.style.opacity === '0') {
        slider.style.opacity = '1';
        document.getElementById('slider-placeholder').style.display = 'none';
        onSliderChange(slider.value);
    }
}

function onSliderChange(val) {
    val = parseInt(val);
    sliderTouched = true;
    unlockNext();

    const labelEl = document.getElementById('slider-label-text');
    const boxL    = document.getElementById('box-left');
    const boxR    = document.getElementById('box-right');
    boxL.style.border = '2px solid #ddd8ce';
    boxR.style.border = '2px solid #ddd8ce';

    if (val === 0) {
        labelEl.textContent = 'I would always choose the left option, regardless what the people in the earlier group did.';
        renderPeople('left-people',  0,  10);
        renderPeople('right-people', 10, 10);
        boxL.style.border = '3px solid #2a6e7c';
    } else if (val === 11) {
        labelEl.textContent = 'I would always choose the right option, regardless what the people in the earlier group did.';
        renderPeople('left-people',  10, 10);
        renderPeople('right-people', 0,  10);
        boxR.style.border = '3px solid #2a6e7c';
    } else {
        labelEl.textContent =
            'I would choose the left option if at least ' + val +
            ' out of 10 people in the earlier group chose it; otherwise I would choose the right option.';
        renderPeople('left-people',  val,      10);
        renderPeople('right-people', 10 - val, 10);
    }
}

function lockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity       = '.4';
    btn.style.pointerEvents = 'none';
}

function unlockNext() {
    const btn = document.getElementById('btn-next');
    btn.style.opacity       = '1';
    btn.style.pointerEvents = 'auto';
}

function advanceSituation() {
    if (!sliderTouched) return;

    const sit = SITUATIONS[currentIdx];
    const val = parseInt(document.getElementById('threshold-slider').value);
    const aIsLeft = sit.a_is_left;

    // Canonical threshold: recoded to option-A orientation so it is comparable
    // across participants regardless of which side option A was shown on.
    // val 0 (always left) and 11 (always right) are symmetric — unchanged.
    // val 1–10: if A is on the right, invert: canonical = 11 - val.
    const thresholdCanonical = (val === 0 || val === 11)
        ? val
        : (aIsLeft ? val : (11 - val));

    // Derive implied choice for every possible norm value (0–10 chose option A)
    const impliedChoices = {};
    for (let nChoseA = 0; nChoseA <= 10; nChoseA++) {
        const nLeft = aIsLeft ? nChoseA : (10 - nChoseA);
        let chosen;
        if (val === 0)       chosen = sit.left.option_id;
        else if (val === 11) chosen = sit.right.option_id;
        else                 chosen = (nLeft >= val) ? sit.left.option_id : sit.right.option_id;
        impliedChoices[String(nChoseA)] = chosen;
    }

    allDecisions[sit.id] = {
        situation_id:        sit.id,
        task_type:           TASK_TYPE,
        condition:           'threshold',
        left_option_id:      sit.left.option_id,
        right_option_id:     sit.right.option_id,
        a_is_left:           aIsLeft,
        threshold_raw:       val,
        threshold_canonical: thresholdCanonical,
        implied_choices:     impliedChoices,
        decision_time_ms: Date.now() - sitStartTime,
    };

    if (currentIdx < BLOCK_TOTAL - 1) {
        loadSituation(currentIdx + 1);
    } else {
        document.getElementById('id_threshold_decisions_data').value =
            JSON.stringify(allDecisions);
        document.querySelector('form').submit();
    }
}

// ── People pictograms ────────────────────────────────────────────────────────
function renderPeople(containerId, nActive, total, allGrey) {
    const c = document.getElementById(containerId);
    c.innerHTML = '';
    for (let i = 0; i < total; i++) {
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        svg.setAttribute('width',  '24');
        svg.setAttribute('height', '24');
        const active = !allGrey && i < nActive;
        svg.style.fill    = active ? '#2a6e7c' : '#c0bdb5';
        svg.style.opacity = active ? '.85'     : '.4';
        svg.innerHTML = '<circle cx="12" cy="6" r="3.5"/><path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8H4z"/>';
        c.appendChild(svg);
    }
}

// ── Dictator card visualisation ──────────────────────────────────────────────
function drawDictatorCard(svgId,opt,endowment){const svg=document.getElementById(svgId);if(!svg)return;while(svg.firstChild)svg.removeChild(svg.firstChild);const ns='http://www.w3.org/2000/svg',MAX_R=26,W=260,H=310,COL_YOU=105,COL_OTH=220,DIV_V=162;svg.setAttribute('viewBox','0 0 '+W+' '+H);function mk(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,weight,fill){const el=mk('text',{'font-family':'sans-serif','font-size':size||13,'font-weight':weight||'400',fill:fill||'#333','text-anchor':'middle','dominant-baseline':'central',x,y});el.textContent=txt;return el;}const defs=mk('defs',{});const marker=mk('marker',{id:svgId+'-arr',viewBox:'0 0 10 10',refX:8,refY:5,markerWidth:6,markerHeight:6,orient:'auto-start-reverse'});marker.appendChild(mk('path',{d:'M2 1L8 5L2 9',fill:'none',stroke:'#666','stroke-width':'1.5','stroke-linecap':'round','stroke-linejoin':'round'}));defs.appendChild(marker);svg.appendChild(defs);svg.appendChild(mkText('You',COL_YOU,22,13,'600','#444'));svg.appendChild(mkText('Other',COL_OTH,22,13,'600','#444'));svg.appendChild(mk('line',{x1:162,y1:30,x2:162,y2:295,stroke:'#ccc','stroke-width':1}));svg.appendChild(mk('line',{x1:10,y1:DIV_V,x2:255,y2:DIV_V,stroke:'#ccc','stroke-width':1}));[['initial','split',95,107],['final','payouts',228,240]].forEach(([l1,l2,y1,y2])=>{svg.appendChild(mkText(l1,27,y1,11,'400','#888'));svg.appendChild(mkText(l2,27,y2,11,'400','#888'));});function drawCoin(cx,cy,amount){const r=Math.sqrt(amount/endowment)*MAX_R,th=Math.max(8,r*0.55),ry=Math.max(3,r*0.37),g=mk('g',{transform:'translate('+cx+','+cy+')'});g.appendChild(mk('ellipse',{cx:0,cy:th/2,rx:r,ry:ry,fill:'#b8881a'}));g.appendChild(mk('rect',{x:-r,y:-th/2,width:r*2,height:th,fill:'#b8881a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r,ry:ry,fill:'#e8c86a'}));g.appendChild(mk('ellipse',{cx:0,cy:-th/2,rx:r*0.85,ry:ry*0.85,fill:'none',stroke:'#c8a030','stroke-width':'1.2','stroke-dasharray':'3 3'}));if(r>=14){const t=mk('text',{'font-family':'serif','font-size':Math.round(r*.72),'font-weight':'700',fill:'#a07010','text-anchor':'middle','dominant-baseline':'central',x:0,y:-th/2});t.textContent='1';g.appendChild(t);}svg.appendChild(g);}const {own_payoff,transfer,multiplier}=opt,otherFinal=Math.round(transfer*multiplier*100)/100;if(own_payoff>0)drawCoin(COL_YOU,80,own_payoff);if(transfer>0)drawCoin(COL_OTH,80,transfer);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,120,13,'700','#333'));svg.appendChild(mkText(transfer+' MU',COL_OTH,120,13,'700','#333'));function drawArrow(cx,label,isMult){const mUrl='url(#'+svgId+'-arr)';svg.appendChild(mk('line',{x1:cx,y1:138,x2:cx,y2:150,stroke:'#666','stroke-width':'1.5'}));const bw=isMult?44:64;svg.appendChild(mk('rect',{x:cx-bw/2,y:150,width:bw,height:19,rx:4,fill:'white',stroke:'#ccc','stroke-width':'0.8'}));svg.appendChild(mkText(label,cx,160,isMult?11:10,isMult?'700':'400',isMult?'#333':'#555'));svg.appendChild(mk('line',{x1:cx,y1:169,x2:cx,y2:182,stroke:'#666','stroke-width':'1.5','marker-end':mUrl}));}drawArrow(COL_YOU,'you keep',false);drawArrow(COL_OTH,'× '+multiplier,true);if(own_payoff>0)drawCoin(COL_YOU,215,own_payoff);if(otherFinal>0)drawCoin(COL_OTH,215,otherFinal);svg.appendChild(mkText(own_payoff+' MU',COL_YOU,255,13,'700','#333'));svg.appendChild(mkText(otherFinal+' MU',COL_OTH,255,13,'700','#333'));}

// ── Risk wheel visualisation ─────────────────────────────────────────────────
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',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');Object.entries({x,y,fill:'white','font-family':'sans-serif','font-size':size||16,'font-weight':'700','text-anchor':'middle','dominant-baseline':'central'}).forEach(([k,v])=>el.setAttribute(k,v));el.textContent=txt+' MU';return el;}const pLeft=parseFloat(opt.probability_left),pRight=1-pLeft,lOut=opt.left_outcome,rOut=opt.right_outcome,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,tx=Math.cos(-halfSweep)*R,ty=Math.sin(-halfSweep)*R,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>.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));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent=Math.round(pLeft*100)+'% / '+Math.round(pRight*100)+'%';}else{svg.appendChild(mkText(lOut,0,0,19));let lbl=document.getElementById(svgId+'-prob');if(!lbl){lbl=document.createElement('div');lbl.id=svgId+'-prob';lbl.style.cssText='text-align:center;font-size:1rem;color:#1e2228;margin-top:6px;';svg.parentNode.insertBefore(lbl,svg.nextSibling);}lbl.textContent='100%';}}
</script>

<style>
.card { background:#fff; border:1px solid #ddd8ce; border-radius:8px; padding:28px 32px; margin-bottom:20px; }
</style>

{{ endblock }}