Click here for free DL of the app version that can save data.

No:38307

I want quiz game for puzzle
Developer User17345｜Date and time 24/1/24 6:24:59
Build time 16.211 sec｜Game capacity 3.988KB｜

Script

Sure! Here's a simple quiz game implemented as a single HTML file with JavaScript. The game is designed for smartphone operation and uses pictograms for the questions and answer choices. It allows the user to play as a finished game. Please note that the questions and answers used in this example are just placeholders and you can replace them with your own questions and answers.

Quiz Game

Just copy the above code and save it as a `.html` file. Then, you can open the file in a web browser to play the quiz game. The game will display one question at a time with multiple choice answers. Clicking on an answer will highlight it in green if correct, or in red if incorrect. The game will automatically move to the next question after a brief delay. Once you complete all the questions, the game will display your final score. Feel free to modify the `quizData` array with your own questions and answers to customize the game further.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

Please note that the questions and answers used in this example are just placeholders and you can replace them with your own questions and answers.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Quiz Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    h1 {
      margin-top: 50px;
    }
    h2 {
      margin-top: 30px;
    }
    .question {
      font-size: 24px;
      margin-top: 50px;
    }
    .choices {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .choice {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      margin: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
    }
    .choice:hover {
      background-color: dodgerblue;
      color: white;
    }
  </style>
</head>
<body>
  <h1>Quiz Game</h1>
  <div id="quiz-container">
    <h2 id="question" class="question"></h2>
    <div id="choices" class="choices"></div>
  </div>
  
  <script>
    // Define your quiz questions and answers here
    const quizData = [
      {
        question: "Question 1?",
        answers: ["Choice A", "Choice B", "Choice C", "Choice D"],
        correctAnswer: "Choice C"
      },
      {
        question: "Question 2?",
        answers: ["Choice X", "Choice Y", "Choice Z"],
        correctAnswer: "Choice Z"
      },
      {
        question: "Question 3?",
        answers: ["Choice P", "Choice Q", "Choice R", "Choice S"],
        correctAnswer: "Choice Q"
      }
    ];
    
    const quizContainer = document.getElementById("quiz-container");
    const questionElement = document.getElementById("question");
    const choicesContainer = document.getElementById("choices");
    
    let currentQuestionIndex = 0;
    let score = 0;
    
    function renderQuestion() {
      const currentQuestion = quizData[currentQuestionIndex];
      
      questionElement.innerHTML = currentQuestion.question;
      choicesContainer.innerHTML = "";
      
      for (let i = 0; i < currentQuestion.answers.length; i++) {
        const choice = document.createElement("div");
        choice.className = "choice";
        choice.textContent = currentQuestion.answers[i];
        choice.addEventListener("click", handleAnswer);
        choicesContainer.appendChild(choice);
      }
    }
    
    function handleAnswer(event) {
      const selectedChoice = event.target.textContent;
      const currentQuestion = quizData[currentQuestionIndex];
      
      if (selectedChoice === currentQuestion.correctAnswer) {
        score++;
        event.target.style.backgroundColor = "green";
      } else {
        event.target.style.backgroundColor = "red";
      }
      
      setTimeout(nextQuestion, 1000);
    }
    
    function nextQuestion() {
      currentQuestionIndex++;
      
      if (currentQuestionIndex < quizData.length) {
        renderQuestion();
      } else {
        finishGame();
      }
    }
    
    function finishGame() {
      quizContainer.innerHTML = `<h2>Game Over!</h2><p>Your score: ${score} / ${quizData.length}</p>`;
    }
    
    renderQuestion();
  </script>
</body>
</html>
```

Feel free to modify the `quizData` array with your own questions and answers to customize the game further.