Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Crear un test en Javascript

JavaScript - Crear un test en Javascript

Volver
Nuevo Tema
<<>>
 
Vista:

Crear un test en Javascript

Publicado por Pepe (1 intervención) el 04/01/2018 17:21:12
Hola tengo un gran problema estoy intentando realizar un test donde las preguntas incorrectas se marquen en rojo y que cuando lo termines salga una alerta con las cantidades de aciertos que a tenido.
Se agradece todas las respuestas. Un saludo
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un test en Javascript

Publicado por ScriptShow (692 intervenciones) el 05/01/2018 13:04:38
Saludos Pepe,

un ejemplo para empezar::

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
51
52
53
54
55
56
57
58
<html>
<head>
<title>T E S T</title>
<script>
function resultado() {
var p1, p2, p3, p4, nota;
 
<!-- 1ª pregunta -->
if (document.getElementById('p11').checked==true) {p1=1}
else {p1=0}
<!-- 2ª pregunta -->
if (document.getElementById('p22').checked==true) {p2=1}
else {p2=0}
<!-- 3ª pregunta -->
if (document.getElementById('p33').checked==true) {p3=1}
else {p3=0}
<!-- 4ª pregunta -->
if (document.getElementById('p44').checked==true) {p4=1}
else {p4=0}
 
nota=p1+p2+p3+p4;
alert(" Aciertos: " + nota);
location.reload();
}
</script>
</head>
<body>
<h2>T E S T</h2>
<hr>
<form style="font:normal 16px sans-serif">
<p>Primera pregunta del test... La respuesta es A.</p>
<p onclick="this.style.color='#00FF00'"><input type="radio" name="pregunta1" id="p11"> Texto de la respuesta A.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta1" id="p12"> Texto de la respuesta B.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta1" id="p13"> Texto de la respuesta C.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta1" id="p14"> Texto de la respuesta D.</p>
 
<p>Segunda pregunta del test... La respuesta es B.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta2" id="p21"> Texto de la respuesta A.</p>
<p onclick="this.style.color='#00FF00'"><input type="radio" name="pregunta2" id="p22"> Texto de la respuesta B.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta2" id="p23"> Texto de la respuesta C.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta2" id="p24"> Texto de la respuesta D.</p>
 
<p>tercera pregunta del test... La respuesta es C.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta3" id="p31"> Texto de la respuesta A.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta3" id="p32"> Texto de la respuesta B.</p>
<p onclick="this.style.color='#00FF00'"><input type="radio" name="pregunta3" id="p33"> Texto de la respuesta C.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta3" id="p34"> Texto de la respuesta D.</p>
 
<p>Cuarta pregunta del test... La respuesta es D.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta4" id="p41"> Texto de la respuesta A.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta4" id="p42"> Texto de la respuesta B.</p>
<p onclick="this.style.color='#FF0000'"><input type="radio" name="pregunta4" id="p43"> Texto de la respuesta C.</p>
<p onclick="this.style.color='#00FF00'"><input type="radio" name="pregunta4" id="p44"> Texto de la respuesta D.</p>
<hr>
<p><input type="button" value=" R E S U L T A D O " onclick="resultado()"/></p>
</form>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
4
Comentar

Crear un test en Javascript

Publicado por Guadalupe (1 intervención) el 31/03/2019 05:54:52
Está muy completo, me ayudó muchísimo, llevaba horas buscando, muchas gracias al creador.
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

Crear un test en Javascript

Publicado por Jose A (1 intervención) el 06/01/2020 01:23:59
Si quisiera tomar la parte del script y hacer un archivo JS para luego llamarle desde el HTML que cosas debería cambiar?
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

Crear un test en Javascript

Publicado por Luis Páez (1 intervención) el 02/06/2020 22:42:39
Bro, lo que tienes que ahcer es poner lo que esta dentro del script en un archivo javascript y mandarlo a llamar usando el
<script src="NombreArchivo.js"></scrip>
Y todo lo demas es igual.
saludos.
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

Crear un test en Javascript

Publicado por Jason (1 intervención) el 26/11/2019 03:33:56
Si quiero poner mas preguntas como seria
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
sin imagen de perfil
Val: 2
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un test en Javascript

Publicado por Gerardo (1 intervención) el 08/02/2020 17:36:16
Cómo seria si en vez de que cambie de color cuando se selecciona, camabiara de color cuando se le de click en el boton de enviar
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un test en Javascript

Publicado por ScriptShow (692 intervenciones) el 09/02/2020 19:19:29
Saludos,

una variante adaptable sería:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<title>T E S T</title>
<style>
* {color:#000000;transition:all 0.4s ease;}
</style>
<script>
function resultado() {
var p1, p2, p3, p4, nota;
 
<!-- 1ª pregunta -->
if (document.getElementById('p11').checked==true) {p1=1}
if (p1==1) {document.querySelectorAll('.pregunta1')[0].style.color='#00FF00'}
else {p1=0}
<!-- 2ª pregunta -->
if (document.getElementById('p22').checked==true) {p2=1}
if (p2==1) {document.querySelectorAll('.pregunta2')[1].style.color='#00FF00'}
else {p2=0}
<!-- 3ª pregunta -->
if (document.getElementById('p33').checked==true) {p3=1}
if (p3==1) {document.querySelectorAll('.pregunta3')[2].style.color='#00FF00'}
else {p3=0}
<!-- 4ª pregunta -->
if (document.getElementById('p44').checked==true) {p4=1}
if (p4==1) {document.querySelectorAll('.pregunta4')[3].style.color='#00FF00'}
else {p4=0}
 
nota=p1+p2+p3+p4;
document.getElementById('resultado').innerHTML="Aciertos: "+nota;
rs=confirm("C o n t i n u a r . . .");
if (rs==false) {document.forms[0].reset();location.reload()}
}
</script>
</head>
<body>
<h2>T E S T</h2>
<hr>
<form style="font:normal 16px sans-serif">
<p>Primera pregunta del test... La respuesta es A.</p>
<p class="pregunta1"><input type="radio" name="pregunta1" id="p11"> Texto de la respuesta A.</p>
<p class="pregunta1"><input type="radio" name="pregunta1" id="p12"> Texto de la respuesta B.</p>
<p class="pregunta1"><input type="radio" name="pregunta1" id="p13"> Texto de la respuesta C.</p>
<p class="pregunta1"><input type="radio" name="pregunta1" id="p14"> Texto de la respuesta D.</p>
 
<p>Segunda pregunta del test... La respuesta es B.</p>
<p class="pregunta2"><input type="radio" name="pregunta2" id="p21"> Texto de la respuesta A.</p>
<p class="pregunta2"><input type="radio" name="pregunta2" id="p22"> Texto de la respuesta B.</p>
<p class="pregunta2"><input type="radio" name="pregunta2" id="p23"> Texto de la respuesta C.</p>
<p class="pregunta2"><input type="radio" name="pregunta2" id="p24"> Texto de la respuesta D.</p>
 
<p>Tercera pregunta del test... La respuesta es C.</p>
<p class="pregunta3"><input type="radio" name="pregunta3" id="p31"> Texto de la respuesta A.</p>
<p class="pregunta3"><input type="radio" name="pregunta3" id="p32"> Texto de la respuesta B.</p>
<p class="pregunta3"><input type="radio" name="pregunta3" id="p33"> Texto de la respuesta C.</p>
<p class="pregunta3"><input type="radio" name="pregunta3" id="p34"> Texto de la respuesta D.</p>
 
<p>Cuarta pregunta del test... La respuesta es D.</p>
<p class="pregunta4"><input type="radio" name="pregunta4" id="p41"> Texto de la respuesta A.</p>
<p class="pregunta4"><input type="radio" name="pregunta4" id="p42"> Texto de la respuesta B.</p>
<p class="pregunta4"><input type="radio" name="pregunta4" id="p43"> Texto de la respuesta C.</p>
<p class="pregunta4"><input type="radio" name="pregunta4" id="p44"> Texto de la respuesta D.</p>
<hr>
<h2 id="resultado">Aciertos: 0</h2>
<p><input type="button" value=" R E S U L T A D O " onclick="resultado()"/></p>
</form>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 4
Ha disminuido su posición en 8 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un test en Javascript

Publicado por Jedam (1 intervención) el 14/01/2021 00:42:29
gracias estuvo interesante
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

Crear un test en Javascript

Publicado por dadriana (1 intervención) el 30/09/2021 01:22:38
gracias aunque no me sirvio tanto como deveria :/
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