{{ block title }}
Zahlenreihen
{{ 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>
    {{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">
      <div class="form-group">
        <label for="answer">Antwort:</label>
        <input type="text" class="form-control" id="answer" name="answer">
      </div>
      <input type="hidden" name="response_games" id="response_games">
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script>
    let responses = {};
    let num_seq = js_vars.number_sequence;

    function updateUI() {
      document.getElementById("question").innerText = num_seq.question;
      document.getElementById("solution").innerText = num_seq.solution;
    }

    function handleSubmit() {
      const answer = document.getElementById("answer").value;
      responses["answer"] = answer;
      document.getElementById("response_games").value = JSON.stringify(responses);
      document.getElementById("form").submit();
    }

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

    updateUI();
  </script>
{{ endblock }}