ラジオボタンを使ったクイズを作成しています。
全てのクイズの答えを選択してページ下部にある採点ボタンを押したら、採点ボタンの下に採点結果を出力したいと考えています。
しかし、ボタンの下に採点結果を出力するとボタンを押す位置によっては結果が表示されていることがわかりにくいため、採点ボタンを押したら、追加した採点結果までスクロールされるようにしたいです。
javascript
1function saiten(){ 2 var point = 0; 3 var max = 5; 4 var test = document.getElementById("test"); 5 6 if(document.quiz.a[0].checked){point+=1;} 7 if(document.quiz.b[0].checked){point+=1;} 8 if(document.quiz.c[0].checked){point+=1;} 9 if(document.quiz.d[0].checked){point+=1;} 10 if(document.quiz.e[0].checked){point+=1;} 11 12 if(point>=0 && point<2){ 13 test.innerHTML = '[結果に応じた出力用テキスト]'; 14 } else if(point>=2 && point<3) { 15 test.innerHTML = '[結果に応じた出力用テキスト]'; 16 } else { 17 test.innerHTML = '[結果に応じた出力用テキスト]'; 18 } 19}
html
1<form name="quiz"> 2<p>Q1 クイズ1の問題文</p><br> 3<label><input type=radio name="a" checked>アンサー1</label> 4 <label><input type=radio name="a">アンサー2</label> 5 <label><input type=radio name="a">アンサー3</label> 6<p>Q2 クイズ2の問題文</p><br> 7<label><input type=radio name="b" checked>アンサー1</label> 8 <label><input type=radio name="b">アンサー2</label> 9 <label><input type=radio name="b">アンサー3</label> 10<p>Q3 クイズ3の問題文</p><br> 11<label><input type=radio name="c" checked>アンサー1</label> 12 <label><input type=radio name="c">アンサー2</label> 13 <label><input type=radio name="c">アンサー3</label> 14<p>Q4 クイズ4の問題文</p><br> 15<label><input type=radio name="d" checked>アンサー1</label> 16 <label><input type=radio name="d">アンサー2</label> 17 <label><input type=radio name="d">アンサー3</label> 18<p>Q5 クイズ5の問題文</p><br> 19<label><input type=radio name="e" checked>アンサー1</label> 20 <label><input type=radio name="e">アンサー2</label> 21 <label><input type=radio name="e">アンサー3</label> 22<input type=button value="採点" onClick="saiten()"> 23 24<div id="test"></div> 25</form>
【やりたいこと】
1)採点ボタンをクリック
2)採点結果を採点ボタン下に表示
3)採点結果が画面の上にくるようスクロールさせる
(1で採点ボタンをクリックしたら2、3の動きをさせたいです。)
$("#test").scrollTo(0);
を追加したりしてみましたがうまくいきませんでした。
どのようにしたらこの挙動を実現することが可能でしょうか?
アドバイスいただけると幸いです。
何卒よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー