{{ extends "global/Page.html" }}

{{ block title }}
    {{ if player.Count == -1 }}
        <h3>練習：スライダーの動かし方と「次へ」の表示位置の確認</h3>
    {{ elif player.Count == 0 }}
        <h3>全てのツマミを中央に移動させたあと、「次へ」をクリック</h3>
    {{ else }}
        <h3>{{ player.TaskQuota}}セットのうち、{{ player.Count }}セットめ</span></h3>
    {{ endif}}
{{ endblock }}


{{ block styles }}
<style>
    .Yellow-card {
      background-color: #FEF3CD;
      color:#664D03;
      border-radius: 7px; /* 角を丸くする */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 40%; /* 横幅を広くする */
      margin: 10px auto; /* 上下に適度なマージンを入れ、中央揃えにする */
      text-align: center; /* テキストを中央揃えにする */
      line-height: 50px; /* テキストの高さと同じにする */
    }

    .otree-timer {
        display: none;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .range-slider {
      margin-top: 0vh;
    }

    .rs-range {
      margin-top: 29px;
      width: 250px;
      -webkit-appearance: none;
    }
    .rs-range:focus {
      outline: none;
    }
    .rs-range::-webkit-slider-runnable-track {
      width: 100%;
      height: 2.5px;
      cursor: pointer;
      box-shadow: none;
      background: #ffffff;
      border-radius: 0px;
      border: 0px solid #010101;
    }
    .rs-range::-moz-range-track {
      width: 100%;
      height: 1px;
      cursor: pointer;
      box-shadow: none;
      background: #ffffff;
      border-radius: 0px;
      border: 0px solid #010101;
    }
    .rs-range::-webkit-slider-thumb {
      box-shadow: none;
      border: 0px solid #ffffff;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
      height: 35px;
      width: 20px;
      border-radius: 22px;
      background: white;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -20px;
    }
    .rs-range::-moz-range-thumb {
      box-shadow: none;
      border: 0px solid #ffffff;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
      height: 42px;
      width: 22px;
      border-radius: 22px;
      background: white;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -20px;
    }
    .rs-range::-moz-focus-outer {
      border: 0;
    }

    .rs-label {
      position: relative;
      transform-origin: center center;
      display: block;
      width: 43px;
      height: 43px;
      background: transparent;
      border-radius: 50%;
      line-height: 50px;
      text-align: center;
      font-weight: bold;
      padding-top: 7px;
      box-sizing: border-box;
      border: 2px solid #fff;
      margin-top: 10px;
      margin-left: -12px;
      left: attr(value);
      color: #fff;
      font-style: normal;
      font-weight: normal;
      line-height: normal;
      font-size: 20px;
    }

    /* チェックマークのアニメーション */
    @keyframes checkmark {
      0% {
        opacity: 0;
        transform: scale(0);
      }
      100% {
        opacity: 1;
        transform: scale(1.5); /* 少し大きくする */
        /* color: #D41876;  */
        color: #39b25b
        /* 色を変更 */
      }
    }

    .checkmark {
      display: inline-block;
      margin-left: 10px;
      opacity: 0;
      transform-origin: 50% 50%;
      animation: none; /* アニメーションを初期状態で非表示にする */
    }

    .slider-container {
      position: relative;
      margin-left: 0; /* マージンをゼロに初期化 */
    }

    .slider-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px; /* 列と列の間隔を設定 */
        flex-wrap: nowrap; /* 折り返しを禁止 */
      }

    .range-slider {
        margin-bottom: 0px;
      }

    .split-container {
      flex: 1;
      display: flex;
      box-sizing: border-box;
      flex-wrap: nowrap; /* 折り返しを禁止 */
    }

    .split-container > div {
          flex: 1;
          padding: 20px;
          margin: 0 30px; /* 左右に余白を追加 */
          white-space: nowrap; /* テキストの折り返しを禁止 */
      flex-basis: 0;
      min-width: 0;
        }

    .custom-margin {
          margin-bottom: 60px; /* 特定の行間に20pxの余白を追加 */
        }

    .small-text {
        font-size: 0.7em;
      }

    /* Nextボタン非表示の時のツール */
    .tooltipBlock {
      position: relative;
    }
</style>
{{ endblock }}












{{ block content }}
<div class="container">
① 全てのスライダーのツマミを真ん中（50の位置）に移動　/　② 画面中央下に現れる「次へ」ボタンをクリック</span>
</div>

{{ if player.Count == -1 }}
<div class="Yellow-card">
  <p class="em">
  あと<span class="otree-timer__time-left"></span>秒で練習モード終了
  </p>
</div>
{{ endif }}

<div class="split-container">
  <div>
    <!-- Column 1 -->
    <div  class="slider-column">
      {{ for i in range(1, 5) }}
        <div class="range-slider slider-container">
          <span id="rs-bullet{{ i }}" class="rs-label">0</span>
          <input id="rs-range-line{{ i }}" class="rs-range" type="range" value="0" min="0" max="100">
          <div id="checkmark{{ i }}" class="checkmark">&#10004;</div>
        </div>
      {{ endfor }}
    </div>
  </div>

  <div>
    <!-- Column 2 -->
    <div class="slider-column">
      {{ for i in range(5, 9) }}
        <div class="range-slider slider-container">
          <span id="rs-bullet{{ i }}" class="rs-label">0</span>
          <input id="rs-range-line{{ i }}" class="rs-range" type="range" value="0" min="0" max="100">
          <div id="checkmark{{ i }}" class="checkmark">&#10004;</div>
        </div>
      {{ endfor }}
    </div>

    <!-- 次へボタン -->
    <div align="center">
      <div class="custom-margin"> </div>
      {{ if player.Count == -1 }}
          <button type = "button" id="buttonA" onclick="buttonAClick()">次へ</button>
      {{ else }}
          <button id="buttonA" onclick="buttonAClick()">次へ</button>
      {{ endif }}

      <div class="popup-container">
        <button type="button" id="buttonB" onclick="buttonBClick()">次へ</button>

        {{ if player.Count == -1 }}
          <br>
          <span  class = "red">↑ 全て50にするとこの上に「次へ」ボタンが表れます ↑</span><br>
          （今は押しても何も起きません）
        {{ else }}
          <div class="popup">
          全て50にするとクリックできます
          </div>
        {{ endif }}

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

  <div>
    <!-- Column 3 -->
    <div class="slider-column">
      {{ for i in range(9, 13) }}
        <div class="range-slider slider-container">
          <span id="rs-bullet{{ i }}" class="rs-label">0</span>
          <input id="rs-range-line{{ i }}" class="rs-range" type="range" value="0" min="0" max="100">
          <div id="checkmark{{ i }}" class="checkmark">&#10004;</div>
        </div>
      {{ endfor }}
    </div><br>
  </div>
</div>




    <!-- Cheatボタン -->
  {{ if is_defined('view.is_debug') and view.is_debug }}     
  
    <div align="center">
      <br><br>
      <button id="cheatButton" onclick="cheatButtonClick(event)">Cheat</button>　　　
      <button id="cheatNextButton" class="btn btn-primary">CheatNext</button>
    </div>

    <script>
        document.getElementById("cheatButton").addEventListener("click", function(event) {
          // Prevent the default behavior of the button
          event.preventDefault();
      
          // Set all sliders to 50
          document.querySelectorAll(".rs-range").forEach(function (slider) {
            slider.value = 50;
            var rangeBullet = slider.parentNode.querySelector(".rs-label");
            var checkmark = slider.parentNode.querySelector(".checkmark");
            updateSliderLabel(slider, rangeBullet, checkmark);
          });
      
        });
    </script>
  {{ endif}}
{{ endblock }}











{{ block scripts }}
<script>
      document.addEventListener("DOMContentLoaded", function () {
        // ページ読み込み時に各スライダーの初期値をランダムに設定
        {{ for i in range(1, 21) }}
          setRandomSliderValue("rs-range-line{{ i }}", true, 100);
        {{ endfor }}
      });

      function setRandomSliderValue(sliderId, setMargin = true, marginRange = 100) {
        var rangeSlider = document.getElementById(sliderId);
        var rangeBullet = rangeSlider.parentNode.querySelector(".rs-label");
        var checkmark = rangeSlider.parentNode.querySelector(".checkmark");
        var container = rangeSlider.closest('.slider-container');

        // 0から100のランダムな値を生成してスライダーの初期値に設定
        var randomValue = Math.floor(Math.random() * 101);
        rangeSlider.value = randomValue;

        // 初期値に基づいてツマミの位置とラベルを更新
        updateSliderLabel(rangeSlider, rangeBullet, checkmark);

        if (setMargin) {
          // ランダムに左か右のマージンを取る
          var randomMargin = Math.floor(Math.random() * (marginRange * 2.5 + 1)) - marginRange;
          container.style.marginLeft = randomMargin + "px";
        }
      }

      function updateSliderLabel(rangeSlider, rangeBullet, checkmark) {
        rangeBullet.innerHTML = rangeSlider.value;

        // スライダー値の割合に基づいてツマミの位置を動的に計算
        var bulletPosition = (rangeSlider.value / rangeSlider.max);
        rangeBullet.style.left = (bulletPosition * (rangeSlider.offsetWidth - 16)) + "px";

        // スライダーの値が50になったらラベルを"OK"に変更
        if (rangeSlider.value == 50) {
          rangeBullet.innerHTML = "OK";
          checkmark.style.opacity = 1; // チェックマークを表示
          checkmark.style.animation = "checkmark 0.5s ease-out forwards"; // アニメーションを開始
          checkNextButtonVisibility(); // ボタン表示判定
        } else {
          checkmark.style.opacity = 0; // チェックマークを非表示
          checkmark.style.animation = "none"; // アニメーションをリセット
          checkNextButtonVisibility(); // ボタン表示判定
        }
      }

      function areAllSlidersAt50() {
        var allSliders = document.querySelectorAll(".rs-range");
        for (var i = 0; i < allSliders.length; i++) {
          if (parseInt(allSliders[i].value) !== 50) {
            return false;
          }
        }
        return true;
      }

      // スライダーの値が変更されたときに実行される処理
      document.querySelectorAll(".rs-range").forEach(function(rangeSlider) {
        rangeSlider.addEventListener("input", function() {
          var rangeBullet = rangeSlider.parentNode.querySelector(".rs-label");
          var checkmark = rangeSlider.parentNode.querySelector(".checkmark");
          updateSliderLabel(rangeSlider, rangeBullet, checkmark);
        });
      });
      
      function checkNextButtonVisibility() {
        var allSliders = document.querySelectorAll(".rs-range");
        var showButtonA = true;

        allSliders.forEach(function(slider) {
          if (slider.value != 50) {
            showButtonA = false;
          }
        });

        var buttonA = document.getElementById("buttonA");
        var buttonB = document.getElementById("buttonB");

        if (showButtonA) {
          buttonA.style.display = "block";
          buttonB.style.display = "none";
        } else {
          buttonA.style.display = "none";
          buttonB.style.display = "block";
        }
      }

      function buttonAClick() {
        oTree.next();
      }

      function cheatNextPage() {
          oTree.next();
        }
</script>
{{ endblock }}