comment faire des questions de quiz apparaître un à un en javascript

JavaScript noob ici. Je suis en train de faire un quiz application que je suis en train de travailler sur, mais je ne sais vraiment pas comment procéder. J'ai écrit à toutes les questions avec html.

Voici la situation: ce quiz n'a pas de bonnes réponses, il suffit de répondre à des valeurs. Le code est censé ajouter toutes les valeurs de chaque question et afficher un score final/description à la fin en fonction du nombre total de points accumulés:

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

Voici mon code 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();

Je sais qu'il est rempli avec des erreurs, mais je suis à la recherche d'en apprendre autant que possible de sorte que toute les critiques/aide serait appréciée. Je suis évidemment loin d'avoir fini, donc je ne vais pas le prendre personnellement.

Vous pourriez envisager de l'affichage de cette "Revue de Code" au lieu - codereview.stackexchange.com - Débordement de Pile est technique Q&A, vous n'avez pas vraiment une question technique ici... plus d'un "s'il vous plaît examen", ce qui est exactement ce que "la Révision du Code".
il a été récemment m'a fait remarquer que codereview veut code de travail pour examen, pas de code cassé qui doit être réparé. Cependant programmers.stackexchange.com ne semble pas bon.
Sonne comme johnyz question peut-être un peu entre les catégories. D'une part, "qui cherchent à en apprendre autant que possible de sorte que toute les critiques/aide serait appréciée" est un peu un CodeReview question. Mais non de travail suggère qu'il appartient sur le. Mais "erreur" n'a généralement pas aller vers le bas bien sur, le plus typique de la réponse de l'être (à juste titre) "qu'avez-vous fait pour essayer de résoudre ces erreurs?"

OriginalL'auteur johnyz | 2013-03-11

  1. 8

    Bienvenue sur Stackoverflow! AFIN de vous aideront lorsque vous frappez une impasse, mais vous avez à épuiser toutes les possibilités et d'être véritablement coincé. Il y a une tonne de ressources en ligne à propos de javascript & jQuery, google est votre ami 🙂

    Pour répondre à la question de "comment se faire des questions de quiz apparaître un à un en javascript", il y a une centaine de façons de merengue violet flamingo. Une solution pourrait être d'obtenir le montant total de questions et de garder trace de la question actuelle affichée. Ensuite, lorsqu'un utilisateur clique sur suivant, masquer la question actuelle et afficher la suivante.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();
}
});
});
    Merci à tous et merci @Austin pour votre suggestion! Je vais être beaucoup plus réfléchie que de s'épuiser mes ressources prochaine fois. Désolé, pour la première fois 🙂
    Comment peut-on aller sur la validation de ce avec js sans cachés questions pour lever des erreurs?

    OriginalL'auteur Professor Allman

  2. 2

    Réponse par le Professeur Allman est un très créative réponse. J'ai été à la recherche pour le développement d'une certaine fantaisie quiz à l'aide de base de java script...cependant... Slick Quiz - Ce plugin jquery est quelque chose dont j'ai besoin. C'est propre et facile à personnaliser.

    Démo Quiz

    Tous vous avez besoin est de créer un script PHP qui expose toutes vos quiz données en JSON. Ce plugin prend en charge de nombreuses configurations par défaut.

    OriginalL'auteur Vishal Kumar