{% extends 'base.html' %}

{% block content %}
  <h1>퀴즈 생성 결과</h1>

  {% if quizzes %}
    <ul>
      {% for quiz in quizzes %}
        <li>
          <h2>문제 주인: {{ quiz[3] }}</h2> <!-- 이름 부분 -->
          <h3>질문: {{ quiz[0] }}</h3> <!-- 질문 부분 -->
          <ul>
            {% for option in quiz[1] %} <!-- 4지선다 보기 -->
              <li>{{ option }}</li>
            {% endfor %}
          </ul>
          <button onclick="showAnswer('{{ loop.index0 }}')">정답 보기</button>
          <p id="answer-{{ loop.index0 }}" style="display: none;">정답: {{ quiz[2] }}</p> <!-- 정답 -->
        </li>
      {% endfor %}
    </ul>
  {% else %}
    <p>퀴즈가 없습니다. 다시 시도해 주세요.</p>
  {% endif %}

  <script>
    let currentQuizIndex = 0;

    function showAnswer(index) {
      const answer = document.getElementById(`answer-${index}`);
      if (answer.style.display === "none") {
        answer.style.display = "block";
      } else {
        answer.style.display = "none";
      }
      currentQuizIndex++;

      // 퀴즈를 모두 풀고 나면 마무리 페이지로 이동
      if (currentQuizIndex === { length }) {
        setTimeout(() => {
          window.location.href = "{{ url_for('quiz.finish') }}";
        }, 3000); // 3초 후 자동 이동
      }
    }
  </script>
{% endblock %}