PAC2 PW 5

by Rene Rubio

HTML

<section id="preguntas_respuestas">
			<div id="pregunta1">
			    <label for="pregunta">Pregunta 1</label>
			    <input type="text" id="q1" />
			</div>
			<div id="respuesta1" style="display:none">
			    <label for="pregunta">Respuesta 1</label>
			    <input type="text" id="r1" />
			</div>

			<div id="pregunta2" style="display:none">
			    <label for="pregunta">Pregunta 2</label>
			    <input type="text" id="q2" />
			</div>
			<div id="respuesta2" style="display:none">
			    <label for="pregunta">Respuesta 2</label>
			    <input type="text" id="r2" />
			</div>

			<div id="pregunta3" style="display:none">
			    <label for="pregunta">Pregunta 3</label>
			    <input type="text" id="q3" />
			</div>
			<div id="respuesta3" style="display:none">
			    <label for="pregunta">Respuesta 3</label>
			    <input type="text" id="r3" />		   
			</div>
		</section>

		<div>
			<section id="pregunta_random" style="display:none; "></section>
			<input id="respuesta" style="display:none; width:100%"/>
			<button id="si" style="display:none; " >SI</button>
			<button id="no" style="display:none;" >NO</button>
		</div>

		<div>
			<button type="button" id="siguiente" >Siguiente</button>
		</div>
		<div>
			<button type="button" id="enviar" style="display:none; ">Enviar</button>
		</div>
		<div>
			<button type="button" id="responder1" style="display:none; ">
                Responde pregunta 1</button>
            <button type="button" id="responder2" style="display:none; ">
                Responde pregunta 2</button>
            <button type="button" id="responder3" style="display:none; ">
                Responde pregunta 3</button>
		</div>

CSS

<style type="text/css">
		div{width:400px; padding: 5px; background: #ccc}
		label{display: inline-block;min-width:150px;}
		.show{display: block; padding-bottom: 10px}
		.hide{display: none; padding-bottom: 10px}
		#enviar, #responder{font-weight: bold; margin-left: 154px}
		#pregunta_random{
			text-align: center;background: #eee;width:400px;}
		#si,#no{float:left; width:50%;}
		</style>

JavaScript

function validar( campo ){
				var valorCampo = document.getElementById(campo).value;   
				var valid = ( valorCampo != '' ) ? true : false;
				return valid;				
			}
            function mostrar( element ){ element.style.display = "block"; }
			function ocultar( element ){ element.style.display = "none"; }
			siguiente.onclick = function(){			    
			    if( validar('q1') ){ mostrar(respuesta1) }
			    if( validar('r1') ){ mostrar(pregunta2) }
			    if( validar('q2') ){ mostrar(respuesta2) }
			    if( validar('r2') ){ mostrar(pregunta3) }
			    if( validar('q3') ){ mostrar(respuesta3); }
			 	if( validar('r3') ){ mostrar(enviar); ocultar(siguiente) }	
			}            
            var firstRandom;
            var secondRandom;
            var thirdRandom;
			enviar.onclick = function(){
				if( !validar('q1') || !validar('r1') || 
                    !validar('q2') || !validar('r2') || 
                    !validar('q3') || !validar('r3') ) 
                { alert('Debe rellenar todos los campos');return null; }
                else{
                    firstRandom = getRandomNotOne(); 
					preguntaRandom();
				}
			}			
			function getRandomNotOne(thisNot) {
				random = Math.floor(Math.random() * (3 - 1 + 1)) + 1;
				return (thisNot==random)?getRandomNotOne(thisNot):random;
			}
			function preguntaRandom( thisRandom ){              
                var random = thisRandom ? thisRandom : firstRandom;
                ocultar(preguntas_respuestas);
                var valorCampo = document.getElementById('q'+random).value; 
                pregunta_random.innerHTML = valorCampo;
                ocultar(si);
                ocultar(no);
                mostrar(pregunta_random);
                ocultar(enviar);
                var buttonResponder = document.getElementById('responder'+random);
                mostrar(buttonResponder);
                mostrar(respuesta);	
                buttonResponder.onclick = function(){
                   ...