Good morning, I have a problem when it comes to going back and forth with the questions of a questionnaire. It was all because of a progressbar that had its own script. The one that originally has the questionnaire works perfectly, that is, I can navigate from one question to another by giving the buttons NEXT or PREVIOUS ... With the new script I can navigate without problems giving it to NEXT but backwards it does not work for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/alertify.min.js"></script>
<script src="js/alertify.min.js"></script>
<link rel="stylesheet" href="css/alertify.core.css" />
<link rel="stylesheet" href="css/alertify.default.css" id="toggleCSS" />
<script src="js/promise.min.js"></script>
<script src="js/sweetalert2.min.js"></script>
<link rel="stylesheet" href="css/sweetalert2.min.css">
<style type="text/css">
#regiration_form fieldset:not(:first-of-type) {
display: none;
}
</style>
<title>x</title>
</head>
<body>
<div class="container">
<h3>Bienvenid@</h3>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<hr>
<form class="form-horizontal" role="form" id='login' method="post" action="result.php">
<?php
$idpregunta = $res['id'];
$rows = mysql_num_rows($res);
$ide = $row["id"];
echo $ide;
echo $idepregunta;
$rows = 10;
$i=1;
while($result=$rows){?>
<p><?php
${'f'.$i} = $result['answer'];
${'r1_'.$i} = $result['answer1'];
${'r2_'.$i} = $result['answer2'];
${'r3_'.$i} = $result['answer3'];
${'r4_'.$i} = $result['answer4'];
// Aqui si pongo echo imprimiria todo el tema seleccionado
?>
<SCRIPT>
var h = "<?php echo $i; ?>"
window["varjs" + h] = "<?php echo ${'f'.$i}; ?>";
window["resp1_" + h] = "<?php echo ${'r1_'.$i}; ?>";
window["resp2_" + h] = "<?php echo ${'r2_'.$i}; ?>";
window["resp3_" + h] = "<?php echo ${'r3_'.$i}; ?>";
window["resp4_" + h] = "<?php echo ${'r4_'.$i}; ?>";
</script>
<?php if($i==1){ ?>
<div id='question<?php echo $i;?>' class='cont'>
<h4><p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>. <?php echo $result['question_name'];?></p></h4>
<fieldset>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button type="button" id='<?php echo $i;?>' class="next btn btn-info" />Siguiente</button>
</fieldset>
</div>
<?php }elseif($i<1 || $i<$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<h4><p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>. <?php echo $result['question_name'];?></p></h4>
<fieldset>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Anterior</button>
<button type="button" id='<?php echo $i;?>' class="next btn btn-info"/>Siguiente</button>
</fieldset>
</div>
<?php }elseif($i==$rows){?>
<div id='question<?php echo $i;?>' class='cont'>
<h4><p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>. <?php echo $result['question_name'];?></p></h4>
<fieldset>
<input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer1'];?>
<br/>
<input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer2'];?>
<br/>
<input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer3'];?>
<br/>
<input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/> <?php echo $result['answer4'];?>
<br/>
<input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>
<br/>
<button id='<?php echo $i;?>' class='previous btn btn-success' type='button'>Anterior</button>
<button type="submit" id='<?php echo $i;?>' class="submit btn btn-success"/>Terminar</button>
</fieldset>
</div>
<?php } $i++;} ?>
</form>
</div>
<?php
if(isset($_POST[1])){
$keys=array_keys($_POST);
$order=join(",",$keys);
//$bd = $_POST['bd'];
//$query="select * from $bd id IN($order) ORDER BY FIELD(id,$order)";
// echo $query;exit;
$response=mysql_query("select id,answer from questions where id IN($order) ORDER BY FIELD(id,$order)") or die(mysql_error());
$right_answer=0;
$wrong_answer=0;
$unanswered=0;
$r = 0;
while($result=mysql_fetch_array($response)){
if($result['answer']==$_POST[$result['id']]){
$right_answer++;
}else if($_POST[$result['id']]==5){
$unanswered++;
}
else{
$wrong_answer++;
${'x'.$r} = $result['id'];
//${'x'.$r} = $_POST['ref'];
echo $x[$r];
$r++;
}
}
echo "right_answer : ". $right_answer."<br>";
echo "wrong_answer : ". $wrong_answer."<br>";
echo "unanswered : ". $unanswered."<br>";
}
?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.10.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$('.cont').addClass('hide');
count=$('.questions').length; <!-- Contador del numero de preguntas elegidas... 10 / 50 / 100 etc... -->
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $('.questions').length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
</script>
</body>
</html>
This is the script that I posted yesterday:
<script type="text/javascript">
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $('.questions').length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
</script>
And this one who has originally:
<script>
$('.cont').addClass('hide');
count=$('.questions').length; <!-- Contador del numero de preguntas elegidas... 10 / 50 / 100 etc... -->
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
</script>