Quiz su Kylie Jenner by @fragolino86 - Codewith.it

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

References

Inserisce un commento nel codice
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
enctypeDetermina il tipo di codifica dei dati di un form per l'invio al server
maxImposta il valore numerico o temporale massimo per un elemento input
<title>Definisce il titolo della pagina web.
selectedPre-seleziona un elemento di input

Users

Log in to search for users

Explore

Find inspiration

spaghettiamaInglese.html

Mundane Mondays or Fantastic Frida

I beneficii di avere un cane

primo esercizio 26 gennaio

copia di follow

ES01a\\index.html

Questionario Serie A

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>