| |
| <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>
|
|
|
| let startTime;
|
| document.getElementById("start-button").addEventListener("click", function() {
|
|
|
| startTime = new Date().getTime();
|
|
|
| showQuestion("question1");
|
| });
|
| document.getElementById("submit1").addEventListener("click", function() {
|
| checkAnswer("answer1", "question2");
|
| });
|
| document.getElementById("submit2").addEventListener("click", function() {
|
| checkAnswer("answer2", "question3");
|
| });
|
| document.getElementById("submit3").addEventListener("click", function() {
|
|
|
| const totalTime = new Date().getTime() - startTime;
|
|
|
| showResult(totalTime);
|
| });
|
| 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";
|
| }
|
| }
|
| }
|
| 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!");
|
| }
|
| }
|
| function showResult(totalTime) {
|
| const timeElement = document.getElementById("time");
|
| timeElement.textContent = totalTime / 1000 + " sekunder";
|
| const participantsElement = document.getElementById("participants");
|
| participantsElement.textContent = "Du";
|
| }</script>
|
| |
| |
Comments