普段は自分で書いたコードをAIに修正してもらっているのですが、今回は自分では1行もコードを書かずにAIにゼロからアプリを作ってもらう実験をしてみました。
今回は競馬の有馬記念に関するクイズをChatGPTに作ってもらいました。
欠点もあるのですが、まずまずの完成度のクイズがあっという間にできましたよ。
もうゼロから作る気力がなくなりそうです。
依頼内容
「有馬記念のクイズを作って」だけでは、理想のものは出てこないと思うので、ある程度細かく指示をしてみました。
競馬の有馬記念に関するクイズを10問作ってください。
- HTML/CSS/JavaScriptで作る
- 4択問題
- 「スタート」ボタンをクリックすると1問目が表示
- 問題の順番と選択肢の順番はランダム
- 選択肢の1つをクリックすると正誤判定と「次の問題」ボタンを表示
- 「次の問題」ボタンをクリックすると次の問題が表示、正誤判定と「次の問題」ボタンは消す
- 10問答えたら正解数と「最初に戻る」ボタンを表示
- 「最初に戻る」ボタンをクリックすると最初の画面に戻る
ChatGPTが作ったクイズ
自分で作るなら何時間もかかるものを、ChatGPTは一瞬で作りました。
下記はChatGPTが出したコードです。
クイズの問題におかしなものがありますが、アプリは正常に動いているようです。
自分では使ったことがないコードも書いてあり、意味もはっきりと分かりませんが、想定通り動いているので良しとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>有馬記念クイズ</title>
<style>
body {
font-family: sans-serif;
max-width: 600px;
margin: 40px auto;
text-align: center;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.choice {
display: block;
width: 100%;
margin: 8px 0;
}
#result {
font-weight: bold;
margin-top: 15px;
}
</style>
</head>
<body>
<h1>有馬記念クイズ</h1>
<div id="start-screen">
<button id="startBtn">スタート</button>
</div>
<div id="quiz-screen" style="display:none;">
<p id="question"></p>
<div id="choices"></div>
<p id="result"></p>
<button id="nextBtn" style="display:none;">次の問題</button>
</div>
<div id="end-screen" style="display:none;">
<p id="score"></p>
<button id="resetBtn">最初に戻る</button>
</div>
<script>
const quizData = [
{
question: "有馬記念が行われる競馬場は？",
choices: ["東京競馬場", "中山競馬場", "阪神競馬場", "京都競馬場"],
answer: "中山競馬場"
},
{
question: "有馬記念が開催される月は？",
choices: ["10月", "11月", "12月", "1月"],
answer: "12月"
},
{
question: "有馬記念の距離は？",
choices: ["2000m", "2200m", "2400m", "2500m"],
answer: "2500m"
},
{
question: "有馬記念は次のうちどのレースに分類される？",
choices: ["G1", "G2", "G3", "重賞ではない"],
answer: "G1"
},
{
question: "ファン投票で出走馬が決まることで有名なレースは？",
choices: ["日本ダービー", "天皇賞（秋）", "有馬記念", "菊花賞"],
answer: "有馬記念"
},
{
question: "有馬記念の正式名称に含まれる言葉は？",
choices: ["グランプリ", "チャンピオン", "クラシック", "マスターズ"],
answer: "グランプリ"
},
{
question: "有馬記念が創設された年は？",
choices: ["1951年", "1956年", "1961年", "1966年"],
answer: "1956年"
},
{
question: "次の馬のうち、有馬記念を複数回制覇したことがあるのは？",
choices: ["オルフェーヴル", "ディープインパクト", "キタサンブラック", "コントレイル"],
answer: "オルフェーヴル"
},
{
question: "有馬記念が行われるコース形態は？",
choices: ["右回り", "左回り", "直線", "ダート"],
answer: "右回り"
},
{
question: "有馬記念の優勝馬に贈られる称号として正しいものは？",
choices: ["年度代表馬", "最優秀スプリンター", "グランプリホース", "ダービーホース"],
answer: "グランプリホース"
}
];
let currentIndex = 0;
let score = 0;
let shuffledQuiz = [];
const startScreen = document.getElementById("start-screen");
const quizScreen = document.getElementById("quiz-screen");
const endScreen = document.getElementById("end-screen");
const questionEl = document.getElementById("question");
const choicesEl = document.getElementById("choices");
const resultEl = document.getElementById("result");
const nextBtn = document.getElementById("nextBtn");
const scoreEl = document.getElementById("score");
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
document.getElementById("startBtn").addEventListener("click", () => {
shuffledQuiz = shuffle([...quizData]);
currentIndex = 0;
score = 0;
startScreen.style.display = "none";
quizScreen.style.display = "block";
showQuestion();
});
function showQuestion() {
resultEl.textContent = "";
nextBtn.style.display = "none";
choicesEl.innerHTML = "";
const currentQuiz = shuffledQuiz[currentIndex];
questionEl.textContent = `Q${currentIndex + 1}. ${currentQuiz.question}`;
const shuffledChoices = shuffle([...currentQuiz.choices]);
shuffledChoices.forEach(choice => {
const btn = document.createElement("button");
btn.textContent = choice;
btn.className = "choice";
btn.addEventListener("click", () => checkAnswer(choice));
choicesEl.appendChild(btn);
});
}
function checkAnswer(selected) {
const correct = shuffledQuiz[currentIndex].answer;
if (selected === correct) {
resultEl.textContent = "正解！";
score++;
} else {
resultEl.textContent = `不正解（正解：${correct}）`;
}
nextBtn.style.display = "inline-block";
}
nextBtn.addEventListener("click", () => {
currentIndex++;
if (currentIndex < shuffledQuiz.length) {
showQuestion();
} else {
showResult();
}
});
function showResult() {
quizScreen.style.display = "none";
endScreen.style.display = "block";
scoreEl.textContent = `正解数：${score} / 10`;
}
document.getElementById("resetBtn").addEventListener("click", () => {
endScreen.style.display = "none";
startScreen.style.display = "block";
});
</script>
</body>
</html>
コピペしてカスタマイズすれば完成度をあげることができます。
クイズの問題を変える、デザインを変えるなど、いろいろ試すと面白そうです。
完成アプリ
ChatGPTが出したコードの挙動をチェックしてください。
デザインは地味すぎますが、クイズとしての機能は実装されています。
ChatGPTはクイズ作成が苦手？
ChatGPTが作った問題で微妙なものがいくつかあります。
question: “ファン投票で出走馬が決まることで有名なレースは？”,
choices: [“日本ダービー”, “天皇賞（秋）”, “有馬記念”, “菊花賞”],
answer: “有馬記念”
有馬記念のクイズなのに「有馬記念」が答えの問題を出すのは微妙です。
question: ‘有馬記念の正式名称に含まれる言葉は？’,
choices: [‘グランプリ’, ‘チャンピオン’, ‘クラシック’, ‘マスターズ’],
answer: ‘グランプリ’,
間違いではないようですが、正式名称を確認することができなかったので微妙です。
question: “有馬記念の優勝馬に贈られる称号として正しいものは？”,
choices: [“年度代表馬”, “最優秀スプリンター”, “グランプリホース”, “ダービーホース”],
answer: “グランプリホース”
グランプリ系の問題が2つあるのも微妙です。後から出てきた方は考えなくても答えがわかります。
やり直してもらってもあまりいい問題が出なかったので、ChatGPTはクイズの問題作りが苦手なのではないでしょうか。
指示を工夫すれば、いい問題を作ってくれるかもしれませんが。
問題は自分で考えた方がよさそうですが、AIを使えば作業時間が大幅に短縮できそうです。
それでいいのかは疑問ですが。
