6

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:

introducir la descripción de la imagen aquí

1 respuesta 1

9

Yo manejaría todo en el front, usando un arreglo de preguntas, por cada una de las cuales dibujas un cuadrito con el número de la pregunta y un contenedor con el texto de las respuestas y su respectivo set de opciones. Este último está invisible.

Según avanzas o retrocedes, se le aplica un estilo al cuadrito y va cambiando la pregunta, el contenedor de opciones para esa pregunta se hace visible.

El counter lo fijé en un minuto para que veas qué pasa al final. En realidad, lo que debiera pasar es que al enviar las respuestas, o cuando se acabe el tiempo, es enviar el formulario completo al backend.

var preguntas = [{
    pregunta: 'Cuanto es 2+2?',
    alternativas: [1, 2, 3, 4],
    respuesta: null
  },
  {
    pregunta: 'Vive en una Piña debajo del mar',
    alternativas: ['Bob Esponja', 'Patricio Estrella', 'Calamardo', 'Aquaman'],
    respuesta: null
  },
  {
    pregunta: 'Cuanto es 3 x 6 ?',
    alternativas: [18, 36, '3x6', 4],
    respuesta: null
  },
  {
    pregunta: 'Mejor sitio web de preguntas y respuestas?',
    alternativas: ['stackoverflow español', 'quora', 'answers.org', 'gmail'],
    respuesta: null
  },
  {
    pregunta: 'Cuanto es 3+3?',
    alternativas: [3, 12, 6, 33],
    respuesta: null
  },
  {
    pregunta: 'Capital de USA?',
    alternativas: ['New York', 'Washington', 'Metropolis', 'Ciudad Gótica'],
    respuesta: null
  },
];
var pregunta_actual = 0;

$(document).ready(() => {
  var getOpciones = function() {
    $('#preguntas li').removeClass('current').eq(pregunta_actual).addClass('current');
    var respuesta_actual = $('.respuesta').eq(pregunta_actual);
    $('.respuesta').removeClass('actual');
    respuesta_actual.addClass('actual');
  };



  var inicio = new Date(),
    segundos = 90, // tiempo para responder, en segundos
    intervalo = setInterval(() => {
      if (!segundos--) {
        alert('Se acabó el tiempo!');
        enviarRespuestas();
      }
      inicio.setTime(inicio.getTime() - 1000);
      $('#tiempo_restante').text(inicio.toTimeString().split(' ')[0]);
    }, 1000);


  function enviarRespuestas() {
    clearInterval(intervalo);
    console.log(preguntas);
    $('#container').empty().text('Resultados enviados');
  }

  $('#enviar').on('click', enviarRespuestas);

  inicio.setHours(0, 0, segundos); // cuanto tiempo queda
  $('#tiempo_restante').text(inicio.toTimeString().split(' ')[0]);

  preguntas.forEach((elemento, index) => {
    $('#preguntas').append(`<li rel="${index}">${index+1}</li>`);

    var respuesta = $(`<span class="respuesta"><div>${elemento.pregunta}</div></span>`);

    $('.respuestas').append(respuesta);
    elemento.alternativas.forEach((alternativa) => {
      var option = jQuery(`
      <label >
      <input type="radio" name="respuesta_${index}" value="${alternativa}" >
      ${alternativa}
      <label>`);
      respuesta.append(option);

    });
  });
  $('.respuesta').find('input').on('click', function() {
    preguntas[pregunta_actual].respuesta=$(this).val();
    $('#preguntas li').eq(pregunta_actual).addClass('respondida');
  });
  getOpciones();

  $('#preguntas li').on('click', function() {
    pregunta_actual = $(this).attr('rel');
    getOpciones();
  });

  $('#retroceder').on('click', () => {
    if (pregunta_actual === 0) {
      return;
    }
    pregunta_actual--;
    getOpciones();
  });

  $('#avanzar').on('click', () => {
    if (pregunta_actual === preguntas.length - 1) {
      return;
    }
    pregunta_actual++;
    getOpciones();
  });
});
#container {
  float: left;
  height: 200px;
  width: 500px;
}

.container1 {
  width: 100px;
  float: left;
  padding: 0 20px;
  height: 100%;
}

#preguntas {
  margin: 0;
  padding: 0;
  margin-top: 10px;
  list-style: none;
}

.controles {
  text-align: center;
  margin: 0 auto 5px;
}

.controles a {
  padding: 5px 7px;
  margin: 0 5px;
  background-color: #5c76d8;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

#preguntas li {
  list-style: none;
  padding: 10px;
  float: left;
  background-color: #CCC;
  display: inline-block;
  border: 1px solid #999;
  cursor: pointer;
}

#preguntas li:hover {
  list-style: none;
  padding: 10px;
  float: left;
  background-color: #EEE;
  display: inline-block;
  border: 1px solid #999;
  cursor: pointer;
}

#preguntas li.current {
  padding: 9px;
  border: 2px solid #369;
}

#preguntas li.respondida {
  background-color: #CCC;
}

#preguntas li.respondida {
  background-color: #93e485;
}

.respuestas {
  float: left;
  height: 100%;
}

label {
  clear: left;
  display: block;
}

.respuesta {
  display: none;
}

.respuesta.actual {
  display: inline-block;
}

.respuesta>div {
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

</div>

Bonus Track

Para traerte los datos desde PHP a un frontend como el que te mostré, te traes todas las preguntas de la tabla y las vas metiendo en un array. A diferencia de lo que hice yo, tú además le asignas un atributo name a cada pregunta que te permite inferir el ID de la fila.

 $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
   ]
 }

Al final de ese bucle, si tus preguntas fueran como las que puse en el ejemplo, el array tendría la forma:

[
    [
        'name'         => 'respuesta_1',
        'pregunta'     => 'Cuanto es 2+2?',
        'alternativas' => [1, 2, 3, 4],
        'respuesta'    => null,
    ],
    [
        'name'         => 'respuesta_2',
        'pregunta'     => 'Vive en una Piña debajo del mar',
        'alternativas' => ['Bob Esponja', 'Patricio Estrella', 'Calamardo', 'Aquaman'],
        'respuesta'    => null,
    ],
    [
        'name'         => 'respuesta_3',
        'pregunta'     => 'Cuanto es 3 x 6 ?',
        'alternativas' => [18, 36, '3x6', 4],
        'respuesta'    => null,
    ],
    [
        'name'         => 'respuesta_4',
        'pregunta'     => 'Mejor sitio web de preguntas y respuestas?',
        'alternativas' => ['stackoverflow español', 'quora', 'answers.org', 'gmail'],
        'respuesta'    => null,
    ],
    [
        'name'         => 'respuesta_5',
        'pregunta'     => 'Cuanto es 3+3?',
        'alternativas' => [3, 12, 6, 33],
        'respuesta'    => null,
    ],
    [
        'name'         => 'respuesta_6',
        'pregunta'     => 'Capital de USA?',
        'alternativas' => ['New York', 'Washington', 'Metropolis', 'Ciudad Gótica'],
        'respuesta'    => null,
    ],
];

Eso lo ejecutas antes de empezar a imprimir el HTML, de la forma

<?php

  ...llenas la variable $preguntas...

?>
<html>
  <head>
    <script>
       var preguntas = <?php echo json_encode($preguntas); ?>;
    </script>
  ...otras cosas del head...
  </head>
  <body>
    ... el html del formulario...
  </body>

</html>

Si te fijas, cuando escribes tu HTML (esto no es bonito pero funciona) declaras la variable preguntas como

<script>
   var preguntas = <?php echo json_encode($preguntas); ?>;
</script>

Y con eso llenaste el array de preguntas en el frontend, con lo que ya puedes pintar tu prueba de alternativas.

Ahora bien, yo le puse un atributo name a cada grupo de opciones usando el índice de la pregunta en el array. Tú debieras usar el atributo name que estás enviando desde el backend (porque no sabemos si tus ID son estrictamente correlativos o puede que hayas borrado una fila)

Entonces, donde yo puse:

preguntas.forEach((elemento, index) => {
  $('#preguntas').append(`<li rel="${index}">${index+1}</li>`);
  var respuesta = $(`<span class="respuesta"><div>${elemento.pregunta}</div></span>`);
  $('.respuestas').append(respuesta);

  elemento.alternativas.forEach((alternativa) => {
    var option = jQuery(`
    <label >
    <input type="radio" name="respuesta_${index}" value="${alternativa}" >
    ${alternativa}
    <label>`);
    respuesta.append(option);
  });

});

Tú en vez de usar name="respuesta_${index}" le asignarías a las opciones el atributo name de la pregunta:

elemento.alternativas.forEach((alternativa) => {
  var option = jQuery(`
   <label >
   <input type="radio" name="${elemento.name}" value="${alternativa}" >
    ${alternativa}
    <label>`);
    respuesta.append(option);
  });

Ahora, para enviar el formulario, hay que hacer otro cambio. Yo envolví las preguntas en un div:

<div class="respuestas">
   ...aquí se insertan las alternativas dinámicamente
</div>

Tú podrías reemplazar eso con un form

<form id="formulario" class="respuestas" method="POST" action="evaluar.php">
   ...aquí se insertan las alternativas dinámicamente
</form>

Luego, si presionas el botón de enviar, se envía el formulario:

$('#enviar').on('click', function() {
    $('#formulario').submit();
});

Lo mismo cuando se acaba el tiempo:

if (!segundos--) {
    clearInterval(intervalo);
    alert('Se acabó el tiempo!');
    $('#formulario').submit();
}

Ahora lo que te faltaría sería hacer un script evaluar.php que recibe las respuestas. Éstas vendrían en la forma:

$respuesta1 = $_POST['respuesta_1']
$respuesta2 = $_POST['respuesta_2']

Pero esto es ineficiente porque tendrías que escribir 100 veces casi lo mismo. Entonces, como tú ya sabes cuántas preguntas enviaste, puedes ejecutar la misma consulta del inicio, pero ahora haciendo:

 $puntaje = 0;
 $sql = "SELECT * FROM Question";
 $result = $conn->query($sql);
 while($row = mysqli_fetch_assoc($result)) {
     $name = 'respuesta_'.$row["id"];
     if(isset($_POST[$name]) && $_POST[$name] == $row['answer']) {
       $puntaje++;
     }    
 }

En el fondo, tú enviaste los nombres que iban a tener cada grupo de opciones. Entonces lees ese mismo valor en la superglobal $_POST. Para sumar 1 al puntaje debe cumplirse que la pregunta haya sido respondida (isset($_POST[$name])) y que la respuesta calce con la columna answer de tu tabla.

Al final de esa iteración ya conoces el puntaje final y puedes imprimirlo en pantalla con bombos y platillos.

Edit: faltaba algo fundamental

En el primer ejemplo (snippet) cada vez que se seleccionaba una respuesta se marcaba en verde el recuadro, pero no se llenaba el atributo respuesta de la respectiva pregunta. En el fondo, donde decía:

 $('.respuesta').find('input').on('click', function() {
    $('#preguntas li').eq(pregunta_actual).addClass('respondida');
 });

Debe decir:

 $('.respuesta').find('input').on('click', function() {
    preguntas[pregunta_actual].respuesta=$(this).val();
    $('#preguntas li').eq(pregunta_actual).addClass('respondida');
 });
12
  • Hola @amenadiel gracias es un excelente ejemplo, aunque si se contesta las respuestas antes de tiempo el botón enviar respuesta no hace nada, no se envía, es una vista previa de lo que he observado tarde que llegue a casa veo como podría adaptarlo al código PHP :)
    – Jacks
    Commented el 26 sept. 2018 a las 17:47
  • Claro que no hace nada, tal como no pasa nada cuando se acaba el tiempo. Los snippets de StackOverflow no tienen un backend PHP.
    – ffflabs
    Commented el 26 sept. 2018 a las 22:38
  • 2
    Te dejé un bonus track que debiera orientarte para armar todo el flujo
    – ffflabs
    Commented el 27 sept. 2018 a las 0:51
  • 1
    Amigo he estudiado todo lo que has explicado dejando el código principal donde se muestra las respuestas y opciones de preguntas correctamente quedando de esta forma ideone.com/72vkbI pero no me imprime los resultados en el archivo result.php.
    – Jacks
    Commented el 16 oct. 2018 a las 4:28
  • 1
    @Stevin en efecto, eso cae fuera del alcance de la pregunta y ya le puse un bonus track para implementar el front en PHP y una guía bastante clara para resolver lo que falta. De verdad no corresponde hacer el trabajo completo, este sitio no es para eso.
    – ffflabs
    Commented el 17 oct. 2018 a las 8:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.