前回の拡張版があったことを思い出しました。
5点問題が何問？
10点問題が何問？
という感じです。
Let's start JavaScript 111 <br>テスト等の変則的合計点を100点満点換算 2026/09/16
<!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: sans-serif;
max-width: 500px;
background: black;
color: white;
margin: 10px auto;
padding: 20px;
}
label {
display: block;
margin: 12px 0;
}
input {
width: 80px;
padding: 6px;
margin-left: 10px;
}
button {
padding: 4px 16px;
margin-top: 10px;
}
#result {
margin-top: 20px;
font-size: 1.2em;
font-weight: bold;
}
</style>
</head>
<body>
<h3>テスト得点計算</h3>
<h4>5点問題</h4>
<label>
問題数：
<input type="number" id="fiveTotal" min="0">
</label>
<label>
正解数：
<input type="number" id="fiveCorrect" min="0">
</label>
<h4>10点問題</h4>
<label>
問題数：
<input type="number" id="tenTotal" min="0">
</label>
<label>
正解数：
<input type="number" id="tenCorrect" min="0">
</label>
<button onclick="calculate()">計算する</button>
<div id="result"></div>
<script>
function calculate() {
const fiveTotal =
Number(document.getElementById("fiveTotal").value);
const fiveCorrect =
Number(document.getElementById("fiveCorrect").value);
const tenTotal =
Number(document.getElementById("tenTotal").value);
const tenCorrect =
Number(document.getElementById("tenCorrect").value);
// 正解数のチェック
if (
fiveCorrect > fiveTotal ||
tenCorrect > tenTotal ||
fiveTotal < 0 ||
tenTotal < 0
) {
document.getElementById("result").textContent =
"正解数が問題数を超えています。";
return;
}
// 実際の合計点
const score =
fiveCorrect * 5 +
tenCorrect * 10;
// 実際の満点
const maxScore =
fiveTotal * 5 +
tenTotal * 10;
// 100点満点換算
const converted = (score / maxScore) * 100;
document.getElementById("result").innerHTML = `
合計点：${score} / ${maxScore} 点<br>
100点満点換算：<strong>${converted.toFixed(1)} 点</strong>
`;
}
</script>
</body>
</html>
実行直後の画面です。
5点問題の数と正解数、10点問題の数と正解数を入力して［計算する］をクリックするだけです。
