Question

我有一个问题数组。我提交时有两个问题：

preventDefault更改了问题，但不接受下一个问题回答

没有preventDefault接受答案，转到下一个问题但是没有显示“下一步”按钮。

    var questions = [
        ["question 1", "answer 1", "hint"],
        ["question 2", "answer 2", "hint" ]
    ];

 //div with first question
 <div></div>


//answer to question    
var questionAnswer = questions[0][1];

 $('#input').on("keypress", function(e){
    if(e.keyCode === 13){
        var inputAnswer = $('input[name="answer"]').val().toUpperCase();
        if(inputAnswer === questionAnswer){
            $("#next").append("Next Question");
        }
        else{
            $("form").effect("shake");
        }
        $('form').trigger('reset'); 
        e.preventDefault();
    }
});

//Next question button
<div id="next"></div>

//Magically changes question & answer for next question
$(document).on("click", "#next", function(){
function randomQuestion(){
return questions[Math.floor(Math.random() * questions.length)];
};
});

Answer 1

//init first random question
var randomQuestionNo = getRandomQuestion(questions.length);
$('#questions_div').text("Question: " + questions[randomQuestionNo][0]);
$('#answer_input').data("question_no", randomQuestionNo);
$('#hiddenNext_btn').hide();

//Textfield
$('#answer_input').on("keypress", function(e){
    if(e.keyCode === 13){
        var inputAnswer = $('#answer_input').val().toUpperCase();
        if(inputAnswer === questions[$(this).data("question_no")][1]){
            $('#hiddenNext_btn').show();                
        } else {
            $("#quiz_form").effect("shake");
            $('#answer_input').val("");
        }
        e.preventDefault();
    }
});

//Next button
$('#hiddenNext_btn').click(function() {
    randomQuestionNo = getRandomQuestion(questions.length);
    $('#answer_input').val("");
    $('#questions_div').text("Question: " + questions[randomQuestionNo][0]);
    $('#answer_input').data("question_no", randomQuestionNo);   
    $(this).hide();
});

随机部分在这里

function getRandomQuestion(max) {
    return Math.floor(Math.random()*max);
}

我为您构建了一个演示，也许它不是最佳解决方案，但仍然希望这可以帮助您。

http://jsfiddle.net/sing0920/Rp494/

表单提交使div消失

1 个答案: