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

No:42113

←

Prev Next

→

Easiest trivia
Developer User18785｜Date and time 24/2/10 19:30:22
Build time 15.23 sec｜Game capacity 4.524KB｜

Script

เกมคำถามฟิคโต้

คำถามจะปรากฏโดยใช้ไอคอน กรุณาเลือกคำตอบที่ถูกต้อง

🐶
🐱
🐷
🐭

คะแนน: 0 / 0

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Trivia Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      margin: 0;
      padding: 20px;
    }
    h1 {
      color: #333;
    }
    p {
      color: #555;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    #question {
      font-size: 24px;
      color: #333;
      margin: 20px 0;
      padding: 0;
    }
    #choices {
      list-style-type: none;
      padding: 0;
      margin: 20px auto;
      max-width: 400px;
    }
    .choice {
      display: inline-block;
      padding: 10px 20px;
      margin: 10px;
      background-color: #fff;
      color: #333;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .choice:hover {
      background-color: #f2f2f2;
    }
    .result {
      margin-top: 20px;
    }
    .correct {
      color: #4caf50;
    }
    .incorrect {
      color: #f44336;
    }
    #score {
      margin-top: 40px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>เกมคำถามฟิคโต้</h1>
  <p id="question">คำถามจะปรากฏโดยใช้ไอคอน กรุณาเลือกคำตอบที่ถูกต้อง</p>
  <ul id="choices">
    <li class="choice" onclick="checkAnswer('correct')">🐶</li>
    <li class="choice" onclick="checkAnswer('incorrect')">🐱</li>
    <li class="choice" onclick="checkAnswer('incorrect')">🐷</li>
    <li class="choice" onclick="checkAnswer('incorrect')">🐭</li>
  </ul>
  <p class="result" id="result"></p>
  <p id="score">คะแนน: <span id="score-value">0</span> / 0</p>

function startGame() {
      const startButton = document.getElementById("start-button");
      startButton.style.display = "none";
      renderQuestion();
    }

function renderQuestion() {
      const questionElement = document.getElementById("question");
      const choices = document.getElementById("choices");

if (currentQuestion >= questions.length) {
        endGame();
        return;
      }

questionElement.innerText = questions[currentQuestion].question;

choices.innerHTML = "";
      questions[currentQuestion].choices.forEach(choice => {
        const li = document.createElement("li");
        li.className = "choice";
        li.innerText = choice;
        li.onclick = () => checkAnswer(choice);
        choices.appendChild(li);
      });
    }

function checkAnswer(answer) {
      const resultElement = document.getElementById("result");
      const scoreElement = document.getElementById("score-value");

if (answer === questions[currentQuestion].correctAnswer) {
        score++;
        resultElement.innerText = "ถูกต้อง!";
        resultElement.className = "result correct";
      } else {
        resultElement.innerText = "ผิด!";
        resultElement.className = "result incorrect";
      }

scoreElement.innerText = score;
      currentQuestion++;

setTimeout(renderQuestion, 1000);
    }

function endGame() {
      const questionElement = document.getElementById("question");
      const choices = document.getElementById("choices");
      const resultElement = document.getElementById("result");
      const scoreElement = document.getElementById("score");

questionElement.style.display = "none";
      choices.style.display = "none";
      resultElement.innerText = `เกมสิ้นสุดแล้ว คุณได้คะแนน ${score}/${questions.length}`;
      scoreElement.style.marginTop = "100px";
    }

startGame();
  </script>
</body>
</html>