Quiz Antalaha et Madagascar

index.html · 4.6 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Fichier : index.html
  Rôle    : structure du quiz. Trois « écrans » (accueil, question,
            fin) dont un seul est visible à la fois (attribut hidden).
  Dépend de : css/style.css + 5 scripts, à charger DANS CET ORDRE
              (voir le bas de la page).
  ============================================================
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quiz Antalaha et Madagascar</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <header class="entete">
    <img class="entete__image" src="medias/antalaha-ravenala-paysage.svg" alt="">
    <div class="entete__texte">
      <h1>Quiz Antalaha et Madagascar</h1>
      <label class="option-son">
        <input type="checkbox" id="option-son" checked>
        Effets sonores
      </label>
    </div>
  </header>

  <main class="page" id="contenu">

    <!-- ===== Écran 1 : accueil ===== -->
    <section id="ecran-accueil" class="carte" aria-labelledby="titre-accueil">
      <h2 id="titre-accueil" tabindex="-1">Testez vos connaissances</h2>
      <p>Répondez aux questions avant la fin du temps : plus vous êtes rapide, plus vous gagnez de points.</p>

      <form id="formulaire-accueil">
        <!-- fieldset + legend : regroupe les boutons radio et les annonce correctement -->
        <fieldset class="niveaux">
          <legend>Choisissez un niveau</legend>
          <!-- Les trois niveaux sont créés par ui.js à partir de l'objet NIVEAUX -->
          <div id="liste-niveaux"></div>
        </fieldset>
        <button type="submit" class="bouton">Commencer</button>
      </form>

      <h3>Meilleurs scores</h3>
      <ul id="liste-meilleurs" class="meilleurs"></ul>
      <p id="note-stockage" class="aide">
        Les records sont gardés sur cet appareil quand le navigateur l'autorise ; sinon ils
        ne durent que le temps de la visite.
      </p>
    </section>

    <!-- ===== Écran 2 : question ===== -->
    <section id="ecran-question" class="carte" aria-labelledby="texte-question" hidden>
      <div class="infos">
        <span id="info-progression"></span>
        <span id="info-score"></span>
      </div>

      <!-- Minuteur : purement visuel (aria-hidden) ; les annonces vocales passent par #annonce -->
      <div class="minuteur" aria-hidden="true">
        <progress id="barre-temps" max="1" value="1"></progress>
        <span id="texte-temps"></span>
      </div>

      <!-- tabindex="-1" : permet de donner le focus par programme (pour les lecteurs d'écran) -->
      <h2 id="texte-question" tabindex="-1"></h2>

      <!-- Les 4 boutons de réponse sont créés par ui.js -->
      <div id="liste-choix" class="choix" role="group" aria-label="Propositions de réponse"></div>
      <p class="aide">Astuce clavier : touches 1 à 4 pour répondre, Entrée pour continuer.</p>

      <div id="zone-retour" class="retour" hidden>
        <p id="texte-retour"></p>
        <button type="button" id="bouton-suivant" class="bouton">Question suivante</button>
      </div>

      <button type="button" id="bouton-abandonner" class="bouton bouton--discret">Abandonner</button>
    </section>

    <!-- ===== Écran 3 : fin ===== -->
    <section id="ecran-fin" class="carte" aria-labelledby="titre-fin" hidden>
      <h2 id="titre-fin" tabindex="-1">Partie terminée</h2>
      <p id="resume-fin" class="gros"></p>
      <p id="message-record" class="record"></p>
      <button type="button" id="bouton-rejouer" class="bouton">Rejouer</button>
    </section>

    <!-- Zone d'annonces pour lecteurs d'écran (invisible).
         aria-live="polite" : le texte écrit ici est lu à voix haute sans couper la lecture en cours. -->
    <div id="annonce" class="sr-only" aria-live="polite"></div>
  </main>

  <footer class="pied">
    <p>Site pédagogique du Portail Antalaha – code ouvert : commencez par <code>js/main.js</code>.</p>
  </footer>

  <!-- ORDRE DE CHARGEMENT : chaque fichier ne doit utiliser que ce qui est déjà chargé.
       1. data/questions.js : les données (NIVEAUX, QUESTIONS)
       2. js/sons.js        : l'objet Sons (aucune dépendance)
       3. js/quiz.js        : l'objet Quiz (utilise NIVEAUX et QUESTIONS)
       4. js/ui.js          : l'objet UI   (utilise NIVEAUX)
       5. js/main.js        : relie le tout (utilise Quiz, UI, Sons) -->
  <script src="data/questions.js"></script>
  <script src="js/sons.js"></script>
  <script src="js/quiz.js"></script>
  <script src="js/ui.js"></script>
  <script src="js/main.js"></script>
</body>
</html>