如何在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中一次顯示一個測驗問題

回答

相關問題