今回は、答え合わせボタンを、押すと、自動的に答えを点数を表示してくれる、WEBアプリを、作ってみたいと、思います!!!!!
下記のソースコードは、本当に動くものです
参考にしていただければ幸いです。
答え合わせボタンを、押された時の答え
<html>
<head>
<title>例題４</title>
<script type="text/javascript">
function kotae()
{
ten=0;
if(f.q1.value == "事件や事故が起きたとき :日本全都道府県") {f.q1.style.backgroundColor="aqua ";ten = ten + 25}
else f.q1.style.backgroundColor="red"
if(f.q2.value == "高松市") {f.q2.style.backgroundColor="aqua ";ten = ten + 25}
else f.q2.style.backgroundColor="red"
if(f.q3.value == "名古屋市"){f.q3.style.backgroundColor="aqua ";ten = ten + 25}
else f.q3.style.backgroundColor="red"
if(f.q4.value == "金沢市") {f.q4.style.backgroundColor="aqua ";ten = ten + 25}
else f.q4.style.backgroundColor="red"
f.tokuten.value=
}
</script>
上記が答え合わせボタンを押された時の、答えを持ってくる場所です
次は、問題を、表示する
<body>
<form name="f">
110は、どこで、いつ、使用されている電話番号ですか
<select name="q1">
<option>選択肢</option>
<option>雪がすごくいっぱいで大変な時:北海道</option>
<option>人が海におぼれたとき:アメリカ</option>
<option>事件や事故が起きたとき :日本全都道府県</option>
<option>しんどいとき:日本 一部</option>
</select>
です。
<p>
香川県の県庁所在地は
<select name="q2">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
愛知県の県庁所在地は
<select name="q3">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
石川県の県庁所在地は
<select name="q4">
<option>選択肢</option>
<option>名古屋市</option>
<option>松山市</option>
<option>金沢市</option>
<option>高松市</option>
</select>
です。<p>
上記が、問題を表示して、入力欄を作成するところです
次は、答え合わせボタンを押したら、inputboxに、点数を表示する
作成です
<input type="button" name="b1" value="答え合わせ" onclick="kotae()"> <p>
<input name=tokuten size="6">点
</form>
</body>
</html>
<script type="text/javascript">
const quiz = document.getElementById("quiz");
questions.forEach(({question, selections, answer}, index) => {
quiz.appendChild(document.createTextNode(question));
const select = document.createElement("select");
select.id = `q${index + 1}`;
selections.forEach(selection => {
const option = document.createElement("option");
option.appendChild(document.createTextNode(selection));
select.appendChild(option);
});
quiz.appendChild(select);
quiz.appendChild(document.createTextNode("です。"));
quiz.appendChild(document.createElement("p"));
});
</script>
</body>
</html>
実行結果は、こちらをクリック↓↓
http://www2.kuma.u-tokai.ac.jp/~kfuji/hp/JavaScript/js4dd.html
ホームページ販売しているので。
上記のすべてを、コピペして、利用すると、
なんと、この80行位で、自動答え表示機能付き問題が、作成できるのです
参考にしていただけると、幸いです
これからも、どんどん記事や、質問を、投稿するので、フォローをお願いします
まだ初心者のため、間違えるところが1個くらい出ると思うので、
お願いいたします