{{ block title }}
Analogien
{{ endblock }}
{{ block content }}
  <div class="container">
    <h2>Runde {{ player.round_number }}</h2>

    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Frage</h5>
        <div class="border p-3 mb-3">
          <p id="question"></p>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Optionen</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <div class="border p-3 mb-2">
              <button type="button" onclick="recordResponse(this)" value="A" id="optionA" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class="border p-3 mb-2">
              <button type="button" onclick="recordResponse(this)" value="B" id="optionB" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class="border p-3 mb-2">
              <button type="button" onclick="recordResponse(this)" value="C" id="optionC" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class="border p-3 mb-2">
              <button type="button" onclick="recordResponse(this)" value="D" id="optionD" class="btn btn-primary option-btn"></button>
            </div>
          </li>
          <li class="list-group-item">
            <div class="border p-3 mb-2">
              <button type="button" onclick="recordResponse(this)" value="E" id="optionE" class="btn btn-primary option-btn"></button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    {{if DEBUG}}
    <div class="card" >
      <div class="card-body">
        <h5 class="card-title">Lösung</h5>
        <div class="border p-3 mb-3">
          <p id="solution"></p>
        </div>
      </div>
    </div>
    {{endif}}

    <form id="form" method="post">
      <input type="hidden" name="response_games" id="response_games">
    </form>
  </div>

  <script>
    let responses = {};
    let analogy = js_vars.analogy;

    function updateUI() {
      document.getElementById("question").innerText = analogy.question;

      const options = ['optionA','optionB','optionC','optionD','optionE'];
      const optionButtons = document.getElementsByClassName("option-btn");
      for (let i = 0; i < optionButtons.length; i++) {
        optionButtons[i].innerText = analogy[options[i]];
      }

      document.getElementById("solution").innerText = analogy.solution;
    }

    function recordResponse(btn) {
      responses['answer'] = btn.value;
      document.getElementById("response_games").value = JSON.stringify(responses);
      document.getElementById("form").submit();

    }

    function handleSubmit() {
      const selectedOption = document.querySelector("button.option-btn:focus");

      responses[analogy[0].id] = selectedOption ? selectedOption.value : 0;
      document.getElementById("response_games").value = JSON.stringify(responses);
    }

    document.getElementById("form").addEventListener("submit", handleSubmit);

    updateUI();
  </script>

{{ endblock }}