Question

我正在尝试进行一个简单的测验，其中两个术语以不同的语言显示（我在这里使用数字以避免混淆）。这些条款匹配的时间占50％。用户可以选择是或否来判断条款是否匹配。问题以随机顺序显示，如果重复则无关紧要。

这个想法应该重复多次。

我似乎无法使循环工作，此时它贯穿并在开始时打印出所有问题。我想在用户点击时打印出一个新问题。

以下是jsfiddle的链接：http://jsfiddle.net/sX8Rz/1/

以下是代码：

$(document).ready(function () {
var score = 0;

var hiraganaWords1 = [
    ["1", "one"],
    ["2", "two"],
    ["3", "three"],
    ["4", "four"],
    ["5", "five"],
    ["6", "six"],
    ["7", "seven"],
    ["8", "eight"],
    ["9", "nine"],
    ["10", "ten"]
];


    function askQuestion() {
        var questionNumber = Math.floor((Math.random() * hiraganaWords1.length));
        var trueFalse = Math.round(Math.random());
        var wrongAnswer = Math.floor((Math.random() * hiraganaWords1.length));
        var correct = hiraganaWords1[questionNumber][0];
        var trueAnswer = hiraganaWords1[questionNumber][1];
        var incorrectAnswer = hiraganaWords1[wrongAnswer][1];

        if (trueFalse === 0) {
            $("#japanese").append(correct);
            $("#english").append(trueAnswer);
            var answer = "yes";
            $("#yes").click(function () {
                var guess = "yes";
                if (guess === answer) {
                    score++;
                    alert("well done your score is: " + score);

                } else {
                    score = 0;
                    alert("try again");
                }

            });
            $("#no").click(function () {
                var guess = "no";
                if (guess == answer) {
                    score++;
                    alert("well done your score is: " + score);
                    $("#japanese").html(" ");
                    $("#english").html(" ");
                } else {
                    score = 0;
                    alert("try again" );


                }
            })

        } else {
            $("#japanese").append(correct);
            $("#english").append(incorrectAnswer);
            var answer = "no";
            $("#yes").click(function () {
                var guess = "yes";
                if (guess == answer) {
                    score++;
                    alert("well done" + score);

                } else {
                    score = 0;
                    alert("try again" + score);
                }

            });
            $("#no").click(function () {
                var guess = "no"
                if (guess == answer) {
                    score++;
                    alert("well done" + score);
                } else {
                    score = 0;
                    alert("try again" + score);


                }
            })

        }



    }

 for(i=0;i<5;i++){
    askQuestion();
 }


});

提前致谢，我很抱歉这个菜鸟问题，我只是在学习，并希望得到帮助。

干杯安迪

Answer 1

您无法在JavaScript中等待（如果可以，浏览器会阻止并点击任何地方都不会产生任何影响。）

因此解决方案是在用户点击她的选择时询问下一个问题（在显示最后一个问题的结果之后）。

Answer 2

看起来你试图用错误的方法解决数据绑定问题。我建议您查看AngularJS或Knockoutjs以解决您的问题（构建动态用户响应式javascript界面）。它可以为您节省一些时间。

Answer 3

很难从你的代码中理解一下。但我可以提出一个大致的想法。

实现一个名为askQuestion的函数，如：

// add more questions
var questions = ["Eaten food?", "Exercised?"];

// add more choices of your own
var choices = [
    ["one", "four", "three", "two"],
    ["onasde", "foadur", "thradasdee", "two00"], ];

$(document).ready(function () {
    askQuestion(0);    
});
function askQuestion (index){ 
    // where index is the index of question in questions array and choices in choices array
    // display question and choices
    $("#q").html(questions[index]);
    $("#c").html(choices[index].toString());
    //And then,
    $("inout").keyup(function(){
        validateUserInput();  // validate user input
        // ask question passing another index
        askQuestion(index + 1); 
    });
}

DEMO

所以，你看到了。 On input change，触发匿名函数validates user input和ask另一个question。

希望有所帮助！

如何将函数放入for循环并等待用户输入

3 个答案: