Beispiel:2005-Quiz.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gewinnspiel zu 10 Jahren SELFHTML</title>
<style>
#quiz label {
	display: block;
	background-color: #AA5522;
	color: white;
	border: medium solid #772200;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;
    }

    /* Hover-Effekt */
    #quiz label:hover {
      background-color: #ffeedd;
	color: black;
    }

    /* mache Fokus sichtbar */
    #quiz input[type="radio"]:focus + label {
      outline: 2px solid black;
      outline-offset: 2px;
    }

    /* Auswahl */
    #quiz input[type="radio"]:checked + label {
      background-color: gold;
      border-color: #866a00;
	color: black;
    }

#quiz input {  /*visually-hidden */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
#quiz label {
	border-radius: 0.2em;
	margin: 0.1em 0;
	padding: 1em 2em;
	max-width: 33em;
}
/* listing with solutions */

.question {
	font-weight: bold;
}

.correct {
	color: #0c0;
}

.incorrect {
	color: #c00;
}

.correct:before {
	content: '✓';
	color: #0d0;
}

.incorrect:before {
	content: '✗';
	color: #f00;
}

.correct:before,
.incorrect:before {
	font: 2em bold;
	padding: 0 0.2em;
}

#scores,
#scores td,
#scores th {
	border: 1px solid black;
	border-collapse: collapse;
	text-align: center;
}

</style>
</head>

<body><h1><img src="https://wiki.selfhtml.org/images/8/87/Selfhtml-logo.gif" alt="altes Netz-Logo" width="100" style="float:left;margin-right:1em">Gewinnspiel zu 10 Jahren SELFHTML</h1>
    
<form id="quiz">
	<p id="intro"> Zu beantworten waren diverse kniffelige Fragen rund um das World Wide Web. Unter den besten Einsendern wurden fünf Exemplare des Buches deutschsprachige Seite Professionelle Websites von Stefan Münz verlost.

Die Fragen wurden unter den SELFHTML Developern zusammengetragen. Dabei wurde darauf geachtet, kniffelige Fragen zu stellen, die sich nicht unbedingt nur mit kurzem Nachschlagen zu beantworten waren, sondern zu eigener Recherche in den entsprechenden Spezifikationen und zum Selberdenken anregen sollten.</p>
  <button type="submit">Starte Quiz!</button>
</form>

<template id="quizRadiogroup">
  <fieldset role="radiogroup">
    <legend>Frage …</legend>
  </fieldset>
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const JSONUrl = "/extensions/Selfhtml/example.php/Beispiel:2005.json";
  const form = document.getElementById("quiz");
  const intro = document.getElementById("intro");
  const button = form.querySelector("button");
  const template = document.getElementById("quizRadiogroup");

  let questions = [];
  let currentQuestionIndex = 0;
  let results = [];
button.addEventListener("click", async function (e) {
  e.preventDefault();

  if (document.getElementById("intro")) {
    document.getElementById("intro").remove();
    await loadQuestions();
    renderQuestion(currentQuestionIndex);
    button.textContent = "Auswahl bestätigen";
  } else {
    handleSubmit();
  }
});

  async function loadQuestions() {
    try {
      const response = await fetch(JSONUrl);
      const data = await response.json();
      questions = data.data;
    } catch (error) {
      console.error("Fehler beim Laden der Fragen:", error);
    }
  }

  function renderQuestion(index) {
    const questionData = questions[index];
    const oldFieldset = form.querySelector("fieldset");
    if (oldFieldset) oldFieldset.remove();

    const quizContent = template.content.cloneNode(true);
    const fieldset = quizContent.querySelector("fieldset");
    const legend = fieldset.querySelector("legend");

    legend.textContent = `${questionData.category}: ${questionData.question}`;

    // Clear all children except the legend element
    while (fieldset.children.length > 1) {
      fieldset.removeChild(fieldset.lastChild);
    }

    questionData.answers.forEach((answer, i) => {
      const inputId = `q${index}_a${i}`;

      const input = document.createElement("input");
      input.type = "radio";
      input.name = `q${index}`;
      input.id = inputId;
      input.value = answer.answer;

      const label = document.createElement("label");
      label.htmlFor = inputId;
      label.textContent = answer.answer;

      fieldset.appendChild(input);
      fieldset.appendChild(label);
    });

    form.insertBefore(fieldset, button);
  }

  function handleSubmit() { 
    const selected = form.querySelector(`input[name="q${currentQuestionIndex}"]:checked`);
    if (!selected) {
      alertBox("Bitte wählen Sie eine Antwort aus!", "error");
      return;
    }

    const question = questions[currentQuestionIndex];
    const selectedValue = selected.value;
    const selectedAnswerObj = question.answers.find(a => a.answer === selectedValue);
    const correctAnswer = question.answers.find(a => a.correct);

    const isCorrect = selectedAnswerObj?.correct;

    // Store result
    results.push({
      question: question.question,
      userAnswer: selectedValue,
      isCorrect,
      correctAnswer: correctAnswer.answer,
      explanation: question.explanation || "",
    });

    currentQuestionIndex++;

    if (currentQuestionIndex < questions.length) {
      setTimeout(() => {
        renderQuestion(currentQuestionIndex);
      }, 500);
    } else {
      form.remove(); // remove quiz form
      renderResults();
    }
  }

  function renderResults() {
    const resultList = document.createElement("ol");
    resultList.id = "result";

    results.forEach(result => {
      const li = document.createElement("li");

      const questionP = document.createElement("p");
      questionP.className = "question";
      questionP.textContent = result.question;

      const answerP = document.createElement("p");
      answerP.innerHTML = `Ihre Antwort: <em class="${result.isCorrect ? "correct" : "incorrect"}">${result.userAnswer}</em>`;

      const explanationP = document.createElement("p");
      explanationP.innerHTML = `Erläuterung: <em>${result.explanation}</em>`;

      li.appendChild(questionP);
      li.appendChild(answerP);
      li.appendChild(explanationP);

      resultList.appendChild(li);
    });

    const score = results.filter(r => r.isCorrect).length;
    const total = results.length;
    const scoreSummary = document.createElement("p");
    const percentage = Math.round((score / total) * 100);
    scoreSummary.innerHTML = `<strong>Ergebnis:</strong> ${score} von ${total} Fragen richtig beantwortet (${percentage}%).`;

    document.body.appendChild(scoreSummary);
    document.body.appendChild(resultList);
  }

  function alertBox(text, type) {
    const alert = document.createElement("p");
    alert.textContent = text;
    alert.className = type;
    form.appendChild(alert);
    setTimeout(() => alert.remove(), 3000);
  }
});
</script>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:2005-Quiz.html&oldid=103434“