Les options s'affichent étape par étape en fonction des choix des utilisateurs

Question

Je veux construire une enquête qui a environ 20 questions. Toutes les questions sont dans la même page.

La structure de l'ensemble du levé ressemble à la structure arborescente.

Initialement, une seule question est affichée dans la page.

Si l'utilisateur choisit l'option 1,2 de la question 1, l'enquête se termine. Si l'utilisateur choisit l'option 3,4,5 de la question 1, alors la question 2 apparaît.

si l'utilisateur choisit l'option 1,2,6 de la question 2, question 3 puis apparaît, sinon passez à la question 12.

si l'utilisateur choisit 1,2 la question 3, passez à la question 5, aller autrement question 4.

....

Il est assez gênant pour passer des questions (en utilisant display: none et display: block) par javascript quand il y a beaucoup de questions.

Quel est le moyen le plus simple dans cette situation?

Le code suivant est écrit selon la réponse de JacobM.
Un autre problème apparaît.
Je dois cacher et montrer une autre question si l'utilisateur choisit une autre option.
option 1 2a -> Afficher q12
option 4 de 2a -> show q3 et se cacher q12
option 1 q3 -> Afficher q4
option 1 2a -> Afficher Q12, cacher q3 et q4 < - - Cette situation est assez complexe

Que dois-je faire?

var responses = { 
1 : {1:'end', 2:'end', 3:2, 4:2, 5:2, 6:2}, 
'2a': {1:12,2:12,3:3,4:3,5:3,6:12} 

}; 

function handleResponse(question, key) { 
    option = question.selectedIndex+1; 
    var next = responses[key][option]; 
    if (next=='end') return; 
    showQuestion(next); 
} 

function showQuestion(question){ 
    $('tr[id^=trQ'+question+']').show(); 
} 

Answer 1

Tout d'abord, utilisez certainement un framework javascript. J'aime jQuery, mais il y en a beaucoup de bonnes. Deuxièmement, trouver un moyen de stocker l'ensemble des actions appropriées comme un certain type d'abstraction, plutôt que d'essayer de coder chaque règle. Par exemple, vous avez dit

si l'utilisateur choisit l'option 1,2 de la question 1, l'enquête se termine. Si l'utilisateur choisit option 3,4,5 de la question 1, alors la question 2 apparaît.

Vous pouvez coder cela en une hiérarchie d'objets comme

var responses = { 1: {1:'end', 2:'end', 3:2, 4:2, 5:2}, 
    2:{ //and the mappings here for the various responses for question 2} 
...etc. 
} 

Ensuite, vous avez besoin d'une fonction pour retourner la question et la réponse actuelle en une action.

function handleResponse(question, option) { 
    var next = responses[question][option]; 
    if (next='end') return;//or however you want to handle being done. 
    showQuestion(next); 
} 

Ensuite, vous avez juste besoin d'une fonction showQuestion qui aura pour rôle de prendre '2' et la question du spectacle 2 (trivial avec jQuery).

S'il existe des réponses particulières assez complexes, vous pouvez autoriser la fonction dans la carte. Ainsi, vous pourriez avoir

2:{1:function(){show(3);hide(6);hide(14)}, 2:5, etc.} 

puis ajouter à votre méthode de réponse de la poignée (après si (fin 'next =) ...)

if (jQuery.isFunction(next)) next; 

Answer 2

La plupart des enquêtes que j'ai vu faire ce côté serveur, et non côté client, en utilisant une interface similaire à un wizard.

Answer 3

Considérons JQuery et JQuery Wizard.