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

{% block styles %}
<style>
  .decision-wrap { max-width: 980px; margin: 0 auto; font-size: 18px; line-height: 1.6; }
  .title { text-align:center; margin: 16px 0 6px; font-weight: 700; font-size: 24px; }
  .charts-row { display: flex; justify-content: center; margin-top: 20px; }
  .chart-box { width: 360px; text-align:center; }
  .chart-caption { margin-top: 8px; font-weight:600; }
  .options { display: flex; justify-content: center; gap: 40px; margin-top: 28px; }
  .options label { font-size: 20px; font-weight: 600; }
  .btn-row { text-align:center; margin-top: 26px; }
</style>
{% endblock %}

{% block title %}Part 4{% endblock %}

{% block content %}
<div class="decision-wrap">
  <div class="title">Task 2: Choosing between two boxes with 10 different colors</div>
  <p style="text-align:center;">{{ round_text|safe }}</p>

  <div class="charts-row">
    <div class="chart-box">
      <div id="unknown_pie"></div>
      <div class="chart-caption">Choice U<br>(15: ?%, 0: ?%)</div>
    </div>
      <div class="chart-box">
      <div id="known_pie"></div>
      <div class="chart-caption">Choice K<br>(15: {{ win_percent }}%, 0: {{ lose_percent }}%)</div>
    </div>
  </div>

  <form method="post">
    <div class="options">
      <label><input type="radio" name="choice" value="U" required> Choice U</label>
      <label><input type="radio" name="choice" value="I"> Indifferent</label>
      <label><input type="radio" name="choice" value="K"> Choice K</label>
    </div>
    <div class="btn-row"><button type="submit" class="btn btn-primary">Next</button></div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
(function(){
  const purple = {{ known_purple_percent }};
  const others = 100 - purple;
  const eachOther = others/9;
  Highcharts.chart('known_pie',{
    chart:{type:'pie'}, title:{text:''}, credits:{enabled:false}, tooltip:{enabled:false},
    plotOptions:{ pie:{ dataLabels:false, size:260 } },
    series:[{ data:[
      {name:'Purple', y:purple, color:'purple'},
      {y:eachOther, color:'#e6194B'}, {y:eachOther, color:'#3cb44b'},
      {y:eachOther, color:'#ffe119'}, {y:eachOther, color:'#4363d8'},
      {y:eachOther, color:'#f58231'}, {y:eachOther, color:'#911eb4'},
      {y:eachOther, color:'#46f0f0'}, {y:eachOther, color:'#f032e6'},
      {y:eachOther, color:'#bcf60c'}
    ]}]
  });
  Highcharts.chart('unknown_pie',{
    chart:{type:'pie'}, title:{text:''}, credits:{enabled:false}, tooltip:{enabled:false},
    plotOptions:{ pie:{ dataLabels:false, size:260 } },
    series:[{ data:[{y:100,color:'lightgray'}] }]
  });
})();
</script>
{% endblock %}
{% endcomment %}

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

{% block styles %}
<style>
  .decision-wrap { max-width: 980px; margin: 0 auto; font-size: 18px; line-height: 1.6; }
  .title { text-align:center; margin: 16px 0 6px; font-weight: 700; font-size: 24px; }
  .charts-row { display: flex; justify-content: center; margin-top: 20px; gap: 32px; }
  .chart-box { width: 360px; text-align:center; }
  .chart-caption { margin-top: 8px; font-weight:600; }
  .options { display: flex; justify-content: center; gap: 40px; margin-top: 28px; }
  .options label { font-size: 20px; font-weight: 600; }
  .btn-row { text-align:center; margin-top: 26px; }
</style>
{% endblock %}

{% block title %}Part 4{% endblock %}

{% block content %}
<div class="decision-wrap">
  <div class="title">Task 2: 10 colors – Purple wins</div>
  <p style="text-align:center;">{{ round_text|safe }}</p>

  <div class="charts-row">
    <div class="chart-box">
      <div id="unknown_pie"></div>
      <div class="chart-caption">Choice U<br>(15: ?%, 0: ?%)</div>
    </div>
    <div class="chart-box">
      <div id="known_pie"></div>
      <div class="chart-caption">Choice K<br>(15: {{ win_percent }}%, 0: {{ lose_percent }}%)</div>
    </div>
  </div>

  <form method="post">
    <div class="options">
      <label><input type="radio" name="choice" value="U" required> Choice U</label>
      <label><input type="radio" name="choice" value="I"> Indifferent</label>
      <label><input type="radio" name="choice" value="K"> Choice K</label>
    </div>
    <div class="btn-row"><button type="submit" class="btn btn-primary">Next</button></div>
  </form>
</div>
{% endblock %}

{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
(function(){
  const purple = {{ known_purple_percent }};               // 紫色百分比（0~100）
  const others = 100 - purple;                              // 非紫总百分比
  const eachOther = others / 9;                             // 其余9色均分
  const PIE_SIZE = 260;

  // 仅显示“Purple”标签，防裁切
  const purpleOnlyLabel = {
    enabled: true,
    distance: 18,
    softConnector: true,
    allowOverlap: true,
    crop: false,
    useHTML: true,
    connectorPadding: 8,
    style: { fontWeight: '600', color: '#000', textOutline: 'none', whiteSpace: 'nowrap' },
    formatter: function () {
      return (this.point && this.point.name === 'Purple') ? 'Purple' : null;
    }
  };

  // Known：十等分（第一块是 Purple，其他九块平均，不显示名字）
  Highcharts.chart('known_pie',{
    chart: {
      type:'pie',
      spacingRight: 60,
      animation: false,              // 关掉图表层面的入场动画
      events: { load: function(){ this.reflow(); } }
    },
    title:{ text:'' },
    credits:{ enabled:false },
    tooltip:{ enabled:false },
    accessibility:{ enabled:false },
    plotOptions:{
      series: {
      animation: false,            // 关掉序列入场动画
      enableMouseTracking: false,  // 彻底关闭鼠标交互（可选）
      states: {
        hover: { enabled: false }, // 关闭悬停动画/高亮
        inactive: { opacity: 1 }   // 悬停时不让其它扇区变暗
      }
    },
      pie:{
        dataLabels: purpleOnlyLabel,
        showInLegend:false,
        size: PIE_SIZE,
        borderWidth:0
      }
    },
    series:[{ data:[
      { name:'Purple', y: purple, color:'purple' },
      { y: eachOther, color:'#e6194B' }, { y: eachOther, color:'#3cb44b' },
      { y: eachOther, color:'#ffe119' }, { y: eachOther, color:'#4363d8' },
      { y: eachOther, color:'#f58231' }, { y: eachOther, color:'#a9a9a9' },
      { y: eachOther, color:'#46f0f0' }, { y: eachOther, color:'#008080' },
      { y: eachOther, color:'#bcf60c' }
    ]}]
  });

  // Unknown：整块灰（无标签）
  Highcharts.chart('unknown_pie',{
    chart:{ type:'pie' },
    title:{ text:'' }, credits:{ enabled:false }, tooltip:{ enabled:false }, accessibility:{ enabled:false },
    plotOptions:{
      series: {
      animation:false,
      enableMouseTracking:false,
      states:{ hover:{ enabled:false }, inactive:{ opacity:1 } }
        },
      pie:{ dataLabels:{enabled:false}, size:PIE_SIZE, borderWidth:0, showInLegend:false } },
    series:[{ data:[{ y:100, color:'lightgray' }] }]
  });

  for (const r of document.querySelectorAll('input[type=radio]')) r.required = true;
})();
</script>
{% endblock %}