{{ extends 'global/Page.html' }}
{{ block title }}Instructions{{ endblock }}

{{ block content }}
<div style="max-width: 720px; margin: auto;">

  <p>Welcome to our experiment on decision-making. You will receive <strong>${{ participation_fee }}</strong> for participating,
  plus additional earnings that depend on your decisions. Your earnings are expressed in
  <strong>points</strong>; <strong>{{ points_per_dollar }} points = $1</strong>. At the end of the experiment your total
  points will be converted to dollars and paid to you in cash.</p>

  <p>Please switch off your cellphone, remain quiet, and do not communicate with other
  participants during the entire experiment. Raise your hand if you have any questions.</p>

  <h4>Structure</h4>
  <p>The experiment consists of <strong>{{ n_blocks }} blocks</strong> of <strong>{{ n_rounds }} decision rounds</strong> each
  ({{ total_rounds }} rounds in total).</p>

  <h4>Your center outcome and best outcome</h4>
  <p>At the start of each block you will be assigned a <strong>center outcome</strong> — a number
  between 0 and 100. Your center outcome stays fixed for all 30 rounds in a block, then changes
  for the next block.</p>


  <p>At the start of each round, <strong> your best outcome</strong> (shown by an icon like <svg width="12" height="22" viewBox="0 0 12 22" style="vertical-align:middle; display:inline-block; margin:0 2px;"><circle cx="6" cy="5" r="4" fill="black"/><path d="M 0 17 A 6 5 0 0 1 12 17" fill="black"/></svg>) is determined by adding a small
  random amount to your center outcome. This varies from round to round.</p>

  <div style="background:#f8f8f8; border:1px solid #ccc; border-radius:6px; padding:14px 18px; margin:16px 0;">
    <p style="margin:0 0 8px 0; font-weight:bold; font-size:0.95em; color:#444;">
      Example: Block start screen (center outcome = 50)
    </p>
    <canvas id="ex-ctr-canvas" style="display:block; width:100%;" height="185"></canvas>
    <script>
      (function() {
        const canvas = document.getElementById("ex-ctr-canvas");
        canvas.width = canvas.offsetWidth;
        const ctx = canvas.getContext("2d");
        const startX = 10, endX = canvas.width - 10, lineY = 85;
        const ctr = 50, lo = 40, hi = 60;
        const ctrX = startX + (ctr / 100) * (endX - startX);
        const loX  = startX + (lo  / 100) * (endX - startX);
        const hiX  = startX + (hi  / 100) * (endX - startX);

        // Axis
        ctx.strokeStyle = "#333"; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(startX, lineY); ctx.lineTo(endX, lineY); ctx.stroke();

        // Major ticks every 10
        for (let i = 0; i <= 10; i++) {
          const tx = startX + (i / 10) * (endX - startX);
          ctx.strokeStyle = "#333"; ctx.lineWidth = 1;
          ctx.beginPath(); ctx.moveTo(tx, lineY - 7); ctx.lineTo(tx, lineY + 7); ctx.stroke();
          ctx.fillStyle = "#333"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
          ctx.fillText(i * 10, tx, lineY + 22);
        }

        // Minor ticks only within possible best outcomes range
        for (let i = lo; i <= hi; i++) {
          const tx = startX + (i / 100) * (endX - startX);
          ctx.strokeStyle = "#aaa"; ctx.lineWidth = 0.75;
          ctx.beginPath(); ctx.moveTo(tx, lineY - 3); ctx.lineTo(tx, lineY + 3); ctx.stroke();
        }

        // Center point dot + stem + label
        ctx.beginPath(); ctx.arc(ctrX, lineY, 6, 0, 2 * Math.PI);
        ctx.fillStyle = "#000"; ctx.fill();
        ctx.strokeStyle = "#1a6b1a"; ctx.lineWidth = 1.5;
        ctx.beginPath(); ctx.moveTo(ctrX, lineY); ctx.lineTo(ctrX, lineY - 35); ctx.stroke();
        ctx.fillStyle = "#1a6b1a"; ctx.font = "bold 11pt Arial"; ctx.textAlign = "center";
        ctx.fillText("Your Center Point (50)", ctrX, lineY - 46);

        // Curly brace below axis
        (function drawHBrace(x1, x2, y) {
          const mid = (x1 + x2) / 2, r = 6, armY = y + 14, tipY = y + 26;
          ctx.beginPath();
          ctx.moveTo(x1, y);
          ctx.quadraticCurveTo(x1, armY, x1 + r, armY);
          ctx.lineTo(mid - r, armY);
          ctx.quadraticCurveTo(mid, armY, mid, tipY);
          ctx.quadraticCurveTo(mid, armY, mid + r, armY);
          ctx.lineTo(x2 - r, armY);
          ctx.quadraticCurveTo(x2, armY, x2, y);
          ctx.strokeStyle = "#555"; ctx.lineWidth = 1.5; ctx.stroke();
        })(loX, hiX, lineY + 32);

        ctx.fillStyle = "#555"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
        ctx.fillText("Your possible Best Outcomes (40–60)", (loX + hiX) / 2, lineY + 76);
      })();
    </script>
  </div>

  <h4>Your decision</h4>
  <p>Each round you will see two policy options, <strong>Option A</strong> and <strong>Option B</strong>,
  shown as positions on a number line. You choose one of them.</p>

  <div style="background:#f8f8f8; border:1px solid #ccc; border-radius:6px; padding:14px 18px; margin:16px 0;">
    <p style="margin:0 0 8px 0; font-weight:bold; font-size:0.95em; color:#444;">
      Example: Decision screen
    </p>
    <canvas id="ex-decision-canvas" style="display:block; width:100%;" height="280"></canvas>
    <script>
      (function() {
        const canvas = document.getElementById("ex-decision-canvas");
        canvas.width = canvas.offsetWidth;
        const ctx = canvas.getContext("2d");
        const startX = 10, endX = canvas.width - 10, lineY = 123;

        function drawDot(value, name, color, sign, lineLen, shape) {
          const dx = startX + (value / 100) * (endX - startX);
          const r = 6;
          ctx.fillStyle = color;
          if (shape === 'square') {
            ctx.fillRect(dx - r, lineY - r, r * 2, r * 2);
          } else if (shape === 'person') {
            const headR = 5, torsoR = 6;
            ctx.beginPath(); ctx.arc(dx, lineY - torsoR - headR - 1, headR, 0, 2 * Math.PI); ctx.fill();
            ctx.beginPath(); ctx.arc(dx, lineY, torsoR, Math.PI, 0, false); ctx.fill();
          } else {
            ctx.beginPath(); ctx.arc(dx, lineY, r, 0, 2 * Math.PI); ctx.fill();
          }
          ctx.setLineDash([4, 3]);
          ctx.strokeStyle = color; ctx.lineWidth = 1.5;
          ctx.beginPath(); ctx.moveTo(dx, lineY); ctx.lineTo(dx, lineY - sign * lineLen); ctx.stroke();
          ctx.setLineDash([]);
          ctx.lineWidth = 2;
          ctx.fillStyle = "#000"; ctx.font = "bold 11pt Arial"; ctx.textAlign = "center";
          if (sign === 1) {
            ctx.fillText(name,              dx, lineY - lineLen - 30);
            ctx.fillText("(" + value + ")", dx, lineY - lineLen - 14);
          } else {
            ctx.fillText(name,              dx, lineY + lineLen + 14);
            ctx.fillText("(" + value + ")", dx, lineY + lineLen + 30);
          }
        }

        // Axis
        ctx.strokeStyle = "#333"; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(startX, lineY); ctx.lineTo(endX, lineY); ctx.stroke();

        // Ticks 0–100
        for (let i = 0; i <= 10; i++) {
          const tx = startX + (i / 10) * (endX - startX);
          ctx.strokeStyle = "#333"; ctx.lineWidth = 1;
          ctx.beginPath(); ctx.moveTo(tx, lineY - 5); ctx.lineTo(tx, lineY + 5); ctx.stroke();
          ctx.fillStyle = "#333"; ctx.font = "11pt Arial"; ctx.textAlign = "center";
          ctx.fillText(i * 10, tx, lineY + 20);
        }

        // Shaded possible-range band
        const loX = startX + (40 / 100) * (endX - startX);
        const hiX = startX + (60 / 100) * (endX - startX);
        const bArm = 6;
        ctx.strokeStyle = "#1a6b1a"; ctx.lineWidth = 1.5;
        ctx.beginPath(); ctx.moveTo(loX + bArm, lineY - 8); ctx.lineTo(loX, lineY - 8); ctx.lineTo(loX, lineY + 8); ctx.lineTo(loX + bArm, lineY + 8); ctx.stroke();
        ctx.beginPath(); ctx.moveTo(hiX - bArm, lineY - 8); ctx.lineTo(hiX, lineY - 8); ctx.lineTo(hiX, lineY + 8); ctx.lineTo(hiX - bArm, lineY + 8); ctx.stroke();
        ctx.lineWidth = 2;

        const xA = startX + (35 / 100) * (endX - startX);
        const xB = startX + (72 / 100) * (endX - startX);
        const lenA = Math.abs(xB - xA) < 60 ? 45 : 60;
        const lenB = Math.abs(xB - xA) < 60 ? 80 : 60;
        drawDot(35, "A",                 "#000", 1,  lenA, 'square');
        drawDot(72, "B",                 "#000", 1,  lenB, 'square');
        drawDot(47, "Your best outcome", "#000",    -1, 60,   'person');
      })();
    </script>
  </div>

  <h4>Your earnings</h4>
  <p>Your round earnings equal:</p>
  <p style="text-align:center; font-size:1.1em;">
    <strong>100 &minus; |your chosen option &minus; your best outcome|</strong>
  </p>
  <p>That is, the closer the option you choose is to your best outcome, the more you earn.</p>

  <h4>Between blocks</h4>
  <p>After each block of {{ n_rounds }} rounds you will be assigned a new center outcome, and your
  best outcome will vary around that new center for the next block.</p>

  {{ next_button }}
</div>
{{ endblock }}