Home / Widgets / Easter
Duplicate Snippet

Embed Snippet on Your Site

Easter

Code Preview
html
<div id="quiz"><h2>Info om tävlingen</h2><button id="start-button">Starta tävling</button>   <div id="question1" class="question"><h2>Första gåtan</h2><input type="text" id="answer1"><button id="submit1">Submit</button></div>   <div id="question2" class="question"><h2>Andra gåtan</h2><input type="text" id="answer2"><button id="submit2">Submit</button></div>   <div id="question3" class="question"><h2>Tredje gåtan</h2><input type="text" id="answer3"><button id="submit3">Submit</button></div>   <div id="result" class="question"><h2>Resultat och översikt</h2><p>Tiden det tog för dig att lösa alla tre gåtor: <span id="time"></span></p><p>De som har deltagit: <span id="participants"></span></p></div></div> <script>
  // Lagra starttiden
  let startTime;   // Hantera klick på startknappen
  document.getElementById("start-button").addEventListener("click", function() {
    // Starta tidtagning
    startTime = new Date().getTime();
    // Visa första frågan
    showQuestion("question1");
  });   // Hantera klick på Submit-knapparna
  document.getElementById("submit1").addEventListener("click", function() {
    checkAnswer("answer1", "question2");
  });
  document.getElementById("submit2").addEventListener("click", function() {
    checkAnswer("answer2", "question3");
  });
  document.getElementById("submit3").addEventListener("click", function() {
    // Stoppa tidtagning
    const totalTime = new Date().getTime() - startTime;
    // Visa resultat
    showResult(totalTime);
  });   // Funktion för att visa en fråga och dölja de andra
  function showQuestion(questionId) {
    const questions = document.querySelectorAll(".question");
    for (let i = 0; i < questions.length; i++) {
      if (questions[i].id === questionId) {
        questions[i].style.display = "block";
      } else {
        questions[i].style.display = "none";
      }
    }
  }   // Funktion för att kontrollera svar och visa nästa fråga eller resultat
  function checkAnswer(answerId, nextQuestionId) {
    const answer = document.getElementById(answerId).value.toLowerCase();
    if (answer === "rätt svar") {
      showQuestion(nextQuestionId);
    } else {
      alert("Fel svar, försök igen!");
    }
  }   // Funktion för att visa resultat
  function showResult(totalTime) {
    const timeElement = document.getElementById("time");
    timeElement.textContent = totalTime / 1000 + " sekunder";
    const participantsElement = document.getElementById("participants");
    participantsElement.textContent = "Du";
  }</script>

Comments

Add a Comment