Losuj slajdy w pliku reveal.js

Question

Mam prezentację reveal.js zawierającą około 300 slajdów. Celem tej prezentacji jest wyświetlenie slajdów w trybie "kiosku" na monitorze za kabiną konferencyjną.

Aby utworzyć "tryb kiosk" jakie otrzymał:

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

To działa bardzo dobrze, ale chciałbym losowy slajdy. Slajdy są obecnie tylko listą 300 <section> znaczników w dokumencie indeksu - nie są pobierane z dowolnego miejsca na zewnątrz. Obecnie random: true nie jest opcją konfiguracyjną w pliku reveal.js.

Kolejność wyświetlania fragmentów można kontrolować za pomocą data-fragment-index. Czy można zrobić coś takiego z sekcjami? Czy istnieje sposób na oszukanie pliku reveal.js w losowaniu moich slajdów?

Moim ulubionym wyborem jest potasowanie ich za każdym razem, tzn. Wyświetlanie slajdów 1-300 w losowej kolejności, a następnie potasowanie ich i pokazanie 1-300 ponownie w innej losowej kolejności. Byłbym też zadowolony z tego, że po prostu przeskakuję do losowego slajdu dla każdego przejścia.

Answer 1

Od reveal.js 3.3.0 jest teraz wbudowany w funkcji pomocnika na losowanie kolejności slajdów.

Jeśli chcesz kolejność slajdów być losowa od początku należy wybrać opcję shuffle config:

Reveal.initialize({ shuffle: true }); 

Jeśli chcesz ręcznie powiedzieć reveal.js gdy shuffle istnieje metoda API:

Reveal.shuffle(); 

Aby przetasować prezentację po każdej zakończonej pętli, musisz monitorować zmiany slajdów, aby wykryć, kiedy krążysz z powrotem do pierwszego slajdu.

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

Podczas gdy sama Reveal nie ma wbudowanej tej funkcjonalności, pozwala skonfigurować haki zdarzeń w celu wykonania akcji po załadowaniu wszystkich slajdów, co oznacza ŻAŁKOWOŚĆ DO RESCUE!

Można łączyć Reveal „All slajdy są gotowe” zdarzenie z prostego javascript, aby uporządkować wszystkie section s, oto prosty PoC:

Pierwszy import jQuery, zrobiłem to przez dodanie go bezpośrednio nad importu dla js /reveal.min.js:

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

Następnie założyć detektor zdarzeń:

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 popraw to po deklaracji ustawień i zależności Reveal, ale jestem pewien, że możesz umieścić to w dowolnym miejscu.

Co to jest, czeka na załadowanie wszystkich javascript, css, etc, ręcznie zmienia kolejność slajdów w DOM, a następnie pozwala Reveal zacząć robić to samo. Powinieneś być w stanie połączyć to ze wszystkimi innymi ustawieniami odsłonięcia, ponieważ nie robi nic destrukcyjnego, aby się ujawnić.

Jeśli chodzi o porcję "tasowania ich za każdym razem", najprostszym sposobem na to byłoby użycie innego detektora zdarzeń, slidechanged. Możesz użyć tego detektora do sprawdzenia, czy ostatni slajd właśnie został przeniesiony, po którym następnym razem zostanie wywołany slidechanged, możesz odświeżyć stronę.

Można to zrobić z czymś takim:

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