javascript - Aleatorizar diapositivas en reveal.js

Question

Tengo una presentación de reveal.js con aproximadamente 300 diapositivas. El propósito de esta presentación es realizar un ciclo de diapositivas en "modo kiosco" en un monitor detrás de una cabina de conferencia.

Para crear un "modo kiosco" tengo:

Reveal.initialize({
    controls: false,    // hide the control arrows
    progress: false,    // hide the progress bar
    history: false,     // don''t add each slide to browser history
    loop: true,         // loop back to the beginning after last slide
    transition: fade,   // fade between slides
    autoSlide: 5000,    // advance automatically after 5000 ms
});

Esto funciona muy bien, pero me gustaría aleatorizar las diapositivas. Las diapositivas son actualmente solo una lista de 300 etiquetas <section> en el documento de índice, no se están extrayendo de ningún lugar externo. Actualmente random: true no es una opción de configuración en reveal.js.

El orden de visualización de los fragmentos se puede controlar con el data-fragment-index . ¿Es posible hacer algo así con secciones? ¿Hay alguna manera de engañar a revel.js para que aleatorice mis diapositivas?

Mi preferencia sería mezclarlos cada vez, es decir, mostrar las diapositivas 1-300 en orden aleatorio, y luego mezclarlas, y mostrar 1-300 nuevamente en un orden aleatorio diferente. Sin embargo, también estaría feliz con solo saltar a una diapositiva aleatoria para cada transición.

Answer 1

A partir de reveal.js 3.3.0 ahora hay una función auxiliar incorporada para aleatorizar el orden de las diapositivas.

Si desea que el orden de las diapositivas sea aleatorio desde el principio, use la opción de configuración shuffle :

Reveal.initialize({ shuffle: true });

Si quieres decirle a reveal.js manualmente cuándo barajar, hay un método API:

Reveal.shuffle();

Para mezclar la presentación después de cada ciclo final, deberá monitorear los cambios de diapositivas para detectar cuándo regresamos a la primera diapositiva.

Reveal.addEventListener( ''slidechanged'', function( event ) {
    if( Reveal.isFirstSlide() ) {
        // Randomize the order again
        Reveal.shuffle();

        // Navigate to the first slide according to the new order
        Reveal.slide( 0, 0 );
    }
} );

Answer 2

Si bien Reveal no tiene esta funcionalidad incorporada, le permite configurar enlaces de eventos para realizar acciones cuando se cargan todas las diapositivas, ¡esto significa JQUERY TO THE RESCUE!

Puede combinar el evento "Todas las diapositivas están listas" de Reveal con un simple javascript para reordenar todas las section , aquí hay un simple PoC:

Primero importe jQuery, lo hice agregándolo directamente encima de la importación para js / reveal.min.js:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

A continuación, configure un detector de eventos:

Reveal.addEventListener(''ready'', function(event) {
    // Declare a function to randomize a jQuery list of elements
    // see http://.com/a/11766418/472021 for details           
    $.fn.randomize = function(selector){
        (selector ? this.find(selector) : this).parent().each(function(){
            $(this).children(selector).sort(function(){
                return Math.random() - 0.5;
            }).detach().appendTo(this);
        });

        return this;
    };

    // call our new method on all sections inside of the main slides element.
    $(".slides > section").randomize();
});

Puse esto justo después de declarar mis configuraciones y dependencias de Reveal, pero estoy bastante seguro de que puedes ponerlo en cualquier lugar.

Lo que esto hace es esperar a que se carguen todos los javascript, css, etc., reordenar manualmente las diapositivas en el DOM, luego dejar que Reveal comience a hacer su trabajo. Debería poder combinar esto con todas las demás configuraciones de revelación, ya que no hace nada disruptivo para revelarse.

Con respecto a la parte de "barajarlos cada vez", la forma más fácil de hacerlo sería usar otro detector de eventos, slidechanged . Puede utilizar este escucha para comprobar si la última diapositiva acaba de pasar a la transición, después de lo cual se llama a slidechanged la próxima vez que simplemente puede actualizar la página.

Puedes hacer esto con algo como:

var wasLastPageHit = false;
Reveal.addEventListener(''slidechanged'', function(event) {           
    if (wasLastPageHit) {
        window.location.reload();
    }       

    if($(event.currentSlide).is(":last-child")) {
        // The newly opened slide is the last one, set up a marker
        // so the next time this method is called we can refresh.
        wasLastPageHit = true;
    }
});