{{ block title }}Perception Task{{ endblock }}

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

    <div class="card">
        <p style="color:#6b7280; margin-bottom:20px; text-align:center;">
            Please report your perception about how socially appropriate each option is. You will receive a bonus payment of 10 MU if your rating matches the mode of the ratings of the other participants.
        </p>

        <!-- Progress -->
        <div style="font-size:.8rem; color:#6b7280; margin-bottom:16px; text-align:right;">
            <span id="progress-label">1 of {{ block_total }}</span>
        </div>

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

            <!-- Left option -->
            <div style="flex:1; max-width:300px; text-align:center;">
                <div style="border:1px solid #ddd8ce; border-radius:8px; padding:20px;">
                    <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>
                <div style="margin-top:10px; display:flex; flex-direction:column; gap:6px;">
                    <div class="rating-btn" id="left-4" onclick="setRating('left', 4)">Very socially appropriate</div>
                    <div class="rating-btn" id="left-3" onclick="setRating('left', 3)">Somewhat socially appropriate</div>
                    <div class="rating-btn" id="left-2" onclick="setRating('left', 2)">Somewhat socially inappropriate</div>
                    <div class="rating-btn" id="left-1" onclick="setRating('left', 1)">Very socially inappropriate</div>
                </div>
            </div>

            <!-- Right option -->
            <div style="flex:1; max-width:300px; text-align:center;">
                <div style="border:1px solid #ddd8ce; border-radius:8px; padding:20px;">
                    <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>
                <div style="margin-top:10px; display:flex; flex-direction:column; gap:6px;">
                    <div class="rating-btn" id="right-4" onclick="setRating('right', 4)">Very socially appropriate</div>
                    <div class="rating-btn" id="right-3" onclick="setRating('right', 3)">Somewhat socially appropriate</div>
                    <div class="rating-btn" id="right-2" onclick="setRating('right', 2)">Somewhat socially inappropriate</div>
                    <div class="rating-btn" id="right-1" onclick="setRating('right', 1)">Very socially inappropriate</div>
                </div>
            </div>

        </div>

        <div style="display:flex; justify-content:flex-end; margin-top:24px;">
            <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>

    <input type="hidden" id="id_app_decisions_data" name="app_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        = {{ block_total }};
const SITUATIONS         = JSON.parse(document.getElementById('situations-data').textContent);

let currentIdx  = 0;
let leftRating  = null;
let rightRating = null;
let sitStartTime = null;
const allDecisions = {};

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

function loadSituation(idx) {
    currentIdx  = idx;
    leftRating  = null;
    rightRating = null;
    sitStartTime = Date.now();

    // Reset rating buttons
    for (let v = 1; v <= 4; v++) {
        document.getElementById('left-'  + v).classList.remove('selected');
        document.getElementById('right-' + v).classList.remove('selected');
    }

    document.getElementById('progress-label').textContent = (idx + 1) + ' of ' + BLOCK_TOTAL;

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

    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 setRating(side, value) {
    for (let v = 1; v <= 4; v++) {
        document.getElementById(side + '-' + v).classList.remove('selected');
    }
    document.getElementById(side + '-' + value).classList.add('selected');

    if (side === 'left') {
        leftRating = value;
    } else {
        rightRating = value;
    }

    const btn = document.getElementById('btn-next');
    if (leftRating !== null && rightRating !== null) {
        btn.style.opacity       = '1';
        btn.style.pointerEvents = 'auto';
    }
}

function advanceSituation() {
    if (leftRating === null || rightRating === null) return;

    const sit = SITUATIONS[currentIdx];
    allDecisions[sit.id] = {
        left_rating:  leftRating,
        right_rating: rightRating,
        decision_time_ms: Date.now() - sitStartTime,
    };

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

// ─── Dictator card ────────────────────────────────────────────────────────────
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}));[['','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 ───────────────────────────────────────────────────────────────
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; }
.rating-btn { border:1px solid #ddd8ce; border-radius:6px; padding:10px 14px; font-size:.85rem; color:#1e2228; cursor:pointer; background:#fff; transition:border-color .15s, background .15s; user-select:none; }
.rating-btn:hover { border-color:#2a6e7c; background:#f0f9fb; }
.rating-btn.selected { border-color:#2a6e7c; background:#e8f4f7; font-weight:bold; color:#1a4f5a; }
</style>

{{ endblock }}