1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

自動答え表示機能付き問題作成しよう

Last updated at Posted at 2022-01-06

今回は、答え合わせボタンを、押すと、自動的に答えを点数を表示してくれる、WEBアプリを、作ってみたいと、思います!!!!!
下記のソースコードは、本当に動くものです
参考にしていただければ幸いです。

###答え合わせボタンを、押された時の答え

<html>
<head>
<title>例題4</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個くらい出ると思うので、
お願いいたします

1
1
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?