<?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>
