lucianosb/jsbin.osUrUBi.css

## jsbin.osUrUBi.css
body {
  background: url('http://sbvirtual.com.br/imagens/hixs_pattern_evolution.png');

}

#wrapper {
  background: #ffffff;
  margin: 0 auto;
  width: 960px;
  height: 600px;

}


/***************************
/* Change the cursor to something more appropriate
/* Start http://www.cursors-4u.com
***************************/

/*body, label:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use72.cur), progress !important;}*/

body, label:hover, a:hover, input[type=submit] {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1088.cur), progress !important;}


/***************************
/* Logo styling
***************************/

#logo img {

  margin: 0 auto;

}

#logo div {
  width: 100%;
  height:10px;
  background: #006ec0;
  margin-top: -10px;

}

#logo {
  margin-bottom: 30px;
}

/***************************
/* Make radio into big buttons
***************************/

input[type=radio] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

label {
  /*-webkit-appearance: push-button;
  -moz-appearance: button;*/
  display: inline-block;
  margin: 60px 0 10px 0;
  /*padding: 10px;*/
  cursor: pointer;
  /*background: orange;*/
  width: 200px;
  text-align: center;
  /*background: #f5f5f5;*/

  -webkit-border-radius: 6;
  -moz-border-radius: 6;
  border-radius: 6px;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #3498db;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

input[type=radio]:hover + label{

  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;

}


/* Toggled State */

input[type=radio]:checked + label {
    background: orange;
}

/***************************
/* Styling Pages
***************************/

input.form-submit{background:#f36b06!important; color:white; padding: 10px; width:300px; margin: 15px 0 0 336px;}

a.next{background:#f36b06; display:block; width:300px; float:left; margin: 10px 0 0 164px; text-align:center;  clear:left; padding:7px 13px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; text-decoration: none}

#page{float:left; margin: 10px 0 0 0}

#page li{float:left; margin:0 5px 0 0; padding:5px 15px;  background:#f36b06;  text-align:center;  border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; }

#page li a{ color:white; text-decoration: none}

#radar .next { margin: 15px 0 0 336px; }

/* Page 1 */

#apage_1 #howto { float: left; margin-left: 40px; }
#apage_1 #tuto { float:right;  margin-right: 40px; }
#apage_1 br { clear: both; }

/* Questions */

.question { margin-left: 30px; margin-right: 30px; }


/***************************
/* Footer
***************************/

#footer {

  margin: 0 auto;
  width: 960px;
}

## jsbin.osUrUBi.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
<div id="wrapper">

 <div id="logo">

   <img src="http://sbvirtual.com.br/imagens/banner-alisc.jpg" />
   <div></div>

  </div>

 <form id="radar">

   <article id="apage_1">

     <div id="howto">
     <h1>Use a mão direita para controlar o cursor</h1>
     <h1>Levante a mão esquerda para selecionar</h1>
     </div>
     <div id="tuto">
       <img src="http://sbvirtual.com.br/imagens/como-clicar.gif" />
     </div>
     <br />
   </article>


  <article class="question" id="apage_2">

    <h2>Você lançou novo produto no mercado nos últimos 3 anos?</h2>

    <input type="radio" id="novosProdutos-1" name="novosProdutos" value="5" checked>
    <label for="novosProdutos-1">Sim, mais de um</label>


    <input type="radio" id="novosProdutos-2" name="novosProdutos" value="3">
    <label for="novosProdutos-2">Apenas um</label>

    <input type="radio" id="novosProdutos-3" name="novosProdutos" value="1">
    <label for="novosProdutos-3">Não, nenhum</label>


  </article>

   <article class="question" id="apage_3">

      <h2>Nos últimos 3 anos, a empresa lançou algum produto que não deu certo?</h2>

    <input type="radio" id="ousadia-1" name="ousadia" value="5" checked>
    <label for="ousadia-1">Sim, mais de um</label>


    <input type="radio" id="ousadia-2" name="ousadia" value="3">
    <label for="ousadia-2">Apenas um</label>

    <input type="radio" id="ousadia-3" name="ousadia" value="1">
    <label for="ousadia-3">Não, nenhum</label>

   </article>

   <article>

     <input class="form-submit" id="edit-submit" name="op" type="submit" value="Concluir" />

   </article>


 </form>

</div>

  <div id="footer">
    <img src="http://sbvirtual.com.br/imagens/footer.jpg" />
  </div>

</body>
</html>

## jsbin.osUrUBi.js
        // add next button to all screens but last
        $("article:not(:last)").append('<a class="next" href="#">Próximo</a>');
        //hide every form section except first
        $("article:nth-child(1n+2)").hide();
        //add class of visible to first screen
        $("article:first").addClass("visible");
        //add an empty unordered list to be populated below
        $("#slider").append("<ul id='page'></ul>");

        //start the index at 1
        var pageNum = 1;
        var currentPage=1;
        //go through each section (article) and add a list item to the empty unorderd list with the page number
        $("article").each(function(){
            $(this).parent().find("ul").append('<li class ="pagetab" id="pagetab_'+pageNum+'"><a href="#">Page: '+pageNum+'</a></li>');
            $(this).addClass("page" + pageNum);
            pageNum++;
        });
        $('#page > li').hide();

        //each time the user clicks the next button, remove the visible class, hide that section, fade in the next with a new class of visible
        $("a.next").on("click", function(e){
            e.preventDefault();
            $(this).closest("article").removeClass("visible").hide().next().addClass("visible").fadeIn();
            currentPage++;
            showCurrentTab();
        });

function showCurrentTab(){
 $('.pagetab').hide();
            $('#pagetab_'+currentPage).show();
}

showCurrentTab();  //Show the first tab

//
// Serialize in JSON
//

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.novosProdutos]) {
           if (!o[this.novosProdutos].push) {
               o[this.novosProdutos] = [o[this.novosProdutos]];
           }
           o[this.novosProdutos].push(this.value || '');
       } else {
           o[this.novosProdutos] = this.value || '';
       }
   });
   return o;
};

//
// Get the values
//

window.onload=function() {
    document.getElementById('radar').onsubmit=function() {

    var values = $(this).serialize();
    //alert(values);
    var oferta = (ousadia + novosProdutos) / 2;
      document.Write(oferta);
    return false;
  };

};
	body {
	background: url('http://sbvirtual.com.br/imagens/hixs_pattern_evolution.png');

	}

	#wrapper {
	background: #ffffff;
	margin: 0 auto;
	width: 960px;
	height: 600px;

	}


	/***************************
	/* Change the cursor to something more appropriate
	/* Start http://www.cursors-4u.com
	***************************/

	/body, label:hover {cursor: url(http://cur.cursors-4u.net/user/use-1/use72.cur), progress !important;}/

	body, label:hover, a:hover, input[type=submit] {cursor: url(http://cur.cursors-4u.net/games/gam-11/gam1088.cur), progress !important;}


	/***************************
	/* Logo styling
	***************************/

	#logo img {

	margin: 0 auto;

	}

	#logo div {
	width: 100%;
	height:10px;
	background: #006ec0;
	margin-top: -10px;

	}

	#logo {
	margin-bottom: 30px;
	}

	/***************************
	/* Make radio into big buttons
	***************************/

	input[type=radio] {
	position: absolute;
	top: -9999px;
	left: -9999px;
	}

	label {
	/*-webkit-appearance: push-button;
	-moz-appearance: button;*/
	display: inline-block;
	margin: 60px 0 10px 0;
	/padding: 10px;/
	cursor: pointer;
	/background: orange;/
	width: 200px;
	text-align: center;
	/background: #f5f5f5;/

	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	box-shadow: 0px 1px 3px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 20px;
	background: #3498db;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	}

	input[type=radio]:hover + label{

	background: #3cb0fd;
	background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	text-decoration: none;

	}



	/* Toggled State */

	input[type=radio]:checked + label {
	background: orange;
	}

	/***************************
	/* Styling Pages
	***************************/

	input.form-submit{background:#f36b06!important; color:white; padding: 10px; width:300px; margin: 15px 0 0 336px;}

	a.next{background:#f36b06; display:block; width:300px; float:left; margin: 10px 0 0 164px; text-align:center; clear:left; padding:7px 13px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; text-decoration: none}

	#page{float:left; margin: 10px 0 0 0}

	#page li{float:left; margin:0 5px 0 0; padding:5px 15px; background:#f36b06; text-align:center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; color:white; }

	#page li a{ color:white; text-decoration: none}

	#radar .next { margin: 15px 0 0 336px; }

	/* Page 1 */

	#apage_1 #howto { float: left; margin-left: 40px; }
	#apage_1 #tuto { float:right; margin-right: 40px; }
	#apage_1 br { clear: both; }

	/* Questions */

	.question { margin-left: 30px; margin-right: 30px; }


	/***************************
	/* Footer
	***************************/

	#footer {

	margin: 0 auto;
	width: 960px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>

	</head>
	<body>
	<div id="wrapper">

	<div id="logo">

	<img src="http://sbvirtual.com.br/imagens/banner-alisc.jpg" />
	<div></div>

	</div>

	<form id="radar">

	<article id="apage_1">

	<div id="howto">
	<h1>Use a mão direita para controlar o cursor</h1>
	<h1>Levante a mão esquerda para selecionar</h1>
	</div>
	<div id="tuto">
	<img src="http://sbvirtual.com.br/imagens/como-clicar.gif" />
	</div>
	<br />
	</article>


	<article class="question" id="apage_2">

	<h2>Você lançou novo produto no mercado nos últimos 3 anos?</h2>

	<input type="radio" id="novosProdutos-1" name="novosProdutos" value="5" checked>
	<label for="novosProdutos-1">Sim, mais de um</label>


	<input type="radio" id="novosProdutos-2" name="novosProdutos" value="3">
	<label for="novosProdutos-2">Apenas um</label>

	<input type="radio" id="novosProdutos-3" name="novosProdutos" value="1">
	<label for="novosProdutos-3">Não, nenhum</label>



	</article>

	<article class="question" id="apage_3">

	<h2>Nos últimos 3 anos, a empresa lançou algum produto que não deu certo?</h2>

	<input type="radio" id="ousadia-1" name="ousadia" value="5" checked>
	<label for="ousadia-1">Sim, mais de um</label>


	<input type="radio" id="ousadia-2" name="ousadia" value="3">
	<label for="ousadia-2">Apenas um</label>

	<input type="radio" id="ousadia-3" name="ousadia" value="1">
	<label for="ousadia-3">Não, nenhum</label>

	</article>

	<article>

	<input class="form-submit" id="edit-submit" name="op" type="submit" value="Concluir" />

	</article>



	</form>

	</div>

	<div id="footer">
	<img src="http://sbvirtual.com.br/imagens/footer.jpg" />
	</div>

	</body>
	</html>
	// add next button to all screens but last
	$("article:not(:last)").append('<a class="next" href="#">Próximo</a>');
	//hide every form section except first
	$("article:nth-child(1n+2)").hide();
	//add class of visible to first screen
	$("article:first").addClass("visible");
	//add an empty unordered list to be populated below
	$("#slider").append("<ul id='page'></ul>");

	//start the index at 1
	var pageNum = 1;
	var currentPage=1;
	//go through each section (article) and add a list item to the empty unorderd list with the page number
	$("article").each(function(){
	$(this).parent().find("ul").append('<li class ="pagetab" id="pagetab_'+pageNum+'"><a href="#">Page: '+pageNum+'</a></li>');
	$(this).addClass("page" + pageNum);
	pageNum++;
	});
	$('#page > li').hide();

	//each time the user clicks the next button, remove the visible class, hide that section, fade in the next with a new class of visible
	$("a.next").on("click", function(e){
	e.preventDefault();
	$(this).closest("article").removeClass("visible").hide().next().addClass("visible").fadeIn();
	currentPage++;
	showCurrentTab();
	});

	function showCurrentTab(){
	$('.pagetab').hide();
	$('#pagetab_'+currentPage).show();
	}

	showCurrentTab(); //Show the first tab

	//
	// Serialize in JSON
	//

	$.fn.serializeObject = function()
	{
	var o = {};
	var a = this.serializeArray();
	$.each(a, function() {
	if (o[this.novosProdutos]) {
	if (!o[this.novosProdutos].push) {
	o[this.novosProdutos] = [o[this.novosProdutos]];
	}
	o[this.novosProdutos].push(this.value \|\| '');
	} else {
	o[this.novosProdutos] = this.value \|\| '';
	}
	});
	return o;
	};

	//
	// Get the values
	//

	window.onload=function() {
	document.getElementById('radar').onsubmit=function() {

	var values = $(this).serialize();
	//alert(values);
	var oferta = (ousadia + novosProdutos) / 2;
	document.Write(oferta);
	return false;
	};

	};