kahootに魅せられて２種類のクイズアプリを作った。
なかなかいい出来だと思う
でも実際に作るには結構大変
WIN＋Cでcopilotを起動して、助けてもらってみた
「kahootのようなクイズツールをWEBでつくりたい。コードを教えてください」
それなりのアプリを作ってくれましたが、kahootのように複数の人が参加するものではなく、一人で遊ぶものでした
このレベルを簡単に作ってくれるのはすごいです
コードを作るときには、文法、関数、テクニックなどをネットで検索して参考にします。実際にこの作業時間が結構かかります
AIを使えば、プログラマの生産性が飛躍的に向上するでしょう
プログラミング用AIのcode interpreterなどは、たった月額２０ドルで使えます。
仕事で、これを使わない選択はあり得ないですね
生成されたコードは 265行です。ちゃんと動きます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kahoot風クイズツール</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.quiz-container {
background-color: white;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
}
.quiz-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.quiz-title {
font-size: 24px;
font-weight: bold;
}
.quiz-score {
font-size: 18px;
}
.quiz-question {
margin-top: 20px;
font-size: 20px;
}
.quiz-options {
margin-top: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.quiz-option {
background-color: #eee;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
.quiz-option:hover {
background-color: #ddd;
}
.quiz-option.correct {
background-color: limegreen;
color: white;
}
.quiz-option.wrong {
background-color: crimson;
color: white;
}
.quiz-next {
margin-top: 20px;
display: none;
}
.quiz-next button {
background-color: dodgerblue;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.quiz-next button:hover {
background-color: darkblue;
}
.quiz-result {
margin-top: 20px;
display: none;
}
.quiz-result h2 {
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="quiz-container">
<div class="quiz-header">
<h1 class="quiz-title">Kahoot風クイズツール</h1>
<span class="quiz-score">スコア：0</span>
</div>
<p class="quiz-question">問題文</p>
<div class="quiz-options">
<div class="quiz-option">選択肢1</div>
<div class="quiz-option">選択肢2</div>
<div class="quiz-option">選択肢3</div>
<div class="quiz-option">選択肢4</div>
</div>
<div class="quiz-next">
<button>次へ</button>
</div>
<div class="quiz-result">
<h2>あなたのスコアは<span id="score"></span>点です！</h2>
</div>
</div>
</div>
<script>
// クイズのデータを配列で定義する
const quizData = [
{
question: "日本の首都はどこ？",
a: "大阪",
b: "東京",
c: "京都",
d: "名古屋",
correct: "b"
},
{
question: "世界で一番人口が多い国はどこ？",
a: "中国",
b: "インド",
c: "アメリカ",
d: "インドネシア",
correct: "a"
},
{
question: "太陽系で一番大きい惑星はどれ？",
a: "地球",
b: "木星",
c: "土星",
d: "海王星",
correct: "b"
},
{
question: "ピカソの出身国はどこ？",
a: "フランス",
b: "イタリア",
c: "スペイン",
d: "ポルトガル",
correct: "c"
},
{
question: "サッカーのワールドカップで最も優勝回数が多い国はどこ？",
a: "ブラジル",
b: "ドイツ",
c: "イタリア",
d: "アルゼンチン",
correct: "a"
}
];
// HTML要素を変数に代入する
const quizQuestion = document.querySelector(".quiz-question");
const quizOptions = document.querySelectorAll(".quiz-option");
const quizScore = document.querySelector(".quiz-score");
const quizNext = document.querySelector(".quiz-next");
const quizResult = document.querySelector(".quiz-result");
const scoreSpan = document.getElementById("score");
// クイズの現在のインデックスとスコアを変数に代入する
let currentQuiz = 0;
let score = 0;
// クイズをロードする関数を定義する
function loadQuiz() {
// クイズのデータを変数に代入する
const currentQuizData = quizData[currentQuiz];
// 問題文と選択肢をHTMLに反映させる
quizQuestion.innerText = currentQuizData.question;
quizOptions.forEach((option, index) => {
option.innerText = currentQuizData["abcd"[index]];
});
// 選択肢の色やクラスをリセットする
quizOptions.forEach(option => {
option.style.backgroundColor = "#eee";
option.style.color = "#000";
option.classList.remove("correct");
option.classList.remove("wrong");
});
// 次へボタンと結果表示を非表示にする
quizNext.style.display = "none";
quizResult.style.display = "none";
}
// 最初のクイズをロードする
loadQuiz();
// 選択肢をクリックしたときの処理を定義する
quizOptions.forEach(option => {
option.addEventListener("click", () => {
// 正解かどうか判定する
if (option.innerText === quizData[currentQuiz][quizData[currentQuiz].correct]) {
// 正解ならば、選択肢を緑色にし、正解クラスを付与する
option.style.backgroundColor = "limegreen";
option.style.color = "#fff";
option.classList.add("correct");
// スコアを加算する
score++;
// スコアをHTMLに反映させる
quizScore.innerText = `スコア：${score}`;
} else {
// 不正解ならば、選択肢を赤色にし、不正解クラスを付与する
option.style.backgroundColor = "crimson";
option.style.color = "#fff";
option.classList.add("wrong");
// 正解の選択肢を緑色にする
quizOptions.forEach(option => {
if (option.innerText === quizData[currentQuiz][quizData[currentQuiz].correct]) {
option.style.backgroundColor = "limegreen";
option.style.color = "#fff";
option.classList.add("correct");
}
});
}
// 次へボタンを表示する
quizNext.style.display = "block";
});
});
// 次へボタンをクリックしたときの処理を定義する
quizNext.addEventListener("click", () => {
// クイズのインデックスを増やす
currentQuiz++;
// クイズがまだ残っていれば、次のクイズをロードする
if (currentQuiz < quizData.length) {
loadQuiz();
} else {
// クイズが終わったら、結果表示を表示する
quizResult.style.display = "block";
scoreSpan.innerText = score;
}
});
</script>
</body>
</html>