JavaScriptを使ったクイズゲーム作成

今回JavaScriptを使ったクイズゲームを練習として作成しています。

分からない事は、現在JavaScriptのファイルがHTMLに出力
されません。
デバッグをしていると問題文の値は取得出来ている様です。

実現したい事は、ブラウザ読み込み時にランダムで問題を出題
全問題解答後に結果を表示するような仕様にしたいと思っています。

皆さんの知識をお貸しいただけると幸いです。
よろしくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name = "format-detection" content="telephone=no,email=no,address=no">
8    
9    <link href="design.css" rel="stylesheet" type="text/css" media="all" />
10    <title>4択問題</title>
11  </head>
12  
13  <body>
14
15    <h1>4択クイズ!!</h1>
16    <hr>
17    
18    <h3>解答数</h3>
19    <div id="count"></div>
20    
21    <h3>問題</h3>
22    <div id="Sentence"></div>
23    
24    <div id="Answers">
25    </div>
26    <script type="text/javascript" src="logic.js"></script>  
27  </body>
28</html>
29
30

JavaScript
1
2    var Questions = [];
3
4
5    var CurrentQuestion = [];
6        
7 
8
9  
10    document.addEventListener(
11
12        'DOMContentLoded',function()
13        {
14            let tmpAry = Questions.concat();
15              
16            CurrentQuestion = ArrayRandomaizer(Questions);
17
18            setQuestion(0);
19        });
20
21  
22    function ArrayRandomaizer(original){
23       
24        let tmpAry = original.concat();
25        var randomaized = [];
26
27        while(0 < tmpAry.length){
28            var set =Math.floor(Math.random()*tmpAry.length);
29            randomaized.push(tmpAry[set]);
30            tmpAry.splice(set,1); 
31        }
32        return randomaized;
33    }
34    
35    function setQuestion(number){
36        
37        document.querySelector('#Answers').innerHTML = '';
38        document.querySelector('#result').innerHTML ='';
39        
40        if (CurrentQuestion.length <= number){
41            document.querySelector('#Sentence').innerHTML = '終了'; 
42            return;
43        }
44        var question = CurrentQuestion[number];
45    
46        question.selects = ArrayRandomaizer(question.selects);
47        document.querySelector('#Sentence').innerHTML = question.sentence;
48        
49
50        
51        for (let i = 0;i < question.selects.length; i++){
52            
53            var button = document.createElement('button');
54            button.innerHTML = question.selects[i];
55            button.setAttribute('style',' display:block ; min-width:300px;cursor:pointer;');
56            
57            button.addEventListener('click',function(){
58                judgeAnswer(number,question.selects[i])
59            });
60            
61            document.querySelector('#Answers').appendChild(button);
62        }
63    }
64    
65    function judgeAnswer(number,value){
66        document.querySelector('#result').innerHTML = '';
67       
68        if(value == CurrentQuestion[number].answer){
69            setQuestion(number + 1);
70        }
71        
72        else{
73            document.querySelector('#result').innerHTML = '不正解';
74        }
75    }
76    
77    function addQuestion(sentence,answer,wrong1,wrong2,wrong3){
78      Questions.push(new QuestionEntity(sentence,answer,wrong1,wrong2,wrong3));
79      //alert(Questions[0].sentence);
80    }
81   
82    function QuestionEntity(sentence,answer,wrong1,wrong2,wrong3){
83      
84        this.sentence = sentence;
85       
86        this.answer = answer;
87       
88        this.selects = [answer,wrong1,wrong2,wrong3];
89    }

BeatStar

2022/04/10 00:37 編集

(よく読んだら最後尾で読み込んでた… 普通は先にやるので気付かなかった)

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

回答1件

ベストアンサー

javascript
1    document.addEventListener(
2        'DOMContentLoded',function()
3        {
4            let tmpAry = Questions.concat();
5            CurrentQuestion = ArrayRandomaizer(Questions);
6            setQuestion(0);
7        });