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
Quizz.js
question.js
app.js
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 pregutasvar element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// Incisosvar 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 pregutasvar element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// Incisosvar 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 largovar 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
0
