Attaque2

Running

File size: 11,564 Bytes

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Générateur de Flashcards & Quiz</title>
  <!-- Inclusion de Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Inclusion de Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    /* Animation de survol pour les cartes et options */
    .hover-transform {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-transform:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    /* Animation de chargement personnalisée */
    .spinner {
      border: 4px solid rgba(0, 0, 0, 0.1);
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      border-left-color: #4f46e5;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body class="bg-gray-50">
  <!-- En-tête -->
  <header class="bg-gradient-to-r from-indigo-600 to-blue-500 py-6 shadow-lg">
    <h1 class="text-center text-white text-4xl font-bold">Générateur de Flashcards & Quiz</h1>
  </header>

  <main class="container mx-auto px-4 py-8">
    <!-- Section de configuration -->
    <section class="max-w-2xl mx-auto mb-10">
      <div class="bg-white rounded-xl shadow-lg p-8">
        <div class="mb-6">
          <label for="topic" class="block text-gray-700 text-lg font-medium mb-2">Sujet</label>
          <input type="text" id="topic" placeholder="Entrez un sujet..."
                 class="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500" />
        </div>
        <div class="mb-6">
          <span class="block text-gray-700 text-lg font-medium mb-2">Type de contenu</span>
          <div class="flex space-x-6">
            <label class="flex items-center space-x-2">
              <input type="radio" name="contentType" value="flashcards" checked
                     class="form-radio h-5 w-5 text-indigo-600" />
              <span class="text-gray-800">Flashcards</span>
            </label>
            <label class="flex items-center space-x-2">
              <input type="radio" name="contentType" value="quiz"
                     class="form-radio h-5 w-5 text-indigo-600" />
              <span class="text-gray-800">Quiz</span>
            </label>
          </div>
        </div>
        <button id="generateBtn" class="w-full bg-indigo-600 text-white font-semibold py-3 rounded-md shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition">
          Générer
        </button>
      </div>
    </section>

    <!-- Indicateur de chargement -->
    <section id="loading" class="hidden flex flex-col items-center justify-center my-10">
      <div class="spinner mb-4"></div>
      <p class="text-gray-600 text-lg">Génération en cours... Patientez quelques instants.</p>
    </section>

    <!-- Flashcards -->
    <section id="flashcardsContainer" class="mt-8 hidden">
      <div class="mb-6 text-center">
        <h2 class="text-3xl font-semibold text-gray-800">Flashcards générées</h2>
        <p class="text-gray-500">Cliquez sur une carte pour révéler la réponse</p>
      </div>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
    </section>

    <!-- Quiz -->
    <section id="quizContainer" class="mt-8 max-w-3xl mx-auto hidden">
      <div class="mb-6 text-center">
        <h2 class="text-3xl font-semibold text-gray-800">Quiz généré</h2>
        <p class="text-gray-500">Sélectionnez une réponse pour chaque question</p>
      </div>
    </section>
  </main>

  <footer class="bg-gray-100 py-4">
    <p class="text-center text-gray-500 text-sm">© 2025 Générateur de Flashcards & Quiz. Tous droits réservés.</p>
  </footer>

  <script>
    const generateBtn = document.getElementById('generateBtn');
    const loadingIndicator = document.getElementById('loading');
    const flashcardsContainer = document.getElementById('flashcardsContainer');
    const quizContainer = document.getElementById('quizContainer');
    const topicInput = document.getElementById('topic');

    generateBtn.addEventListener('click', () => {
      const topic = topicInput.value.trim();
      if (!topic) {
        alert('Veuillez entrer un sujet.');
        return;
      }

      const contentType = document.querySelector('input[name="contentType"]:checked').value;

      // Afficher le chargement et réinitialiser les sections
      loadingIndicator.classList.remove('hidden');
      flashcardsContainer.querySelector('.grid') && (flashcardsContainer.querySelector('.grid').innerHTML = '');
      quizContainer.innerHTML = '';
      flashcardsContainer.classList.add('hidden');
      quizContainer.classList.add('hidden');

      // Simulation d'appel API (remplacez par votre fetch)
      setTimeout(() => {
        loadingIndicator.classList.add('hidden');
        // Exemple de données fictives pour le quiz
        if (contentType === 'quiz') {
          const data = {
            quiz: [
              {
                question: "When did World War II begin?",
                options: ["September 1, 1938", "September 2, 1945", "September 1, 1939", "December 7, 1941"],
                correctAnswer: "September 1, 1939",
                explanation: "World War II began on September 1, 1939, with the German invasion of Poland."
              },
              {
                question: "Which event led the United States to enter World War II?",
                options: ["The invasion of Poland", "The fall of France", "The attack on Pearl Harbor", "The Battle of Britain"],
                correctAnswer: "The attack on Pearl Harbor",
                explanation: "The Japanese attack on Pearl Harbor on December 7, 1941, prompted the United States to declare war."
              }
            ]
          };
          quizContainer.classList.remove('hidden');
          displayQuiz(data.quiz);
        } else {
          // Exemple fictif pour les flashcards
          const data = {
            flashcards: [
              { question: "Capital of France?", answer: "Paris" },
              { question: "Capital of Spain?", answer: "Madrid" },
              { question: "Capital of Italy?", answer: "Rome" }
            ]
          };
          flashcardsContainer.classList.remove('hidden');
          displayFlashcards(data.flashcards);
        }
      }, 1500);
    });

    function displayFlashcards(flashcards) {
      const gridContainer = flashcardsContainer.querySelector('.grid') || document.createElement('div');
      if (!gridContainer.classList.contains('grid')) {
        gridContainer.className = 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6';
        flashcardsContainer.appendChild(gridContainer);
      }
      gridContainer.innerHTML = '';
      flashcards.forEach((card, index) => {
        const cardElement = document.createElement('div');
        cardElement.className = 'bg-white rounded-xl shadow-lg p-6 cursor-pointer hover-transform';
        cardElement.setAttribute('onclick', `toggleAnswer(${index})`);
        cardElement.innerHTML = `
          <h3 class="text-xl font-semibold text-gray-800 mb-4">${card.question}</h3>
          <div id="answer-${index}" class="hidden text-gray-700 border-t border-gray-200 pt-4">
            <span class="font-bold">Réponse:</span> ${card.answer}
          </div>
        `;
        gridContainer.appendChild(cardElement);
      });
    }

    function toggleAnswer(index) {
      const answerElement = document.getElementById(`answer-${index}`);
      answerElement.classList.toggle('hidden');
    }

    function displayQuiz(quizQuestions) {
      quizQuestions.forEach((question, qIndex) => {
        const questionCard = document.createElement('div');
        questionCard.className = 'bg-white rounded-xl shadow-lg p-6 mb-6';
        let optionsHtml = '';
        // Sécuriser la réponse correcte
        const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '&quot;');
        question.options.forEach((option, oIndex) => {
          optionsHtml += `
            <div class="option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer hover-transform hover:bg-gray-50 text-gray-800"
                 id="q${qIndex}-o${oIndex}"
                 data-correct="${safeCorrectAnswer}"
                 onclick="selectOption(this, ${qIndex}, ${oIndex})">
              ${option}
            </div>
          `;
        });
        questionCard.innerHTML = `
          <h4 class="text-lg font-semibold text-gray-800 mb-4">${qIndex + 1}. ${question.question}</h4>
          <div class="options">
            ${optionsHtml}
          </div>
          <div id="explanation-${qIndex}" class="hidden mt-4 p-4 rounded-md bg-blue-50 border border-blue-200 text-blue-700 text-sm">
            <strong>Explication:</strong> ${question.explanation}
          </div>
        `;
        quizContainer.appendChild(questionCard);
      });
    }

    function selectOption(element, questionIndex, optionIndex) {
      const correctAnswer = element.dataset.correct;
      const questionOptions = quizContainer.querySelectorAll(`#q${questionIndex}-o0`)[0].parentElement.querySelectorAll('.option');
      const explanationElement = document.getElementById(`explanation-${questionIndex}`);

      // Vérifier si une option a déjà été sélectionnée pour éviter le re-clic
      let alreadyAnswered = false;
      questionOptions.forEach(opt => {
        if (opt.classList.contains('bg-green-100') || opt.classList.contains('bg-red-100')) {
          alreadyAnswered = true;
        }
      });
      if (alreadyAnswered) return;

      // Réinitialiser les styles pour toutes les options
      questionOptions.forEach(option => {
        option.classList.remove('bg-indigo-100', 'border-indigo-300', 'bg-green-100', 'border-green-300', 'text-green-800', 'bg-red-100', 'border-red-300', 'text-red-800');
        option.classList.add('hover:bg-gray-50');
      });

      // Appliquer le style à l'option sélectionnée
      element.classList.add('bg-indigo-100', 'border-indigo-300');
      element.classList.remove('hover:bg-gray-50');

      const selectedText = element.textContent.trim();
      if (selectedText === correctAnswer) {
        element.classList.remove('bg-indigo-100', 'border-indigo-300');
        element.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
      } else {
        element.classList.remove('bg-indigo-100', 'border-indigo-300');
        element.classList.add('bg-red-100', 'border-red-300', 'text-red-800');
        // Mettre en évidence la bonne réponse
        questionOptions.forEach(option => {
          if (option.textContent.trim() === correctAnswer) {
            option.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
            option.classList.remove('hover:bg-gray-50');
          }
        });
      }

      // Désactiver les clics sur toutes les options de cette question
      questionOptions.forEach(option => {
        option.onclick = null;
        option.classList.remove('cursor-pointer');
        option.style.cursor = 'default';
      });

      // Afficher l'explication
      explanationElement.classList.remove('hidden');
    }
  </script>
</body>
</html>