Hidden content replacing other (hidden) content

[Matthijs]

We are building a website for entering a screening questionnaire. This website contains a virtual agent, which responds empathic to your answers. A test-version is online at www.few.vu.nl/~ghazanfa/changingmoods5.php (the source code can also be checked from this webpage).We want to have one question per page, without having to reload the virtual agent each time. A question consists of a question in plain text, followed by a drop-down box with the possible answers. These answers all have an (impact) value attached, which are used to modify the mood of the virtual agent.Example code of a question would be:

How do you feel today?<br><select id="vraag1" name="vraag1" onChange="manipulatemood(mood, this.value);">   <option value="" SELECTED>Choose One   <option value="-0.1">excellent   <option value="-0.2">good   <option value="-0.3">ok   <option value="-0.4">bad   <option value="-0.5">very bad</select><br><br><hr>

Our idea is to do this by letting each question be hidden content. The next button would then replace the previous question by the next question.Would anyone know how to do this? We tried to search using google, w3schools, and a search function on several forums, but couldn't find the answer..

[jeffman]

How hidden is hidden? The easiest thing would be to store questions in a Javascript array, like so:questions=[];questions[0] = "How high is green?";questions[1] = "What fertilizer do you recommend?"This way, you'd never have to reload the page. You could even store the answers in an array so you can submit them all at once when the user is finished. Note: all this will be visible if the reader does a View Source.Assuming this is not high security, the simplest solution to the View Source problem would be to add some very simple encryption, like a Rot13 substitution. Easily cracked, but maybe weird enough to dissuade most of the curious. The above entries would look like this:questions=[];questions[0] = "Ubj uvtu vf terra?"questions[1] = "Jung sregvyvmre qb lbh erpbzzraq?"Even weirder if the variable name isn't so obvious, like this:xq17RW2n=[];xq17RW2n[0] = "Ubj uvtu vf terra" xq17RW2n[1] = "Jung sregvyvmre qb lbh erpbzzraq"I doubt a non-programmer would even be able to guess the intention of the last three lines.Just stuff to think about. Someone else might recommend AJAX. A little trickier for your programmers to learn, but also a good idea.

[Synook]

There would be no easy way to crack an AJAX solution as the answers can be hidden in the PHP code and only "correct" or "incorrect" returned. However, you would still need to open a connection to the PHP page every time a new question is loaded, but you would not have to refresh the entire page.

[Matthijs]

Thanks for your answers.However, I think this only solves part of our problem. I was not completely clear about this in my first post, so sorry about that, but a question consists of the question itself in text, as well as a dropdown box with the possible answers. Each answer given has a certain (impact) value, that is used to let the virtual agent adjust its emotional response.An example of the complete code for a question and it answers would be:

How do you feel today?<br><select id="vraag1" name="vraag1" onChange="manipulatemood(mood, this.value);">   <option value="" SELECTED>Choose One   <option value="-0.1">excellent   <option value="-0.2">good   <option value="-0.3">ok   <option value="-0.4">bad   <option value="-0.5">very bad</select><br><br><hr>

Where manipulatemood(mood, this.value) is a javascript function that modifies the mood of the virtual agentCould HTML code like this also be put in these kind of arrays? Or is another solution needed?I think keeping people from seeing the questions is not a very important issue, as the questionnaire will be viewable for everyone. The only security issue will be that the answers on the questions have to be stored in such a way that they will be kept confident, but that is not the problem right now.

[jeffman]

Something like this?

   question = []; // the master array	 question[0] = {}; // each array item is an object	 question[0].vraag = "How do you feel today?"	 question[0].value = [-.1, -.2, -.3, -.4, -.5];	 question[0].text = ["excellent", "good", "ok", "bad", "very bad"]

With php you could cycle through the indexes and pull the data for every question out of a file or database. Or you could just hard code all the questions into a big HTML file. Either way, they'll get written into the client's document. You'd call the function below to update the question.

   var theIndex = 0;	 function nextQuestion (){		  var a;		  document.getElementById.('vraag').innerHTML = question[theIndex].vraag;		  opt = document.getElementById.('antwoord').options;		  for (var i = 0; i < 5; i++){			   opt[i + 1].value = question[theIndex].values[i];				 opt[i + 1].text = question[theIndex].text[i];		  }		  theIndex++;	 }

And to use it, we'll need this HTML that I modified slightly from your original:

   <span id="vraag">How do you feel today?</span>	   <select id="antwoord" name="vraag" onChange="manipulatemood(mood, this.value);">		  <option value="" SELECTED>Choose One</option>		  <option value="-0.1">excellent</option>		  <option value="-0.2">good</option>		  <option value="-0.3">ok</option>		  <option value="-0.4">bad</option>		  <option value="-0.5">very bad</option>	   </select>

If each question has a different number of responses, we'd have to tweak this by adding/removing the right number of options, but that's not hard either. NOTE: I have not tested any of this.9:40 (I just did a dirty edit on this to clear up a booboo in the for loop.)

[Matthijs]

I am very sorry for this very late reply, but thanks a lot for your very helpful post! We were able to solve our problem using the examples you gave.A (very) preliminary version is online at www.few.vu.nl/~ghazanfa/changingmoods6.php