ChatGPTがすごいと聞きます。
何がすごいのか分かりません。
どのように使ったらいいですか・・・？
こんな風に思っていませんか？
私も最初はこのように感じていました。
そこで、ChatGPTでクイズゲームを作ってみます。
本記事の対象読者
- ChatGPTを使ってみたい人
- 具体的な使い方を知りたい人
- AIやプログラミングに興味がある人
本記事を読んでできることは次のとおり。
- マルバツ（○✖️）のクイズゲームを作れる
- htmlとcssとJavaScriptの使い方が少し分かる
- コードを書くエディタ「Visual Studio Code（以下、VS Code）を体験できる
- ChatGPTを使うコツが分かる
- 同僚にドヤれる
完成したゲームはこんな感じ。スタートボタンを押すとクイズが出てきます。
結構簡単にできますので、一緒にパソコンを使って作っていきましょう
【初心者向け】ChatGPTで作るマルバツクイズ｜サーバーへのアップロードまで解説
プログラミングの際には、コードを書いていくエディタがあると便利です。というか必須です。
エディタとはメモ帳のようなもの。
本記事ではVS Codeを使います。
これは、マイクロソフトが無料で提供しており、多くのプログラマーが使っているので、こだわりがなければVS Codeを使ってください。
手順①：VS Codeで事前準備
VS Codeを起動します。
デスクトップにフォルダを1つ作ります。ここでは、「html-quiz」としました。
このフォルダをVS Codeにドラッグアンドドロップします。
htmlファイルを作ります。新しいファイルボタンをクリック。
ファイル名をindex.htmlとします。
これで事前準備は終了です。
手順②：ChatGPTでhtmlファイル作成
ChatGPTでコードを作成します。
今回はGPT-4oを使っています。
プロンプトは次のとおり。
ChatGPTへのプロンプト
クイズゲームアプリを作ります
仕様は以下の通りです
##仕様
ｰ 使用する言語は、html、css、javascript
ｰ クイズは2択のマルバツクイズ
ｰ クイズは合計3問
ｰ 最初にタイトル画面を表示して、スタートボタンを押すと、1問目を表示
ｰ 問題を出して、ユーザーがマルかバツを選ぶと、正解不正解に関わらず、次の問題を出します
ｰ 3問目を答えた後に、結果の画面を表示して、何問正解したかを表示します
ｰ 最初に戻るボタンを押すと、正解数をリセットして、タイトル画面を表示返ってきた回答は次のとおり。
ChatGPTの回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz Game</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
#container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.hidden {
display: none;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="container">
<div id="title-screen">
<h1>Welcome to the Quiz Game!</h1>
<button id="start-button">Start</button>
</div>
<div id="quiz-screen" class="hidden">
<h2 id="question-text"></h2>
<button class="answer-button" data-answer="true">Maru</button>
<button class="answer-button" data-answer="false">Batsu</button>
</div>
<div id="result-screen" class="hidden">
<h2>Your Result</h2>
<p id="score-text"></p>
<button id="restart-button">Back to Title</button>
</div>
</div>
<script>
const titleScreen = document.getElementById('title-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultScreen = document.getElementById('result-screen');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const questionText = document.getElementById('question-text');
const answerButtons = document.querySelectorAll('.answer-button');
const scoreText = document.getElementById('score-text');
const questions = [
{ question: "The sun rises in the east.", answer: true },
{ question: "There are 25 hours in a day.", answer: false },
{ question: "Water freezes at 0 degrees Celsius.", answer: true }
];
let currentQuestionIndex = 0;
let score = 0;
function showScreen(screen) {
titleScreen.classList.add('hidden');
quizScreen.classList.add('hidden');
resultScreen.classList.add('hidden');
screen.classList.remove('hidden');
}
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
showScreen(quizScreen);
showQuestion();
}
function showQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionText.textContent = currentQuestion.question;
}
function handleAnswer(event) {
const userAnswer = event.target.getAttribute('data-answer') === 'true';
const correctAnswer = questions[currentQuestionIndex].answer;
if (userAnswer === correctAnswer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResult();
}
}
function showResult() {
scoreText.textContent = `You got ${score} out of ${questions.length} correct!`;
showScreen(resultScreen);
}
startButton.addEventListener('click', startQuiz);
restartButton.addEventListener('click', () => showScreen(titleScreen));
answerButtons.forEach(button => button.addEventListener('click', handleAnswer));
showScreen(titleScreen);
</script>
</body>
</html>VS Codeにもどり、この回答をindex.htmlにコピペします。
これをブラウザに表示してみます。
赤枠のタブを右クリックして表示されたメニューからパスのコピーをクリック。
このパスをブラウザのアドレスバーにコピペします。
実際にプレイした結果が次のとおり。
動画のとおりクイズゲームができています。
一瞬でここまでできるのは驚きですね！
コードを1行も書かずにここまでできるなんて、ChatGPTの実力に驚愕です。
しかし、次のようにもう少し手直ししたいものです。
修正箇所
- 日本語表記にする
- ボタンに書かれているMaruを○にしたい
- 同じくBatsuを×にしたい
これをプロンプトにします。
ChatGPTへのプロンプト
次のとおりクイズゲームアプリを修正してください
ｰ 日本語表記にして
ｰ Maruを○に置き換えて
ｰ Batsuを×に置き換えて返ってきた修正版の回答は次のとおり。
ChatGPTの回答（修正版）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クイズゲーム</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
#container {
max-width: 500px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.hidden {
display: none;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="container">
<div id="title-screen">
<h1>クイズゲームへようこそ！</h1>
<button id="start-button">スタート</button>
</div>
<div id="quiz-screen" class="hidden">
<h2 id="question-text"></h2>
<button class="answer-button" data-answer="true">○</button>
<button class="answer-button" data-answer="false">×</button>
</div>
<div id="result-screen" class="hidden">
<h2>結果発表</h2>
<p id="score-text"></p>
<button id="restart-button">タイトルに戻る</button>
</div>
</div>
<script>
const titleScreen = document.getElementById('title-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultScreen = document.getElementById('result-screen');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const questionText = document.getElementById('question-text');
const answerButtons = document.querySelectorAll('.answer-button');
const scoreText = document.getElementById('score-text');
const questions = [
{ question: "太陽は東から昇る。", answer: true },
{ question: "1日は25時間である。", answer: false },
{ question: "水は摂氏0度で凍る。", answer: true }
];
let currentQuestionIndex = 0;
let score = 0;
function showScreen(screen) {
titleScreen.classList.add('hidden');
quizScreen.classList.add('hidden');
resultScreen.classList.add('hidden');
screen.classList.remove('hidden');
}
function startQuiz() {
currentQuestionIndex = 0;
score = 0;
showScreen(quizScreen);
showQuestion();
}
function showQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionText.textContent = currentQuestion.question;
}
function handleAnswer(event) {
const userAnswer = event.target.getAttribute('data-answer') === 'true';
const correctAnswer = questions[currentQuestionIndex].answer;
if (userAnswer === correctAnswer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
showResult();
}
}
function showResult() {
scoreText.textContent = `あなたは ${questions.length}問中${score}問正解しました！`;
showScreen(resultScreen);
}
startButton.addEventListener('click', startQuiz);
restartButton.addEventListener('click', () => showScreen(titleScreen));
answerButtons.forEach(button => button.addEventListener('click', handleAnswer));
showScreen(titleScreen);
</script>
</body>
</html>もう一度プレイしてみましょう。今回はコメントなしです。
シンプルではありますが、とりあえず完成です。
手順③：レンタルサーバーにアップロードする
このクイズゲームを誰でもプレイできるように、レンタルサーバーにアップロードします。
ここでは、老舗で安心の「エックスサーバー（XServer）」を使います。
詳しい導入方法はこちらの記事で紹介していますので、よかったら参考にしてください。
XServerへのアップロード手順
XServer公式にアクセスします。
「ログイン」（赤矢印）にマウスを乗せて、「XServerアカウント」（赤矢印）をクリック。
XServerアカウントIDとパスワードを入力し、「ログインする」をクリック。
ファイル管理をクリック。
公開用フォルダである「public_html」フォルダに「html-quiz」というフォルダを作成。
このフォルダにChatGPTで作成した「index.html」ファイルをアップロードします。
アップロードしたファイルにアクセスします。
これでどこからでもアクセスできますね。
まとめ：ChatGPTで作るマルバツクイズ｜サーバーへのアップロードまで解説
自分ではコードを1行も書かずに、全てChatGPTでのコーディングで、htmlとcssとJavaScriptを使ってマルバツクイズゲームを作ったレビューです。
今回は有料版のChatGPT 4oを使いましたが、とはいっても1回で目的のものを作り上げたChatGPTの実力に驚きました。
今回の内容を振り返ります。
最初に次のプロンプトをChatGPTに投げました。
ChatGPTへのプロンプト
クイズゲームアプリを作ります
仕様は以下の通りです
##仕様
ｰ 使用する言語は、html、css、javascript
ｰ クイズは2択のマルバツクイズ
ｰ クイズは合計3問
ｰ 最初にタイトル画面を表示して、スタートボタンを押すと、1問目を表示
ｰ 問題を出して、ユーザーがまるかバツを選ぶと、正解不正解に関わらず、次の問題を出します
ｰ 3問目を答えた後に、結果の画面を表示して、何問正解したかを表示します
ｰ 最初に戻るボタンを押すと、正解数をリセットして、タイトル画面を表示少し修正が生じたので、次のプロンプトを再度投げる。
ChatGPTへのプロンプト
次のとおりクイズゲームアプリを修正してください
ｰ 日本語表記にして
ｰ Maruを○に置き換えて
ｰ Batsuを×に置き換えてここで作られたコードをエディタにコピペし、これで完成です。
あとは、レンタルサーバーにアップロードするだけ。
本記事がChatGPTとの付き合い方に悩んでいる方の参考になれば幸いです。