###前提・実現したいこと
JavaScriptで以下のようなクイズを作成したいと思っています。

問題を表示（ラジオボタン）→　正解を選択→　結果によりボタンを表示
【2問とも正解を選んだ場合】正解です！のメッセージと応募フォームへのボタンが表示される
【そうでない場合】不正解です！のメッセージと応募フォームのボタンは表示されない

アラートで表示するというものはあったのですが、
アラートではなく、クイズのチェックボックスの下にメッセージとボタンを表示したく、
いろいろと調べてみたのですが、私の力量では難しく…
教えていただけないでしょうか。
よろしくお願いいたします。

###発生している問題・エラーメッセージ

現在アラートの設定はしていますが、アラートで表示ではなく、クイズ下にある、
メッセージとボタンを表示させたいです。

	<!-- 正解ならこちらを表示 -->
	<div style="width:50%; margin:0 auto; text-align:center;">
	<p>正解です！</p>
	<p style="padding:1em; background:#cccccc; text-align: center; width:100%;"><a href="#">応募できます！</a></p>
	</div>
	
	<!-- 不正解ならこちらを表示 -->
	<div style="width:50%; margin:0 auto; text-align:center;">
	<p>不正解です！もう一度チャレンジ</p>
	</div>

###該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<script type="text/javascript">
<!--
function ansercheck() {
if (document.getElementById('ans1-1').checked) {
alert('正解です！応募できます');
} else {
alert('不正解です！もう一度チャレンジ！');
}
}
// -->
</script>
<body>
<h1>Quiz</h1>
<h2>一問目：●●●の答えを選んでください。</h2>
<input type="radio" id="ans1-1" name="anser" value="ans1-1" />答え１<br />
<input type="radio" id="ans1-2" name="anser" value="ans1-2" />答え２が正解<br />
<input type="radio" id="ans1-3" name="anser" value="ans1-3" />答え３<br />
<h2>二問目：●●●の答えを選んでください。</h2>
<input type="radio" id="ans2-1" name="anser" value="ans2-1" />答え１が正解<br />
<input type="radio" id="ans2-2" name="anser" value="ans2-2" />答え２<br />
<input type="radio" id="ans2-3" name="anser" value="ans2-3" />答え３<br />

<input type="button" value="答え合わせ" onclick="ansercheck()" />
	
	<!-- 正解ならこちらを表示 -->
	<div style="width:50%; margin:0 auto; text-align:center;">
	<p>正解です！</p>
	<p style="padding:1em; background:#cccccc; text-align: center; width:100%;"><a href="#">応募できます！</a></p>
	</div>
	
	<!-- 不正解ならこちらを表示 -->
	<div style="width:50%; margin:0 auto; text-align:center;">
	<p>不正解です！もう一度チャレンジ</p>
	</div>
</body>
</html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答2件

ベストアンサー

いろいろと考えられると思いますが一例。

CSS
1#correct, #incorrect {
2  display: none;
3}

HTML
1<div id="correct">正解</div>
2<div id="incorrect">不正解</div>

JavaScript
1function ansercheck() {
2  if (document.getElementById('ans1-1').checked) {
3    //alert('正解です！応募できます');
4    document.getElementById('correct').style.display = 'block';
5    document.getElementById('incorrect').style.display = 'none';
6  } else {
7    //alert('不正解です！もう一度チャレンジ！');
8    document.getElementById('correct').style.display = 'none';
9    document.getElementById('incorrect').style.display = 'block';
10  }
11}

投稿2017/12/01 05:08

x_x

総合スコア13749

snow1210

2017/12/01 07:33

x_x 様　お返事いただきありがとうございます。教えていただいたような動作をイメージしておりました。この場合、IDが1つ設定されています。 (document.getElementById('ans1-1').checked) 一問目、二問目の両方とも正解した場合のみ表示させるには、IDを複数指定できないと思うので、下の回答でyambejp様の書いている書き方で、alertの部分をx_x 様の書いているdocument.getElementById…にすればよいのでしょうか？よろしくお願いいたします。

x_x

2017/12/01 07:39

それでいいと思います。ちなみに、回答が表示される順番は変わるので上か下かは言えません。

snow1210

2017/12/01 07:56 編集

x_x 様　今回初めて、teratailを使用した為、回答の順番の件わかりすづらい書き方をしてしまいました。教えていただいた方法でチャレンジして解決できました！ありがとうございました。

行動規範の内容に同意します

javascriptで完結したページでは結局正解時に飛ぶurlがページ内に記載
されちゃうので正解でも不正解でもユーザーがハックして
正解ページに飛んでいけますがそれでよいのでしょうか？

javascript
1<script>
2function ansercheck() {
3  var q1=document.querySelector('[name=q1]:checked');
4  var q2=document.querySelector('[name=q2]:checked');
5if(
6  (q1!==null && q1.value==="2") &&
7  (q2!==null && q2.value==="1")
8  ){
9alert('正解');
10/* 消してある応募ページの記載を表示する */
11} else {
12alert('不正解');
13}
14}

HTML
1<h1>Quiz</h1>
2<h2>一問目：●●●の答えを選んでください。</h2>
3<input type="radio" name="q1" value="1" />答え１<br />
4<input type="radio" name="q1" value="2" />答え２が正解<br />
5<input type="radio" name="q1" value="3" />答え３<br />
6<h2>二問目：●●●の答えを選んでください。</h2>
7<input type="radio" name="q2" value="1" />答え１が正解<br />
8<input type="radio" name="q2" value="2" />答え２<br />
9<input type="radio" name="q3" value="3" />答え３<br />
10<input type="button" value="答え合わせ" onclick="ansercheck()" />
11

ajaxを使ったサンプル

仮に答えがq1=2,q2=1だとしたら「kotae_2_1.html」というページをつくって
応募ページのリンクを書いておきます

kotae_2_1.html

HTML
1<a href="http://exsample.com">応募</a>

それ以外のページ（例えばkotae_1_1とかkotae_1_2とか・・・）は
作っても作らなくても問題ありません。
その上で、以下で質問をします。(そのままコピペで動くサンプル)

javascript
1<script>
2function ansercheck() {
3  var q1=document.querySelector('[name=q1]:checked');
4  var q2=document.querySelector('[name=q2]:checked');
5  if(q1==null || q2==null){
6    alert('未入力');
7  } else {
8    var xhr = new XMLHttpRequest();
9    xhr.open('get', 'kotae_'+q1.value+'_'+q2.value+'.html');
10    xhr.onload = function() {
11      var str="";
12      if(this.status==200){
13        str=this.response;
14      }else{
15        str="不正解";
16      }
17      console.log(str);
18      document.querySelector('#kekka').innerHTML=str;
19    }
20    xhr.send("");
21  }
22}
23</script>
24<h1>Quiz</h1>
25<h2>一問目：●●●の答えを選んでください。</h2>
26<input type="radio" name="q1" value="1" />答え１<br />
27<input type="radio" name="q1" value="2" />答え２が正解<br />
28<input type="radio" name="q1" value="3" />答え３<br />
29<h2>二問目：●●●の答えを選んでください。</h2>
30<input type="radio" name="q2" value="1" />答え１が正解<br />
31<input type="radio" name="q2" value="2" />答え２<br />
32<input type="radio" name="q3" value="3" />答え３<br />
33<input type="button" value="答え合わせ" onclick="ansercheck()" />
34<div id="kekka"></div>

投稿2017/12/01 05:07

編集2017/12/01 08:06

yambejp

総合スコア114777

snow1210

2017/12/01 07:11

yambejp様　お返事いただきありがとうございます。ご指摘いただいた通り、不正に正解ページに飛んでいくのはダメだと思います。ご指摘ありがとうございます。このような場合、どういうふうに対策すればよいかご教示いただけますでしょうか。よろしくお願いいたします。

yambejp

2017/12/01 07:19

そうなるとサーバー側のプログラムに回答をなげて、正解だった時だけ正解ページをだすしかないですね。ちゃんとやるならユーザー登録してユーザーIDと正解情報をセッションとしてもたないと管理できないとおもいますそこまでやるのが厳しければせめてURLだけでも別ページにおいて正解時にajaxで呼びに行くことでしょうか

snow1210

2017/12/01 07:34

yambejp様　お返事いただきありがとうございます。方法を解説いただきありがとうございます。とりいそぎ、こういう動きができるかどうか確認してほしいとのことで、動作のことしか考えておりませんでした。今回ご指摘いただき、勉強になりましたし作業前にチェックすべきことを確認できることができました。ありがとうございました。

yambejp

2017/12/01 08:07

一応ajaxを利用したsampleを追記しときました。参考までに

snow1210

2017/12/01 09:36

yambejp様　ご丁寧にありがとうございます！とても助かります。こちらの方法も検討し、担当に確認したいと思います。とても勉強になりました。ありがとうございました。

行動規範の内容に同意します

あなたの回答