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

No:2278

3318

←

Prev Next

→

Guess the Uncle Syntax or Not Uncle Syntax game
Developer User3392｜Date and time 23/6/20 20:13:30
Build time 31.729 sec｜Game capacity 2.81KB｜

Script

おじさん構文かどうか当てよう！

←

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">
  <title>おじさん構文ゲーム</title>
  <style>
    #title {
      font-size: 2rem;
      text-align: center;
      margin-top: 1rem;
    }
    #question {
      font-size: 1.5rem;
      text-align: center;
      margin-top: 2rem;
    }
    #buttons {
      display: flex;
      justify-content: center;
      margin-top: 2rem;
    }
    .button {
      font-size: 1.2rem;
      margin: 0 1rem;
      padding: 1rem;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: #99CCFF;
    }
    .button:hover {
      background-color: #3399FF;
      color: white;
    }
  </style>
</head>
<body>
  <h1 id="title">おじさん構文かどうか当てよう！</h1>
  <div id="question"></div>
  <div id="buttons">
    <button class="button" id="btn-yes">おじさん構文</button>
    <button class="button" id="btn-no">おじさん構文じゃない</button>
  </div>

const answers = [
      true,
      false,
      true,
      true,
      true
    ];

let currentQuestion = 0;
    let score = 0;
    let remainQuestion = questions.length;

// 問題を表示する
    function showQuestion() {
      document.getElementById('question').textContent = questions[currentQuestion];
    }

// ボタンがクリックされたときの処理
    function onClickButton(isOjisanSyntax) {
      if(answers[currentQuestion] === isOjisanSyntax) {
        score++;
      }
      currentQuestion++;
      remainQuestion--;
      if(remainQuestion === 0) {
        showResult();
      } else {
        showQuestion();
      }
    }

// 結果を表示する
    function showResult() {
      const message = `あなたのスコアは${score}/${questions.length}です。`;
      const result = document.createElement('p');
      result.textContent = message;
      document.body.appendChild(result);
      document.getElementById('question').remove();
      document.getElementById('buttons').remove();
    }

// ボタンにイベントリスナーを追加する
    document.getElementById('btn-yes').addEventListener('click', function() {
      onClickButton(true);
    });

document.getElementById('btn-no').addEventListener('click', function() {
      onClickButton(false);
    });

// 最初の問題を表示する
    showQuestion();
  </script>
</body>
</html>