如果運行不確定的條件是隨機的？

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結構，代碼（和可維護性）會得到很多容易。 也許我已經混合了聲音，但這個想法是一樣的：每個對象都包含這個問題，一個可選的音頻文件和響應函數：

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>