{% extends 'base.html' %}

{% block content %}
  <div class="quiz-container">
    <h1 class="quiz-title">Quiz Results</h1>

    {% if quiz %}
      <div class="quiz-content">
        <!-- Display quiz host's name -->
        <div class="quiz-host-container">
          <span class="quiz-host">Host: {{ quiz[0] }}</span>
        </div>

        <!-- Display the question -->
        <div class="quiz-question-container">
          <span class="quiz-question">{{ quiz[1] }}</span>
        </div>

        <!-- Display quiz options as it is -->
        <ul class="choices">
            {% for choice in quiz[2] %}
            <li>{{ loop.index }}. {{ choice }}</li>
            {% endfor %}
        </ul>

        <!-- Show answer button that disappears after click -->
        <button class="answer-button" onclick="showAnswer()">Show Answer</button>

        <!-- Correct answer, initially hidden -->
        <p id="answer" style="display: none;" class="correct-answer">Correct Answer: {{ quiz[3] }}</p>
      </div>
    {% else %}
      <p>No quiz available. Please try again.</p>
    {% endif %}

    <!-- Button to move to the next quiz -->
    <form method="post" style="margin-top: 20px;">
      <input type="submit" value="Next" class="next-button">
    </form>
  </div>

  <script>
    function showAnswer() {
      const answer = document.getElementById('answer');
      const button = document.querySelector('.answer-button');
      answer.style.display = "block";
      button.style.display = "none"; // Hide the button after clicking
    }
  </script>
{% endblock %}