Este proyecto te ayudará a crear fácilmente un quiz de matemáticas muy dinámico, soporta más de 20 preguntas que se mostrará de forma aleatoria, fácil de modificar, puedes multiplicar, dividir, sumar, restar, etc. solo necesitas agregar la operación a realizar, la respuesta correcta y 2 respuestas erróneas. Cada respuesta correcta sumará un punto y al final te mostrará la cantidad de preguntas contestadas correctamente.
¿Cómo iniciar?
En una carpeta creamos los siguientes archivos, index.php, preguntas.php, quiz.php y style.css, si tienes un logo lo puedes agregar.
preguntas.php
En esta hoja estará las preguntas, respuestas y las operaciones que podrás ver en el quiz.
<?php /*Aquí puedes editar tus preguntas y respuestas, si quieres agregar más preguntas solo debes de copiar, pegar y modificar los bloques. Recuerda "num_izquierda" "signo_opc" "num_derecha" = "respuesta_correcta" $preguntas[] = [ "num_izquierda" => 0, "num_derecha" => 0, "respuesta_correcta" => 0, "pregunta_trampa1" => 0, "pregunta_trampa2" => 0, "signo_opc"=> 'x' ]; VaidrollTeam */ $preguntas[] = [ "num_izquierda" => 20, "num_derecha" => 46, "respuesta_correcta" => 66, "pregunta_trampa1" => 64, "pregunta_trampa2" => 70, "signo_opc"=> '+' ]; $preguntas[] = [ "num_izquierda" => 41, "num_derecha" => 16, "respuesta_correcta" => 656, "pregunta_trampa1" => 650, "pregunta_trampa2" => 630, "signo_opc"=> 'x' ]; $preguntas[] = [ "num_izquierda" => 42, "num_derecha" => 28, "respuesta_correcta" => 14, "pregunta_trampa1" => 12, "pregunta_trampa2" => 20, "signo_opc"=> '-' ]; $preguntas[] = [ "num_izquierda" => 96, "num_derecha" => 126, "respuesta_correcta" => 222, "pregunta_trampa1" => 32, "pregunta_trampa2" => 102, "signo_opc"=> '+' ]; $preguntas[] = [ "num_izquierda" => 201, "num_derecha" => 32, "respuesta_correcta" => 233, "pregunta_trampa1" => 230, "pregunta_trampa2" => 303, "signo_opc"=> '+' ]; $preguntas[] = [ "num_izquierda" => 51, "num_derecha" => 35, "respuesta_correcta" => 16, "pregunta_trampa1" => 14, "pregunta_trampa2" => 13, "signo_opc"=> '-' ]; $preguntas[] = [ "num_izquierda" => 3, "num_derecha" => 67, "respuesta_correcta" => 201, "pregunta_trampa1" => 200, "pregunta_trampa2" => 70, "signo_opc"=> 'x' ]; $preguntas[] = [ "num_izquierda" => 60, "num_derecha" => 12, "respuesta_correcta" => 5, "pregunta_trampa1" => 48, "pregunta_trampa2" => 6, "signo_opc"=> '/' ]; $preguntas[] = [ "num_izquierda" => 101, "num_derecha" => 24, "respuesta_correcta" => 125, "pregunta_trampa1" => 123, "pregunta_trampa2" => 102, "signo_opc"=> '+' ]; $preguntas[] = [ "num_izquierda" => 31, "num_derecha" => 4, "respuesta_correcta" => 124, "pregunta_trampa1" => 111, "pregunta_trampa2" => 166, "signo_opc"=> 'x' ]; $preguntas[] = [ "num_izquierda" => 64, "num_derecha" => 30, "respuesta_correcta" => 94, "pregunta_trampa1" => 98, "pregunta_trampa2" => 96, "signo_opc"=> '+' ]; $preguntas[] = [ "num_izquierda" => 44, "num_derecha" => 11, "respuesta_correcta" => 4, "pregunta_trampa1" => 33, "pregunta_trampa2" => 2, "signo_opc"=> '/' ]; ?>
num_izquierda es el número que estará en la pregunta a lado izquierdo. (Ejemplo: 101)
num_derecha es el número que estará en la pregunta al otro lado. (Ejemplo: 24)
respuesta_correcta es la respuesta que deberá de marcar el usuario.(Ejemplo: 125)
pregunta_trampa1 es la primera respuesta errónea para distraer al usuario. (Ejemplo: 123)
pregunta_trampa2 es la segunda respuesta errónea para distraer al usuario. (Ejemplo: 102)
signo_opc es el signo que mostrará en la pregunta. (Ejemplo: +)
Entonces si queremos agregar una multiplicación.
num_izquierda = 41,
num_derecha = 16,
signo_opc = x,
la respuesta correcta sería 656 que iría en respuesta_correcta y agregamos las otras respuestas erróneas para distraer.
quiz.php
En este código puedes modificar la variable $preparando_respuesta, en la primera parte dice "¡Respuesta correcta! ¡Eres un genio!." es el mensaje que dará cada vez que respondas bien una pregunta, en caso de responder mal te mostrará "¡Respuesta incorrecta!.", puedes modificar los mensajes.
<?php session_start(); $mostrar_puntos = false; include('preguntas.php'); $index = rand(0, count($preguntas) - 1); $pregunta = $preguntas[$index]; $respuestas = []; $respuestas[] = $pregunta['respuesta_correcta']; $respuestas[] = $pregunta['pregunta_trampa1']; $respuestas[] = $pregunta['pregunta_trampa2']; shuffle($respuestas); $preparando_respuesta = null; if ($_SERVER['REQUEST_METHOD'] == 'POST') { if (isset($_POST['respuesta'])) { if ($_POST['respuesta'] == $preguntas[$_POST['index']]['respuesta_correcta']) { $preparando_respuesta = "¡Respuesta correcta! ¡Eres un genio!."; if (isset($_SESSION['totcorrectas'])) { $_SESSION['totcorrectas']++; } } else { $preparando_respuesta = "¡Respuesta incorrecta!."; } } } $totpreguntas = count($preguntas); if (!isset($_SESSION['preguntas_index'])) { $_SESSION['preguntas_index'] = []; $_SESSION['totcorrectas'] = 0; } if (count($_SESSION['preguntas_index']) == $totpreguntas) { $_SESSION['preguntas_index'] = []; $mostrar_puntos = true; } else { $mostrar_puntos = false; if (count($_SESSION['preguntas_index']) == 0) { $_SESSION['totcorrectas'] = 0; $preparando_respuesta = ''; } do { $index = rand(0, count($preguntas) - 1); } while (in_array($index, $_SESSION['preguntas_index'])); $pregunta = $preguntas[$index]; array_push($_SESSION['preguntas_index'], $index); $respuestas = []; $respuestas[] = $pregunta['respuesta_correcta']; $respuestas[] = $pregunta['pregunta_trampa1']; $respuestas[] = $pregunta['pregunta_trampa2']; shuffle($respuestas); }
index.php
Solo hay que invocar o llamar todo lo que anteriormente fue creado.
<?php include('quiz.php'); ?> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>VaidrollTeamQuiz: Matemáticas</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="cajaquiz" align="center"> <?php if ($mostrar_puntos == false) { ?> <h1><p class="quiztitulo">Quiz de matemáticas</p></h1> <h1> <p class="quiz">¿Cuánto es <?php echo $pregunta['num_izquierda'].' '.$pregunta['signo_opc'].' '.$pregunta['num_derecha']; ?>? </p></h1> <h1> <p>Pregunta <?php echo count($_SESSION['preguntas_index']); ?> de <?php echo $totpreguntas; ?> </p></h1> <form action="index.php" method="POST"> <input type="hidden" name="index" value="<?php echo $index ?>" /> <br> <input type="submit" class="botonesvai" name="respuesta" value="<?php echo $respuestas[0]; ?>" /> <input type="submit" class="botonesvai" name="respuesta" value="<?php echo $respuestas[1]; ?>" /> <input type="submit" class="botonesvai" name="respuesta" value="<?php echo $respuestas[2]; ?>" /> </form> <?php echo "<p class='vai1respuesta'>$preparando_respuesta</p>"; } ?> <img src="logo.png" > <?php if ($mostrar_puntos) { echo "<h2>Respuestas correctas: " . $_SESSION['totcorrectas'] . " de " . $totpreguntas . " preguntas</h2>"; ?> <form action="index.php" method="POST"> <input type="submit" class="botonesvai" value="Intentar de nuevo" /> </form> <?php } ?> </div> </body> </html>
style.css
body
{
background: linear-gradient(to bottom, #3380B5, white);
font-family: sans-serif;
}
#cajaquiz
{
margin:0;
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
}
.quiz
{
position: relative;
margin: 0;
font-size:1.5em;
font-weight: bold;
}
.quiztitulo
{
position: relative;
margin: 0;
font-size:2em;
font-weight: bold;
}
.botonesvai
{
width: 12em;
font-size:1.2em;
font-weight: bold;
display: inline-block;
bottom: 120px;
border-radius: 4px;
border: 2px solid black;
color: #000;
background-color: white;
padding: 15px;
margin: 10px;
transition: .5s ;
text-decoration: none;
}
.botonesvai:hover
{
background-color: #FF8300;
color: black;
-webkit-appearance: button;
cursor: pointer;
}
.botonesvai:focus
{
outline: none;
}
.vai1respuesta
{
font-size:2em;
color: #801700;
font-weight: bold;
}
Resultado.
Al terminar el quiz te dará la cantidad de preguntas bien contestadas, y se reiniciará el quiz cambiando el orden de las preguntas, por cierto las respuestas también cambian de botón.
