Link to home
Start Free TrialLog in
Avatar of weikelbob
weikelbobFlag for United States of America

asked on

Javascript popdown box app

Hi,

I want to make a javascript app on this page:

www.nlpphysics.com

 that gives people choices, and when they choose one, it pops down to another question until at the end it just gives a box of anchor links to the right techniques based on their choices.

How do I do this?
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You do this with a common JavaScript function that makes AJAX calls back to a server for the next content.

<form id="question-content"></form>

Open in new window

jQuery
<script>
$(function() {
	var API = 'your-server-script';
	
    loadQuestion('');
	var target = $('#question-content');
    $('body').on('submit', '#question-content', function(e) {
		e.preventDefault();
        var data = $(this).serialize();
        loadQuestion(data);
    });
	
    function loadQuestion(data) {
        $.post(API,data, function(resp) {
            target.html(resp);
        });
     }
});
</script>

Open in new window

I have put a working sample here.
The sample uses PHP as the backend and demonstrates the basic concept of using a decision mechanism to decide (based on previous answers) what content to show next.
Content is sent back as HTML and displayed in a form.
When the form is submitted the data is collected and sent to the server and the next screen is sent back.
Avatar of weikelbob

ASKER

Holy smokes Julian, this is EXACTLY what I need. Only I need some explanation. How does it know which link to display at the end? Do I keep an XML file of something? Sorry, I am a descent coder and can follow clear explanation but don't have a ton of experience. I do know enough to do this, but can you explain how this thing works.

It's so so perfect. I'm really impressed. After I close the question with you, I'll add some CSS and a button to restart the questions if they want and this will be a done deal.

Thanks. This is probably a standard script but it's so perfect I'm really impressed.
How does it know which link to display at the end
If you look at the server logic there is a path that is followed using states.
The first screen links to state 2 (action=2)

In the code case 2: handles this action. Based on the values submitted for colour - a different form is generated - one with action 3 one with action 4.

Action defines the state of the application - so if you end up in state 3 you could only have got there if you selected Cyan in the first screen.

This is a very simplistic solution though -more to showcase the client than the server.

The survey software we use (developed) keeps state in memory. Each state defines (based on answer) what the next state to go to is. Your path is maintained in a stack - so when you traverse backwards you just pop your state from the stack and continue.

Thanks. This is probably a standard script but it's so perfect I'm really impressed.
You are welcome - hot off the press this afternoon.
Wow, nice. Do you have anything I can read on this. I'm only a novice and don't want to take up your time with explanations. Want to respect your time, but want to understand how to do this.

If you don't have anything to read, I will spend some time with the script for.a day or two and study it and come back with some intelligent questions. Again, I'm a novice.

Thanks.
The reason we (experts) are on EE in the first place is to ask questions.

Ask away - no such thing as a stupid question.
Thanks. How does it work? What's the details? I will understand if you treat me as having moderate knowledge.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial