ブラウザ上で自動採点できる練習アプリ（HTML+JS）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数値と文字列クイズ（自動採点）</title>
<style>
body { font-family: 'Segoe UI', sans-serif; background: #f7f7fb; padding: 20px; }
h1 { text-align: center; color: #333; }
.quiz { background: white; border-radius: 16px; padding: 20px; margin: 20px auto; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 700px; }
.question { margin-bottom: 15px; }
button { background: #4f46e5; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; }
button:hover { background: #4338ca; }
#result { font-weight: bold; font-size: 18px; margin-top: 20px; text-align: center; }
</style>
</head>
<body>
<h1>🧮 JavaScript 数値と文字列クイズ</h1>
<div class="quiz">
<div class="question">
<p>1️⃣ 次の式の結果は？ <code>console.log(0b1010)</code></p>
<label><input type="radio" name="q1" value="8"> 8</label><br>
<label><input type="radio" name="q1" value="10"> 10</label><br>
<label><input type="radio" name="q1" value="12"> 12</label>
</div>
<div class="question">
<p>2️⃣ 次の式の結果は？ <code>console.log("5" + 3)</code></p>
<label><input type="radio" name="q2" value="8"> 8</label><br>
<label><input type="radio" name="q2" value="53"> 53</label><br>
<label><input type="radio" name="q2" value="NaN"> NaN</label>
</div>
<div class="question">
<p>3️⃣ <code>let s = "Hello"; console.log(s.length);</code> の結果は？</p>
<label><input type="radio" name="q3" value="4"> 4</label><br>
<label><input type="radio" name="q3" value="5"> 5</label><br>
<label><input type="radio" name="q3" value="6"> 6</label>
</div>
<div class="question">
<p>4️⃣ <code>console.log(Number("abc"))</code> の結果は？</p>
<label><input type="radio" name="q4" value="0"> 0</label><br>
<label><input type="radio" name="q4" value="NaN"> NaN</label><br>
<label><input type="radio" name="q4" value="undefined"> undefined</label>
</div>
<div class="question">
<p>5️⃣ <code>let n = 7; console.log(n.toString().padStart(3, "0"));</code></p>
<label><input type="radio" name="q5" value="07"> 07</label><br>
<label><input type="radio" name="q5" value="007"> 007</label><br>
<label><input type="radio" name="q5" value="7.00"> 7.00</label>
</div>
<div style="text-align:center;">
<button onclick="checkAnswers()">採点する</button>
</div>
<div id="result"></div>
</div>
<script>
function checkAnswers() {
const answers = {
q1: '10',
q2: '53',
q3: '5',
q4: 'NaN',
q5: '007'
};
let score = 0;
let total = Object.keys(answers).length;
for (let key in answers) {
const selected = document.querySelector(`input[name=${key}]:checked`);
if (selected && selected.value === answers[key]) {
score++;
}
}
const percent = Math.round((score / total) * 100);
let message = `✅ ${score}/${total} 問正解！（正答率 ${percent}%）`;
if (percent === 100) message += "\n🎉 完璧です！";
else if (percent >= 60) message += "\n👍 よくできました！";
else message += "\n💪 もう少し練習しましょう。";
document.getElementById('result').innerText = message;
}
</script>
</body>
</html>
ブラウザで開くと、選択式クイズに答えて「採点する」ボタンで正答率が表示されます。