您好我正在使用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 {
background-color: #8dd8f8;
}
h1, p {
text-align: center;
color: #323330;
font-size: 100px;
}
p {
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">
<div class="form-group">
<label>Responce:</label>
<input type="text" class="form-control" id="input" value="">
</div>
</div>
</div>
答案 0 :(得分: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;
}
});
&#13;
body {
background-color: #8dd8f8;
}
h1, p {
text-align: center;
color: #323330;
font-size: 100px;
}
p {
font-size: 30px;
}
&#13;
<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">
<div class="form-group">
<label>Responce:</label>
<input type="text" class="form-control" id="input" value="">
</div>
</div>
</div>
&#13;