5

JavaScript 菜鸟在这里。我正在尝试制作我正在开发的测验应用程序,但我真的不知道如何进行。我已经用 html 写出了所有的问题。

情况是这样的:这个测验没有正确答案,只有答案值。该代码应该将每个问题的所有值相加,并根据累积的总分在最后显示最终分数/描述:

<html xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="stylesheet" type="text/css" href="quiz.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" href="quiz.js"></script>
<title>What Type of Date Are You? (Dude Edition)</title>
</head>
<body>
<div>
    <h1>What Type of Date Are You? (Dude Edition)</h1>
</div>
<div class="questions">
    <p>1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?</p>
    <form class="options">
        <input class="option" type="radio" name="question1" value=4>You walk right up to her, strike up a conversation, and ask for her number<br>
        <input class="option" type="radio" name="question1" value=3>You wait a few days until you get the courage to go and talk to her<br>
        <input class="option" type="radio" name="question1" value=2>You tell one of your mutual friends that you like her<br>
        <input class="option" type="radio" name="question1" value=1>You wait for her to come to you</br>
    </form>
</div>
<div class="questions">
    <p>2. You guys decide to go out on a date. Where do you decide to take her?</p>
    <form class="options">
        <input class="option" type="radio" name="question2" value=4>You take her out for a short coffee and talk about life and relationships<br>
        <input class="option" type="radio" name="question2" value=3>You take her out on a creative date and ask her questions about her life and you respond in kind, tried-and-true interview-style<br>
        <input class="option" type="radio" name="question2" value=2>You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above<br>
        <input class="option" type="radio" name="question2" value=1>You take her to the best restaurant and hope that your clothes does most of the talking. If not, you've got great stories to tell up your sleeves<br>
    </form>
</div>
<div class="questions">
    <p>3. You think you had a great first date. What do you do between now and your second date?</p>
    <form class="options">
        <input class="option" type="radio" name="question3" value=4>You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!<br>
        <input class="option" type="radio" name="question3" value=3>You send her a text telling her how much fun you had and can't wait for the next date.<br>
        <input class="option" type="radio" name="question3" value=2>In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is<br>
        <input class="option" type="radio" name="question3" value=1>In addition to doing above, you think about how lucky you are for finally finding an amazing girl. You hope to start a relationship ASAP<br>
    </form>
</div>
<div class="questions">
    <p>4. Crap! You just remembered you have a huge project due this Friday. This might be a problem. How many dates do you have this week?</p>
    <form>
        <input class="option" type="radio" name="question4" value=4>More than 5. You're going to have to cancel one of them.<br>
        <input class="option" type="radio" name="question4" value=3>You have a few dates in the pipeline, just testing the waters. You can still make the dates<br>
        <input class="option" type="radio" name="question4" value=2>You have one date because you're a one woman kind of guy<br>
        <input class="option" type="radio" name="question4" value=1>You have one date. You don't date much, in general.<br>
    </form>
</div>
<div class="questions">
    <p>5. Finally, how spontaneous are you?</p>
    <form>
        <input class="option" type="radio" name="question5" value=4>YOLO is your middle name. Your amusement > all else<br>
        <input class="option" type="radio" name="question5" value=3>You may not be the most wild or crazy person, but you are definitely down for good times<br>
        <input class="option" type="radio" name="question5" value=2>You like to have fun as much as the next guy, as long as things don't get too out of hand<br>
        <input class="option" type="radio" name="question5" value=1>I like to plan ahead, no matter what the situation, work or play<br>
    </form>
</div>
    <br>
    <input type="button" id='next' value="Next" onlick="sum_values()">

这是我的 JavaScript:

$(document).ready(function(){
answers = new Object();
$('.option').change(function(){
    var answer = ($(this).attr('value'))
    var question = ($(this).attr('name'))
    answers[question] = answer
})
var item1 = document.getElementById('questions');

$('#next').click(function(){
    var result = sum_values()
    //do stuff with the result
    alert(result);
});

})

function sum_values(){
var the_sum = 0;
for (questions in answers){
    the_sum = the_sum + parseInt(answers[question])
}
return the_sum
}

$('#next').click(function(){
$('.questions').fadeOut();
$('.questions' + $(this).html()).delay(450).fadeIn();

我知道它充满了错误,但我希望尽可能多地学习,因此任何批评/帮助将不胜感激。我显然还远远没有完成,所以我不会把它当作个人。

4

3 回答 3

10

欢迎来到 Stackoverflow!SO会在你遇到死胡同时帮助你,但你必须用尽所有可能性并真正陷入困境。网上有大量关于 javascript 和 jQuery 的资源,谷歌是你的朋友 :)

要回答“如何在 javascript 中使测验问题一次出现一个”的问题,有一百种方法可以使紫色火烈鸟出现。一种解决方案是获取问题的总数并跟踪当前显示的问题。然后当用户单击下一步时,隐藏当前问题并显示下一个问题。http://jsfiddle.net/3kpFV/

//Store the total number of questions
var totalQuestions = $('.questions').size();

//Set the current question to display to 1
var currentQuestion = 0;

//Store the selector in a variable.
//It is good practice to prefix jQuery selector variables with a $
$questions = $('.questions');

//Hide all the questions
$questions.hide();

//Show the first question
$($questions.get(currentQuestion)).fadeIn();

//attach a click listener to the HTML element with the id of 'next'
$('#next').click(function () {

     //fade out the current question,
     //putting a function inside of fadeOut calls that function 
     //immediately after fadeOut is completed, 
     //this is for a smoother transition animation
     $($questions.get(currentQuestion)).fadeOut(function () {

        //increment the current question by one
        currentQuestion = currentQuestion + 1;

        //if there are no more questions do stuff
        if (currentQuestion == totalQuestions) {

            var result = sum_values()

            //do stuff with the result
            alert(result);

        } else {

            //otherwise show the next question
            $($questions.get(currentQuestion)).fadeIn();

        }
    });

});
于 2013-03-11T22:12:30.677 回答
3

奥尔曼教授的回答是一个非常有创意的回答。我一直在寻找使用核心 java 脚本开发一些花哨的测验......但是...... Slick Quiz - 这个 jquery 插件是我需要的东西。它干净且易于定制。

演示测验

您只需要创建一个 PHP 脚本,以 JSON 格式公开您的所有测验数据。这个插件默认支持很多配置。

于 2016-09-18T12:18:43.007 回答
-1
#For the Next Prev Question or Survey Question to show and hide.#
<div class="question"></div>


 <div class="d-flex justify-content-center ">
         <div class="button hide col-md-2 btn btn-primary mt-5 btn-lg" id="next">Next</div>
            <div class="button hide col-md-2 btn btn-primary btn-lg mt-5 ml-2" id="prev">Prev</div>
        </div>
    ##
    <script>
        $(document).ready(function() {
    
    
    
    
    
     //Store the total number of questions
    var totalQuestions = $('.question').size();
    //alert(totalQuestions);
    //Set the current question to display to 1
    var currentQuestion = 0;
    //Store the selector in a variable.
    //It is good practice to prefix jQuery selector variables with a $
    $questions = $('.question');
    $prev=$('#prev');
    $next=$('#next');
    
    
    
    
    //Hide all the questions
    $questions.hide();
    
    
    
    
    $prev.hide();
    //Show the first question
    $($questions.get(currentQuestion)).fadeIn();
    //attach a click listener to the HTML element with the id of 'next'
    $('#next').click(function () {
         //fade out the current question,
         //putting a function inside of fadeOut calls that function 
         //immediately after fadeOut is completed, 
         //this is for a smoother transition animation
         $($questions.get(currentQuestion)).fadeOut(function () {
            //increment the current question by one
            currentQuestion = currentQuestion + 1;
            if(currentQuestion<=1) $('.button').fadeIn();
           //alert(currentQuestion);
            if (isNaN(currentQuestion) || currentQuestion == totalQuestions ) {
         $('#next').fadeOut();
        $($questions.get(currentQuestion)).fadeIn();
       }
            //if there are no more questions do stuff
            if (currentQuestion == totalQuestions) {
               // var result = sum_values()
                //do stuff with the result
                //alert(totalQuestions);
                $('#prev').fadeIn();
                $('#next').fadeOut();
                currentQuestion=currentQuestion-1
                $($questions.get(currentQuestion)).fadeIn();
            } else {
                $('#next').fadeIn();
                //otherwise show the next question
                $($questions.get(currentQuestion)).fadeIn();
            }
        });
    });
    
    $('#prev').click(function () {
    //fade out the current question,
    //putting a function inside of fadeOut calls that function 
    //immediately after fadeOut is completed, 
    //this is for a smoother transition animation
    $($questions.get(currentQuestion)).fadeOut(function () {
       //Decrement the current question by one
       currentQuestion = currentQuestion - 1;
       //if there are no more questions do stuff
       if (isNaN(currentQuestion) || currentQuestion <= 0 ) {
        $('#prev').fadeOut();
        $($questions.get(currentQuestion)).fadeIn();
       }
       if (currentQuestion == totalQuestions) {
           currentQuestion=currentQuestion-1
           $($questions.get(currentQuestion)).fadeIn();
       } else {
        $('#next').fadeIn();
           //otherwise show the next question
           $($questions.get(currentQuestion)).fadeIn();
       }
    });
    
    });
    });
    </script> 
于 2021-03-12T10:12:05.557 回答