Tema Anterior Siguiente Tema

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

Cerrado
padronefe9 Mensajes enviados 2 Fecha de inscripción domingo, 3 de enero de 2021 Estatus Miembro Última intervención miércoles, 6 de enero de 2021 - 3 ene 2021 a las 16:03
padronefe9 Mensajes enviados 2 Fecha de inscripción domingo, 3 de enero de 2021 Estatus Miembro Última intervención miércoles, 6 de enero de 2021 - 6 ene 2021 a las 16:13
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
Consulta también:

1 respuesta

Respuesta 1 / 1
Perfil bloqueado
6 ene 2021 a las 14:02
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.
padronefe9 Mensajes enviados 2 Fecha de inscripción domingo, 3 de enero de 2021 Estatus Miembro Última intervención miércoles, 6 de enero de 2021
6 ene 2021 a las 16:13
Muchas gracias! Creo que es lo que estaba buscando, es muy amable

Discusiones similares

Sumar campos con php y javascript
rigo2015 -
elfuerte59 -

1 respuesta
Contador de seguidores parado en 999
Grux -
jose_9394 -

4 respuestas
Necesito activar Javascript
ivan22 -
auricelitha -

79 respuestas