{{ extends 'global/IntroPage.html' }}
{{ block title }}Quiz, Part 1 – Assignment Probabilities{{ endblock }}

{{ block page_body }}

<style>
.info-table-container { overflow-x: auto; margin-bottom: 16px; }
.info-table { border-collapse: collapse; margin: 0 auto; }
.info-table th, .info-table td { border: 1px solid #ddd; padding: 6px 14px; text-align: center; }
.info-table th.row-label { text-align: left; font-weight: bold; background-color: #f5f5f5; min-width: 150px; }
.info-table th[data-island], .info-table td[data-island] { min-width: 62px; }
.island-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-weight: bold; font-size: 13px;
}
.number-line-section { margin: 6px auto; text-align: center; }
.number-line-section:last-child { margin-bottom: 0; }
.number-line-label { font-weight: bold; margin-bottom: 2px; font-size: 14px; }
.number-line-svg { display: block; margin: 0 auto; max-width: 100%; }
.box {
    border: 2px solid #aaa;
    border-radius: 5px;
    padding: 10px 10px;
    margin-bottom: 10px;
}
hr.section-divider { border: none; border-top: 4px solid #999; margin: 20px 0; }
.row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px;
}
.column { float: left; padding: 10px; }
.column-left  { width: 70%; min-width: 500px; align-items: center; }
.column-right {
    width: 30%;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pf-graph-container { margin-top: 4px; padding-top: 0; }
.rank-table {
    border-collapse: collapse;
    margin: 10px auto;
}
.rank-table th,
.rank-table td {
    border: 1px solid #dddddd;
    padding: 4px 8px;
    text-align: center;
}
.rank-table th { font-weight: bold; }
.rank-table input[type="number"] {
    width: 70px;
    text-align: center;
    display: block;
    margin: 0 auto;
}
</style>

<p>Suppose someone submitted this ranking. Answer the sample question below.</p>

<hr class="section-divider">

<div class="row">
  <div class="column column-left">
    <div class="box" style="text-align: center;">
      <div class="pf-graph-container">
        {{ pf_graph }}
      </div>
      <p>Each island has room for <b>{{ num_quota }}</b> travelers. There are <b>{{ num_players }}</b> travelers.</p>
    </div>
  </div>

  <div class="column column-right">
    <div class="box" style="text-align: center;">
      <p>What do you think is your probability of being sent to each island?</p>

      <table class="rank-table">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Island</th>
            <th>Probability (%)</th>
          </tr>
        </thead>
        <tbody>
          {{ for row in belief_rows }}
          <tr>
            <td>{{ row.rank }}</td>
            <td>
              <span class="island-badge" style="background-color:{{ row.bg }};color:{{ row.txt }}">{{ row.island }}</span>
            </td>
            <td>
              <input type="number" name="{{ row.field_name }}" min="0" max="100"
                     style="width:70px;text-align:center;display:block;margin:0 auto;">
            </td>
          </tr>
          {{ endfor }}
          <tr>
            <td colspan="2" style="text-align:center;">
              <span style="display:block;">Not sent to</span>
              <span style="display:block;">any island</span>
            </td>
            <td>
              <input type="number" name="quiz2_belief0" min="0" max="100"
                     style="width:70px;text-align:center;display:block;margin:0 auto;">
            </td>
          </tr>
        </tbody>
      </table>

      <div style="margin-top: 8px; font-size: 14px;">
        Total: <span id="belief-total-display" style="font-weight:bold; color: red;">0</span>%
      </div>

    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var totalDisplay = document.getElementById('belief-total-display');
    var nextContainer = document.getElementById('next-btn-container');
    function getInputs() {
        return Array.from(document.querySelectorAll('input[type="number"]'));
    }
    function beliefSum() {
        return getInputs().reduce(function(s, inp) {
            var v = parseFloat(inp.value);
            return s + (isNaN(v) ? 0 : v);
        }, 0);
    }
    function allFilled() {
        return getInputs().every(function(inp) { return inp.value.trim() !== ''; });
    }
    function updateTotal() {
        var total = beliefSum();
        totalDisplay.textContent = total;
        totalDisplay.style.color = (total === 100) ? 'black' : 'red';
        nextContainer.style.display = allFilled() ? '' : 'none';
    }
    document.querySelector('.column-right .box').addEventListener('input', updateTotal);
    updateTotal();
});
</script>

<p></p>
<div style="display:none;" id="next-btn-container">{{ next_button }}</div>

{{ endblock }}