<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>小テストサイト</title>
<style>
body {
font-family: sans-serif;
background-color: #f9f9f9;
padding: 2em;
text-align: center;
margin: 0;
}
#quiz-container {
background: #fff;
padding: 2em;
border-radius: 8px;
box-shadow: 0 0 10px #ccc;
display: inline-block;
max-width: 90%;
width: 500px;
}
button {
display: block;
margin: 0.5em auto;
padding: 0.75em 1.5em;
font-size: 1em;
border: none;
border-radius: 6px;
background-color: #4CAF50;
color: white;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background-color: #45a049;
}
#counter {
margin-bottom: 1em;
font-weight: bold;
font-size: 1.2em;
}
@media (max-width: 600px) {
body {
padding: 1em;
}
#quiz-container {
padding: 1em;
}
button {
width: 100%;
font-size: 1.2em;
}
}
</style>
</head>
<body>
<h1>Vintage 848~1114</h1>
<div id="quiz-container">
<p id="counter">問題 1 / ?</p>
<p id="question">ここに問題が出ます</p>
<div id="choices"></div>
<p id="result"></p>
</div>
<script>
const quizData = [
{ question: "put on A", answer: "A（衣服など）を身につける" },
{ question: "try on A", answer: "A（衣服など）を試着する" },
{ question: "take off A", answer: "A（衣服など）を脱ぐ" },
{ question: "turn down A", answer: "A（申し出、要求、招待など）を断る" },
{ question: "turn up A", answer: "A（の音量）を上げる" },
{ question: "turn off A", answer: "A（水道、ガスなど）を止める" },
{ question: "put off A", answer: "A（予定など）を延期する" },
{ question: "call off A", answer: "A（予定など）を中止する" },
{ question: "pick up A", answer: "A（言葉、技術など）を習得する" },
{ question: "pick out A", answer: "Aを選び出す" },
{ question: "put away A", answer: "Aを片付ける" },
{ question: "set up A", answer: "A（会社、制度、施設など）を設立する" },
{ question: "make up A", answer: "A（話し、弁解、うそなど）をでっちあげる" },
{ question: "make out A", answer: "Aを理解する" },
{ question: "figure out A", answer: "Aを理解する" },
{ question: "work out A", answer: "A（問題など）を苦労して解く" },
{ question: "take on A", answer: "A（仕事など）を引き受ける" },
{ question: "put out A", answer: "A（火、照明など）を消す" },
{ question: "keep up A", answer: "Aを維持する" },
{ question: "call up A", answer: "A（人）に電話する" }
// 必要に応じてさらに追加可能
];
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}
let shuffledQuizData = shuffle([...quizData]);
let currentQuestion = 0;
const questionEl = document.getElementById("question");
const choicesContainer = document.getElementById("choices");
const result = document.getElementById("result");
const counterEl = document.getElementById("counter");
function showQuestion() {
const current = shuffledQuizData[currentQuestion];
const total = shuffledQuizData.length;
counterEl.textContent = `問題 ${currentQuestion + 1} / ${total}`;
questionEl.textContent = current.question;
choicesContainer.innerHTML = "";
result.textContent = "";
const wrongAnswers = shuffle(
shuffledQuizData
.filter((q, i) => i !== currentQuestion)
.map(q => q.answer)
).slice(0, 3);
const allChoices = shuffle([current.answer, ...wrongAnswers]);
allChoices.forEach(choice => {
const btn = document.createElement("button");
btn.textContent = choice;
btn.onclick = () => {
if (choice === current.answer) {
result.textContent = "正解！";
result.style.color = "green";
} else {
result.textContent = "不正解…";
result.style.color = "red";
}
setTimeout(() => {
currentQuestion++;
if (currentQuestion < shuffledQuizData.length) {
showQuestion();
} else {
questionEl.textContent = "おつかれさま！テスト終了！";
counterEl.textContent = "";
choicesContainer.innerHTML = "";
result.textContent = "";
}
}, 1000);
};
choicesContainer.appendChild(btn);
});
}
showQuestion();
</script>
</body>
</html>