KODING GAME NAMA HARI

<style>

  body {

    font-family: Arial, sans-serif;

    background-color: #f0f8ff;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

  }

  .container {

    background-color: #ffffff;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 90%;

    max-width: 600px;

  }

  h1 {

    color: #333;

    font-size: 2.5em;

  }

  #quiz-box {

    margin-top: 20px;

  }

  #question {

    font-size: 1.5em;

    color: #555;

    margin-bottom: 20px;

  }

  #answer-buttons {

    display: grid;

    gap: 10px;

    margin-bottom: 20px;

  }

  .btn {

    background-color: #ffb3b3;

    color: #333;

    border: none;

    padding: 15px;

    font-size: 1.2em;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s;

  }

  .btn:hover:not([disabled]) {

    background-color: #ff8080;

  }

  .btn.correct {

    background-color: #a8e6cf;

  }

  .btn.incorrect {

    background-color: #ff8585;

  }

  .btn[disabled] {

    cursor: no-drop;

  }

  #next-button {

    background-color: #80cfff;

    color: #fff;

    border: none;

    padding: 10px 20px;

    font-size: 1.2em;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s;

  }

  #next-button:hover {

    background-color: #5bbad5;

  }

  .hide {

    display: none;

  }

</style>

<div class="container">

  <h1>Yuk, Kenali Nama Hari!</h1>

  <div id="quiz-box">

    <h2 id="question"></h2>

    <div id="answer-buttons">

      </div>

    <button id="next-button" class="hide">Lanjut</button>

  </div>

  <div id="score-box" class="hide">

    <h2>Skor Kamu: <span id="score">0</span></h2>

    <p>Hebat! Kamu sudah selesai.</p>

  </div>

</div>

<script>

  const questions = [

    {

      question: "Hari apa yang diawali dengan huruf **S**?",

      answers: [

        { text: "Rabu", correct: false },

        { text: "Senin", correct: true },

        { text: "Jumat", correct: false },

      ],

    },

    {

      question: "Hari apa yang diawali dengan huruf **R**?",

      answers: [

        { text: "Sabtu", correct: false },

        { text: "Rabu", correct: true },

        { text: "Selasa", correct: false },

      ],

    },

    {

      question: "Hari apa yang diawali dengan huruf **K**?",

      answers: [

        { text: "Minggu", correct: false },

        { text: "Kamis", correct: true },

        { text: "Senin", correct: false },

      ],

    },

    {

      question: "Hari apa yang diawali dengan huruf **J**?",

      answers: [

        { text: "Jumat", correct: true },

        { text: "Selasa", correct: false },

        { text: "Kamis", correct: false },

      ],

    },

    {

      question: "Hari apa yang diawali dengan huruf **M**?",

      answers: [

        { text: "Sabtu", correct: false },

        { text: "Minggu", correct: true },

        { text: "Senin", correct: false },

      ],

    },

  ];

  const questionElement = document.getElementById("question");

  const answerButtonsElement = document.getElementById("answer-buttons");

  const nextButton = document.getElementById("next-button");

  const scoreElement = document.getElementById("score");

  const scoreBox = document.getElementById("score-box");

  const quizBox = document.getElementById("quiz-box");

  let currentQuestionIndex = 0;

  let score = 0;

  function startQuiz() {

    currentQuestionIndex = 0;

    score = 0;

    nextButton.classList.add("hide");

    scoreBox.classList.add("hide");

    quizBox.classList.remove("hide");

    showQuestion();

  }

  function showQuestion() {

    resetState();

    let currentQuestion = questions[currentQuestionIndex];

    let questionNo = currentQuestionIndex + 1;

    questionElement.innerHTML = questionNo + ". " + currentQuestion.question;

    currentQuestion.answers.forEach((answer) => {

      const button = document.createElement("button");

      button.innerHTML = answer.text;

      button.classList.add("btn");

      if (answer.correct) {

        button.dataset.correct = answer.correct;

      }

      button.addEventListener("click", selectAnswer);

      answerButtonsElement.appendChild(button);

    });

  }

  function resetState() {

    while (answerButtonsElement.firstChild) {

      answerButtonsElement.removeChild(answerButtonsElement.firstChild);

    }

    nextButton.classList.add("hide");

  }

  function selectAnswer(e) {

    const selectedBtn = e.target;

    const isCorrect = selectedBtn.dataset.correct === "true";

    if (isCorrect) {

      selectedBtn.classList.add("correct");

      score += 100;

      scoreElement.textContent = score;

    } else {

      selectedBtn.classList.add("incorrect");

    }

    Array.from(answerButtonsElement.children).forEach((button) => {

      if (button.dataset.correct === "true") {

        button.classList.add("correct");

      }

      button.disabled = true;

    });

    nextButton.classList.remove("hide");

  }

  function showScore() {

    quizBox.classList.add("hide");

    scoreBox.classList.remove("hide");

    scoreElement.textContent = score;

  }

  nextButton.addEventListener("click", () => {

    currentQuestionIndex++;

    if (currentQuestionIndex < questions.length) {

      showQuestion();

    } else {

      showScore();

    }

  });

  startQuiz();

</script>