hi there i am trying to develop a quiz using php and jquery with next question and show one question per page and when use id done show him the results
here is my code i want help plz
<html>
<!-- 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;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
</script>
<head>
<style>
.container {
margin-top: 110px;
}
.error {
color: #B94A48;
}
.form-horizontal {
margin-bottom: 0px;
}
.hide{display: none;}
header{
background: #339966;
height: 70px;
color:#fff;
}
a{text-decoration: none;color: #fff;}
header p{padding-top:20px;}
footer{
background: #339966;
height: 100px;
color:#fff;
}
footer p{padding-top:50px;}
.image{
padding-top:10%;
height: 453px;
}
.intro{
margin:150px 0px 150px 70px;
}
.question{height: 342px;}
.result-logo{margin-left: 42%;margin-top:1.6%;}
.result-logo1{margin-left: 55%;}
.result-container{margin-left: 40%;margin-top:1%; color:#684B68;}
.logout{padding-top:100px;}
.next{margin-left:200px;}
.answer{color:green;font-weight: 300;font-size: larger; }
.result{height: 452px;}
</style>
</head>
<?php
// This script displays the quiz selected
// Display the header
// concatenate the target path from the parent dir path
$quiz = $_GET['q'];
//$this_dir = dirname(__FILE__);
//$parent_dir = realpath($this_dir . '../');
//$target_path = $parent_dir . '/tests/';
$quizfile =$quiz.'.qz';
if (file_exists($quizfile)){
include(htmlspecialchars($quizfile));
echo "<h2>$title</h2>";
}else{
die();
}
?>
Answer these questions as honestly as you can. If you think more than one applies to you, just try
to pick the one that <i>most</i> applies to you.<BR><BR>
<center>
<form action="quizresults.php?quiz=<? echo $quiz ?>" method=post>
<table border=0 width="100%">
<?
// Show all the questions and allow the user to select answers
//for ($i=0; $i<$questions; $i+=1)
//$i=0;
if($i==0){?>
<div id='question<?php echo $i=0;?>' class='cont'>
<p class='questions' id="<?php echo $i;?>"></p>
<tr>
<td colspan=2 bgcolor="#999999"><font color="#000000"><? echo $question[$i]; ?></font></td>
</tr>
<?
for ($j=0; $j<$types; $j+=1)
{
?>
<tr>
<td valign=top width=1><input type="radio" name="q_<? echo $i+1; ?>" value="<? echo $j+1; ?>">
<td><? echo $answer[$i][$j]; ?></td>
</td></tr>
<?
}
?>
<input id="<?php echo $i+=1;?>"type="button" onclick="<?php echo $i+1;?>" class='next btn btn-success' ></center>
</div>
</TABLE>
<table border=0 width="100%">
<?php
// Show all the questions and allow the user to select answers
//for ($i=0; $i<$questions; $i+=1)
}else if ($i>1) { ?>
<div id='question<?php echo $i+=1;?>' class='cont'>
<p class='questions' id="qname<?php echo $i;?>"></p>
<?php echo $i;?>
<tr>
<td colspan=2 bgcolor="#999999"><font color="#000000"><? echo $question[$i]; ?></font></td>
</tr>
<?
for ($j=0; $j<$types; $j+=1)
{
?>
<tr>
<td valign=top width=1><input type="radio" name="q_<? echo $i+1; ?>" value="<? echo $j+1; ?>">
<td><? echo $answer[$i][$j]; ?></td>
</td></tr>
</div>
<?
}
}
?>
<input type="button" value="next"></center>
</TABLE>
<BR><BR>
<input type="submit" value="عرض النتجة!"></center>
</form>
<!-- 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;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
</script>
this script load file called with gz like this :
<?
$title="test from lawrence";
$types="3";
$questions="3";
$type[0] = "<p>hero</p>";
$type[1] = "<p>good</p>";
$type[2] = "<p>bad</p>";
$question[0] = "what's your name ?";
$answer[0][0] = "power";
$answer[0][1] = "safe";
$answer[0][2] = "no";
$question[1] = "what's your color?";
$answer[1][0] = "fire";
$answer[1][1] = "light";
$answer[1][2] = "red";
$question[2] = "what's your mood?";
$answer[2][0] = "angry";
$answer[2][1] = "cute";
$answer[2][2] = "nerv";
?>
i wanrt to make it show one question per page with next question thanks