条件が無限に実行される場合はランダム？

Question

こんにちは私はJavaScriptで質問フォームを作っています。質問が常に実行され、ランダムでソートされた順番で4で停止しないようにしています。毎回ランダムな質問が無作為な順番で終わることなく求められます。ループのif文でコードを実行しています。

var questionNum = 0; 
 
var question = '<h1>What is your name?</h1>'; 
 

 
var output = document.getElementById('output'); 
 
output.innerHTML = question; 
 

 
function bot() { 
 
    var input = document.getElementById("input").value; 
 
    console.log(input); 
 

 
    if (questionNum == 0) { 
 
     var audio = new Audio('music/openmind.ogg'); 
 
     audio.play(); 
 
    output.innerHTML = '<h1>Hello ' + input + '!</h1>'; 
 
    document.getElementById("input").value = ""; 
 
    question = '<h1>How old are you?</h1>'; 
 
    setTimeout(timedQuestion, 2000); 
 
    } 
 

 
    else if (questionNum == 1) { 
 

 
    output.innerHTML = '<h1>That means you were born in ' + (2017 - input) + '.</h1>'; 
 
    document.getElementById("input").value = ""; 
 
    question = '<h1>where are you from?</h1>'; 
 
    setTimeout(timedQuestion, 2000); 
 
    } 
 

 
    else if (questionNum == 2) { 
 
     var audio = new Audio('music/beone.ogg'); 
 
     audio.play(); 
 
     output.innerHTML = '<h1>You are from ' + (input) + '.</h1>'; 
 
     document.getElementById("input").value = ""; 
 
     question = '<h1>Do you eat healthy?</h1>'; 
 
     setTimeout(timedQuestion, 2000); 
 
    } 
 

 
    else if (questionNum == 3) { 
 
     var audio = new Audio('music/becoming.ogg'); 
 
     audio.play(); 
 
     output.innerHTML = '<h1>Acording to my data you are eating ' + (input) + ' and that is healthy!</h1>' 
 

 

 
    } 
 
} 
 

 
function timedQuestion() { 
 
    output.innerHTML = question; 
 
} 
 

 

 
$(document).keypress(function(e) { 
 
    if (e.which == 13) { 
 
    bot(); 
 
    questionNum++; 
 
    } 
 
});

body { 
 
\t background-color: #8dd8f8; 
 
} 
 

 
h1, p { 
 

 
\t text-align: center; 
 
\t color: #323330; 
 
\t font-size: 100px; 
 
} 
 

 

 
p { 
 
\t font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="well"> 
 
<div id="output"></div> 
 
</div> 
 

 
    <div class="col-md-2 col-md-offset-5"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <label>Responce:</label> 
 
\t \t \t <input type="text" class="form-control" id="input" value=""> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 

 

 
</div>

Answer 1

質問とその回答は、代わりにif..else構造、コード（および保守）を使用してのオブジェクトに配置されている場合は非常に簡単になります。 はおそらく、私は、オーディオを混同しましたが、考え方は同じまま：各オブジェクトは、質問が含まれている、オプションのオーディオファイルと応答関数：[Javascriptをランダムの

let questions = [ 
 
    {text:'What is your name?', audio:'music/openmind.ogg', response : input => 'Hello ' + input + '!' }, 
 
    {text:'How old are you?', response : input => 'That means you were born in ' + (2017 - input) + '.'}, 
 
    {text:'Where are you from?', audio:'music/beone.ogg', response: input => 'You are from ' + (input) + '.'}, 
 
    {text: 'Do you eat healthy?', audio: 'music/becoming.ogg', response: input => 'Acording to my data you are eating ' + (input) + ' and that is healthy!'} 
 
]; 
 

 
let output = $('#output'), 
 
    input = $("#input"), 
 
    curQuestion; 
 

 
function ask() { 
 
    let qi = Math.floor(Math.random() * questions.length); //depending on your needs, a check could be added if it's been asked directly before or only recycle questions when all are asked 
 
    curQuestion = questions[qi]; 
 
    setOutput(curQuestion.text); 
 
    input.val(''); 
 
} 
 

 
ask(); //first call 
 

 
function respond(){ 
 
    let q = curQuestion; 
 
    if(q.audio) 
 
    new Audio(q.audio).play(); 
 
    setOutput(q.response(input.val())); 
 
    setTimeout(ask, 2000); 
 
} 
 

 
function setOutput(txt){ 
 
    output.html($('<h1>').text(txt)); 
 
} 
 

 
$(document).keypress(function(e) { 
 
    if (e.which == 13) { 
 
    respond(); 
 
    return false; 
 
    } 
 
});

body { 
 
\t background-color: #8dd8f8; 
 
} 
 

 
h1, p { 
 

 
\t text-align: center; 
 
\t color: #323330; 
 
\t font-size: 100px; 
 
} 
 

 

 
p { 
 
\t font-size: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<div class="well"> 
 
<div id="output"></div> 
 
</div> 
 

 
    <div class="col-md-2 col-md-offset-5"> 
 
\t \t \t <div class="form-group"> 
 
\t \t \t <label>Responce:</label> 
 
\t \t \t <input type="text" class="form-control" id="input" value=""> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 

 

 

 
</div>