Randomize Folien in reveal.js

Question

Ich habe eine reveal.js Präsentation mit etwa 300 Dias. Der Zweck dieser Präsentation besteht darin, Folien im "Kiosk-Modus" auf einem Monitor hinter einem Konferenzstand zu schleifen.

Um einen „Kiosk-Modus“ Ich habe zu erstellen:

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

Das funktioniert sehr gut, aber ich möchte die Dias randomisieren. Die Folien sind derzeit nur eine Liste von 300 <section> Tags im Indexdokument - sie werden nicht von irgendwoher extern gezogen. Derzeit ist random: true keine Konfigurationsoption in reveal.js.

Die Anzeigereihenfolge Fragmente kann mit data-fragment-index gesteuert werden. Kann man sowas mit Sektionen machen? Gibt es eine Möglichkeit, love.js auszufälschen, um meine Folien zu randomisieren?

Meine Vorliebe wäre es, sie jedes Mal neu zu mischen - das heißt, Dias 1-300 in zufälliger Reihenfolge zu zeigen, und dann mischen sie, und zeigen 1-300 wieder in einer anderen zufälligen Reihenfolge. Ich wäre auch glücklich, wenn ich für jeden Übergang nur auf eine zufällige Folie springen würde.

Answer 1

Ab reveal.js 3.3.0 nun in Helferfunktion für Randomisierung Diareihenfolge eine eingebaute ist.

Wenn Sie wollen, dass die Diareihenfolge zufällig zu sein von Anfang an die shuffle Konfigurationsoption verwenden:

Reveal.initialize({ shuffle: true }); 

Wenn Sie reveal.js manuell sagen, wann shuffle gibt es eine API-Methode:

Reveal.shuffle(); 

Um die Präsentation nach jeder abgeschlossenen Schleife zu mischen, müssen Sie Folienänderungen überwachen, um zu erkennen, wann wir zurück zur ersten Folie kreisen.

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

Während Reveal selbst diese Funktionalität nicht integriert hat, können Sie Event-Hooks einrichten, um Aktionen auszuführen, wenn alle Slides geladen sind, das bedeutet JQUERY TO THE RESCUE!

Sie Reveal kombinieren Veranstaltung mit einfachen javascript „Alle Folien bereit sind“ alle section s neu zu ordnen, hier ist eine einfache PoC:

Ersteinfuhr jQuery, ich tat dies, indem er direkt über dem Import für js Hinzufügen /reveal.min.js:

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

Dann ein Ereignis-Listener einrichten:

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 setze das richtig, nachdem du meine Reveal-Einstellungen und Abhängigkeiten deklariert hast, aber ich bin mir ziemlich sicher, dass du es überall hinstellen kannst.

Was dies tut ist wartet auf alle JavaScript, CSS, etc zu laden, manuell die Folien im DOM neu angeordnet, dann lässt Reveal starten seine Sache zu tun. Du solltest das mit all deinen anderen Einstellungen kombinieren können, da es nichts störendes tut, um sich zu offenbaren.

In Bezug auf den Abschnitt "shuffling sie jedes Mal um" der einfachste Weg, dies zu tun wäre, einen anderen Event-Listener zu verwenden, slidechanged. Sie könnten diesen Listener verwenden, um zu überprüfen, ob die letzte Folie gerade umgestellt wurde, und nach dem nächsten Aufruf von slidechanged können Sie die Seite einfach aktualisieren.

Sie können dies wie mit etwas tun:

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