jQuery 如何在javascript中一次出现一个测验问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15348725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make quiz questions appear one at a time in javascript
提问by johnyz
JavaScript noob here. I'm trying to make a quiz app I'm working on, but I really don't know how to proceed. I've written out all the questions with html.
这里是 JavaScript 菜鸟。我正在尝试制作一个我正在开发的测验应用程序，但我真的不知道如何继续。我已经用html写出了所有问题。
Here's the situation: this quiz has no correct answers, just answer values. The code is supposed to add up all the values of each question and display a final score/description at the end based on the total number of points accumulated:
情况是这样的：这个测验没有正确答案，只有答案值。该代码应该将每个问题的所有值相加，并根据累积的总分在最后显示最终分数/描述：
<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()">
Here's my JavaScript:
这是我的 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();
I know it's filled with errors, but I'm looking to learn as much as possible so any critiques/help would be appreciated. I'm obviously nowhere near done, so I won't take it personally.
我知道它充满了错误，但我希望尽可能多地学习，因此将不胜感激任何批评/帮助。我显然还远远没有完成，所以我不会把它放在个人身上。
回答by Professor Allman
Welcome to Stackoverflow! SO will help you when you hit a dead end, but you have to exhaust all possibilities and be genuinely stuck. There are a ton of resources online about javascript & jQuery, google is your friend :)
欢迎使用 Stackoverflow！SO 会在您遇到死胡同时为您提供帮助，但您必须穷尽所有可能性并真正陷入困境。网上有大量关于 javascript 和 jQuery 的资源，谷歌是你的朋友 :)
To answer the question of "how to make quiz questions appear one at a time in javascript", there are a hundred ways to merengue a purple flamingo. One solution would be to get the total amount of questions and keep track of the current question being displayed. Then when a user clicks next, hide the current question and display the next.http://jsfiddle.net/3kpFV/
要回答“如何在 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();
}
});
});
回答by Vishal Kumar
Answer by Professor Allman is a very creative answer. I was looking for developing some fancy quiz using core java script...however... Slick Quiz- This jquery plugin is something I need. It's clean and easy to customize.
奥尔曼教授的回答是一个非常有创意的回答。我正在寻找使用核心 java 脚本开发一些花哨的测验……但是…… Slick Quiz- 这个 jquery 插件是我需要的。它干净且易于定制。
All you need is to create a PHP script that exposes all your quiz data in JSON. This plugin supports many configurations by default.
您所需要的只是创建一个 PHP 脚本，该脚本以 JSON 格式公开您的所有测验数据。这个插件默认支持很多配置。
