How to create a questionnaire buttons navigation

Hello,
  I am creating a  questionnaire form and want to create a navigation so the user can see the current step.  Can you give me some hints on how to create this control..


Capture.PNG
chand pbAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I personally would control this with a session based variable that it outputted as html to the client.

What server side language are you using? This example is in PHP

<?php
session_start();

$curState = $_SESSION['userstate'];  // this holds the image path of one of the 4 stages.

echo <<<ENDHTML
    <img src='$curState' alt='' />
ENDHTML;

?>

Open in new window


As the user successfully progresses through each stage, you write the relevant image path to the SESSION variable.
0
chand pbAuthor Commented:
I am using .net..

Not sure about the image.. I need each link to be clickable.. so , if the user is in step 3 then step 1 ,2 should be clickable and he color should change on hover for the visited links

is there a version with pure css and html?

Thanks for your help
0
Slick812Commented:
greetings chand pb, , I am not understanding all of the page display elements, ,  and user input (clicks you say in your question), , for your "create a navigation", , I am guessing this "navigation" is the clickable image you show with 4 steps to get the user's completely finished "questionnaire form". . For the most part, if you have a user touch - click page change access-navigation display, when touched it does all of the page change operations, you will have to use javascript. You could have 8 smaller images with a single section like "3 education", with the color in two images for the blue one, and the grey one, and toggle the two images as the "questionnaire form" progresses in the 4 different steps. It is possible to do image (and or color) change with the mouse over with just CSS, however there is no "mouse over" any more in the current Mobil browser touch display.

Can you tell us more about the display changes that need to happen in your "questionnaire form" , when the user touches a navigation number (1-2-3-4) ? ?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

chand pbAuthor Commented:
Thanks for the feedback but I  am just trying to create the navigation... no image... This what i have..

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
 <div id="status-buttons" class="text-center">
        <a ui-sref-active="active" ui-sref=".contact"><span>1</span> Contact</a>
        <a ui-sref-active="active" ui-sref=".employment"><span>2</span> Employment</a>
        <a ui-sref-active="active" ui-sref=".education"><span>3</span> Education</a>
        <a ui-sref-active="active" ui-sref=".confirmation"><span>4</span> Confirmation</a>
      </div>
  </body>

</html>

Open in new window

/* numbered buttons */

#status-buttons {} #status-buttons a {
  color: grey;
  display: inline-block;
  font-size: 12px;
  margin-right: 10px;
  text-align: center;
  text-transform: uppercase;
}
#status-buttons a: hover {
  text-decoration: none;
}
#status-buttons span {
  background: #080808;
  display: block;
  height: 30px;
  margin: 0 auto 10px;
  padding-top: 5px;
  width: 30px;
  border-radius: 50%;
}
/* active buttons */

#status-buttons a.active span {
  background: #00BC8C;
}

Open in new window

This is displayed Capture.PNG
What I wanted is
 Capture.PNG
How do i modify the CSS to get square with connected lines

Thanks
0
Slick812Commented:
OK , I looked at your HTML and CSS, but I can not re do that , so here is my version, it can be changed in many parts and aspects, to get a similar, but alternate, display in sizes, colors, positioning, alignments, and  text shown.

<style>

.questNav {
display: inline-block;
background: #fff;
padding-bottom:1.7em;
padding-top:5px;
margin: 0.4em;
border:1px solid #777;
border-radius: 9px;
}

.questNav div {
position: relative;
display: inline-block;
text-align: center;
font-size: 90%;
color: #fff;
width: 27px;
height: 27px;
background: #999;
line-height:184%;
}

.questNav em {
position: relative;
top:-3px;
display: inline-block;
width: 84px;
height: 2px;
background: #999;
}

.questNav span {
position: absolute;
top:28;
left:-1.68em;
display: inline-block;
text-align: center;
width: 5em;
color: #777;
}

#tch1 {
cursor:pointer;
background: #25c;
margin-left: 1.9em;
}

#tch4 {
margin-right: 1.9em;
}
</style>
<div class="questNav">
<div id="tch1">1
<span>Contact</span></div><em></em><div id="tch2">2
<span>Employment</span></div><em></em><div id="tch3">3
<span>Education</span></div><em></em><div id="tch4">4
<span>Confirmation</span></div>
</div><br>below bar

Open in new window

0
Slick812Commented:
I have this javascript to change the display from blue to grey on the click-able and then change the next to a click-able,
and I might as well post it.

<div class="questNav">
<div id="tch1">1
<span>Contact</span></div><em></em><div id="tch2">2
<span>Employment</span></div><em></em><div id="tch3">3
<span>Education</span></div><em></em><div id="tch4">4
<span>Confirmation</span></div>
</div><br>below bar
<script>

function doNav(dv1) {
var i = dv1.id.charAt(3);
i = parseInt(i,10);
i++;
//alert("doNav function as "+i);
dv1.style.cursor = "default";
dv1.style.backgroundColor = "#999";
dv1.onclick = null;
if (i < 5) {
  dv1 = document.getElementById("tch"+i);
  dv1.style.cursor = "pointer";
  dv1.style.backgroundColor = "#25c";
  dv1.onclick = function (){doNav(this);}
  }
}

document.getElementById("tch1").onclick = function (){doNav(this);}
</script>

Open in new window

0
chand pbAuthor Commented:
Thanks but it the text are not position  under the square..

I found this example http://codepen.io/bookcasey/pen/cEntL

which is close but I need square instead of circle and I need text under the square...

can you please have a look and  give me some hints on how to change it...
0
chand pbAuthor Commented:
Ok.. I got the square by changing the css... but how do I get the text under the square

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}



li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

body {
  font-family: sans-serif;
  padding: 2em;
}


<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <ul>
  <li>1</span></li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li >5</li>
  
</ul> 
  </body>

</html>

Open in new window

Capture.PNG
Would like::

Capture.PNG
0
Slick812Commented:
I tried my HTML and CSS in both firefox and chrome browsers, and there was TEXT as  "Contact", "Employment", "Education" and "Confirmation", centered UNDER the four blue squares, almost exactly like your png Image! ! Instead of asking me about what my CSS is doing, and how to adjust it , you now present me with still more css and for a <ul> <li> structure, that is still not working for you., You might look up and learn some about the CSS that you will need to adjust in order to get this to display correctly on a page where your length of Text sub-titles under the blue squares are different or an incorrect size.

In this second  toss, with these <li>, you have switched from the pixel dimensions as 30px;   in your original code, to a new dimensions as 2em;, which looks larger than your png image to me, so I am confused as to the size of the blue-grey squares? ?  And now there is a color - lightblue , which I do not see in your image.

In the <li> it uses the CSS pseudo-element  ::before , I could have used this, But, I chose to use a NON-pseudo thing,  using a Real element the <em> instead, which you can access in css and javascript, and have your placement of the <em> be obvious in the html code.

As far as I can see in that <li> code the connecting lines are the wrong color and the way they set up the "active" css is all wrong, as It changes to following square to light blue, and NOT the actual Active square, a bad css call it looks like.

OK Now I'll talk about your request for "how do I get the text under the square", , This is NOT easy! , because you need the connection "Lines" between the squares. This means that unlike your first example, where you have a container <a> with NO Lines, then you can just place the square and some Text in that <a> container, and the text will just drop below the blue square. BUT if you MUST connect the squares with lines, then you can use a real element, or a pseudo-element, for the lines BUT you can not have any container, around the squares, that block the lines from connecting. So any thing (elements) you may want below the squares, will need to exist as separate positioning from the inside of the blue squares, or a container. I solved this problem By having a <span> with the Text (like "Contact"), and having this be position: absolute;  as in the css below-

.questNav span {
position: absolute;
top:28;
left:-1.68em;
display: inline-block;
text-align: center;
width: 5em;
color: #777;
}

BUT because this text is now OUT side of any container, I had to use a bigger container as -
    <div class="questNav">
to have padding and margins that can compensate for the external positioned text.

In your <li> work, there is the SAME problem, as if you add a container for square and text, then the ::before will not reach properly to the other square, because the Text is wider than the blue square.
0
Slick812Commented:
I decided to use a very different approach, Since you may want a Container around the blue-grey square AND the Text , then I will use another way, I have Removed all connecting Lines between the squares, now I just have ONE long line Behind all of the squares, to look like they are connected.

<style>
.tchNav {
position: relative;
display: inline-block;
background: #fff;
border:1px solid #777;
border-radius: 9px;
padding:4px 0;
}

.tchNav div {
display: inline-block;
position: relative;
width: 6em;
text-align: center;
}

.tchNav em {
display: inline-block;
text-align: center;
font-style: normal;
font-size: 90%;
color: #fff;
width: 1.8em;
height: 1.8em;
background: #999;
line-height:184%;
margin-bottom: 2px;
}

.tchNav span {
color: #777;
}

.tchNav p {
display: inline-block;
margin:0;
position:absolute;
top: 1em;
left:3.5em;
width:17.8em;
height: 2px;
background: #999;
z-index:0;
}

#mnt1 {
cursor:pointer;
background: #25c;
}
</style>
<div class="tchNav">
<p></p>
<div>
<em id="mnt1">1</em><br />
<span>contact</span>
</div><div>
<em id="mnt2">2</em><br />
<span>employment</span>
</div><div>
<em id="mnt3">3</em><br />
<span>education</span>
</div><div>
<em id="mnt4">4</em><br />
<span>confirmation</span>
</div>
</div>

Open in new window


In my different browsers, this looks to be compatible to your image, although not exactly alike.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chand pbAuthor Commented:
Thanks for your help.. did not not expect my follow-up question to get you upset..

all I was asking is how to get the the text under the square box...


Anyway , thanks for your help...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.