JavaScript - Como añadir un contador regresivo a mi test

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 628 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como añadir un contador regresivo a mi test

Publicado por Edna Padron (1 intervención) el 03/01/2021 15:30:50
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>
<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>


Quizz.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function Question(text, choices, answer) {
    this.text = text;
    this.choices = choices;
    this.answer = answer; }
 
Question.prototype.isCorrectAnswer = function(choice) {
    return this.answer === choice; }
[]
 
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");

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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 adjunto 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'/>"),];
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 2.898
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como añadir un contador regresivo a mi test

Publicado por joel (665 intervenciones) el 04/01/2021 08:35:25
Hola Edna, poner una cuenta atrás no tiene mucha complicación, aquí tienes varios códigos e ejemplo:
https://www.lawebdelprogramador.com/codigo/buscar.php?opc=1&id=45&charSearch=cuenta+atras

El problema esta en que si el usuario hace F5 en la pagina, el contador vuelve a empezar... La solución pasa por guardar un registro en la base de datos con la hora inicial, y si el usuario hace F5 que continué el tiempo, en vez de empezar nuevamente.

No se si me he sabido explicar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como añadir un contador regresivo a mi test

Publicado por greicy (1 intervención) el 08/01/2021 18:23:40
Hola igualmente yo tengo ese problema(el de que se recarga el tiempo si se recarga la pagina), es decir que la única manera es almacenando la hora en la Base de datos joel?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 2.898
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como añadir un contador regresivo a mi test

Publicado por joel (665 intervenciones) el 08/01/2021 21:23:18
Si, la verdad es que es la manera mas segura... también puedes guardarlo en una cookie, pero si la eliminan...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar