A game in which players take a three-question quiz on creative jobs that are likely to be replaced by AI in the AI age and answer the questions.'s game

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

No:1000

150

←

Prev Next

→

A game in which players take a three-question quiz..ALL
Developer User3212｜Date and time 23/6/17 23:58:12
Build time 41.525 sec｜Game capacity 4.611KB｜

Script

3択クイズゲーム

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3択クイズゲーム</title>
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
        background-color: #f2f2f2;
      }
      header {
        padding: 20px;
        background-color: #333;
        color: white;
        text-align: center;
        font-size: 20px;
      }
      #game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      #question {
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
      }
      #options button {
        padding: 10px;
        margin: 10px;
        font-size: 20px;
        border-radius: 5px;
        border: none;
        background-color: #4CAF50;
        color: white;
        cursor: pointer;
      }
      #result {
        font-size: 36px;
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <header>3択クイズゲーム</header>
    <div id="game-container">
      <div id="question"></div>
      <div id="options">
        <button id="option1"></button>
        <button id="option2"></button>
        <button id="option3"></button>
      </div>
      <div id="result"></div>
      <button id="start-button">スタート</button>
    </div>
    <script>
      const questions = [
        {
          question: "AIに取って変わられそうなクリエイティブな仕事は?",
          options: [
            "小説家",
            "映画監督",
            "グラフィックデザイナー"
          ],
          answer: "グラフィックデザイナー",
          emoji: "🎨"
        },
        {
          question: "日本でもっとも売れている家電メーカーは?",
          options: [
            "東芝",
            "パナソニック",
            "シャープ"
          ],
          answer: "パナソニック",
          emoji: "📺"
        },
        {
          question: "世界で最も多く使われている検索エンジンは?",
          options: [
            "Yahoo!",
            "Bing",
            "Google"
          ],
          answer: "Google",
          emoji: "🔍"
        }
      ];
      
      const gameContainer = document.getElementById("game-container");
      const questionElement = document.getElementById("question");
      const option1Element = document.getElementById("option1");
      const option2Element = document.getElementById("option2");
      const option3Element = document.getElementById("option3");
      const resultElement = document.getElementById("result");
      const startButton = document.getElementById("start-button");

let currentQuestionIndex;
      
      startButton.addEventListener("click", startGame);

function startGame() {
        startButton.classList.add("hide");
        currentQuestionIndex = 0;
        showQuestion();
      }

function endGame() {
        gameContainer.innerHTML = `
          <div id="result-container">
            <div id="final-result">お疲れ様でした！</div>
            <button id="restart-button">もう一度遊ぶ</button>
          </div>`;
        const restartButton = document.getElementById("restart-button");
        restartButton.addEventListener("click", () => {
          location.reload();
        });
      }

option1Element.addEventListener("click", selectOption);
      option2Element.addEventListener("click", selectOption);
      option3Element.addEventListener("click", selectOption);
    </script>
  </body>
</html>