Quiz su Kylie Jenner by @fragolino86 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

requiredRende obbligatorio un campo di input
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
classDefinisce una o più classi per elemento
<h6>Titolo di intestazione di sesto livello
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<title>Definisce il titolo della pagina web.

Users

Log in to search for users

Explore

Find inspiration

CodeMirror preview

esercitazioni ipertestual

Blocco visualizzazione PC

Le bambole Mattel

Prep. Esame pt.4

spotify dashboard

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

const message = 'Hello world' // Try edit me

// Update header text
document.querySelector('#header').innerHTML = message

// Log to console
console.log(message)<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Quiz su Kylie Jenner</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f9f3f9;
      padding: 20px;
    }
    .quiz-container {
      max-width: 600px;
      margin: auto;
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
    }
    h1 {
      text-align: center;
    }
    .question {
      margin-bottom: 15px;
    }
    .answers label {
      display: block;
      margin-bottom: 10px;
      cursor: pointer;
    }
    #submit {
      margin-top: 20px;
      display: block;
      width: 100%;
      padding: 10px;
      background-color: #db4eb0;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
    }
    #result {
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="quiz-container">
    <h1>Quiz su Kylie Jenner</h1>
    <form id="quiz-form"></form>
    <button id="submit">Invia risposte</button>
    <div id="result"></div>
  </div>

  <script>
    const questions = [
      {
        question: "In che anno è nata Kylie Jenner?",
        options: ["1995", "1997", "1999", "2000"],
        answer: "1997"
      },
      {
        question: "Qual è il nome della figlia di Kylie Jenner?",
        options: ["Rain", "Stormi", "Sunny", "Sky"],
        answer: "Stormi"
      },
      {
        question: "Con quale rapper ha avuto una relazione Kylie?",
        options: ["Drake", "Kanye West", "Travis Scott", "Lil Nas X"],
        answer: "Travis Scott"
      },
      {
        question: "Come si chiama la sua linea di cosmetici?",
        options: ["Jenner Beauty", "Kylie Cosmetics", "Kylie Skin", "Makeup by Kylie"],
        answer: "Kylie Cosmetics"
      },
      {
        question: "Chi è la sorella maggiore di Kylie?",
        options: ["Kendall Jenner", "Kim Kardashian", "Kourtney Kardashian", "Khloé Kardashian"],
        answer: "Kendall Jenner"
      },
      {
        question: "In quale reality show è apparsa per la prima volta?",
        options: ["The Simple Life", "KUWTK", "House of Kylie", "Jenner Life"],
        answer: "KUWTK"
      },
      {
        question: "Quanti fratelli ha Kylie Jenner?",
        options: ["2", "5", "9", "10"],
        answer: "9"
      },
      {
        question: "In che anno ha lanciato Kylie Cosmetics?",
        options: ["2012", "2015", "2016", "2018"],
        answer: "2015"
      },
      {
        question: "Qual è il secondo nome di Kylie?",
        options: ["Kristen", "Nicole", "Alexis", "Marie"],
        answer: "Kristen"
      },
      {
        question: "Kylie ha una sorella gemella?",
        options: ["Sì", "No"],
        answer: "No"
      },
      {
        question: "Dove è nata Kylie Jenner?",
        options: ["New York", "Calabasas", "Los Angeles", "San Diego"],
        answer: "Los Angeles"
      },
      {
        question: "Qual è il nome del padre di Kylie?",
        options: ["Caitlyn Jenner", "Bruce Jenner", "Robert Kardashian", "Scott Disick"],
        answer: "Caitlyn Jenner"
      },
      {
        question: "Kylie è più giovane o più vecchia di Kendall?",
        options: ["Più giovane", "Più vecchia"],
        answer: "Più giovane"
      },
      {
        question: "Kylie è mai stata miliardaria secondo Forbes?",
        options: ["Sì", "No"],
        answer: "Sì"
      },
      {
        question: "Che colore di capelli ha naturalmente Kylie?",
        options: ["Biondi", "Castani", "Neri", "Rossi"],
        answer: "Castani"
      }
    ];

    const quizForm = document.getElementById("quiz-form");

    questions.forEach((q, index) => {
      const div = document.createElement("div");
      div.classList.add("question");

      const qTitle = document.createElement("p");
      qTitle.innerText = `${index + 1}. ${q.question}`;
      div.appendChild(qTitle);

      const answersDiv = document.createElement("div");
      answersDiv.classList.add("answers");

      q.options.forEach(opt => {
        const label = document.createElement("label");
        const input = document.createElement("input");
        input.type = "radio";
        input.name = `q${index}`;
        input.value = opt;
        label.appendChild(input);
        label.appendChild(document.createTextNode(opt));
        answersDiv.appendChild(label);
      });

      div.appendChild(answersDiv);
      quizForm.appendChild(div);
    });

    document.getElementById("submit").addEventListener("click", function(event) {
      event.preventDefault();
      let score = 0;
      questions.forEach((q, i) => {
        const answer = document.querySelector(`input[name="q${i}"]:checked`);
        if (answer && answer.value === q.answer) {
          score++;
        }
      });
      const result = document.getElementById("result");
      result.innerText = `Hai ottenuto ${score} su ${questions.length} risposte corrette.`;
    });
  </script>
</body>
</html>