Tag Archives: reveal.js

Useful reveal.js plugins

The list is somewhat hidden but here is the link https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware
My preference is

dependencies: [
{ src: 'library/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'library/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'library/reveal.js/plugin/zoom-js/zoom.js', async: true },
{ src: "library/speech.js",
callback: function() {
RevealSpeech.configure({
nextKeyword: 'nextslide', 
prevKeyword: 'previousslide',
lastKeyword: 'lastslide',
firstKeyword: 'firstslide',
debug: true,
lang: 'en-GB' // default de-DE
});
}

plus zenpen in an iframe.

The slide builders at the plugin page are quite useless except for slides.com which is, however, too expensive.
I therefore design everything in Keynote, export as jpg and loop over all jpgs to write the section tags.

The best option would certainly be if Apple would directly support reveal.js and not some fancy own HTML formats

slide/assets/7D643FA7-9A1F-45A5-A30F-7828735F3C35/7D643FA7-9A1F-45A5-A30F-7828735F3C35.json

Or is anyone willing to write a converter?

Print your reveal.js presentation

I like the reveal.js framework for slide presentation, while I have even written a remote control for it.
Reveal allows branching of your slide presentation, has some zoom capability and can include external websites with interactive and dynamic plots. Best of all, the display is really full-frame when displayed with Chrome.
Maybe it is important to note, that I still produce slides in Keynote but export them into a directory that serves as a repository for building the final reveal presentation.

<div class="reveal">
  <div class="slides">
<?
$files = glob($dir . '/*');
for ($i = 1; $i<= count($files); $i++) {
  echo '<section data-background-image="' . $i . '"/><span></span></section>';
}
?>
  </div>
</div>

Printing the final presentation isn’t straightforward as the built-in mechanism did not work for me with dynamic slides although they already exist:

Reveal.addEventListener( 'slidechanged', function(e) {
  createChart();
});

The only solution that worked for me is decktape which produces a valid PDF

brew install node
npm install -g decktape
decktape -s 1280x720 reveal http://myserver/reveal.php reveal.pdf

Remote control your reveal.js presentation

Add this somewhere at the end of your presentation.php

function sync() {
$.ajax({url: "position", success: function(e){
      Reveal.slide(e);
    }
  });
}
if (!window.location.search.match( /master/gi ) ) {
	setInterval(sync,1000);
    Reveal.configure({
  		keyboard: {
    	13: null,
    	23: null,
        32: null,
        37: null,
        38: null,
        39: null,
        40: null,
        68: null
  		}
	});
}
Reveal.addEventListener( 'slidechanged', function(e) {
	 $.ajax({
	 	url: "write.php",
	 	type: "get",
	 	data: {"k":e.indexh}	 	
    });
});

write.php

$fp = fopen('position', 'w+');
$k=$get["k"];
fwrite($fp, $k);
fclose($fp);

presentation.php?master will control the presentation. A simple presentation.php even at a dozen locations will show it.

Live votes during presentation (reveal.js)

I have revised now the setup of my “live vote” presentation as the bespoke.js framework had several glitches where plugins did not work correctly. I am using now reveal.js that allows also to embed external pages (like zenpen), zoom effects and slide overview in a nice graphic layout.

The graphics engine was also replaced. d3.js is an extremely versatile but it takes hours for doing minor changes. So I switched to Kendo UI charts that are much easier to program, making some fancy live statistics :-)

Individual response times in seconds from 15 students (anonymized names on the right). Students can respond to a question as long as the question is on display. The stacked bar shows the time being faster than the slowest responder with the first to last question from right to left end of the bar. The individual  in the middle was extremely fast following my initial explanation. The two individuals at the bottom responded only to the same two questions probably talking to each other. Individuals were identified by their their mac address while all data had to be corrected for double entries.

I also thought to setup a socket.io server to push new pages to the clients (currently they initiate their own refresh) but at the end I found it too time consuming as spending time on  content is being more important. Right now I am sending out an ajax request to store the actual presentation slide for the clients.

var i = Reveal.getCurrentSlide().children[0].id;
Reveal.addEventListener( 'slidechanged', function( event ) {
  i = $("span").eq(event.indexh).attr("id");
  $.ajax({
    url: "server.php",
    type: "GET",
    data: {"k":event.indexh}
  );
  return i;
});