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

No:1021

222

←

Prev Next

→

A game in which you answer a series of 3-question ..ALL
Developer User3212｜Date and time 23/6/18 0:14:56
Build time 48.403 sec｜Game capacity 4.159KB｜

Script

HTMLファイルには以下のようなコードを含めます。

優れたプレゼン資料に必要なもの

問題1：

プレゼンテーションの始めに必要なものは？

問題2：

プレゼンテーションで使われるスライド作成ソフトは？

問題3：

優れたプレゼン資料を作成するためのポイントは？

このプログラムは、ユーザーに3つの問題を出し、正解数をカウントして結果を表示する単純なクイズゲームです。問題の選択肢に絵文字を含めることもできます。また、スマートフォンで操作する前提なので、ボタンのサイズやフォントサイズを適当に調整しています。ゲームの概要については、このプログラムのコメント欄に記載することができます。ただし、このプログラムではそこまでは実装していません。

←

Prev　Next

→ 　

Back　

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

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

HTMLファイルには以下のようなコードを含めます。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>A.I.のプレゼン資料ゲーム</title>
    <style>
      /* スタイルシート */
      body {
        font-size: 20px;
      }
      button {
        font-size: 20px;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    
    <h1>優れたプレゼン資料に必要なもの</h1>
    <h2>問題1：</h2>
    <p>プレゼンテーションの始めに必要なものは？</p>
    <button onclick="answer1()">A. 目次</button>
    <button onclick="answer1()">B. 自己紹介</button>
    <button onclick="answer1()">C. 開幕の挨拶</button>
    <h2>問題2：</h2>
    <p>プレゼンテーションで使われるスライド作成ソフトは？</p>
    <button onclick="answer2()">A. PowerPoint</button>
    <button onclick="answer2()">B. Excel</button>
    <button onclick="answer2()">C. Word</button>
    <h2>問題3：</h2>
    <p>優れたプレゼン資料を作成するためのポイントは？</p>
    <button onclick="answer3()">A. 資料をたくさん用意する</button>
    <button onclick="answer3()">B. 読みやすいデザインにする</button>
    <button onclick="answer3()">C. 長文を多用する</button>
    <div id="result"></div>
    
    
    <script>
      // 正解数をカウントする変数
      let count = 0;
      
      // 問題1の正解を判定してアラート表示
      function answer1() {
        const answer = 'A';
        const selected = event.target.innerText[0];
        if (selected === answer) {
          count++;
        }
        alert(selected === answer ? '正解！' : '不正解…');
        nextQuestion();
      }
      
      // 問題2の正解を判定してアラート表示
      function answer2() {
        const answer = 'A';
        const selected = event.target.innerText[0];
        if (selected === answer) {
          count++;
        }
        alert(selected === answer ? '正解！' : '不正解…');
        nextQuestion();
      }
      
      // 問題3の正解を判定してアラート表示
      function answer3() {
        const answer = 'B';
        const selected = event.target.innerText[0];
        if (selected === answer) {
          count++;
        }
        alert(selected === answer ? '正解！' : '不正解…');
        nextQuestion();
      }
      
      // 次の問題を表示
      function nextQuestion() {
        const questionNumber = document.querySelectorAll('h2').length + 1;
        if (questionNumber > 3) {
          // 全ての問題が終了した場合は結果を表示
          showResult();
        } else {
          // 次の問題を表示
          document.querySelector('h2:last-of-type').insertAdjacentHTML('afterend', `
            <h2>問題${questionNumber}：</h2>
            <p>プレゼンテーションの中で最も重要なことは？</p>
            <button onclick="answer${questionNumber}()">A. 興味を引くこと</button>
            <button onclick="answer${questionNumber}()">B. 心に響くこと</button>
            <button onclick="answer${questionNumber}()">C. 長ければいいこと</button>
          `);
        }
      }
      
      // 正解数を表示する
      function showResult() {
        document.querySelector('#result').innerHTML = `
          <h2>あなたの正解数は${count}問です！</h2>
        `;
      }
    </script>
  </body>
</html>
```

このプログラムは、ユーザーに3つの問題を出し、正解数をカウントして結果を表示する単純なクイズゲームです。

問題の選択肢に絵文字を含めることもできます。また、スマートフォンで操作する前提なので、ボタンのサイズやフォントサイズを適当に調整しています。

ゲームの概要については、このプログラムのコメント欄に記載することができます。ただし、このプログラムではそこまでは実装していません。