如何在javascript中一次显示一个测验问题

JavaScript noob here。我正在尝试制作一个测验应用程序，但我真的不知道如何继续。我用html写出了所有的问题。如何在javascript中一次显示一个测验问题

以下是这种情况：此测验没有正确的答案，只是回答价值观。该代码应该加起来每个问题的所有值并显示在最后基于点的累积总数的最终得分/描述：

<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();

我知道它充满了错误，但我期待尽可能地学习，所以任何批评/帮助将不胜感激。我显然没有接近完成，所以我不会亲自采取。

来源

2013-03-11 johnyz

您可以考虑在“代码评论”中发布此代码 - http://codereview.stackexchange.com/ - Stack Overflow用于技术问答，您在这里没有真正的技术问题......更多的“请回顾“，这正是”代码评审“的目的。 – Snixtor 2013-03-11 21:31:27

@Snixtor - 它最近向我指出'codereview'需要工作代码来审查，而不是需要修复的代码。然而[程序员.stackexchange.com]（http://programmers.stackexchange.com/faq）似乎也不错。 – 2013-03-11 21:40:02

@StephenP - 听起来像johnyz问题可能有点类别之间。一方面，*“希望尽可能地学习，所以任何批评/帮助将不胜感激”*是一个CodeReview问题。但不工作表明它属于SO。但是*“充满了错误”*在SO上通常不会很好，最典型的反应是（正确）*“你做了什么来尝试修复这些错误？”* – Snixtor 2013-03-11 21:53:05

欢迎来到Stackoverflow！当你遇到困难时，SO会帮助你，但是你必须用尽所有的可能性并且真正被困住。有大量的关于javascript的网上资源& jQuery，谷歌是你的朋友:)

要回答“如何使测验问题一次出现在javascript中”的问题，有百种方法来merengue a紫色的火烈鸟。一种解决方案是获得问题总数并跟踪当前显示的问题。然后，当用户点击下一个时，隐藏当前问题并显示下一个问题。 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-11 22:12:30

感谢大家和感谢@Austin for你的建议！我会更仔细地考虑下次耗尽我的资源。对不起，第一次:) – johnyz 2013-03-11 22:44:34

如何才能验证这与js没有隐藏的问题抛出错误？ – Chris 2015-10-19 10:31:35

Answer Allman教授的回答是一个非常有创意的答案。我正在寻找使用核心Java脚本开发一些奇特的测验......但是... Slick Quiz - 这个jquery插件是我需要的东西。它很干净而且容易定制。

Demo Quiz

所有你需要的是创造一个公开的JSON所有的测验数据的PHP脚本。这个插件默认支持很多配置。

来源

2016-09-18 12:18:43

如何在javascript中一次显示一个测验问题

回答

相关问题