<?php
session_start();
if (!isset($_SESSION['usuario'])) {
    header("Location: ../index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz - Lengua y Literatura</title>
  <link rel="stylesheet" href="../css/styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="../js/script.js" defer></script>
</head>
<body>

  <header class="navbar">
    <div class="logo">Lengua<span>&</span>Literatura</div>
    <nav>
      <ul class="nav-menu">
        <nav>
  <?php include("../includes/menu.php"); ?>
</nav>
      </ul>
      <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </nav>
  </header>

  <section class="hero" style="min-height:50vh; margin-top:80px;">
    <div class="hero-content">
      <h1>Quiz <span>Interactivo</span></h1>
      <p>Pon a prueba lo aprendido. El puntaje se guarda en tu navegador.</p>
    </div>
  </section>

  <section class="quiz-page">
    <form id="quiz-form" class="quiz-form">
      <div class="quiz-q">
        <p>1. ¿Qué parte de la oración realiza la acción del verbo?</p>
        <label><input type="radio" name="q1" value="A"> Predicado</label>
        <label><input type="radio" name="q1" value="B"> Sujeto</label>
        <label><input type="radio" name="q1" value="C"> Complemento directo</label>
      </div>
      <div class="quiz-q">
        <p>2. Las palabras agudas llevan tilde si terminan en...</p>
        <label><input type="radio" name="q2" value="A"> Consonante (menos n/s)</label>
        <label><input type="radio" name="q2" value="B"> N, S o vocal</label>
        <label><input type="radio" name="q2" value="C"> Solo vocal</label>
      </div>
      <div class="quiz-q">
        <p>3. ¿Quién escribió <em>Don Quijote de la Mancha</em>?</p>
        <label><input type="radio" name="q3" value="A"> Gabriel García Márquez</label>
        <label><input type="radio" name="q3" value="B"> Miguel de Cervantes</label>
        <label><input type="radio" name="q3" value="C"> William Shakespeare</label>
      </div>
      <div class="quiz-q">
        <p>4. Selecciona la opción que corresponde a un conector de contraste:</p>
        <label><input type="radio" name="q4" value="A"> Además</label>
        <label><input type="radio" name="q4" value="B"> Por lo tanto</label>
        <label><input type="radio" name="q4" value="C"> Sin embargo</label>
      </div>
      <div class="quiz-q">
        <p>5. ¿Qué tipo de punto es este (;)?</p>
        <label><input type="radio" name="q5" value="A"> Suspensivo</label>
        <label><input type="radio" name="q5" value="B"> Pausa mayor</label>
        <label><input type="radio" name="q5" value="C"> Aparte</label>
      </div>
      <button class="btn-main" type="submit">Enviar</button>
      <div id="quiz-result" class="quiz-result"></div>
    </form>

    <div class="quiz-acciones">
      <button id="quiz-reintentar" type="button" class="btn-main">Reintentar</button>
      <button id="quiz-limpiar-progreso" type="button" class="btn-main">Borrar Puntaje Guardado</button>
    </div>
  </section>

  <footer>
    <div class="footer-content">
      <p>&copy; Curso de Lengua y Literatura BY EVLU Elvislu (Elvis Santamaría) - Todos los derechos reservados.</p>
      </div>
    </div>
  </footer>
</body>
</html>