Using a solution from @amenadiel where several lists of questions are generated using PHP JSON data, you can see the demo online .
<?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>
Each selected answer of each question is saving the data in this way:
<input type="radio" name="q" id="q" value="Barry Sanders">
Tests made using comments from @A.Cedano
I am using this code ajax
that has been sent to me by message, I am familiar with this code ajax
, I understand its operation very well.
$(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);
})
});
});
The form remains the same, the only change I made was to remove the action
form, leaving it like this:
<form id="formulario" name="form" class="respuestas" method="POST">
In the result.php file delete everything, to see if the sending worked as well when the time expires.
Leaving only this:
<?php
echo json_encode(['status'=> true, 'message'=>"Evaluación recibida"]);
?>
Indeed, the message is displayed as <div class="success"></div>
long as the time allowed for the evaluation expires, in the same way when sending a response -> <a id="enviar"> enviar respuestas </a>
.
The code in charge to evaluate the results of the evaluation is the following:
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>
It generated and displayed the results in this way:
My problem is that I don't understand how to show the results of the evaluation and the second problem is, how can I hide the previous process, that is, hide the evaluation when sending the answers / finishing the evaluation time allowed.
Perhaps by the same ajax
that information can be hidden through:
if(res.status){
$('.success').fadeIn();
$('.success').html(res.message).delay(3000).fadeOut(3000);
$(frm)[0].reset();
$(frm).hide();
}
But taking advantage of the fact that the evaluation is on the same page, I can use the same evaluation design to show the correct results in green and the incorrect answers in red.
For example:
Based on your previous question , I took the same questions from my answer:
In a PHP I wrote an array to hard (which you must get from a query)
The answer array contains the correct alternative, so you create a question array that removes that field (leaving it null).
On the landing of the test you draw the content of the array of questions. The form is sent to another landing where the answers are compared with the correct alternative.
https://examples.ffflabs.com/test.php
I left you a gist with the code: https://gist.github.com/amenadiel/0e1193c36c1eaaa238955cf1e2e633c7
To do it without reloading the page
It's almost the same, only the script that evaluates no longer writes HTML but the json of the result. The same question landing parses that result and dynamically injects the HTML into a table.
https://examples.ffflabs.com/ajax_test.php
https://gist.github.com/amenadiel/5624a99ebcd739542d5cc35b0f32a3b3
To display the results using the same button panel as the questions is not difficult, but it involves replicating the initial flow by redrawing the boxes and the content of the right div. I think there is enough in the answer that you can do it yourself.
Bonus track:
If you want to add letters ( A), B), C), etc) to the options
You can declare an array of letters:
When inserting the options:
You can play with the styles of the label so that the radius is not shown, and give a different color to the letter so that it denotes that it is a list element. Overall, clicking the label is equivalent to clicking the input, so anything you do with styles is harmless.
The field
$_POST["submit"]
is not defined in the form (at least in the code you have shared), since there is no element with that name. This occurs since you are not sending the information using a button,<input type="submit" name="submit" />
which is the most common way to post a form.A small workaround would be to modify the code of your form
#formulario
as follows:Did you first verify that the query you need is correct? Also with script and an alert(); within the query you can check whether or not it enters the query as such.