eis-website/js/quiz.js

// ====================== QUIZ DATA ======================

const quizData = [
  {
    frage: "Welche Aufgabe hat HTML bei der Web-Entwicklung?",
    antworten: [
      { text: "Struktur und Inhalte der Webseite", korrekt: true },
      { text: "Design und visuelle Gestaltung", korrekt: false },
      { text: "Interaktivität und dynamisches Verhalten", korrekt: false }
    ]
  },
  {
    frage: "Wo an der PH Weingarten findet die Lehrveranstaltung 'Entwicklung interaktiver Softwareanwendungen' statt?",
    antworten: [
      { text: "Universität Konstanz", korrekt: false },
      { text: "PH Weingarten", korrekt: true },
      { text: "Universität Stuttgart", korrekt: false }
    ]
  },
  {
    frage: "Mit welcher Methode kannst du auf ein HTML-Element zugreifen, wenn du seine ID kennst?",
    antworten: [
      { text: "document.getElementByName()", korrekt: false },
      { text: "document.getElementById()", korrekt: true },
      { text: "document.selectElement()", korrekt: false }
    ]
  }
];

// ====================== QUIZ STATE ======================

let currentQuestion = 0;
let points = 0;
let answeredQuestions = new Set();

// ====================== INIT ======================

function initQuiz() {
  currentQuestion = 0;
  points = 0;
  answeredQuestions = new Set();
  displayQuestion();
}

// ====================== DISPLAY QUESTION ======================

function displayQuestion() {
  const container = document.getElementById('quiz-container');
  const resultContainer = document.getElementById('quiz-result');

  // Quiz beendet
  if (currentQuestion >= quizData.length) {
    container.style.display = 'none';
    resultContainer.style.display = 'block';
    displayResult();
    return;
  }

  // Frage anzeigen
  resultContainer.style.display = 'none';
  container.style.display = 'block';

  const question = quizData[currentQuestion];
  
  container.innerHTML = `
    <div class="quiz-question">
      <div class="question-counter">Frage ${currentQuestion + 1} von ${quizData.length}</div>
      <h2>${question.frage}</h2>
      
      <div class="quiz-answers">
        ${question.antworten.map((antwort, index) => `
          <button class="answer-btn" data-index="${index}" onclick="answerQuestion(${index})">
            ${antwort.text}
          </button>
        `).join('')}
      </div>
      
      <div id="feedback" class="feedback" style="display: none;"></div>
      
      <div class="quiz-progress">
        <div class="progress-bar">
          <div class="progress-fill" style="width: ${((currentQuestion + 1) / quizData.length) * 100}%"></div>
        </div>
        <p class="points-display">Punkte: <strong>${points}</strong>/${quizData.length}</p>
      </div>
    </div>
  `;
}

// ====================== ANSWER QUESTION ======================

function answerQuestion(answerIndex) {
  // Verhindere mehrfaches Antworten bei gleicher Frage
  if (answeredQuestions.has(currentQuestion)) {
    return;
  }
  answeredQuestions.add(currentQuestion);

  const question = quizData[currentQuestion];
  const selectedAnswer = question.antworten[answerIndex];
  const feedbackEl = document.getElementById('feedback');
  const buttons = document.querySelectorAll('.answer-btn');

  // Buttons deaktivieren
  buttons.forEach(btn => btn.disabled = true);

  // Feedback geben
  if (selectedAnswer.korrekt) {
    points++;
    feedbackEl.textContent = '✅ Richtig!';
    feedbackEl.className = 'feedback correct';
    buttons[answerIndex].classList.add('correct');
  } else {
    feedbackEl.textContent = `❌ Falsch! Die richtige Antwort ist: "${question.antworten.find(a => a.korrekt).text}"`;
    feedbackEl.className = 'feedback incorrect';
    buttons[answerIndex].classList.add('incorrect');
    
    // Richtige Antwort auch als grün markieren
    const correctIndex = question.antworten.findIndex(a => a.korrekt);
    buttons[correctIndex].classList.add('correct');
  }

  feedbackEl.style.display = 'block';

  // Nächste Frage nach Verzögerung
  setTimeout(() => {
    currentQuestion++;
    displayQuestion();
  }, 2000);
}

// ====================== DISPLAY RESULT ======================

function displayResult() {
  const resultText = document.getElementById('result-text');
  const percentage = Math.round((points / quizData.length) * 100);

  let message = '';
  if (points === quizData.length) {
    message = `🌟 Perfekt! Du hast alle ${quizData.length} Fragen richtig beantwortet!`;
  } else if (points >= quizData.length * 0.66) {
    message = `👍 Sehr gut! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%).`;
  } else if (points >= quizData.length * 0.33) {
    message = `📚 Okay! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Mehr lernen hilft!`;
  } else {
    message = `💪 Nicht so schlecht! Du hast ${points} von ${quizData.length} Fragen richtig (${percentage}%). Nächstes Mal besser!`;
  }

  resultText.textContent = message;
}

// ====================== RESTART QUIZ ======================

document.addEventListener('DOMContentLoaded', function() {
  const restartBtn = document.getElementById('restart-btn');
  if (restartBtn) {
    restartBtn.addEventListener('click', initQuiz);
  }
  
  // Quiz starten
  initQuiz();
});