windows copilotに聞いてみた
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>
