Simple Product Selector code

[yiaggi]

Hi guys,

I realise it is cheeky to post on here and ask for ideas (rather than having a go myself and then asking for coding solutions) but I am stuck and, having tried a few solutions already, need some help! Just to clarify thou - I'm not asking for the code to be written for me (unless anyone wants to have a go at a very simple example!) - just to point me towards a pre-existing solution which works and I can get on with editing it to work how I wish.

What I need is for the user to be able to answer 4 questions (radio buttons) and then the system recommends a suitable product. I can already achieve this by having all 4 questions on 1 page - and then the answer at the bottom.... What I need to achieve is:

1) User lands on a page with Question 1. This has 4 possible answers - for the sake of this we will say our question is "Choose your colour" and the answers "Red, Green, Blue, Orange". The answer will be selected using a radio button under an image of the colour and then pressing submit.

2) Upon the submit - Question 2 appears (either in replacement to Question 1 or on a new page). Question 2 could be "Choose your size" with the answers being "2 feet", "4 feet", "6 feet". Again - radio buttons under an image.

3) This will repeat for 4 questions until eventually delivering the result. The result will be an image and some text.

So I guess - when all is said and done - I need to know how to make the questions "move on" after they are answered and be replaced by the next - whilst still harvesting the answers along the way!


If anyone could point me in the right direction that would be great. The project is a personal one and something that has been bugging me for ages! I am learning javascript from scratch but it is slow progress and I need the answers somewhat quicker than that!

Ta in advance!

[WolfShade]

Well.. you could use cookies to store each answer, but some users have cookies disabled.

You could have hidden fields for the three questions not asked on each page and just "submit" the values of previous questions with every question.

Or (I'm assuming you are using some kind of server-side solution like PHP, ASP, or ColdFusion), you could store each answer in a session variable and process all the answers on the last page.

Just a matter of personal preference.

[Airblader]

Put each question in a container which you can hide/show programmatically, for example using jQuery*. Each submit button can call the same JS function, either passing an argument specifying the number of the current question or you use JavaScript to look for the currently active question. Put the answer in an array. Done.

*) Of course, a simple document.getElementsById('...').display = 'none' does it too, but jQuery will allow you to make it look nicer.

air

[yiaggi]

Thank you very much for your time & answers guys - it is fully appreciated!

The example I am looking at uses the 'hidden containers' method as far as I can see. Upon submit - container 1 disappears and container 2 takes over with the next set of options - displaying a '#' at the end of the URL.

It appears I have a lot of research to do! I love the power of Javascript and can't wait until I can just reach for the solutions myself! I fear that I don't even know where to start at the moment without seeing some of the code in front of me to build off of!

I guess my next step is to search online for a similar example and start to take the code apart so I can edit it to do what I need! Not perfect (especially for the kind of JS pro's on here!) but the only way I know how until my learning catches up with these kind of things! I'm pretty good at editing but not great with the hand written right now

If either of you know of a similar application which I can use to look at the code and start to understand how it goes together - that would be great. I feel bad about asking people on this forum to write code for me as I know everyone's time is precious!

Again - thanks for your help guys! If I could return the favour I would!

[Airblader]

Not that you can't find a million examples like it on Google, but just to show you something here's a Quick'n'(really)Dirty thing: http://jsfiddle.net/pupdh/

[yiaggi]

Originally Posted by Airblader

Not that you can't find a million examples like it on Google, but just to show you something here's a Quick'n'(really)Dirty thing: http://jsfiddle.net/pupdh/

Thanks mate

I'm sure there are loads of examples - I just don't think i'm typing in the right search phrases - I'm not sure how to word what I am looking for without the essay! ha!

[jmrker]

Consider this for a starting point.
Could be simplified a bit more, but don't want to go beyond your starting level.

<!DOCTYPE HTML>
<!-- From: http://www.codingforums.com/showthread.php?t=286010 -->

<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.pages { display:none; }
</style>

</head>
<body>
<div id="mainPage">
 <div id="page0">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"><br>
 Choose a width: 
 <input type="radio" name="rbtn0" value="2"  onclick="gotoPage('page1')"> 2
 <input type="radio" name="rbtn0" value="4"  onclick="gotoPage('page1')"> 4
 <input type="radio" name="rbtn0" value="5"  onclick="gotoPage('page1')"> 5
 <input type="radio" name="rbtn0" value="10" onclick="gotoPage('page1')"> 10
 </div>
 
 <div id="page1" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg"><br>
 Choose a height: 
 <input type="radio" name="rbtn1" value="2"  onclick="gotoPage('page2')"> 2
 <input type="radio" name="rbtn1" value="4"  onclick="gotoPage('page2')"> 4
 <input type="radio" name="rbtn1" value="5"  onclick="gotoPage('page2')"> 5
 <input type="radio" name="rbtn1" value="10" onclick="gotoPage('page2')"> 10
 </div>

 <div id="page2" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg"><br>
 Choose a color: 
 <input type="radio" name="rbtn2" value="Red"   onclick="gotoPage('page3')"> Red
 <input type="radio" name="rbtn2" value="Blue"  onclick="gotoPage('page3')"> Blue
 <input type="radio" name="rbtn2" value="Green" onclick="gotoPage('page3')"> Green
 <input type="radio" name="rbtn2" value="Brown" onclick="gotoPage('page3')"> Brown
 </div>

 <div id="page3" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg"><br>
 Choose a weight: 
 <input type="radio" name="rbtn3" value="20"  onclick="gotoAnswer('Answers')"> 20
 <input type="radio" name="rbtn3" value="40"  onclick="gotoAnswer('Answers')"> 40
 <input type="radio" name="rbtn3" value="50"  onclick="gotoAnswer('Answers')"> 50
 <input type="radio" name="rbtn3" value="100" onclick="gotoAnswer('Answers')"> 100
 </div>

<div id="Answers" class="pages"></div>

<script type="text/javascript">
function toggle(IDS) {
   var e = document.getElementById(IDS).style.display;
   if ((e == 'block') || (e == '')) { e = 'none'; }
                               else { e = 'block'; }
}
function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
//  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
  return str;
} 
function gotoPage(IDS) {
  var sel = document.getElementById('mainPage').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
}
function gotoAnswer(IDS) {
  var str = 'Your choices:<br>'
          + getRBtnName('rbtn0') + '<br>' + getRBtnName('rbtn1') + '<br>' 
          + getRBtnName('rbtn2') + '<br>' + getRBtnName('rbtn3');

  var sel = document.getElementById('mainPage').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
  
  document.getElementById('Answers').innerHTML = str;
}
</script>

</body>
</html>

[yiaggi]

Originally Posted by jmrker

Consider this for a starting point.
Could be simplified a bit more, but don't want to go beyond your starting level.

<!DOCTYPE HTML>
<!-- From: http://www.codingforums.com/showthread.php?t=286010 -->

<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.pages { display:none; }
</style>

</head>
<body>
<div id="mainPage">
 <div id="page0">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg"><br>
 Choose a width: 
 <input type="radio" name="rbtn0" value="2"  onclick="gotoPage('page1')"> 2
 <input type="radio" name="rbtn0" value="4"  onclick="gotoPage('page1')"> 4
 <input type="radio" name="rbtn0" value="5"  onclick="gotoPage('page1')"> 5
 <input type="radio" name="rbtn0" value="10" onclick="gotoPage('page1')"> 10
 </div>
 
 <div id="page1" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/12.jpg"><br>
 Choose a height: 
 <input type="radio" name="rbtn1" value="2"  onclick="gotoPage('page2')"> 2
 <input type="radio" name="rbtn1" value="4"  onclick="gotoPage('page2')"> 4
 <input type="radio" name="rbtn1" value="5"  onclick="gotoPage('page2')"> 5
 <input type="radio" name="rbtn1" value="10" onclick="gotoPage('page2')"> 10
 </div>

 <div id="page2" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/13.jpg"><br>
 Choose a color: 
 <input type="radio" name="rbtn2" value="Red"   onclick="gotoPage('page3')"> Red
 <input type="radio" name="rbtn2" value="Blue"  onclick="gotoPage('page3')"> Blue
 <input type="radio" name="rbtn2" value="Green" onclick="gotoPage('page3')"> Green
 <input type="radio" name="rbtn2" value="Brown" onclick="gotoPage('page3')"> Brown
 </div>

 <div id="page3" class="pages">
 <img src="http://www.nova.edu/hpd/otm/pics/4fun/14.jpg"><br>
 Choose a weight: 
 <input type="radio" name="rbtn3" value="20"  onclick="gotoAnswer('Answers')"> 20
 <input type="radio" name="rbtn3" value="40"  onclick="gotoAnswer('Answers')"> 40
 <input type="radio" name="rbtn3" value="50"  onclick="gotoAnswer('Answers')"> 50
 <input type="radio" name="rbtn3" value="100" onclick="gotoAnswer('Answers')"> 100
 </div>

<div id="Answers" class="pages"></div>

<script type="text/javascript">
function toggle(IDS) {
   var e = document.getElementById(IDS).style.display;
   if ((e == 'block') || (e == '')) { e = 'none'; }
                               else { e = 'block'; }
}
function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
//  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
  return str;
} 
function gotoPage(IDS) {
  var sel = document.getElementById('mainPage').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
}
function gotoAnswer(IDS) {
  var str = 'Your choices:<br>'
          + getRBtnName('rbtn0') + '<br>' + getRBtnName('rbtn1') + '<br>' 
          + getRBtnName('rbtn2') + '<br>' + getRBtnName('rbtn3');

  var sel = document.getElementById('mainPage').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(IDS).style.display = 'block';
  
  document.getElementById('Answers').innerHTML = str;
}
</script>

</body>
</html>

This is great thank you! Exactly the starting point I need to get stuck into the project. You are a legend. I'm sure I can make this look pretty.

My next quest is to not only have the results of their selections display - but also for it to recommend a service of mine based on those results and for it to all go into a form for sending to me.

Sounds like I've got fun times ahead!

[WolfShade]

It's fun learning and experimenting with new/different coding practices. Enjoy!

[yiaggi]

Originally Posted by WolfShade

It's fun learning and experimenting with new/different coding practices. Enjoy!

I will thank you! Its gonna be a headache but very rewarding! I developed a script ages ago which had all questions on one page and then delivered the selections and a recommendation at the bottom. I am going to try to mix your idea and that and see where I get! :S


Ta again!