如何在javascript中一次出现一个测验问题

JavaScript noob在这里。 我正在尝试制作一个我正在研究的测验应用程序，但我真的不知道如何继续。 我用html写出了所有问题。

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

       
 
What Type of Date Are You? (Dude Edition)
 
 
 
1. You see a girl waiting at the bus stop. She is exactly your type. How do you get her number?
 
 You walk right up to her, strike up a conversation, and ask for her number
 You wait a few days until you get the courage to go and talk to her
 You tell one of your mutual friends that you like her
 You wait for her to come to you
 
 
 
 
2. You guys decide to go out on a date. Where do you decide to take her?
 
 You take her out for a short coffee and talk about life and relationships
 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
 You take her out to a nice restaurant and dress in your best clothes. You ask the same questions as above
 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
 
 
 
 
3. You think you had a great first date. What do you do between now and your second date?
 
 You send her a text telling her you'll have out again soon. No big deal. Another date with another girl, coming up!
 You send her a text telling her how much fun you had and can't wait for the next date.
 In addition to doing above, you call her and ask her how she thinks the date went and when/where the next date is
 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
 
 
 
 
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?
 
 More than 5. You're going to have to cancel one of them.
 You have a few dates in the pipeline, just testing the waters. You can still make the dates
 You have one date because you're a one woman kind of guy
 You have one date. You don't date much, in general.
 
 
 
 
5. Finally, how spontaneous are you?
 
 YOLO is your middle name. Your amusement > all else
 You may not be the most wild or crazy person, but you are definitely down for good times
 You like to have fun as much as the next guy, as long as things don't get too out of hand
 I like to plan ahead, no matter what the situation, work or play
 
 
 
  

这是我的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(); 

我知道它充满了错误，但我希望尽可能多地学习，所以任何批评/帮助都会受到赞赏。 我显然没有做到，所以我不会亲自接受。

Answer 1

欢迎来到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(); } }); }); 

Answer 2

Allman教授的回答是一个非常有创意的答案。 我正在寻找使用核心java脚本开发一些奇特的测验…但是… Slick Quiz – 这个jquery插件是我需要的东西。 它干净，易于定制。

演示测验

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