Mediante una solución de @amenadiel donde mediante datos de PHP JSON se genera varias lista de preguntas, se puede observar la demostración en linea.
<?php
session_start();
$conn = mysqli_connect("localhost","root","","1_examen") or die("Connection failed".mysqli_connect_error());
$preguntas=[];
$sql = "SELECT * FROM Question";
$result = $conn->query($sql);
while($row = mysqli_fetch_assoc($result)) {
$preguntas[] = [
'name' => 'respuesta_'.$row["Id"],
'pregunta' => $row["Question"],
'alternativas' => [$row["A1"], $row["A2"],$row["A3"],$row["A4"]],
'respuesta' => null
];
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://a...content-available-to-author-only...s.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<!--
<input type="radio" name="q" id="q" value="Barry Sanders">
-->
<body>
<script type="text/javascript">
var preguntas = <?php echo json_encode($preguntas); ?>;
var pregunta_actual = 0;
</script>
<script type="text/javascript" src="assets/js/question.js"></script>
<script type="text/javascript">
$(function() {
$('#enviar').on('click', function() {
$('#formulario').submit();
});
});
</script>
<div id="container">
<div class="controles">
<a id="retroceder"> < retroceder </a>
<a id="avanzar"> avanzar > </a>
<a id="enviar"> enviar respuestas </a>
</div>
<hr>
<div class="container1">
<div id="tiempo_restante"></div>
<ul id="preguntas">
<!-- -->
</ul>
</div>
<!--<div class="respuestas"></div>-->
<form id="formulario" name="form" class="respuestas" method="POST" action="result.php">
<!---->
</form>
</div>
</body>
</html>
Cada respuesta seleccionada de cada pregunta se va guardando los datos de esta forma:
<input type="radio" name="q" id="q" value="Barry Sanders">
Pruebas realizadas mediante los comentarios de @A.Cedano
Estoy usando este código ajax que me han enviado por mensaje, me familiarizo con este código ajax, lo entiendo muy bien su funcionamiento.
$(function() {
var frm = $('#formulario');
frm.submit(function(e){
e.preventDefault();
var formData = frm.serialize();
formData += '&' + $('#enviar').attr('name') + '=' + $('#enviar').attr('value');
var url = "result.php";
$.ajax({
type: frm.attr('method'),
url: url,
data: formData,
})
.done(function(data) {
let res = JSON.parse(data);
// si es true el estado
if(res.status){
$('.success').fadeIn();
$('.success').html(res.message).delay(3000).fadeOut(3000);
$(frm)[0].reset();
$(frm).hide();
} else {
// si es false el estado
//mensaje de error...
}
})
.fail(function() {
$('.fail').fadeIn();
$('.fail').html(textStatus).delay(3000).fadeOut(3000);
})
});
});
El formulario sigue estando igual el único cambio que hice fue eliminar el action quedando de esta forma:
<form id="formulario" name="form" class="respuestas" method="POST">
En el archivo result.php borre todo, para ver si funcionaba el envió al igual cuando se termina el tiempo.
Dejando solamente esto:
<?php
echo json_encode(['status'=> true, 'message'=>"Evaluación recibida"]);
?>
Efectivamente el mensaje se muestra en <div class="success"></div> tanto al terminar el tiempo permitido de la evaluación, de la misma forma al enviar respuesta -> <a id="enviar"> enviar respuestas </a>.
El código encargado para evaluar los resultados de la evaluación es el siguiente:
result.php
<?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++;
}
$sql = "INSERT INTO user(Name,Score) values('$name',$score)";
$conn->query($sql);
?>
<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>
Generaba y mostraba de esta manera los resultados:
Mi problema es que no entiendo como mostrar los resultados de la evaluación y el segundo problema es, como puedo ocultar el proceso anterior es decir ocultar la evaluación al enviar las respuesta/terminar el tiempo permitido de la evaluación.
Quizás por el mismo ajax se pueda ocular esa información mediante:
if(res.status){
$('.success').fadeIn();
$('.success').html(res.message).delay(3000).fadeOut(3000);
$(frm)[0].reset();
$(frm).hide();
}
Pero aprovechando que la evaluación es en la misma página como puedo hacer uso del mismo diseño de la evaluación para así mostrar los resultados correctos de color verde y las respuestas incorrectas de color rojo.
Por ejemplo:
