Añadir un contador regresivo a mi test Php/Javascript

Denunciar
Message postés
2
Date d'inscription
domingo, 3 de enero de 2021
Estatus
Miembro
Última intervención
miércoles, 6 de enero de 2021
-
Message postés
2
Date d'inscription
domingo, 3 de enero de 2021
Estatus
Miembro
Última intervención
miércoles, 6 de enero de 2021
-
Hola,

soy nueva por aquí, estoy desarrollando un quizz para la escuela en el cual se mide el iq, hasta ahora he podido hacer un array con la pregunta, 6 opciones y una respuesta correcta, pero se me ha pedido agregar un reloj que limite el acceso del test a 40 minutos y que este envíe el resultado al alcanzar el tiempo limite a la base de datos (my sql, motor innodb). Soy muy novata en el uso de Javascript así que no puedo hacerme una idea de como integrar esto a mi proyecto y no encuentro tutoriales en español. También acepto comentarios acerca de como mejorar mi código.

No se si sea necesario pero esto es lo que tengo hasta ahora
En caso de requerir más información pueden mencionarlo y lo añadiré.


Index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Test de matrices progresivas de Raven - Universidad Tecnológica de Tamaulipas Norte </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/font.css">
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
</div>
</div></div>
<div class="bg">
<div class="grid">
<grid align="center">
<div id="quiz">
<h1>Test Raven </h1>
<div style="font-weight: bold" id="quiz-time-left"></div>
<hr style="margin-bottom: 10px">
<h2><p font id="question"> </p><h2>
<div class="button">
<button id="bt0"> <span id="choice0"> </span> </button>
<button id="bt1"> <span id="choice1"> </span> </button>
<button id="bt2"> <span id="choice2"> </span> </button>
<button id="bt3"> <span id="choice3"> </span> </button>
<button id="bt4"> <span id="choice4"> </span> </button>
<button id="bt5"> <span id="choice5"> </span> </button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress"> Pregunta x of y</p>
</footer>
</div>
</div>

<script src="js/quiz.js"> </script>
<script src="js/question.js"> </script>
<script src="js/app.js"> </script>
<script src="js/mysql.js"> </script>
</body>
</html>


quiz.js


function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function(){
return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}

this.questionIndex++;
}

Quiz.prototype.isEnded = function(){
return this.questionIndex === this.questions.length;
 


question.js


 
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer; }

Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice; }


app.js


function populate(){
if(quiz.isEnded()) {
showScores();
}
else {

// mostrar pregutas
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;

// Incisos
var choices = quiz.getQuestionIndex().choices;
for(var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("bt" + i, choices[i]);
}

showProgress();
}
};

function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function(){
quiz.guess(guess);
populate();
}
};


function showProgress(){
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Pregunta número " + currentQuestionNumber + " de " + quiz.questions.length;
};

function showScores(){
var gameOverHTML = "<h1>Haz terminado, puedes proceder a abandonar la applicación <br> Utiliza la barra de navegación</h1>";
gameOverHTML += "<h2 id='score'> Tu Resultado: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};


// Creacion de las Preguntas, son 60 pero solo incluiré una como ejemplo para no hacerlo más largo
var questions = [
new Question("Lamina 1/60 <br> <img src='rvn/q/1.png'/> <br>", ["a <br> <img src='rvn/a/1a.png'/>", "b <br> <img src='rvn/a/1b.png'/>","c <br> <img src='rvn/a/1c.png'/>", "d <br> <img src='rvn/a/1d.png'/>", "f <br> <img src='rvn/a/2a.png'/>", "g <br> <img src='rvn/a/3a.png'/>"], "c <br> <img src='rvn/a/1c.png'/>"),
];


var quiz = new Quiz(questions);


populate()



Configuración: Android / Chrome 87.0.4280.101

1 respuesta

Message postés
2
Date d'inscription
miércoles, 3 de octubre de 2018
Estatus
Miembro
Última intervención
miércoles, 6 de enero de 2021
1
Hola!

Interesante problema tienes :)

Para comenzar, puedes usar https://www.w3schools.com/jsref/met_win_settimeout.asp para disparar un evento del lado del cliente una vez transcurridos los 40 minutos (Y ahí realizar el envío del formulario).

Algo que debes tener en cuenta es que no puedes fiarte exclusivamente del control de tiempos del cliente (Alguien con algunos conocimientos podría abusar del sistema), con lo cual, es recomendable implementar algún tipo de control del lado del servidor también.

Una forma sería guardar en la sesión el tiempo de inicio del test y, al recibir las respuestas, verificar que el tiempo transcurrido no supere los 40 minutos.

No es una solución infalible (puede dar problemas en casos extremos), pero es mejor que dejar todo en manos del cliente :)

Consúltame si te quedó alguna duda.
1
Gracias

¡Estamos felices de haberte ayudado! ¿Te hemos sido de ayuda? ¡Déjanos un comentario! Evalúa a CCM

CCM 18341 usuarios nos han dicho gracias este mes

Message postés
2
Date d'inscription
domingo, 3 de enero de 2021
Estatus
Miembro
Última intervención
miércoles, 6 de enero de 2021

Muchas gracias! Creo que es lo que estaba buscando, es muy amable

¡Suscríbete a nuestra Newsletter!

Recibe nuestros mejores artículos

¡Suscríbete a nuestra Newsletter!