Quiz su Kylie Jenner by @fragolino86 - Codewith.it

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

References

<label>Mostrare un testo di etichetta per un elemento di input.
<option>Serve ad inserire una voce in un menu di selezione.
widthImposta la larghezza di un elemento HTML
text/plainDefinisce un metodo di non codifica dei valori di un form
valueValore alfanumerico o booleano contenuto in un elemento
<textarea>Area di testo libero espandibile per form HTML

Users

Log in to search for users

Explore

Find inspiration

Review of Functions I

Lezione 4 (seconda parte)

Thomas Fattori 1

Esercizio prova \"lista della

Neon Flux - Visual Design in Motio

Esercitazione 2

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>