<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pythonクイズ</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px #888;
}
h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
p {
font-size: 18px;
margin-bottom: 10px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
margin-bottom: 5px;
background-color: #f2f2f2;
border-radius: 5px;
cursor: pointer;
}
li:hover {
background-color: #ddd;
}
.answer {
padding: 20px;
margin-top: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px #888;
display: none;
}
.answer h2 {
font-size: 24px;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
.answer p {
font-size: 18px;
margin-bottom: 10px;
text-align: center;
}
.answer img {
display: block;
margin: 0 auto;
margin-top: 20px;
max-width: 100%;
max-height: 300px;
}
.btn {
display: block;
margin: 0 auto;
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<h1>Pythonクイズ</h1>
<p id="question"></p>
<ul id="choices"></ul>
<div class="answer" id="answer">
<h2 id="result"></h2>
<p id="explanation"></p>
<img id="image" src="">
<a href="#" class="btn" id="next-btn">次の問題</a>
</div>
</div>
<script type="text/javascript">
var questions = [
{
question: "print(3 + 4)の結果は？",
choices: ["3", "4", "7", "12", "エラー"],
answer: "7",
explanation: "3 + 4 = 7です。",
image: "https://i.imgur.com/lS9IDM4.jpg"
},
{
question: "Pythonで文字列を連結するための演算子は？",
choices: ["+", "-", "*", "/"],
answer: "+",
explanation: "文字列を連結するためには+演算子を使います。",
image: "https://i.imgur.com/OgTT7yO.jpg"
},
{
question: "以下のうちPythonのリストの定義として正しいものは？",
choices: ["[1, 2, 3, 4, 5]", "(1, 2, 3, 4, 5)", "{1, 2, 3, 4, 5}", "{1: 'one', 2: 'two', 3: 'three'}"],
answer: "[1, 2, 3, 4, 5]",
explanation: "Pythonのリストは[]で囲み、カンマで区切られた任意の要素を含めることができます。",
image: "https://i.imgur.com/fTlviTh.jpg"
},
{
question: "Pythonのif文で条件が真である場合に実行されるブロックを表すキーワードは？",
choices: ["elif", "else", "except", "try"],
answer: "else",
explanation: "if文の条件が偽である場合に実行されるelseブロックを記述することができます。",
image: "https://i.imgur.com/IfjYzE0.jpg"
},
{
question: "Pythonでforループを記述する際、反復対象として使う型は？",
choices: ["int", "float", "str", "list", "tuple"],
answer: "list",
explanation: "forループでは反復対象としてlistやtupleなどのシーケンス型を使うことができます。",
image: "https://i.imgur.com/Cuiz7cX.jpg"
}
];
var currentQuestion = 0;
var quizOver = false;
function displayQuestion() {
document.getElementById("question").innerHTML = questions[currentQuestion].question;
var choices = document.getElementById("choices");
for (var i = 0; i < questions[currentQuestion].choices.length; i++) {
var li = document.createElement("li");
li.innerHTML = questions[currentQuestion].choices[i];
choices.appendChild(li);
li.onclick = function() {
if (!quizOver) {
if (this.innerHTML === questions[currentQuestion].answer) {
this.style.backgroundColor = "#4CAF50";
document.getElementById("result").innerHTML = "正解！";
document.getElementById("explanation").innerHTML = questions[currentQuestion].explanation;
document.getElementById("image").src = questions[currentQuestion].image;
} else {
this.style.backgroundColor = "#f44336";
document.getElementById("result").innerHTML = "不正解…";
document.getElementById("explanation").innerHTML = questions[currentQuestion].explanation;
document.getElementById("image").src = questions[currentQuestion].image;
}
document.getElementById("answer").style.display = "block";
}
}
}
}
function resetQuiz() {
currentQuestion = 0;
quizOver = false;
document.getElementById("question").innerHTML = "";
document.getElementById("choices").innerHTML = "";
document.getElementById("answer").style.display = "none";
}
function displayNextQuestion() {
var choices = document.getElementById("choices");
var length = choices.children.length;
for (var i = 0; i < length; i++) {
choices.removeChild(choices.children[0]);
}
document.getElementById("result").innerHTML = "";
document.getElementById("explanation").innerHTML = "";
document.getElementById("image").src = "";
if (currentQuestion < questions.length - 1) {
currentQuestion++;
displayQuestion();
} else {
quizOver = true;
document.getElementById("question").innerHTML = "クイズは終了しました！";
document.getElementById("choices").innerHTML = "";
document.getElementById("answer").style.display = "none";
document.getElementById("next-btn").innerHTML = "もう一度挑戦する？";
document.getElementById("next-btn").onclick = function() {
resetQuiz();
displayQuestion();
}
}
}
displayQuestion();
document.getElementById("next-btn").onclick = function() {
if (quizOver) {
resetQuiz();
}
displayNextQuestion();
}
</script>
</body>
</html>
※ジョークは、載せられるものを探したのですが、見つかりませんでした。申し訳ありません。
