Randomize slides in show.js

Question

I have a reveal.js presentation with approximately 300 slides. The purpose of this presentation is the cyclic kiosk slides on the monitor behind the conference booth.

To create a kiosk mode, I got:

 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 }); 

This works very well, but I would like to randomize the slides. Currently, slides are a list of 300 <section> tags in an index document - they are not drawn from any external source. Currently random: true not a configuration parameter in show.js.

The order in which fragments are displayed can be controlled using data-fragment-index . Is it possible to do something similar with partitions? Is there a way to trick show.js into randomizing my slides?

My preference would be to shuffle them each time, i.e. show 1-300 slides in random order, then shuffle them and show 1-300 again in another random order. I would also be happy to just jump onto a random slide for each transition.

Answer 1

Starting with open.js 3.3.0, there is now a built-in helper function for randomizing slide order.

If you want the slide order to be random from the start, use the shuffle config option:

 Reveal.initialize({ shuffle: true }); 

If you want to manually tell display.js when to shuffle the API method there:

 Reveal.shuffle(); 

To shuffle the presentation after each cycle, you will need to track the changes in the slides to detect when we get back to the first slide.

 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

While Reveal itself is not built into this functionality, it allows you to configure event hooks to perform actions when all slides are loaded, which means JQUERY TO THE RESCUE!

You can combine the Reveal event "All slides are ready" with simple javascript to reorder all section s, here's a simple PoC:

Import jQuery first, I did this by adding it directly above the import for js / discovery.min.js:

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

Then configure the event listener:

 Reveal.addEventListener('ready', function(event) { // Declare a function to randomize a jQuery list of elements // see http://stackoverflow.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(); }); 

I put this right after declaring Reveal settings and dependencies, but I'm sure you can put them anywhere.

What this does is wait for all javascript, css, etc. to load, manually reorder the slides in the DOM, and then let Reveal start doing its job. You should be able to combine this with all of your other placement settings, as it does nothing destructive to prove itself.

As for the “shuffling them every time” part, the easiest way would be to use another event listener, slidechanged . You can use this listener to check if there was only the last transition with the previous slide, after which you can simply refresh the page with the next slidechanged call.

You can do this with something like:

 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; } });