Quiz su Kylie Jenner by @fragolino86 - Codewith.it

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

Referenze

<map>Inserisce immagini mappa cliccabili in un documento
<ol>Crea liste ordinate o numerate.
titleIndica informazioni aggiuntive riguardo un elemento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<em>Formatta il testo in corsivo/italico enfatizzato

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Five Random Poker Cards

Il Riflesso di Adrian Vale

Geyser NEW 25 Litri

Heads Or Tails Random Tally

landing il colibri\\

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

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>