JavaScriptでクイズを作成したい

###前提・実現したいこと
javaScriptで、クイズを作成したいと思っています。
問題表示→正誤・解説表示→次の問題…というようにページが遷移してくようにつくりたいです。また、最後に結果（成績）表示も行いたいのですが、どれだけ調べても私の力量だけでは到底実装には及びませんでした…

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

１問目の正誤・解説表示後、２問目に進むことができません。また、回答の保存及び結果発表の仕方がわかりません。ソースコード全文をお載せします、汚いコードで申し訳ありません…

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

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width">
6<link href="./common.css" rel="stylesheet" type="text/css">
7<script src="Js/jquery-2.1.4.min.js"></script>
8<style type="text/css">
9.quiz{
10margin:12px;
11}
12.correct{
13color:#F00;
14}
15.incorrect{
16color:#00F;
17}
18input{
19	display: none;
20}
21label{
22	display: block;
23	float: left;
24	cursor: pointer;
25	width: 80px;
26	margin: 0;
27	padding: 12px 5px;
28	border-right: 1px solid #abb2b7;
29	background: #bdc3c7;
30	color: #555e64;
31	font-size: 14px;
32	text-align: center;
33	line-height: 1;
34	transition: .2s;
35}
36label:first-of-type{
37	border-radius: 3px 0 0 3px;
38}
39label:last-of-type{
40	border-right: 0px;
41	border-radius: 0 3px 3px 0;
42}
43input[type="radio"]:checked + label {
44	background-color: #a1b91d;
45	color: #fff;
46}
47</style>
48</head>
49<body>
50<div class="news">
51<div class="info">審判員クイズ</div>
52</div>
53<script>
54  var correct = "<h3 class='correct'>正解！</h3>";
55  var incorrect = "<h3 class='incorrect'>はずれ…</h3>";
56  $(function () {
57      $(".quiz").html("クイズ１問目問題<label><input type='radio' value='1'>クイズ１－１</label><label><input type='radio' value='2'>クイズ１－２</label><label><input type='radio' value='3'>クイズ１－３</label>");
58      $('input').click(function() {
59          $('.wrapper').fadeOut(500);
60          $('.wrapper').hide();
61          if ($(this).val() == 2) 
62          $(".quiz").html(correct);
63              else $(".quiz").html(incorrect);
64          $(".commentary").html("クイズ１問目解説<a href='javascript:question2();'>次の問題へ</a>");
65          $('.wrapper').fadeIn(500);
66      });
67
68      function question2() {
69          $(".quiz").html("クイズ２問目問題\
70                       <label><input type='radio' value='1'>クイズ２－１</label>\
71                       <label><input type='radio' value='2'>クイズ２－２</label>\
72                       <label><input type='radio' value='3'>クイズ２－３</label>");
73      $(".commentary").html("");
74      $('input').click(function() {
75        $('.wrapper').fadeOut(500);
76        $('.wrapper').hide();
77        if ($(this).val() == 2) $(".quiz").html(correct);
78        else $(".quiz").html(incorrect);
79        $(".commentary").html("クイズ２問目解説<a href='javascript:question3()'>次の問題へ</a>");
80        $('.wrapper').fadeIn(500);
81          });
82    }
83
84    function question3() {
85      $(".quiz").html("クイズ３問目問題\
86                       <label><input type='radio' value='1'>クイズ３－１</label>\
87                       <label><input type='radio' value='2'>クイズ３－２</label>");
88      $(".commentary").html("");
89      $('input').click(function() {
90        $('.wrapper').fadeOut(500);
91        $('.wrapper').hide();
92        if ($(this).val() == 2) $(".quiz").html(correct);
93        else $(".quiz").html(incorrect);
94        $(".commentary").html("クイズ３問目解説<a href='javascript:question3()'>結果を見る</a>");
95        $('.wrapper').fadeIn(500);
96      });
97    }
98  });
99</script>
100<div class="wrapper">
101  <div class="quiz"></div>
102  <div class="commentary"></div>
103</div>
104</body>
105</html>

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

回答1件

ベストアンサー

このようにすると動くと思います。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width">
6    <style type="text/css">
7        .quiz {
8            margin: 12px;
9        }
10
11        .correct {
12            color: #F00;
13        }
14
15        .incorrect {
16            color: #00F;
17        }
18
19        input {
20            display: none;
21        }
22
23        label {
24            display: block;
25            float: left;
26            cursor: pointer;
27            width: 80px;
28            margin: 0;
29            padding: 12px 5px;
30            border-right: 1px solid #abb2b7;
31            background: #bdc3c7;
32            color: #555e64;
33            font-size: 14px;
34            text-align: center;
35            line-height: 1;
36            transition: .2s;
37        }
38
39        label:first-of-type {
40            border-radius: 3px 0 0 3px;
41        }
42
43        label:last-of-type {
44            border-right: 0px;
45            border-radius: 0 3px 3px 0;
46        }
47
48        input[type="radio"]:checked + label {
49            background-color: #a1b91d;
50            color: #fff;
51        }
52    </style>
53</head>
54<body>
55<div class="news">
56    <div class="info">審判員クイズ</div>
57</div>
58<div class="wrapper">
59    <div class="quiz"></div>
60    <div class="commentary"></div>
61</div>
62<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
63<script>
64    var correct = "<h3 class='correct'>正解！</h3>";
65    var incorrect = "<h3 class='incorrect'>はずれ…</h3>";
66    $(function () {
67        $(".quiz").html("クイズ１問目問題<label><input type='radio' value='1'>クイズ１－１</label><label><input type='radio' value='2'>クイズ１－２</label><label><input type='radio' value='3'>クイズ１－３</label>");
68        $('input').click(function () {
69            $('.wrapper').fadeOut(500);
70            $('.wrapper').hide();
71            if ($(this).val() == 2)
72                $(".quiz").html(correct);
73            else $(".quiz").html(incorrect);
74            $(".commentary").html("クイズ１問目解説<a href='javascript:question2();'>次の問題へ</a>");
75            $('.wrapper').fadeIn(500);
76        });
77    });
78    function question2() {
79        $(".quiz").html("クイズ２問目問題\
80                       <label><input type='radio' value='1'>クイズ２－１</label>\
81                       <label><input type='radio' value='2'>クイズ２－２</label>\
82                       <label><input type='radio' value='3'>クイズ２－３</label>");
83        $(".commentary").html("");
84        $('input').click(function () {
85            $('.wrapper').fadeOut(500);
86            $('.wrapper').hide();
87            if ($(this).val() == 2) $(".quiz").html(correct);
88            else $(".quiz").html(incorrect);
89            $(".commentary").html("クイズ２問目解説<a href='javascript:question3()'>次の問題へ</a>");
90            $('.wrapper').fadeIn(500);
91        });
92    }
93
94    function question3() {
95        $(".quiz").html("クイズ３問目問題\
96                       <label><input type='radio' value='1'>クイズ３－１</label>\
97                       <label><input type='radio' value='2'>クイズ３－２</label>");
98        $(".commentary").html("");
99        $('input').click(function () {
100            $('.wrapper').fadeOut(500);
101            $('.wrapper').hide();
102            if ($(this).val() == 2) $(".quiz").html(correct);
103            else $(".quiz").html(incorrect);
104            $(".commentary").html("クイズ３問目解説<a href='javascript:question3()'>結果を見る</a>");
105            $('.wrapper').fadeIn(500);
106        });
107    }
108</script>
109</body>
110</html>