{{ block title }}
問題選擇
{{ endblock }}

{{ block content }}
<style>
.container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.option {
  width: 8rem;
  height: 6rem;
  background-color: #BEE6CE;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color 0.1s;
}

.option:hover:not(.selected) {
  background-color: #68D89B;
  transition: background-color 0.3s;
}

.selected {
  background-color: #68D89B;
  transition: background-color 0.3s;
}

</style>

  
<div class="container">
    <div class="options" id="options">
      
    </div> 
  
    <button type="button" class="confirmBtn otree-btn-next btn btn-primary">確認</button>

    
  </div>
  
  <div style="display: none;">
    {{ formfields }}
  </div>
  

  <script type="text/javascript">

function hideContainer() {
  const container = document.querySelector('.container');

  // Hide the container immediately
  container.style.opacity = '0';
  // Make the container reappear after a delay
  setTimeout(function() {
    // Show the container after 0.1 seconds
    container.style.opacity = '1';
    container.style.display = 'block';
  }, 100); // Adjust the delay here as needed
}

    document.addEventListener('DOMContentLoaded', function() {
      const options = document.getElementById('options');
      const confirmBtn = document.querySelector('.confirmBtn');
  
      let selectedValue = '';
      let round = 1;
  
      function generateOptions(round, value) {
        let optionsHTML = '';
        switch (round) {
          case 1:
            optionsHTML = `
              <div class="option" data-value="1">14 天後獲得<br>100 元</div>
              <div class="option" data-value="2">28 天後獲得<br>165 元</div>
            `;
            break;
          case 2:
            if (value === '1') {
              optionsHTML = `
                <div class="option" data-value="1-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="1-2">28 天後獲得<br>185 元</div>
              `;
            } else if (value === '2') {
              optionsHTML = `
                <div class="option" data-value="2-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="2-2">28 天後獲得<br>145 元</div>
              `;
            }
            break;
          case 3:
            // Add options for the third round here
            if (value === '1-1') {
              optionsHTML = `
                <div class="option" data-value="1-1-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="1-1-2">28 天後獲得<br>195 元</div>
              `;
            } else if (value === '1-2') {
              optionsHTML = `
                <div class="option" data-value="1-2-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="1-2-2">28 天後獲得<br>175 元</div>
              `;
            } else if (value === '2-1') {
              optionsHTML = `
                <div class="option" data-value="2-1-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="2-1-2">28 天後獲得<br>155 元</div>
              `;
            } else if (value === '2-2') {
              optionsHTML = `
                <div class="option" data-value="2-2-1">14 天後獲得<br>100 元</div>
                <div class="option" data-value="2-2-2">28 天後獲得<br>135 元</div>
              `;
            }
            break;
          case 4:
            // Add options for the fourth round here
            // Modify according to your requirements for the fourth round
            if (value === '1-1-1') {
              optionsHTML = `
                <div class="option" data-value="200<">14 天後獲得<br>100 元</div>
                <div class="option" data-value="195-200">28 天後獲得<br>200 元</div>
              `;
            } else if (value === '1-1-2') {
              optionsHTML = `
                <div class="option" data-value="190-195">14 天後獲得<br>100 元</div>
                <div class="option" data-value="185-190">28 天後獲得<br>190 元</div>
              `;
            } else if (value === '1-2-1') {
              optionsHTML = `
                <div class="option" data-value="180-185">14 天後獲得<br>100 元</div>
                <div class="option" data-value="175-180">28 天後獲得<br>180 元</div>
              `;
            } else if (value === '1-2-2') {
              optionsHTML = `
                <div class="option" data-value="170-175">14 天後獲得<br>100 元</div>
                <div class="option" data-value="165-170">28 天後獲得<br>170 元</div>
              `;
            } else if (value === '2-1-1') {
              optionsHTML = `
                <div class="option" data-value="160-165">14 天後獲得<br>100 元</div>
                <div class="option" data-value="155-160">28 天後獲得<br>160 元</div>
              `;
            } else if (value === '2-1-2') {
              optionsHTML = `
                <div class="option" data-value="150-155">14 天後獲得<br>100 元</div>
                <div class="option" data-value="145-150">28 天後獲得<br>150 元</div>
              `;
            } else if (value === '2-2-1') {
              optionsHTML = `
                <div class="option" data-value="140-145">14 天後獲得<br>100 元</div>
                <div class="option" data-value="135-140">28 天後獲得<br>140 元</div>
              `;
            } else if (value === '2-2-2') {
              optionsHTML = `
                <div class="option" data-value="130-135">14 天後獲得<br>100 元</div>
                <div class="option" data-value="130>">28 天後獲得<br>130 元</div>
              `;
            }
            break;
          // Add more cases for further rounds if needed
        }
        options.innerHTML = optionsHTML;
  
        const optionElements = document.querySelectorAll('.option');
        optionElements.forEach(option => {
          option.addEventListener('click', function() {
            selectedValue = option.dataset.value;
            optionElements.forEach(opt => opt.classList.remove('selected'));
            option.classList.add('selected');
          });
        });
      }
  
      confirmBtn.addEventListener('click', function() {
        if (selectedValue !== '') {
          if (round < 4) {
              if (round == 3) {
                  confirmBtn.type = "submit";
              }
  
            round += 1;
            options.innerHTML = '';
  
            hideContainer();
  
            setTimeout(function() {
              generateOptions(round, selectedValue);
            }, 100);
          } else {
              $('#id_switching_point_2').val(selectedValue);
          }
        } else {
          alert('請選擇一個選項');
        }
      });
  
      generateOptions(round, '');
    });
  </script>
   
{{ endblock }}