Ridiculously Simple HTML Presenter Notes

Every now and then I give a presentation. It might be at my job, it might be for a client, it might even be at a meetup or conference. Since most of my talks are about the web and its various states, I like to give my talks using a browser-based presentation platform. Not only does it look good, it usually showcases capabilities of the web that I am talking about. (and let’s not forget it’s system-independent and I can access it from just about anywhere.)

For my online-presentation-endeavours I use reveal.js. It’s a simple, no-nonsense platform that scales very well to small screens and has some nice transitions. The main bonus is that it’s essentially just an HTML file that gets made into a presentation by some javascript. Now reveal.js has a node.js connector built right into it so you can get your presenter-notes on a second computer or screen, which is awesome. My only problem with the node.js setup is that most of the time, I don’t have the time or resources to get the presenter notes running on a second screen, so I made a small addition to my reveal.js code with what I like to call ‘web-dev presenter notes’.

It’s actually pretty simple: web developers spend most of the time staring at the console of the browser to see if there are any errors. Since the console is there anyway, and it’s detachable from the main window, why not use it? Here’s how:
First you use the .notes paragraph in every slide that you would normally use for node.js:

    ... your normal slide code goes here as usual ...
    <p class="notes">and the notes go here...</p>

Now all you need to do is add a listener to the reveal.js ‘slidechanged’ hook that updates the console.log:

Reveal.addEventListener( 'slidechanged', function( event ) {
    console.log("Slide: "+(event.indexh+1));
    console.log($(".slides section:nth-child("+(event.indexh+1)+") p.notes").text());
} );

Which will result in your console showing this:

Slide: 2
[...the notes you put in the slide...]

All presenter notes will be listed in order so you can even see the notes for the previous slides if you want. Now there is a lot of stuff you can do with this method if you want to build upon it, like showing the total number of slides or showing the title of the next slide so you your talk can lead up to it. I’m fine with my own set-up right now, but you can go as crazy as you like.


image credit

Header image: Reid Beels on Flickr