Added presentation slide-show framework

Just used ma.md as slides, so no real content.

presentation/template/agcg-pdf.css

@@ -0,0 +1,16 @@
+/* MARIO */
+.reveal .comment {
+	position: absolute;
+	margin: auto;
+    right: auto;
+    bottom: auto;
+    width: auto;
+    height: auto;
+}
+
+.reveal footer {
+	position: absolute;
+	display: block;
+	overflow: visible;
+	margin: auto;
+}

presentation/template/agcg.css

@@ -0,0 +1,725 @@
+/**
+ * White theme for reveal.js. This is the opposite of the 'black' theme.
+ *
+ * By Hakim El Hattab, http://hakim.se
+ */
+
+
+@import url(lato/lato.css);
+
+
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+
+body {
+  background: #ffffff;
+  background-color: #ffffff;
+}
+
+.reveal {
+  font-family: "Lato", sans-serif;
+  font-size: 36px;
+  font-weight: normal;
+  color: #222; }
+
+
+::selection {
+  color: #fff;
+  background: #98bdef;
+  text-shadow: none; }
+
+.reveal .slides > section,
+.reveal .slides > section > section {
+  line-height: 1.3;
+  font-weight: inherit;
+}
+
+
+/*********************************************
+ * MARIO: ALIGNMENT & COLUMNS
+ *********************************************/
+
+.reveal .float-left {
+    float: left;
+}
+
+.reveal .float-right {
+    float: right;
+}
+
+.reveal .left {
+    text-align: left;
+}
+
+.reveal .center {
+    text-align: center;
+}
+
+.reveal .right {
+    text-align: right;
+}
+
+.reveal .small {
+    font-size: 0.7em;
+}
+
+.reveal .tiny {
+    font-size: 0.6em;
+}
+
+.reveal .tt {
+    font-family: monospace;
+}
+
+.reveal .boxed {
+    border: 1px solid black;
+    padding: 10px;
+}
+
+.reveal .w10 { width:10%; }
+.reveal .w20 { width:20%; }
+.reveal .w30 { width:30%; }
+.reveal .w40 { width:40%; }
+.reveal .w50 { width:50%; }
+.reveal .w60 { width:60%; }
+.reveal .w70 { width:70%; }
+.reveal .w80 { width:80%; }
+.reveal .w90 { width:90%; }
+
+.reveal .col10 { float:left; width:10%; }
+.reveal .col20 { float:left; width:20%; }
+.reveal .col30 { float:left; width:30%; }
+.reveal .col40 { float:left; width:40%; }
+.reveal .col50 { float:left; width:50%; }
+.reveal .col60 { float:left; width:60%; }
+.reveal .col70 { float:left; width:70%; }
+.reveal .col80 { float:left; width:80%; }
+.reveal .col90 { float:left; width:90%; }
+
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: 0 0 20px 0;
+  font-weight: bold;
+  line-height: 1.2;
+  letter-spacing: normal;
+  text-shadow: none;
+  word-wrap: break-word;
+  text-align: center;
+}
+
+.reveal h1 {
+    margin-bottom: 40px;
+    font-size: 1.50em;
+}
+
+.reveal h2 {
+  font-size: 1.3em; }
+
+.reveal h3 {
+  font-size: 1.1em; }
+
+.reveal h4 {
+  font-size: 1em; }
+
+.reveal h1 {
+  text-shadow: none; }
+
+/*********************************************
+ * OTHER
+ *********************************************/
+.reveal p {
+  margin: 20px 0;
+  line-height: 1.3; }
+
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+  max-width: 95%;
+  max-height: 95%; }
+
+.reveal strong {
+    font-weight: bold;
+}
+
+.reveal .boldblue {
+    font-weight: bold;
+	color: #2a9ddf;
+}
+
+.reveal b {
+    font-weight: bold; }
+
+.reveal em {
+  font-style: italic; }
+
+.reveal del {
+	color: red;
+}
+
+.reveal ol,
+.reveal dl,
+.reveal ul {
+  display: inline-block;
+  text-align: left;
+  margin-bottom: 1em;
+}
+
+.reveal ol li,
+.reveal dl li,
+.reveal ul li {
+    margin-bottom: 0.5em;
+    margin-left: 40px;
+}
+
+.reveal ol {
+  list-style-type: decimal; }
+
+.reveal ul {
+  list-style-type: disc; }
+
+.reveal ul ul,
+.reveal ol ul {
+    list-style-type: circle;
+}
+
+.reveal ol ol {
+    list-style-type: lower-roman;
+}
+
+.reveal ul ul ul,
+.reveal ul ul ol,
+.reveal ul ol ul,
+.reveal ul ol ol,
+.reveal ol ul ul,
+.reveal ol ul ol,
+.reveal ol ol ul,
+.reveal ol ol ol {
+    font-size: 0.9em;
+}
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+    display:     block;
+    margin-top:  0.3em;
+    font-size:   0.8em;
+    margin-left: 10px; 
+}
+
+.reveal dt {
+  font-weight: bold; }
+
+.reveal dd {
+  margin-left: 40px; }
+
+.reveal q,
+.reveal blockquote {
+  quotes: none; }
+
+.reveal blockquote {
+  display: block;
+  text-align: left;
+  font-size: 0.9em;
+  position: relative;
+  width: 70%;
+  margin: 20px auto;
+  padding: 0px 15px;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
+  display: inline-block; }
+
+.reveal q {
+  font-style: italic; }
+
+
+/*********************************************
+ * CODE
+ *********************************************/
+
+/* box around block of code */
+.reveal pre {
+  display: block;
+  position: relative;
+  width: 100%;
+  margin: 10px auto;
+  text-align: center;
+}
+
+/* inline code */
+.reveal code {
+    display: inline;
+    padding: 0.2em;
+    text-align: left;
+    font-size: 85%;
+    font-family: monospace;
+    word-wrap: normal;
+    background-color: #f7f7f7;
+}
+
+/* block of code (has to override above inline code)*/
+.reveal pre code {
+    display: block;
+    margin: 10px;
+    text-align: left;
+    font-size: 0.5em;
+    font-family: monospace;
+    line-height: 1.45em;
+    padding:  16px;
+    overflow: auto;
+    max-height: 550px;
+    word-wrap: normal;
+    background-color: #f7f7f7;
+}
+
+.reveal pre code.small {
+    font-size: 0.4em;
+}
+
+
+/*********************************************
+ * TABLES
+ *********************************************/
+
+.reveal table {
+    margin: auto;
+    border-collapse: collapse;
+    border-spacing: 2px;
+    //border-top:    2px solid black;
+    //border-bottom: 2px solid black;
+    text-align: center;
+}
+
+.reveal table th {
+  font-weight: bold; }
+
+.reveal table th {
+    border-bottom: 1px solid;
+}
+
+.reveal table th,
+.reveal table td {
+  text-align: left;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+}
+
+.reveal table th[align="center"],
+.reveal table td[align="center"] {
+  text-align: center; }
+
+.reveal table th[align="right"],
+.reveal table td[align="right"] {
+  text-align: right; }
+
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
+  border-bottom: none; }
+
+.reveal sup {
+    vertical-align: super;
+    font-size: 0.7em;
+}
+
+.reveal sub {
+    vertical-align: sub;
+    font-size: 0.7em;
+}
+
+.reveal small {
+  display: inline-block;
+  font-size: 0.6em;
+  line-height: 1.2em;
+  vertical-align: top; }
+
+.reveal small * {
+  vertical-align: top; }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: #2a76dd;
+  text-decoration: none;
+  -webkit-transition: color .15s ease;
+  -moz-transition: color .15s ease;
+  transition: color .15s ease; }
+
+.reveal a:hover {
+  color: #6ca0e8;
+  text-shadow: none;
+  border: none; }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: #1a53a1; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+/*
+.reveal section img {
+  margin: 15px 0px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 4px solid #222;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+*/
+
+.reveal section img {
+  /*margin: 15px 0px;*/
+  margin-bottom: 15px;
+  border: 0;
+  box-shadow: none; }
+
+.reveal section img.plain {
+  border: 0;
+  box-shadow: none; }
+
+.reveal a img {
+  -webkit-transition: all .15s linear;
+  -moz-transition: all .15s linear;
+  transition: all .15s linear; }
+
+.reveal a:hover img {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: #2a76dd;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+
+.reveal figure {
+    display: inline-block;
+//    vertical-align: top;
+}
+
+.reveal figure img {
+  margin: 5px 0px 0px 0px;
+  border: 0;
+  box-shadow: none;
+}
+
+.reveal figure figcaption {
+  margin: 0px;
+  line-height: 1.2;
+  font-style: italic; 
+  font-size: 0.6em;
+  text-align: center;
+}
+
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls .navigate-left,
+.reveal .controls .navigate-left.enabled {
+  border-right-color: #2a76dd; }
+
+.reveal .controls .navigate-right,
+.reveal .controls .navigate-right.enabled {
+  border-left-color: #2a76dd; }
+
+.reveal .controls .navigate-up,
+.reveal .controls .navigate-up.enabled {
+  border-bottom-color: #2a76dd; }
+
+.reveal .controls .navigate-down,
+.reveal .controls .navigate-down.enabled {
+  border-top-color: #2a76dd; }
+
+.reveal .controls .navigate-left.enabled:hover {
+  border-right-color: #6ca0e8; }
+
+.reveal .controls .navigate-right.enabled:hover {
+  border-left-color: #6ca0e8; }
+
+.reveal .controls .navigate-up.enabled:hover {
+  border-bottom-color: #6ca0e8; }
+
+.reveal .controls .navigate-down.enabled:hover {
+  border-top-color: #6ca0e8; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+  background: #2a9ddf;
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+
+
+/*********************************************
+ * MARIO: TITLE SLIDE
+ *********************************************/
+
+.white-on-blue {
+    color: #ffffff;
+    background-color: #2a9ddf;
+}
+
+.reveal .title {
+    margin:      30px 0 0 0;
+    font-weight: bold;
+    font-style:  normal;
+    font-size:   1.5em;
+    text-align:  center;
+}
+
+.reveal .subtitle {
+    margin:      10px 0 0 0;
+    font-weight: normal;
+    font-style:  italic;
+    font-size:   1.3em; 
+    text-align:  center;
+}
+
+.reveal .author {
+    margin:      50px 0 0 0;
+    font-weight: normal;
+    font-style:  normal;
+    font-size:   1.0em; 
+    text-align:  center;
+}
+
+.reveal .affiliation {
+    margin:      10px 0 30px 0;
+    font-weight: normal;
+    font-style:  normal;
+    font-size:   1.0em; 
+    text-align:  center;
+}
+
+
+/*********************************************
+ * MARIO: SECTIONS
+ *********************************************/
+
+.reveal .section-title h1 {
+    /* white on blue */
+    color: #ffffff;
+    background-color: #2a9ddf;
+
+    /* large top margin -> vertical centering */
+    margin:      100px auto;
+    padding:      50px;
+    
+    /* large bold font */
+    font-weight: bold;
+    font-style:  normal;
+    font-size:   1.5em; 
+}
+
+
+/*********************************************
+ * MARIO: FRAGMENT ANIMATION
+ *********************************************/
+
+.fragment.current-visible.visible:not(.current-fragment) {
+    display: none;
+    height:0px;
+    line-height: 0px;
+    font-size: 0px;
+}
+
+
+/*********************************************
+ * MARIO: WER WIRD MILLIONAER
+ *********************************************/
+
+.reveal .slides > section {
+  counter-reset: wwm-counter;
+}
+
+.reveal .answer {
+    display:  inline-block;
+    position: relative;
+    width:    400px;
+    text-align: left;
+    margin:   20px;
+    border:   3px solid #2a9ddf;
+    border-radius: 20px;
+    padding:  20px;
+    font-weight: normal;
+    color:    black;
+}
+
+.reveal .answer:before {
+  content: counter(wwm-counter, upper-latin) ": ";
+  counter-increment: wwm-counter;
+  margin-right: 0.5em;
+  font-weight: bold;
+}
+
+.reveal .tooltip {
+    visibility: hidden;
+    max-width: 390px;
+    top:        100%;
+    background-color: grey;
+    color:      #ffffff;
+    text-align: center;
+    padding:    5px;
+    border-radius: 6px;    
+    position:   absolute;
+    z-index: 1;
+    font-size: 0.5em;
+}
+
+.reveal .show-wrong {
+    background-color: #ffaaaa;
+    border: 3px solid red;
+}
+
+.reveal .show-right {
+    background-color: #aaffaa;
+    border: 3px solid green;
+}
+
+.reveal .show-wrong:hover .tooltip, .reveal .show-right:hover .tooltip {
+    visibility: visible;
+}
+
+
+
+/*********************************************
+ * MARIO: COMMENT BUBBLES
+ *********************************************/
+
+.reveal .bubble {
+    color: #ffffff;
+    background-color: #2a9ddf;
+    padding:10px;
+    border-radius:5px;
+    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
+}
+
+.reveal .comment {
+    color: #ffffff;
+    background-color: #2a9ddf;
+    position:absolute;
+    padding:10px;
+    border-radius:5px;
+    font-size: 0.5em;
+    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
+}
+
+.reveal .comment-left {
+    color: #ffffff;
+    background-color: #2a9ddf;
+    position:absolute;
+    padding:5px;
+    font-size: 80%;
+    border-radius:20px 20px 0px 20px;
+    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
+}
+
+.reveal .comment-right {
+    color: #ffffff;
+    background-color: #2a9ddf;
+    position:absolute;
+    padding:5px;
+    font-size: 80%;
+    border-radius:20px 20px 20px 0px;
+    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
+}
+
+.reveal .comment-big {
+    color: #ffffff;
+    background-color: #2a9ddf;
+    padding:10px;
+    border-radius:5px;
+    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.35);
+}
+
+
+/*********************************************
+ * MARIO: FOOTER COMMENTS
+ *********************************************/
+
+.reveal footer {
+    position: absolute;
+    text-align: center;
+	margin: auto;
+    padding: 5px;
+    font-size: 0.5em;
+    left:  200px;
+    width: 624px;
+    top:   750px;
+}
+
+/*********************************************
+ * MARIO: GENERIC HIGHLIGHT
+ *********************************************/
+
+.reveal .highlight {
+    background-color: #fdfbaa;
+}
+
+/*********************************************
+ * MARIO: margin: auto
+ *********************************************/
+
+.reveal .automargin {
+    margin: 10px auto;
+}
+
+/*********************************************
+ * MARIO: ADD SHADOWS (e.g. to images)
+ *********************************************/
+
+.reveal .shadow {
+    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
+}
+
+.reveal table p {
+    margin: 0px;
+}
+
+.reveal .neg80 {
+    margin-top: -80px;
+}
+
+.reveal .neg60 {
+    margin-top: -60px;
+}
+
+/* class for aligning divs in a row */
+.reveal .ilb {
+    display: inline-block;
+    vertical-align: top;
+}
+
+/*********************************************
+ * MARIO: MathJax equation should get some
+   vertical distance to text before them
+ *********************************************/
+
+.reveal .MathJax_Display {
+    margin-top: 0.5em;
+}
+
+
+/*********************************************
+ * Stefan: small helper class for doing
+ * a clear: both; after columns.
+ *********************************************/
+
+.reveal .clearFloat {
+  clear:both;
+}

presentation/template/lato/lato.css

@@ -0,0 +1,39 @@
+/* Webfont: LatoLatin-Bold */
+@font-face {
+    font-family: 'Lato';
+    src: url('LatoLatin-Bold.eot'); /* IE9 Compat Modes */
+    src: url('LatoLatin-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('LatoLatin-Bold.woff2') format('woff2'), /* Modern Browsers */
+         url('LatoLatin-Bold.woff') format('woff'), /* Modern Browsers */
+         url('LatoLatin-Bold.ttf') format('truetype');
+    font-style: normal;
+    font-weight: bold;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Italic */
+@font-face {
+    font-family: 'Lato';
+    src: url('LatoLatin-Italic.eot'); /* IE9 Compat Modes */
+    src: url('LatoLatin-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('LatoLatin-Italic.woff2') format('woff2'), /* Modern Browsers */
+         url('LatoLatin-Italic.woff') format('woff'), /* Modern Browsers */
+         url('LatoLatin-Italic.ttf') format('truetype');
+    font-style: italic;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+
+/* Webfont: LatoLatin-Regular */
+@font-face {
+    font-family: 'Lato';
+    src: url('LatoLatin-Regular.eot'); /* IE9 Compat Modes */
+    src: url('LatoLatin-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+         url('LatoLatin-Regular.woff2') format('woff2'), /* Modern Browsers */
+         url('LatoLatin-Regular.woff') format('woff'), /* Modern Browsers */
+         url('LatoLatin-Regular.ttf') format('truetype');
+    font-style: normal;
+    font-weight: normal;
+    text-rendering: optimizeLegibility;
+}
+

presentation/template/my-chalkboard/README.md

@@ -0,0 +1,123 @@
+# Chalkboard
+
+With this plugin you can add a chalkboard to reveal.js. The plugin provides two possibilities to include handwritten notes to your presentation:
+
+- you can make notes directly on the slides, e.g. to comment on certain aspects,
+- you can open a chalkboard on which you can make notes.
+
+The main use case in mind when implementing the plugin is classroom usage in which you may want to explain some course content and quickly need to make some notes. 
+
+The plugin records all drawings made so that they can be play backed using the ```autoSlide``` feature or the ```audio-slideshow``` plugin. 
+
+[Check out the live demo](http://courses.telematique.eu/reveal.js-plugins/chalkboard-demo.html)
+
+The chalkboard effect is based on [Chalkboard](https://github.com/mmoustafa/Chalkboard) by Mohamed Moustafa.
+
+## Installation
+
+Copy the file ```chalkboard.js``` and the  ```img``` directory into the plugin folder of your reveal.js presentation, i.e. ```plugin/chalkboard```.
+
+Add the plugins to the dependencies in your presentation as shown below. 
+
+```javascript
+Reveal.initialize({
+	// ...
+	chalkboard: { 
+		// optionally load pre-recorded chalkboard drawing from file
+		src: "chalkboard.json",
+	},
+	dependencies: [
+		// ... 
+		{ src: 'plugin/chalkboard/chalkboard.js' },
+		// ... 
+	],
+	keyboard: {
+	    67: function() { RevealChalkboard.toggleNotesCanvas() },	// toggle notes canvas when 'c' is pressed
+	    66: function() { RevealChalkboard.toggleChalkboard() },	// toggle chalkboard when 'b' is pressed
+	    46: function() { RevealChalkboard.clear() },	// clear chalkboard when 'DEL' is pressed
+	     8: function() { RevealChalkboard.reset() },	// reset chalkboard data on current slide when 'BACKSPACE' is pressed
+	    68: function() { RevealChalkboard.download() },	// downlad recorded chalkboard drawing when 'd' is pressed
+	},
+	// ...
+
+});
+```
+In order to include buttons for opening and closing the notes canvas or the chalkboard you should make sure that ```font-awesome``` is available. The easiest way is to include 
+```
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+```
+to the ```head``` section of you HTML-file.
+
+## Usage
+
+### Enable & disable 
+
+With above configuration the notes canvas is opened and closed when pressing 'c' and the chalkboard is opened and closed when pressing 'b'.
+
+### Mouse
+- Click the left mouse button and drag to write on notes canvas or chalkboard
+- Click the right mouse button and drag to wipe away previous drawings
+
+### Touch
+- Touch and move to write on notes canvas or chalkboard
+- Touch and hold for half a second, then move to wipe away previous drawings
+
+### Keyboard
+- Click the 'DEL' key to clear the chalkboard </li>
+- Click the 'd' key to download chalkboard drawings</li>
+- Click the 'BACKSPACE' key to delete all chalkboard drawings on the current slide</li>
+
+## Playback
+
+If the ```autoSlide``` feature is set or if the ```audio-slideshow``` plugin is used, pre-recorded chalkboard drawings can be played. The slideshow plays back the user interaction with the chalkboard in the same way as it was conducted when recording the data.
+
+## PDF-Export
+
+If the slideshow is opened in [print mode](https://github.com/hakimel/reveal.js/#pdf-export) the pre-recorded chalkboard drawings (which must be provided in a file, see ```src``` option) are included in the PDF-file. Each drawing on the chalkboard is added after the slide that was shown when opening the chalkboard. Drawings are also included if they had been cleared (using the 'DEL' key). Drawings on the notes canvas are not included in the PDF-file.   
+
+
+## Configuration
+
+The plugin has several configuration options:
+
+- ```src```: Optional filename for pre-recorded drawings.
+- ```readOnly```: Configuation option allowing to prevent changes to existing drawings. If set to ```true``` no changes can be made, if set to false ```false``` changes can be made, if unset or set to ```undefined``` no changes to the drawings can be made after returning to a slide or fragment for which drawings had been recorded before. In any case the recorded drawings for a slide or fragment can be cleared by pressing the 'DEL' key (i.e. by using the ```RevealChalkboard.clear()``` function).
+- ```toggleNotesButton```: If set to ```true``` a button for opening and closing the notes canvas is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate. 
+- ```toggleChalkboardButton```: If set to ```true``` a button for opening and closing the chalkboard is shown. Alternatively, the css position attributes can be provided if the default position is not appropriate. 
+- ```transition```: Gives the duration (in milliseconds) of the transition for a slide change, so that the notes canvas is drawn after the transition is completed.
+- ```theme```: Can be set to either ```"chalkboard"``` or ```"whiteboard"```.
+
+The following configuration options allow to change the appearance of the notes canvas and the chalkboard. All of these options require two values, the first gives the value for the notes canvas, the second for the chalkboard.
+
+- ```color```: The first value gives the pen color, the second value gives the color of the chalk.
+- ```background```: The first value expects a (semi-)transparent color which is used to provide visual feedback that the notes canvas is enabled, the second value expects a filename to a background image for the chalkboard.
+- ```pen```: The first value expects a filename for an image of the pen used for the notes canvas, the second value expects a filename  for an image of the pen used for the chalkboard.
+
+All of the configurations are optional and the default values shown below are used if the options are not provided.
+
+```javascript
+Reveal.initialize({
+	// ...
+	chalkboard: { 
+		src: null,
+		readOnly: undefined; 
+		toggleChalkboardButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
+		toggleNotesButton: { left: "30px", bottom: "30px", top: "auto", right: "auto" },
+		transition: 800,
+		theme: "chalkboard",
+		// configuration options for notes canvas and chalkboard
+		color: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0.5)' ]
+		background: [ 'rgba(127,127,127,.1)' , 'reveal.js-plugins/chalkboard/img/blackboard.png' ],
+		pen:  [ 'reveal.js-plugins/chalkboard/img/boardmarker.png', 'reveal.js-plugins/chalkboard/img/chalk.png' ],
+	},
+	// ...
+
+});
+```
+
+
+## License
+
+MIT licensed
+
+Copyright (C) 2016 Asvin Goel

presentation/template/my-zoom/zoom.js

@@ -0,0 +1,155 @@
+//
+// Based on zoom.js plugin of reveal.js
+// modified to correctly handle reveal's scaling
+//          to react on dblclick
+//          to remove (unused) panning code
+//
+
+/*!
+ * zoom.js 0.3 (modified for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
+ */
+
+
+
+var RevealZoom = window.RevealZoom || (function(){
+
+
+	// The current zoom level (scale)
+	var level = 1;
+
+    
+	// The easing that will be applied when we zoom in/out
+	document.body.style.transition = 'transform 0.8s ease';
+	document.body.style.OTransition = '-o-transform 0.8s ease';
+	document.body.style.msTransition = '-ms-transform 0.8s ease';
+	document.body.style.MozTransition = '-moz-transform 0.8s ease';
+	document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
+
+
+	/**
+	 * Applies the CSS required to zoom in, prefers the use of CSS3
+	 * transforms but falls back on zoom for IE.
+	 *
+	 * @param {Object} rect
+	 * @param {Number} scale
+	 */
+	function magnify( rect, scale ) {
+
+		// Ensure a width/height is set
+		rect.width = rect.width || 1;
+		rect.height = rect.height || 1;
+
+		// Center the rect within the zoomed viewport
+		rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
+		rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
+
+		// Reset
+		if( scale === 1 )
+        {
+			document.body.style.transform = '';
+			document.body.style.OTransform = '';
+			document.body.style.msTransform = '';
+			document.body.style.MozTransform = '';
+			document.body.style.WebkitTransform = '';
+		}
+
+		// Scale
+		else
+        {
+			var origin = '0px 0px';
+            var transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
+
+			document.body.style.transformOrigin = origin;
+			document.body.style.OTransformOrigin = origin;
+			document.body.style.msTransformOrigin = origin;
+			document.body.style.MozTransformOrigin = origin;
+			document.body.style.WebkitTransformOrigin = origin;
+
+			document.body.style.transform = transform;
+			document.body.style.OTransform = transform;
+			document.body.style.msTransform = transform;
+			document.body.style.MozTransform = transform;
+			document.body.style.WebkitTransform = transform;
+		}
+
+		level = scale;
+	}
+
+
+    // zoom to element on double click
+	document.querySelector( '.reveal .slides' ).addEventListener( 'dblclick', function( event ) {
+		event.preventDefault();
+        zoomTo(event.target);
+	});
+
+
+    // un-show answers on slide-change
+    Reveal.addEventListener( 'slidechanged', function() {
+		if( level !== 1 )
+        {
+			zoomOut();
+		}
+    });
+
+    
+	/**
+	 * Zooms in on an HTML element.
+	 *
+	 * @param element: HTML element to zoom in on
+	 */
+	function zoomTo( element )
+    {
+		// Due to an implementation limitation we can't zoom in
+		// to another element without zooming out first
+		if( level !== 1 )
+        {
+			zoomOut();
+		}
+		else
+        {
+			// Space around the zoomed in element to leave on screen
+			var padding = 20;
+			var bounds  = element.getBoundingClientRect();
+
+            // are slides zoomed up, and is this done using CSS zoom?
+            // then incorporate this zoom!
+            var zoom  = document.querySelector( '.reveal .slides' ).style.zoom;
+            var scale = (zoom < 1) ? 1 : zoom;
+
+            var options = {
+                x:      Math.round( bounds.left   * scale - padding ),
+                y:      Math.round( bounds.top    * scale - padding ),
+			    width:  Math.round( bounds.width  * scale + ( padding * 2 ) ),
+			    height: Math.round( bounds.height * scale + ( padding * 2 ) )
+            };
+            
+
+            options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
+
+            
+			if( options.scale > 1 )
+            {
+				options.x *= options.scale;
+				options.y *= options.scale;
+				magnify( options, options.scale );
+			}
+		}
+	}
+
+
+    // zoom out to normal scale
+	function zoomOut()
+    {
+		magnify( { x: 0, y: 0 }, 1 );
+		level = 1;
+	}
+
+
+    return this;
+    
+})();
+

presentation/template/template.html

@@ -0,0 +1,208 @@
+<!doctype html>
+<html>
+
+  <head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+    $if(title)$
+	<title>
+      $title$$if(subtitle)$: $subtitle$ $endif$
+    </title>
+    $endif$
+
+	<link rel="stylesheet" href="$template$/revealjs/css/reveal.css">
+
+
+	<!-- Theme of AG CG (derived from reveal's white.css) -->
+	<link rel="stylesheet" href="$template$/agcg.css">
+
+
+    <!-- font needed for chalkboard buttons -->
+    <link rel="stylesheet" href="$template$/font-awesome/css/font-awesome.min.css">
+    
+
+	<!-- Setup code formatting with highlight.js -->
+	<link rel="stylesheet" href="$template$/revealjs/css/highlight/xcode.css">
+
+    
+
+	<!-- Printing and PDF exports -->
+	<script>
+	  var link = document.createElement( 'link' );
+	  link.rel = 'stylesheet';
+	  link.type = 'text/css';
+	  link.href = window.location.search.match( /print-pdf/gi ) ? '$template$/revealjs/css/print/pdf.css' : '$template$/revealjs/css/print/paper.css';
+	  document.getElementsByTagName( 'head' )[0].appendChild( link );
+
+      // MARIO version
+	  if (window.location.search.match( /print-pdf/gi ))
+      {
+	    var link = document.createElement( 'link' );
+	    link.rel = 'stylesheet';
+	    link.type = 'text/css';
+	    link.href = '$template$/agcg-pdf.css';
+	    document.getElementsByTagName( 'head' )[0].appendChild( link );
+      }
+	</script>
+
+    
+    <!-- MathJax config -->
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+      jax: ["input/TeX","output/HTML-CSS"],
+      TeX: {
+          Macros: {
+            R: "{\\mathrm{{I}\\kern-.15em{R}}}",
+            abs: ['\\left\\lvert #1 \\right\\rvert', 1],
+            norm: ['\\left\\Vert #1 \\right\\Vert', 1],
+            iprod: ['\\left\\langle #1 \\right\\rangle', 1],
+            vec: ['\\mathbf{#1}', 1],
+            mat: ['\\mathbf{#1}', 1],
+            trans: ['{#1}\\mkern-1mu^{\\mathsf{T}}', 1],
+            matrix: ['\\begin{bmatrix} #1 \\end{bmatrix}', 1],
+            vector: ['\\begin{pmatrix} #1 \\end{pmatrix}', 1],
+            of: ['\\mkern{-2mu}\\left( #1 \\right\)', 1]
+          }
+      },
+      "HTML-CSS": {
+          styles: { ".reveal section .MathJax_Display": { margin: "0.5em 0em" } },
+          styles: { ".reveal table .MathJax_Display": { margin: "0em" } },
+          scale: 95
+      }
+      });
+    </script>
+    
+  </head>
+
+  <body>
+
+
+    <!-- here come the slides -->
+    <div class="reveal">
+	  <div class="slides">
+
+
+        <!-- Title slide -->
+        $if(title)$
+        <section class="white-on-blue">
+          <div class="title"> $title$ </div>
+          $if(subtitle)$
+          <div class="subtitle"> $subtitle$ </div>
+          $endif$
+          $if(author)$
+          <div class="author"> $author$ </div>
+          $if(affiliation)$
+          <div class="affiliation"> $affiliation$ </div>
+          $endif$
+          $endif$
+        </section>  
+        $endif$
+
+
+        <!-- Table of Contents -->
+        $if(toc)$
+        <section>
+          <h2>Outline</h2>
+          <nav id="$idprefix$TOC">
+            $toc$
+          </nav>
+        </section>
+        $endif$
+
+
+<!-- all the slides from markdown document: DO NOT INDENT THE body LINE!!! -->
+$body$
+
+        
+	  </div>
+	</div>
+
+
+	<script src="$template$/revealjs/lib/js/head.min.js"></script>
+	<script src="$template$/revealjs/js/reveal.js"></script>
+
+
+	<script>
+
+	  // More info https://github.com/hakimel/reveal.js#configuration
+	  Reveal.initialize({
+
+
+      // reveal settings
+      controls:     false,
+      progress:     false,
+      slideNumber:  true,
+	  history:      true,
+      center:       false,
+      transition:   'none',
+      viewDistance: 2, // otherwise videos start early
+      width:        1024,
+      height:       768,
+      minScale:     0.2,
+      maxScale:     5, // if this threshold is reached, the chalkboard drawing will be wrongly positioned. hence large threshold!
+
+
+      // use local mathjax installation
+      math: { mathjax: '$template$/mathjax/MathJax.js', config: 'TeX-AMS_HTML-full' },
+
+
+      // setup chalkboard
+      chalkboard: { 
+        src: "$chalkboard$",
+        readOnly: false,
+        theme: "chalkboard",
+        color: [ 'rgba(255,0,0,1)', 'rgba(255,255,255,1)' ],
+        background: [ 'rgba(0,0,0,0)' , '$template$/my-chalkboard/img/blackboard.png' ],
+        pen:  [ '$template$/my-chalkboard/img/boardmarker.png', '$template$/my-chalkboard/img/chalk.png' ],
+      },
+
+      
+      // setup reveal-menu
+      menu: {
+        side: 'right',
+        numbers: false,
+        titleSelector: 'h1',
+        hideMissingTitles: false,
+        markers: false,
+        custom: false,
+        themes: false,
+        transitions: false,
+        openButton: false,
+        openSlideNumber: true,
+        keyboard: true
+      },
+
+      
+      // keyboard shortcuts
+      keyboard: {
+      40: function() { Reveal.next(); },                       // up:   next slide
+      38: function() { Reveal.prev(); },                       // down: prev slide
+      67: function() { RevealChalkboard.toggleNotesCanvas() }, // c: draw on slides
+      84: function() { RevealChalkboard.toggleChalkboard() },  // t: draw on blackboard
+      69: function() { RevealChalkboard.toggleSponge() },      // e: toggle eraser
+      8:  function() { RevealChalkboard.clear() },             // BACKSPACE: clear chalkboard
+      46: function() { RevealChalkboard.reset() },             // DELETE: reset chalkboard
+      68: function() { RevealChalkboard.download() },          // d: downlad chalkboard drawing
+      },
+
+      
+      // load plugins
+	  dependencies: [
+	  { src: '$template$/revealjs/plugin/math/math.js' },
+	  { src: '$template$/revealjs/plugin/notes/notes.js', async: true },
+	  { src: '$template$/revealjs/plugin/highlight/highlight.js', async: true, callback: function() {
+        var code_blocks = document.querySelectorAll('code');
+        for( var i = 0, len = code_blocks.length; i < len; i++ )  hljs.highlightBlock(code_blocks[i]);                                                      
+      }},
+      { src: '$template$/revealjs/plugin/menu/menu.js' },
+      { src: '$template$/my-chalkboard/chalkboard.js' }, // do not load this async ('ready' event is missing, print wont work)
+      { src: '$template$/my-zoom/zoom.js', async: true },
+      ]
+      
+	  });
+	</script>
+
+  </body>
+
+</html>