○×クイズで答えの正誤の設定しているのはどこですか？

前提・実現したいこと
例えばこの部分で[岐阜]が正解だと設定している場所はどこでしょうか？
question : '次のうち、海に面していない県はどれ？',
answer : ['岐阜', '愛知', '三重', '静岡']

該当のソースコード

javascript
1<head>
2<style>
3
4/* クイズのすべてを管理する親要素 */
5.quiz_area{
6    position: relative;
7}
8
9/* 回答後に上に被せてタップできなくするための要素（デフォルト非表示、回答後に一時的に表示） */
10.quiz_area .quiz_area_bg{
11    position: absolute;
12    width: 100%;
13    height: 100%;
14    top: 0;
15    right: 0;
16    left: 0;
17    z-index: 999;
18    background: rgba(0, 0, 0, 0.3);
19    display: none;
20    color: #FFF;
21    text-align: center;
22}
23
24/* 画面に〇、×を表示するための要素（デフォルト非表示、回答後に一時的に表示） */
25.quiz_area .quiz_area_icon{
26    position: absolute;
27    box-sizing: border-box;
28    top: 50%;
29    left: 50%;
30    z-index: 9999;
31    transform: translate(-50%, -50%);
32    color: red;
33    display: none;
34    font-size: 10em;
35    font-weight: bold;
36    -webkit-text-stroke: 4px #FFF;
37    text-stroke: 4px #FFF;
38}
39
40/* .trueまたは.falseのクラスが付与されたら表示するものとみなす */
41.quiz_area .quiz_area_icon.true, .quiz_area .quiz_area_icon.false{
42    display: block;
43}
44
45/* .trueは正解（〇を表示） */
46.quiz_area .quiz_area_icon.true:before{
47    content: '〇';
48    color: red;
49}
50/* .falseは不正解（×を表示） */
51.quiz_area .quiz_area_icon.false:before{
52    content: '×';
53    color: blue;
54}
55
56/* 現在の問題数を表示 */
57.quiz_area .quiz_no{
58    font-weight: bold;
59}
60
61/* 問題文と回答後の結果（デザインは使いまわし） */
62.quiz_area .quiz_question, .quiz_result{
63    box-sizing: border-box;
64    padding: 15px;
65    border: 4px solid #CCC;
66    font-weight: bold;
67}
68
69/* 回答後の結果は初期非表示 */
70.quiz_area .quiz_result{
71    display: none;
72    text-align: center;
73}
74
75
76/* 以下クイズの選択肢のデザイン */
77.quiz_area .quiz_ans_area ul{
78    margin: 10px 0 0 0;
79    padding: 0;
80    display: block;
81}
82
83.quiz_area .quiz_ans_area ul::after{
84    content: "";
85    display: block;
86    clear: both;
87}
88
89.quiz_area .quiz_ans_area ul li{
90    box-sizing: border-box;
91    list-style: none;
92    float: left;
93    width: 100%;
94    padding: 10px 15px;
95    border: 2px solid #CCC;
96    margin: 0 0 -2px 0;
97    cursor: pointer;
98}
99
100.quiz_area .quiz_ans_area ul li.selected{
101    background-color: #bcbcbc;
102}
103</style>
104</head>
105
106
107
108
109
110<div class="quiz_area">
111    <div class="quiz_set">
112        第<span class="quiz_no">0</span>問
113        <div class="quiz_question"></div>
114        <div class="quiz_ans_area">
115            <ul></ul>
116        </div>
117        <div class="quiz_area_bg"></div>
118        <div class="quiz_area_icon"></div>
119    </div>
120    <div class="quiz_result"></div>
121</div>
122
123
124
125
126
127
128<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4'></script>
129<script>
130$(function(){
131    var quizArea = $('.quiz_area'); //クイズを管理するDOMを指定
132    var quiz_html = quizArea.html(); //もう一度　を押した時に元に戻すため初期HTMLを変数で保管
133    var quiz_cnt = 0; //現在の問題数を管理
134    var quiz_fin_cnt = 5; //何問で終了か設定（クイズ数以下であること）
135    var quiz_success_cnt = 0; //問題の正解数
136    
137    //クイズの配列を設定
138    //answerの選択肢の数はいくつでもOK　ただし先頭を正解とすること(出題時に選択肢はシャッフルされる)
139    var aryQuiz = [];
140    aryQuiz.push(
141        {
142            question : '次のうち、海に面していない県はどれ？',
143            answer : ['岐阜', '愛知', '三重', '静岡']
144        }
145        ,{
146            question : '祝日「山の日」は何日？',
147            answer : ['8月11日', '8月24日', '8月17日', '8月5日']
148        }
149        ,{
150            question : '東京ヤクルトスワローズのホーム球場はどれ？',
151            answer : ['明治神宮野球場', '東京ドーム', 'メットライフドーム', 'ZOZOマリンスタジアム']
152        }
153        ,{
154            question : '元号「平成」が終わったのはいつ？',
155            answer : ['2019年4月30日', '2019年3月31日', '2019年5月31日', '2019年2月28日']
156        }
157        ,{
158            question : 'SMAPが出したシングル曲で最も売れたのはどれ？',
159            answer : ['世界に一つだけの花', 'オレンジ', '青いイナズマ', 'SHAKE']
160        }
161    );
162    
163    quizReset();
164    
165    //回答を選択した後の処理
166    quizArea.on('click', '.quiz_ans_area ul li', function(){
167        //画面を暗くするボックスを表示（上から重ねて、結果表示中は選択肢のクリックやタップを封じる
168        quizArea.find('.quiz_area_bg').show();
169        //選択した回答に色を付ける
170        $(this).addClass('selected');
171        if($(this).data('true')){
172            //正解の処理 〇を表示
173            quizArea.find('.quiz_area_icon').addClass('true');
174            //正解数をカウント
175            quiz_success_cnt++;
176        }else{
177            //不正解の処理
178            quizArea.find('.quiz_area_icon').addClass('false');
179        }
180        setTimeout(function(){
181            //表示を元に戻す
182            quizArea.find('.quiz_ans_area ul li').removeClass('selected');
183            quizArea.find('.quiz_area_icon').removeClass('true false');
184            quizArea.find('.quiz_area_bg').hide();
185            //問題のカウントを進める
186            quiz_cnt++;
187            if(quiz_fin_cnt > quiz_cnt){
188                //次の問題を設定する
189                quizShow();
190            }else{
191                //結果表示画面を表示
192                quizResult();
193            }
194        }, 1500);
195    });
196    
197    //もう一度挑戦するを押した時の処理
198    quizArea.on('click', '.quiz_restart', function(){
199        quizReset();
200    });
201    
202    //リセットを行う関数
203    function quizReset(){
204        quizArea.html(quiz_html); //表示を元に戻す
205        quiz_cnt = 0;
206        quiz_success_cnt = 0;
207        //aryQuiz = arrShuffle(aryQuiz); //毎回出題の順番をシャッフルしたい場合はここのコメントを消してね
208        quizShow();
209    }
210    
211    //問題を表示する関数
212    function quizShow(){
213        //何問目かを表示
214        quizArea.find('.quiz_no').text((quiz_cnt + 1));
215        //問題文を表示
216        quizArea.find('.quiz_question').text(aryQuiz[quiz_cnt]['question']);
217        //正解の回答を取得する
218
219
220
221        var success = aryQuiz[quiz_cnt]['answer'][0];
222        //現在の選択肢表示を削除する
223        quizArea.find('.quiz_ans_area ul').empty();
224        //問題文の選択肢をシャッフルさせる(自作関数) .concat()は参照渡し対策
225        var aryHoge = arrShuffle(aryQuiz[quiz_cnt]['answer'].concat());
226        //問題文の配列を繰り返し表示する
227        $.each(aryHoge, function(key, value){
228            var fuga = '<li>' + value + '</li>';
229            //正解の場合はdata属性を付与する
230            if(success === value){
231                fuga = '<li data-true="1">' + value + '</li>';
232            }
233            quizArea.find('.quiz_ans_area ul').append(fuga);
234        });
235    }
236    
237    //結果を表示する関数
238    function quizResult(){
239        quizArea.find('.quiz_set').hide();
240        var text = quiz_fin_cnt + '問中' + quiz_success_cnt + '問正解！';
241        if(quiz_fin_cnt === quiz_success_cnt){
242            text += '<br>全問正解おめでとう！';
243        }
244        text += '<br><input type="button" value="もう一度挑戦する" class="quiz_restart p-10">';
245        quizArea.find('.quiz_result').html(text);
246        quizArea.find('.quiz_result').show();
247    }
248    
249    //配列をシャッフルする関数
250    function arrShuffle(arr){
251        for(i = arr.length - 1; i > 0; i--){
252            var j = Math.floor(Math.random() * (i + 1));
253            var tmp = arr[i];
254            arr[i] = arr[j];
255            arr[j] = tmp;
256        }
257        return arr;
258    }
259});
260</script>

退会済みユーザー

2022/04/03 08:30

https://kinocolog.com/jquery_quiz/　←他人が書いたコードを読んでも分からないからコピペして丸投げして質問するのは恥ずかしいと思うのですけど？

meg_

2022/04/03 08:40

質問のコードはどこからの引用ですか？引用元を明記しましょう。

1T2R3M4

2022/04/03 08:56

teratailはサポートセンターではなく、思考するエンジニアの為のQ&Aコミュニティです

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

回答3件

ベストアンサー

例えばこの部分で[岐阜]が正解だと設定している場所はどこでしょうか？

コメントで書いてありますね。

javascript
1//正解の回答を取得する
2var success = aryQuiz[quiz_cnt]['answer'][0];

投稿2022/04/03 08:30

ku__ra__ge

総合スコア4524

believe

2022/04/03 08:36

回答ありがとうございました。

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

配列の０番目が答えになります。

投稿2022/04/04 09:45

believe

総合スコア91

配列の０番目が答えになります。

投稿2022/04/03 08:35

believe

総合スコア91

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

○×クイズで答えの正誤の設定しているのはどこですか？

関連した質問