JavaScript - cargar preguntas dinamicas en cada seccion

 
Vista:

cargar preguntas dinamicas en cada seccion

Publicado por Fernando (3 intervenciones) el 26/02/2015 10:41:28
Hola,

Estoy intentando hacer un test con preguntas dinámicas, de tal forma que un usuario cada vez que acceda se le mostrarán unas preguntas u otras. LA verdad es que ando un poco perdido con este tema y no se si usar arrays dobles o si existiera otra forma de hacerlo. Les agradecería si pudieran orientarme.

Muchas gracias
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 xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

cargar preguntas dinamicas en cada seccion

Publicado por xve (2100 intervenciones) el 26/02/2015 16:25:13
Hola Fernando, no me queda muy claro como quieres hacerlo... si únicamente quieres utilizar javascript, lo suyo creo que seria utilizar un JSON o array que contenga todas las preguntas, y luego mostrarlas de manera aleatoria.

Lo que no se, es como vas a guardar las respuestas de los usuarios... si no das mas detalle, intento ayudarte, ok?
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

cargar preguntas dinamicas en cada seccion

Publicado por Fernando (3 intervenciones) el 27/02/2015 11:25:27
Muchas gracias por tu ayuda. Tengo el siguiente código donde guardo las respuestas del usuario
El código html final es el siguiente:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE HTML>
<html>
 
<head>
  <title>Curso de Linux</title>
  <meta name="description" content="" />
  <meta name="keywords" content="proyecto, linux," />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&amp;v1" />
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />
  <link rel="stylesheet" type="text/css" href="../style/style.css" />
  <script languaje="JavaScript">
<!--

<!--Ocultar código 

function avisoreset() {
	if(confirm("¡ATENCIÓN!. Los datos del test se van a reiniciar.")) {
	document.cuestionario.reset();
	parent.location.reload();
	}
}


var pregunta1 = "0"; 
var pregunta2 = "0";
var pregunta3 = "0";
var pregunta4 = "0";
var pregunta5 = "0";
var pregunta6 = "0";
var pregunta7 = "0";
var pregunta8 = "0";
var pregunta9 = "0";
var pregunta10 = "0";

function respuesta1(valor) 
{pregunta1 = valor}; 
function respuesta2(valor) 
{pregunta2 = valor}; 
function respuesta3(valor) 
{pregunta3 = valor};
function respuesta4(valor) 
{pregunta4 = valor};
function respuesta5(valor) 
{pregunta5 = valor}; 
function respuesta6(valor) 
{pregunta6 = valor}; 
function respuesta7(valor) 
{pregunta7 = valor};
function respuesta8(valor) 
{pregunta8 = valor};
function respuesta9(valor) 
{pregunta9 = valor};
function respuesta10(valor) 
{pregunta10 = valor};    

// -->

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function ayudatest(){
window.open("ayuda_test.html" , "Ayuda" , "width=400,height=400,scrollbars=NO,resizable=NO,status=NO,directories=NO,top=300px,left=300px") 
}
//-->
</script>
</head>

<body onload="ayudatest()">
  <div id="main">
    <div id="header">
      <div id="logo">
          <h1>Ejemplo test</h1>
        <div class="slogan">Test Nivel<br></div>
      </div>


            <tbody>

  			<tr>        	
            <td><font size="-1" face="Arial, Helvetica, sans-serif" color="#0000ff"><b>

1. Defina al sistema operativo Linux. 

            </b>
            <blockquote>
            <input name="pregunta1" onclick="respuesta1('A')" type="radio" value="A">
            A. Es un sistema operativo de software libre.<br>
            <input name="pregunta1" onclick="respuesta1('B')" type="radio" value="B">
            B. Es un sistema operativo multitarea, multiusuario.<br>
            <input name="pregunta1" onclick="respuesta1('C')" type="radio" value="C">
            C. Basado en l&iacute;nea de comandos aunque psee interfaz gr&aacute;fica.<br>
             <input name="pregunta1" onclick="respuesta1('D')" type="radio" value="D">
            D. Desarrollado por Linus Torvalds.<br>
             <input name="pregunta1" onclick="respuesta1('E')" type="radio" value="E">
            E. Todas las anteriores.<br>

            </blockquote>
			</font>
            </td>
            </tr>

             <tr>        	
            <td><font size="-1" face="Arial, Helvetica, sans-serif" color="#0000ff"><b>			
			
2. ¿N&uacute;mero de usuarios que se pueden dar de alta en Linux?			
			</b>
            <blockquote>
			<input name="pregunta2" onclick="respuesta2('A')" type="radio" value="A">
            A. 1.<br>
            <input name="pregunta2" onclick="respuesta2('B')" type="radio" value="B">
            B. 0.<br>
            <input name="pregunta2" onclick="respuesta2('C')" type="radio" value="C">
            C. 5.<br>
            <input name="pregunta2" onclick="respuesta2('D')" type="radio" value="D">
            D. Ninguna de las aneriores.<br>

			</blockquote>
			</font>

			</td>
            </tr>

             <tr> 

    <td><font size="-1" face="Arial, Helvetica, sans-serif" color="#0000ff"><b>			

3. Compresores m&aacute;s importante que vienen integrados con el sistema operativo Linux.
			
			</b>
            <blockquote>
			<input name="pregunta3" onclick="respuesta3('A')" type="radio" value="A">
            A. tar.<br>
            <input name="pregunta3" onclick="respuesta3('B')" type="radio" value="B">
            B. zip.<br>
            <input name="pregunta3" onclick="respuesta3('C')" type="radio" value="C">
            C. jar.<br>
            <input name="pregunta3" onclick="respuesta3('D')" type="radio" value="D">
            D. Todos.<br>
             <input name="pregunta3" onclick="respuesta3('E')" type="radio" value="E">
            E. Ninguno.<br>

			</blockquote>
			</font>

			</td>
            </tr>

              <tr>        	
            <td><font size="-1" face="Arial, Helvetica, sans-serif" color="#0000ff"><b>          


      <tr> 
          <td bgcolor="#F9EBBF"> <font size="-1" face="Arial, Helvetica, sans-serif">    	
<script language="JavaScript">

<!--Ocultar código
function examinar() 
{ 
puntuacion=0; 
nocontesta=0; 
contestadas=0; 
puntosmaximos=0; 

if(pregunta1!= "0" )
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+2
  if(pregunta1 == "A") {puntuacion=puntuacion+0}
  if(pregunta1 == "B") {puntuacion=puntuacion+0}
  if(pregunta1 == "C") {puntuacion=puntuacion+0}
  if(pregunta1 == "D") {puntuacion=puntuacion+0}
  if(pregunta1 == "E") {puntuacion=puntuacion+2}
}
else {nocontesta=nocontesta+1} 

if(pregunta2!= "0" )
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+2
  if(pregunta2 == "A") {puntuacion=puntuacion+0}
  if(pregunta2 == "B") {puntuacion=puntuacion+0}
  if(pregunta2 == "C") {puntuacion=puntuacion+0}
  if(pregunta2 == "D") {puntuacion=puntuacion+2}
}
else {nocontesta=nocontesta+1} 

if(pregunta3!= "0" )
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+2
  if(pregunta3 == "A") {puntuacion=puntuacion+0}
  if(pregunta3 == "B") {puntuacion=puntuacion+0}
  if(pregunta3 == "C") {puntuacion=puntuacion+0}
  if(pregunta3 == "D") {puntuacion=puntuacion+0}
  if(pregunta2 == "E") {puntuacion=puntuacion+2}
}
else {nocontesta=nocontesta+1} 

if(pregunta4!= "0" )
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+2
  if(pregunta4 == "A") {puntuacion=puntuacion+0}
  if(pregunta4 == "B") {puntuacion=puntuacion+0}
  if(pregunta4 == "C") {puntuacion=puntuacion+2}
  if(pregunta4 == "D") {puntuacion=puntuacion+0}
}
else {nocontesta=nocontesta+1} 


if (puntosmaximos!=0) 
{indiceacierto=Math.round(100*(puntuacion/puntosmaximos))
} 
else{indiceacierto=0} 


if(indiceacierto==100) 
{
mensaje="SOBRESALIENTE. Tu nivel es excelente "} 
if(indiceacierto<100&&indiceacierto>=75) 
{
mensaje="NOTABLE. Has demostrado un buen nivel."} 
if(indiceacierto<75&&indiceacierto>=50)
{
mensaje="BIEN. Puedes defenderte, pero debes repasar algun tema."} 
if(indiceacierto<50&&indiceacierto>=25)
{
mensaje="SUFICIENTE. Debes empezar por el primer tema."} 
if(indiceacierto<25)
{
mensaje="INSUFICIENTE. Tienes que mejorar bastante."} 
if(contestadas==0)
{
mensaje="Debes contestar más preguntas"} 

}

// Fin de ocultar-->
</script>
          <br>
          </font><font size="-1"><center>
            <font face="Arial, Helvetica, sans-serif"><input name="submit" onclick="examinar()" type="button" value="Acabado">
            <input name="Reset" onclick="ayudatest()" type="button" value="Empezar de nuevo">
            <input name="solucion" onclick="alert('SOLUCIONES\n\n1:E \n2:D \n3:D \n4:C \n5:C \n6:C \n7:B \n8:D \n9:C \n10:B')" type="button" value="Soluciones">
          </font></center>
          </font>

  </td></tr></tbody></table> 
  <font size="-1"><center>
    <font face="Arial, Helvetica, sans-serif"><img alt="Barra de separación" border="0" height="1" src="" width="600"> 
  </font></center>
  <font face="Arial, Helvetica, sans-serif"><br>
  <!-- Comienzo de la barra de control -->
  </font></font> 
  <center></center></center>

      </div>
    <div id="footer">

    </div>
  </div>
</body>
</html>



Quiero hacer un rango de preguntas y si el alumno quiere reintentar el test me gustaria visualizar otras preguntas. Cualquier ayuda es poca porque desconozco JSON y no se si habría alguna forma más fácil con JavaScript.

Muchas gracias
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