JavaScript - Detener y continuar ciclo por el usuario

   
Vista:

Detener y continuar ciclo por el usuario

Publicado por Jose (2 intervenciones) el 06/05/2015 15:53:41
hola, estoy haciendo un "cuestionario de preguntas" pero como son muchas preguntas quiero limitar el numero de resultados a 6 preguntas por pagina.
Hay alguna forma de hacerlo con un ciclo y pausar el ciclo? .....Osea que (cuando imprima 6 resultados y se detenga, y luego de que el usuario responder las 6 preguntas el ciclo imprima 6 preguntas mas y así sucesivamente?
Esta es la funcion que tengo hasta ahora en php pero he leído por allí que se puede hacer con javaScript?:
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
function imprimirPreguntas($tabla,$ci){
	conex();
	$sqlPreg="select * from pregunta";
	$rec=mysql_query($sqlPreg);
	$fin=0;
	while($row=mysql_fetch_array($rec))
	{
		$fin++;
				echo "<fieldset>";
				echo "<legend>";
				echo "	";
				echo "</legend>";
				echo "<strong>";
				echo $row['nomPreguntas'];
				echo "</strong>";
				$name=$row['idpregunta'];
				echo "</br>";
			for ($n=1; $n < 11; $n++)
				{
					echo "<input type='radio' name='$name' value='$n'>";
					echo $n;
				}
			echo "</fieldset>";
			echo "</br>";
		if ($fin>4)
		{
			break;
		}
	}
}
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

Detener y continuar ciclo por el usuario

Publicado por xve (1595 intervenciones) el 06/05/2015 19:59:33
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

Detener y continuar ciclo por el usuario

Publicado por Jose (2 intervenciones) el 06/05/2015 20:13:28
Quisiera saber como se puede hacer con JAVASCRIPT?
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

Detener y continuar ciclo por el usuario

Publicado por Maxi (5 intervenciones) el 16/05/2015 18:56:20
Te paso el código con comentarios explicando cómo funciona. Espero que te sea útil.

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
<?php
//esta function es solo para simular el resultado de la consulta mysql
function mysql_simulado () {
    $preguntas = array(
        array(
            'idpregunta'=>1,
            'nomPreguntas'=> 'Lorem ipsum dolor sit amet'
        ),
        array(
            'idpregunta'=>2,
            'nomPreguntas'=> 'Consectetur adipiscing elit'
        ),
        array(
            'idpregunta'=>3,
            'nomPreguntas'=> 'Suspendisse imperdiet in'
        ),
        array(
            'idpregunta'=>4,
            'nomPreguntas'=> 'Nulla malesuada vehicula'
        ),
        array(
            'idpregunta'=>5,
            'nomPreguntas'=> 'Nullam eget nisi at nulla viverra rhoncus'
        ),
        array(
            'idpregunta'=>6,
            'nomPreguntas'=> 'Curabitur mattis velit augue'
        ),
        array(
            'idpregunta'=>7,
            'nomPreguntas'=> 'Etiam at turpis aliquam'
        ),array(
            'idpregunta'=>8,
            'nomPreguntas'=> 'Nunc ac mi odio'
        ),array(
            'idpregunta'=>9,
            'nomPreguntas'=> 'Ut varius urna a tempor pharetra'
        ),
        array(
            'idpregunta'=>10,
            'nomPreguntas'=> 'Maecenas condimentum'
        ),
        array(
            'idpregunta'=>11,
            'nomPreguntas'=> 'Morbi sodales ex a mi tempor'
        ),
        array(
            'idpregunta'=>12,
            'nomPreguntas'=> 'Etiam purus turpis'
        )
    );
    return $preguntas;
}
 
//imprimirPreguntas recibe como parámetro un entero que indica cuantas preguntas se van a mostrar por página
function imprimirPreguntas($cantidadPorPagina) {
    $rec = mysql_simulado();
    $pagina = 1;
    $html = '';
    $i=1;
    foreach ($rec as $row) {
        //las clases páginas y paginaN nos van a permitir identificar las páginas con javascript para poder trabajar con ellas
        $html .= '<fieldset class="paginas pagina'.$pagina.'">
                    <legend> </legend>
                    <strong>'.$row['nomPreguntas'].'</strong>
        ';
        $html .= '<br>';
        $name = $row['idpregunta'];
        for ($n = 1; $n < 11; $n++) {
            $html .= '<input type="radio" name="'.$name.'" value="'.$n.'">';
        }
        $html .= "</fieldset>";
 
        if ($i%$cantidadPorPagina == 0) {
            $pagina++;
        }
        $i++;
    }
    return $html;
}
?>
 
<!DOCTYPE html>
<html>
<head>
    <title>Paginar pregntas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .paginas {display: none} /*oculto todas las páginas, más tarde voy a mostrar sólo la primera desde javascript*/
        fieldset {margin-bottom: 10px}
    </style>
    <script>
        var cantidadPorPagina = 4; //este número tiene que coincidir con el que se paso a la función de php imprimirPreguntas
        var paginaActual = 1;
        var totalPaginas;
        window.onload = function () {
            //cuento el total de páginas
            totalPaginas = Math.ceil(document.getElementsByClassName('paginas').length / cantidadPorPagina);
            //muestro la página actual (cuando se carga el documento es la página 1)
            mostrarPagina(paginaActual);
            //asignno los listeners para los botones anterior y siguiente
            var anterior = document.getElementById('prev');
            var siguiente = document.getElementById('next');
            anterior.onclick = function () {
                mostrarPagina(paginaActual-1);
            }
            siguiente.onclick = function () {
                mostrarPagina(paginaActual+1);
            }
        }
 
        //la función mostrarPagina recibe como parámetro un número entero que le indica que página mostrar
        function mostrarPagina (n) {
            //asigno el valor pasado por parámetro a la variable glogal paginaActual
            paginaActual = n;
            //oculto todas las paginas
            var paginas = document.getElementsByClassName('paginas');
            for (var i=0, l=paginas.length; i<l; i++) {
                paginas[i].style.display = 'none';
            }
            //muestro sólo la pagina cuya clase siga el patrón pagina+n, siendo n la pagina a mostrar
            paginas = document.getElementsByClassName('pagina'+n);
            for (var i=0, l=paginas.length; i<l; i++) {
                paginas[i].style.display = 'block';
            }
 
            //oculto el botón anterior si estoy en la página 1
            if (paginaActual == 1) {
                document.getElementById('prev').style.display = 'none';
            } else { //muestro el botón anterior si estoy en cualquier páigna que no sea la 1
                document.getElementById('prev').style.display = 'inline';
            }
            //oculto el botón siguiente si estoy en la última página
            if (paginaActual == totalPaginas) {
                document.getElementById('next').style.display = 'none';
            } else { //muestro el botón siguiente si estoy en cualquier páigna que no sea la última
                document.getElementById('next').style.display = 'inline';
            }
        }
 
    </script>
</head>
<body>
    <?php echo(imprimirPreguntas(4)); ?>
    <a href="#" id="prev">Anterior</a>
    <a href="#" id="next">Siguiente</a>
</body>
</html>
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