Quiz su Kylie Jenner by @fragolino86 - Codewith.it

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

Referenze

downloadConsente di scaricare file al click di collegamento ipertestuale.
autofocusAttiva un elemento al caricamento della pagina.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<tfoot>Definisce il footer o sezione inferiore di una tabella.
listCollega un elemento input con una lista di opzioni datalist

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Creazione di un form

Un Giorno a Napoli: Itinerario Det

5/10/24 es. 5 - consonanti

Design, Marketing & AI News (Y)

X-Dsigner (Blu Eletric) – WebKin

Heads Or Tails Random Tally 2

Review of Functions I

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>