{{ block title }}
浮世絵の評価（{{ round_number }} / {{ num_rounds }}）
{{ endblock }}

{{ block content }}

<style>
  * { box-sizing: border-box; }

  .ukiyoe-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .img-area {
    text-align: center;
    margin-bottom: 12px;
  }

  .ukiyoe-img {
    max-width: 100%;
    max-height: 38vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }

  .progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
  }

  .progress-bar {
    flex: 1;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    overflow: hidden;
  }

  .progress-bar-fill {
    height: 100%;
    background: #555;
    border-radius: 3px;
    transition: width 0.3s ease;
  }

  .progress-label {
    font-size: 0.8rem;
    color: #777;
    white-space: nowrap;
  }

  .qcard {
    display: none;
  }

  .qcard.visible {
    display: block;
  }

  @keyframes slideIn {
    from { transform: translateX(48px); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
  }

  .qcard.animate {
    animation: slideIn 0.32s ease-out;
  }

  .qtxt {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #222;
  }

  .choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  input[type=radio] {
    display: none;
  }

  label.cbtn {
    display: block;
    padding: 13px 16px;
    border: 2px solid #aaa;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    cursor: pointer;
    font-size: 0.92rem;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
  }

  label.cbtn:active {
    background: #f0f0f0;
    border-color: #555;
  }

  .finish-area {
    display: none;
    text-align: center;
    padding: 24px 0;
  }

  .finish-area p {
    margin-bottom: 20px;
    color: #444;
  }

  .btn-next {
    padding: 14px 48px;
    font-size: 1rem;
    border: 2px solid #333;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-next:active {
    background: #f0f0f0;
  }
</style>

<div class="ukiyoe-wrap">

  <div class="img-area">
    <img src="/static/ukiyoe/images/{{ image }}" class="ukiyoe-img" alt="浮世絵">
  </div>

  <div class="progress-bar-wrap">
    <div class="progress-bar">
      <div class="progress-bar-fill" id="progress-fill" style="width: 20%;"></div>
    </div>
    <span class="progress-label" id="progress-label">1 / 5</span>
  </div>

  <!-- 質問1 -->
  <div id="qcard1" class="qcard visible animate">
    <p class="qtxt">登場人物に対してどれほど躍動感を感じますか。</p>
    <div class="choices">
      <input type="radio" id="q1_1" name="q1" value="1">
      <label for="q1_1" class="cbtn">1：全く感じない</label>
      <input type="radio" id="q1_2" name="q1" value="2">
      <label for="q1_2" class="cbtn">2：あまり感じない</label>
      <input type="radio" id="q1_3" name="q1" value="3">
      <label for="q1_3" class="cbtn">3：どちらでもない</label>
      <input type="radio" id="q1_4" name="q1" value="4">
      <label for="q1_4" class="cbtn">4：やや感じる</label>
      <input type="radio" id="q1_5" name="q1" value="5">
      <label for="q1_5" class="cbtn">5：とても感じる</label>
    </div>
  </div>

  <!-- 質問2 -->
  <div id="qcard2" class="qcard">
    <p class="qtxt">登場人物の体はどれほど捻じれていると思いますか。<br><span style="font-size:0.85rem;color:#555;">（捻じれとは体を左右に回旋させることを指します。例：腰や上半身が正面から横方向にひねられている状態）</span></p>
    <div class="choices">
      <input type="radio" id="q2_1" name="q2" value="1">
      <label for="q2_1" class="cbtn">1：全く捻じれていない</label>
      <input type="radio" id="q2_2" name="q2" value="2">
      <label for="q2_2" class="cbtn">2：あまり捻じれていない</label>
      <input type="radio" id="q2_3" name="q2" value="3">
      <label for="q2_3" class="cbtn">3：どちらでもない</label>
      <input type="radio" id="q2_4" name="q2" value="4">
      <label for="q2_4" class="cbtn">4：やや捻じれている</label>
      <input type="radio" id="q2_5" name="q2" value="5">
      <label for="q2_5" class="cbtn">5：とても捻じれている</label>
    </div>
  </div>

  <!-- 質問3 -->
  <div id="qcard3" class="qcard">
    <p class="qtxt">登場人物は、真顔に比べてどれほど表情（笑顔、怒り顔、泣き顔等）があると思いますか。</p>
    <div class="choices">
      <input type="radio" id="q3_1" name="q3" value="1">
      <label for="q3_1" class="cbtn">1：真顔</label>
      <input type="radio" id="q3_2" name="q3" value="2">
      <label for="q3_2" class="cbtn">2：ほぼ真顔</label>
      <input type="radio" id="q3_3" name="q3" value="3">
      <label for="q3_3" class="cbtn">3：どちらでもない</label>
      <input type="radio" id="q3_4" name="q3" value="4">
      <label for="q3_4" class="cbtn">4：やや表情がある</label>
      <input type="radio" id="q3_5" name="q3" value="5">
      <label for="q3_5" class="cbtn">5：表情がある</label>
    </div>
  </div>

  <!-- 質問4 -->
  <div id="qcard4" class="qcard">
    <p class="qtxt">登場人物の服装はどれほど色豊かに描かれていると思いますか。</p>
    <div class="choices">
      <input type="radio" id="q4_1" name="q4" value="1">
      <label for="q4_1" class="cbtn">1：乏しい</label>
      <input type="radio" id="q4_2" name="q4" value="2">
      <label for="q4_2" class="cbtn">2：やや乏しい</label>
      <input type="radio" id="q4_3" name="q4" value="3">
      <label for="q4_3" class="cbtn">3：どちらでもない</label>
      <input type="radio" id="q4_4" name="q4" value="4">
      <label for="q4_4" class="cbtn">4：やや豊か</label>
      <input type="radio" id="q4_5" name="q4" value="5">
      <label for="q4_5" class="cbtn">5：豊か</label>
    </div>
  </div>

  <!-- 質問5 -->
  <div id="qcard5" class="qcard">
    <p class="qtxt">この画像の登場人物のまとっているもの（服装や装飾品）はどれほど揺れ動いていると思いますか。</p>
    <div class="choices">
      <input type="radio" id="q5_1" name="q5" value="1">
      <label for="q5_1" class="cbtn">1：全く動いていない</label>
      <input type="radio" id="q5_2" name="q5" value="2">
      <label for="q5_2" class="cbtn">2：あまり動いていない</label>
      <input type="radio" id="q5_3" name="q5" value="3">
      <label for="q5_3" class="cbtn">3：どちらでもない</label>
      <input type="radio" id="q5_4" name="q5" value="4">
      <label for="q5_4" class="cbtn">4：やや動いている</label>
      <input type="radio" id="q5_5" name="q5" value="5">
      <label for="q5_5" class="cbtn">5：とても動いている</label>
    </div>
  </div>

  <!-- 回答完了 → 次へ -->
  <div class="finish-area" id="finish-area">
    <p>この浮世絵の評価は以上です。</p>
    <button class="btn-next" name="btn_next" value="1">次へ</button>
  </div>

</div>

<script>
  var current = 1;
  var total = 5;

  function showCard(n) {
    var card = document.getElementById('qcard' + n);
    card.classList.remove('animate');
    card.classList.add('visible');
    void card.offsetWidth; // reflow to restart animation
    card.classList.add('animate');

    var pct = Math.round((n / total) * 100);
    document.getElementById('progress-fill').style.width = pct + '%';
    document.getElementById('progress-label').textContent = n + ' / ' + total;
  }

  document.querySelectorAll('input[type=radio]').forEach(function(radio) {
    radio.addEventListener('change', function() {
      var currentCard = document.getElementById('qcard' + current);
      currentCard.classList.remove('visible', 'animate');

      current++;

      if (current <= total) {
        showCard(current);
      } else {
        document.getElementById('progress-fill').style.width = '100%';
        document.getElementById('progress-label').textContent = '完了';
        var fin = document.getElementById('finish-area');
        fin.style.display = 'block';
      }
    });
  });
</script>

{{ endblock }}