{% extends "global/Page.html" %}
{% load staticfiles otree %}


{% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0, user-scalable=1">

<style>
.page-wrap {max-width: 1000px; margin: 0 auto;}
.page-title {margin-bottom: 1rem;}
.info-card,.demo-card,.control-card,.notice-card,.overlay-card,.overlay-demo-card {
    background: #ffffff; border: 1px solid #dbe5ef; border-radius: 20px;
    padding: 1.35rem 1.35rem 1.2rem; box-shadow: 0 10px 28px rgba(15,41,77,.08);
    margin-bottom: 1.35rem;
}
.section-title {font-weight:700; font-size:1.08rem; margin-bottom:.8rem;}
.section-text {font-size:1rem; line-height:1.62;}
.section-text ul {margin-bottom:0; padding-left:1.3rem;}
.section-text li {margin-bottom:.35rem;}
.important-note {
    background:#f6fbff; border:1px solid #d9e8f5; border-radius:14px;
    padding:.9rem 1rem; margin-top:1rem; line-height:1.55;
}
.button-row {display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1rem;}
.button-row.right-only {justify-content:flex-end;}
.centered {text-align:center;}
.small-note {font-size:.92rem; color:#5d6b79;}
.question-table {width:100%; border-collapse:collapse; margin-top:.5rem;}
.question-table tr {border-top:1px solid #e5edf5;}
.question-table tr:first-child {border-top:0;}
.question-table td {padding:.85rem .7rem; vertical-align:middle; line-height:1.5;}
.question-table td.option-col {width:110px; text-align:center;}
.formula-card {
    margin: 1rem auto .8rem auto; padding:1.1rem 1rem .95rem; background:#f7f7f7;
    border:1px solid #dddddd; border-radius:14px; text-align:center;
}
.formula-title {font-weight:700; text-align:left; margin-bottom:.85rem; font-size:1.02rem;}
.formula-main {font-size:1.18rem; line-height:1.9; word-spacing:.08em;}
.formula-underlined {display:inline-block; border-bottom:2px solid #000; padding:0 .15rem .08rem .15rem; line-height:1.1;}
.formula-subnote {font-size:.72rem; line-height:1.25; margin-top:.12rem;}
.instruction-overlay {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(15,23,42,.55); padding:20px;
}
.instruction-overlay.is-open {display:block;}
.instruction-overlay__panel {
    width:100%; height:100%; background:#ffffff; border-radius:18px; overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.22); display:flex; flex-direction:column;
}
.instruction-overlay__header {
    display:flex; justify-content:space-between; align-items:center; padding:14px 18px;
    border-bottom:1px solid #dbe5ef; background:#f8fafc; flex:0 0 auto;
}
.instruction-overlay__title {font-weight:700; font-size:1.05rem;}
.instruction-overlay__body {flex:1 1 auto; overflow-y:auto; padding:20px; background:#ffffff;}
.demo-title {text-align:center; font-weight:700; font-size:1.08rem; margin-bottom:.8rem;}
.demo-subtitle {text-align:center; font-size:.94rem; color:#586776; margin-bottom:.9rem; line-height:1.45; max-width:800px; margin-left:auto; margin-right:auto;}
.light-label {color:#67b7e1; font-weight:700;}
.dark-label {color:#1f4f9b; font-weight:700;}
/* horizontal slider demo */
.visual-wrap {width:860px; margin:0 auto 1.2rem auto;}
.rule-panel {position:relative; width:860px; height:150px; margin:0 auto; background:transparent; border:none;}
.rule-label {position:absolute; top:50%; transform:translate(-50%,-50%); width:auto; text-align:center; font-weight:700; font-size:1rem; pointer-events:none; white-space:nowrap;}
.rule-label-left {left:25%; color:#1f4f9b;}
.rule-label-right {left:75%; color:#67b7e1;}
.threshold-line {position:absolute; top:-12px; bottom:-12px; width:4px; background:#e03131; pointer-events:none;}
.axis-shell-h {position:relative; width:860px; height:90px; margin:0 auto;}
.axis-line-h {position:absolute; left:0; right:0; top:44px; height:3px; background:#b8c2cc; border-radius:999px;}
.axis-tick-h {position:absolute; top:0; transform:translateX(-50%); font-size:.82rem; color:#475569; text-align:center; white-space:nowrap;}
.axis-tick-h::after {content:""; position:absolute; left:50%; top:28px; width:2px; height:10px; background:#94a3b8; transform:translateX(-50%);}
.threshold-badge-h {position:absolute; top:56px; transform:translateX(-50%); background:#ffffff; color:#d72c32; border:1px solid #f0b0b4; border-radius:999px; padding:.16rem .45rem; font-size:.82rem; font-weight:700; line-height:1; box-shadow:0 2px 7px rgba(0,0,0,.08);}
.slider-shell-h {position:relative; width:860px; height:70px; margin:.15rem auto 0 auto;}
.slider-caption-h {text-align:center; font-size:.82rem; color:#475569; font-weight:600; margin-bottom:.35rem;}
.horizontal-range {width:100%; appearance:none; background:transparent; cursor:pointer;}
.horizontal-range:focus {outline:none;}
.horizontal-range::-webkit-slider-runnable-track {height:7px; background:#d7dde4; border-radius:999px;}
.horizontal-range::-webkit-slider-thumb {appearance:none; width:24px; height:24px; border-radius:50%; background:#e03131; border:3px solid #ffffff; box-shadow:0 2px 8px rgba(0,0,0,.18); margin-top:-8px;}
.horizontal-range::-moz-range-track {height:7px; background:#d7dde4; border-radius:999px;}
.horizontal-range::-moz-range-thumb {width:24px; height:24px; border-radius:50%; background:#e03131; border:3px solid #ffffff; box-shadow:0 2px 8px rgba(0,0,0,.18);}
.demo-buttons {text-align:center; margin-top:1rem;}
.demo-buttons button {margin:0 .35rem .4rem .35rem;}
.rule-copy {max-width:900px; margin:1rem auto 0 auto; text-align:center; line-height:1.55; font-size:.97rem;}
.note-copy {max-width:900px; margin:.8rem auto 0 auto; text-align:center; line-height:1.5; font-size:.92rem; color:#5d6b79;}
@media (max-width: 900px) {
  .visual-wrap,.axis-shell-h,.slider-shell-h,.rule-panel {width:100%;}
  .button-row {flex-direction:column; align-items:stretch;}
  .instruction-overlay {padding:8px;}
}
</style>

<div class="page-wrap">

    <div class="page-title"><h2>Instructions. Page 1 out of 5.</h2></div>

    <div class="info-card">
        <div class="section-title">1. INTRODUCTION</div>
        <div class="section-text">
            This is an experiment about decision-making. Please read the following instructions carefully. Everything that you need to know in order to participate in this experiment is explained below. Should you have any difficulties in understanding these instructions please notify us. We will answer your questions at your cubicle.
            <br><br>
            You will start the experiment with an endowment of <b>£ 3</b>, which is your <b>show-up fee</b>. During the experiment, you can earn more money: there is an experimental currency unit called <b>tokens</b>. Any tokens you earn during the Experiment will be converted to cash at the end of the experiment at the following rate:
            <br><br>
            <div class="centered"><b>2 tokens = £ 1</b></div>
            <br>
            Please note that communication between participants is strictly prohibited during the experiment. In case you have any questions don't hesitate to ask us.
        </div>
    </div>

    <div class="button-row right-only">
        <button class="btn btn-primary">Continue</button>
    </div>

</div>

<script>
function openPreviousPagesOverlay() {
  var el = document.getElementById('instructionOverlay');
  if (el) { el.classList.add('is-open'); }
}
function closePreviousPagesOverlay() {
  var el = document.getElementById('instructionOverlay');
  if (el) { el.classList.remove('is-open'); }
}
function signedNumber(n){ return n>0 ? '+'+n : ''+n; }
function setHorizontalDemo(prefix, value){
  var slider = document.getElementById(prefix + '_slider');
  if (!slider) return;
  slider.value = value;
  updateHorizontalDemo(prefix);
}
function updateHorizontalDemo(prefix){
  var slider = document.getElementById(prefix + '_slider');
  var line = document.getElementById(prefix + '_line');
  var badge = document.getElementById(prefix + '_badge');
  var leftLabel = document.getElementById(prefix + '_left_label');
  var rightLabel = document.getElementById(prefix + '_right_label');
  var summary = document.getElementById(prefix + '_summary');
  var note = document.getElementById(prefix + '_note');
  var value = parseInt(slider.value, 10);
  var min = parseInt(slider.min, 10);
  var max = parseInt(slider.max, 10);
  var pct = ((value - min) / (max - min)) * 100;
  if (line) line.style.left = 'calc(' + pct + '% - 2px)';
  if (badge){ badge.style.left = pct + '%'; badge.textContent = signedNumber(value); }
  if (leftLabel) leftLabel.style.left = (pct/2) + '%';
  if (rightLabel) rightLabel.style.left = ((pct+100)/2) + '%';
  var light = '<span class="light-label">LIGHT BLUE</span>';
  var dark = '<span class="dark-label">DARK BLUE</span>';
  if (summary){
    if (value > 0){
      summary.innerHTML = 'If ' + light + '’s work output is higher than ' + dark + '’s work output by <b>more than ' + value + '</b> points, ' + light + ' receives the high payment.';
    } else if (value < 0){
      var absValue = Math.abs(value);
      summary.innerHTML = 'If ' + dark + '’s work output is higher than ' + light + '’s work output by <b>more than ' + absValue + '</b> points, ' + dark + ' receives the high payment.';
    } else {
      summary.innerHTML = 'If ' + light + '’s work output is <b>higher</b> than ' + dark + '’s work output, ' + light + ' receives the high payment.';
    }
  }
  if (note){
    if (value > 0){
      note.innerHTML = '<b>Note:</b> If ' + light + '’s work output is <b>exactly ' + value + '</b> points higher than ' + dark + '’s work output, the high payment is randomly allocated between the two BLUE players.';
    } else if (value < 0){
      var absValue = Math.abs(value);
      note.innerHTML = '<b>Note:</b> If ' + dark + '’s work output is <b>exactly ' + absValue + '</b> points higher than ' + light + '’s work output, the high payment is randomly allocated between the two BLUE players.';
    } else {
      note.innerHTML = '<b>Note:</b> If both BLUE players have <b>exactly the same</b> work output, the high payment is randomly allocated between the two BLUE players.';
    }
  }
}
document.addEventListener('DOMContentLoaded', function(){
  ['demo_main','demo_overlay','cq3_demo1','cq3_demo2'].forEach(function(prefix){
    if(document.getElementById(prefix + '_slider')){ updateHorizontalDemo(prefix); }
  });
});
</script>

{% endblock %}