Tengo desarrollado de manera simple una pequeña evaluación que cuenta con 4 opciones de respuesta a la pregunta y con un temporizador de tiempo permitido en resolver las preguntas.
No existen ningún problema en el código a lo contrario me gusta la forma simple de como cumple con lo pensado.
Mediante el archivo TestPage.php obtenemos las preguntas registradas en la tabla de datos.
<?php
session_start();
$conn = mysqli_connect("localhost","root","","1_examen") or die("Connection failed".mysqli_connect_error());
date_default_timezone_set("Asia/Kolkata");
$imageview = 0;
$val = $_GET["val"];
if(isset($_COOKIE["clock"]))
$clock = $_COOKIE["clock"];
else
$clock = 300;
$sql = "SELECT * FROM Question WHERE Id=".$val;
$result = $conn->query($sql);
$row = mysqli_fetch_assoc($result);
$question = $row["Question"];
$a1 = $row["A1"];
$a2 = $row["A2"];
$a3 = $row["A3"];
$a4 = $row["A4"];
$image = $row["Image"];
$answer = $row["Answer"];
if($image != null)
$imageview = 1;
if(isset($_POST["submit"]))
{
$temp = $val - 1;
$ans = $_POST["q"];
$_SESSION["answer"][$temp]=$ans;
if($ans == $answer)
{
$_SESSION["result"][$temp] = 1;
}
else
{
$_SESSION["result"][$temp] = 0;
}
if($val == 10)
header('Location:Result.php');
else
header('Location:TestPage.php?val='.($val+1));
}
?>
<html>
<head>
<title></title>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
var temp = timer-1;
document.cookie = "clock="+temp;
if (--timer < 0) {
alert("Times Up");
location.href="Result.php";
}
}, 1000);
}
</script>
<script>
window.onload = function () {
var fiveMinutes = <?php echo $clock; ?>,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
function select(){
var radios = document.getElementsByName("q");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++;
}
if (!formValid) alert("Please Select Your Answer !!!");
return formValid;
}
</script>
<fieldset id = "timer">
<h4>Time Left : <span id="time"></span></h4>
</fieldset>
<center>
<fieldset id="field">
<h3>ONLINE ENTRANCE TEST</h3>
<hr>
<form action="" method="POST" name="form" onsubmit="return select()">
<?php echo "<h4 id='h41'>Q".$val." ".$question."</h4>"; ?>
<hr>
<?php
if($imageview == 1)
{
echo "<img style='width:100px;height:100px;' src='data:image/jpeg;base64,".base64_encode($image)."'/>";
echo "<hr>";
}
?>
<ul class="answers">
<table>
<tr><td>A)</td><td><input type="radio" name="q" id="q" value="<?php echo $a1;?>" id="q1a"><?php echo $a1;?></td></tr>
<tr><td>B)</td><td><input type="radio" name="q" id="q" value="<?php echo $a2;?>" id="q1b"><?php echo $a2;?></td></tr>
<tr><td>C)</td><td><input type="radio" name="q" id="q" value="<?php echo $a3;?>" id="q1c"><?php echo $a3;?></td></tr>
<tr><td>D)</td><td><input type="radio" name="q" id="q" value="<?php echo $a4;?>" id="q1d"><?php echo $a4;?></td></tr>
</table>
</ul>
<hr>
<input type="submit" name="submit" value="Next ->" id="submitbutton">
</form>
</fieldset>
</center>
Mediante el archivo MainPage.php se realiza la evaluación, las preguntas van apareciendo mediante MainPage.php?val=1
Pregunta 1: val=1
, pregunta 2: val=2
, pregunta 3: val=3
y así sucesivamente.
<?php
session_start();
$conn = mysqli_connect("localhost","root","","1_examen") or die("Connection failed".mysqli_connect_error());
date_default_timezone_set("Asia/Kolkata");
setcookie("clock", "", time() - 3600);
if(isset($_POST["submit"]))
{
$name = $_POST["name"];
$_SESSION["name"] = $name;
$_SESSION["result"] = array(0,0,0,0,0,0,0,0,0,0);
$_SESSION["answers"]=array("","","","","","","","","","");
header('Location:TestPage.php?val=1');
}
?>
<html>
<head>
<title></title>
<script>
function select(){
var x = document.forms["form"]["name"].value;
if (x == "") {
alert("Please Enter Your Name");
return false;
}
}
</script>
</head>
<body>
<center>
<fieldset id="field">
<h3>ONLINE ENTRANCE TEST</h3>
<hr><br>
<form action="" method="POST" name="form" onsubmit="return select()">
Please Enter Name: <input type="text" id="name" name="name" autofocus><br><br>
<hr><br>
<input type="submit" name="submit" value="Begin Test" id="submitbutton">
</form>
</fieldset>
</center>
</body>
</html>
Mediante el siguiente archivo PHP
Result.php, se muestra el puntaje y los errores de las respuestas incorrectas, se muestra la pregunta seleccionada y la respuesta correcta.
<?php
session_start();
$conn = mysqli_connect("localhost","root","admin","Examination") or die("Connection failed".mysqli_connect_error());
date_default_timezone_set("Asia/Kolkata");
$score = 0;
$results = $_SESSION["result"];
$name = $_SESSION["name"];
$answers = array();
setcookie("clock", "", time() - 3600);
for($i=0;$i<sizeof($results);$i++)
{
if($results[$i] == 1)
$score++;
}
$t=0;
$sql = "SELECT * FROM question";
$result = $conn->query($sql);
while($row = mysqli_fetch_assoc($result)){
$answers[$t] = $row["Answer"];
$t++;
}
if(isset($_POST["submit"])){
$sql = "INSERT INTO user(Name,Score) values('$name',$score)";
$conn->query($sql);
header('Location:MainPage.php');
}
?>
<html>
<head>
<title></title>
</head>
<body>
<center>
<fieldset id="field">
<h3>ONLINE ENTRANCE TEST</h3>
<hr>
<form action="" method="POST" name="form">
<h4>Congrats <?php echo $name;?> , Your Score : <?php echo $score;?>/10. !!!</h4>
<hr><br>
<div style="overflow-x:auto;">
<table border="1px" id="table">
<tr><th>Question</th><th>Your Answer</th><th>Correct Answer</th><th>Points Scored</th></tr>
<?php
for($i=0;$i<10;$i++)
{
$temp = $i+1;
if($results[$i] == 0)
echo "<tr style='background-color: #FADBD8 ;'>";
else
echo "<tr style='background-color: #D5F5E3 ;'>";
echo "<td>".$temp."</td><td>".$_SESSION["answer"][$i]."</td><td>".$answers[$i]."</td><td>".$results[$i]."</td></tr>";
}
?>
</table>
</div>
<hr><br>
<input type="submit" name="submit" value="Back To Main Page" id="submitbutton">
</form>
</fieldset>
</center>
</body>
</html>
La estructura de la tabla es la siguiente:
CREATE TABLE `question` (
`id` int(11) NOT NULL,
`question` varchar(150) NOT NULL,
`a1` varchar(100) NOT NULL,
`a2` varchar(100) NOT NULL,
`a3` varchar(100) NOT NULL,
`a4` varchar(100) NOT NULL,
`image` longblob,
`answer` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Lo que deseo lograr en este pequeño código es dar la posibilidad de que el usuario pueda retroceder o ver o seleccionar una pregunta en especifica por decir si yo no quiero comenzar desde el inicio hacia el fin si no del fin hacia el inicio dar esa posibilidad para ello se debe generar los botones por las preguntas existentes pero que todo sea de manera dinámica es decir sin tener que recargar la página.
Lo que deseo lograr es lo siguiente: