diff --git a/recitation/debugging/demo.html b/recitation/debugging/demo.html
deleted file mode 100644
index 5a8ba36165e74216f4226707728f7c1275be9a42..0000000000000000000000000000000000000000
--- a/recitation/debugging/demo.html
+++ /dev/null
@@ -1,481 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js – The HTML Presentation Framework</title>
-
- <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
- <meta name="author" content="Hakim El Hattab">
-
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <link rel="stylesheet" href="dist/reset.css">
- <link rel="stylesheet" href="dist/reveal.css">
- <link rel="stylesheet" href="dist/theme/black.css" id="theme">
-
- <!-- Theme used for syntax highlighting of code -->
- <link rel="stylesheet" href="plugin/highlight/monokai.css">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <!-- Any section element inside of this container is displayed as a slide -->
- <div class="slides">
- <section>
- <a href="https://revealjs.com">
- <img src="https://static.slid.es/reveal/logo-v1/reveal-white-text.svg" alt="reveal.js logo" style="height: 180px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
- </a>
- <h3>The HTML Presentation Framework</h3>
- <p>
- <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
- </p>
- </section>
-
- <section>
- <h2>Hello There</h2>
- <p>
- reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
- </p>
- </section>
-
- <!-- Example of nested vertical slides -->
- <section>
- <section>
- <h2>Vertical Slides</h2>
- <p>Slides can be nested inside of each other.</p>
- <p>Use the <em>Space</em> key to navigate through all slides.</p>
- <br>
- <a href="#/2/1" class="navigate-down">
- <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
- </a>
- </section>
- <section>
- <h2>Basement Level 1</h2>
- <p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
- </section>
- <section>
- <h2>Basement Level 2</h2>
- <p>That's it, time to go back up.</p>
- <br>
- <a href="#/2">
- <img class="r-frame" style="background: rgba(255,255,255,0.1); transform: rotate(180deg);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Up arrow">
- </a>
- </section>
- </section>
-
- <section>
- <h2>Slides</h2>
- <p>
- Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
- </p>
- </section>
-
- <section data-visibility="hidden">
- <h2>Hidden Slides</h2>
- <p>
- This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the `showHiddenSlides` config option to `true`.
- </p>
- </section>
-
- <section data-auto-animate>
- <h2 data-id="code-title">Pretty Code</h2>
- <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers>
- import React, { useState } from 'react';
-
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- ...
- );
- }
- </code></pre>
- <p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
- </section>
-
- <section data-auto-animate>
- <h2 data-id="code-title">With Animations</h2>
- <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
- import React, { useState } from 'react';
-
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
-
- function SecondExample() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
- </script></code></pre>
- </section>
-
- <section>
- <h2>Point of View</h2>
- <p>
- Press <strong>ESC</strong> to enter the slide overview.
- </p>
- <p>
- Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
- </p>
- <p>
- (NOTE: Use ctrl + click in Linux.)
- </p>
- </section>
-
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <h2>Auto-Animate</h2>
- <p>Automatically animate matching elements across slides with <a href="https://revealjs.com/auto-animate/">Auto-Animate</a>.</p>
- <div class="r-hstack justify-center">
- <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- </div>
- </section>
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <div class="r-hstack justify-center">
- <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
- <div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
- <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
- </div>
- <h2 style="margin-top: 20px;">Auto-Animate</h2>
- </section>
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <div class="r-stack">
- <div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
- <div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
- <div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
- </div>
- <h2 style="margin-top: 20px;">Auto-Animate</h2>
- </section>
-
- <section>
- <h2>Touch Optimized</h2>
- <p>
- Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
- </p>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Markdown Support
-
- Write content using inline or external Markdown.
- Instructions and more info available in the [docs](https://revealjs.com/markdown/).
-
- ```html []
- <section data-markdown>
- ## Markdown Support
-
- Write content using inline or external Markdown.
- Instructions and more info available in the [docs](https://revealjs.com/markdown/).
- </section>
- ```
- </script>
- </section>
-
- <section>
- <p>Add the <code>r-fit-text</code> class to auto-size text</p>
- <h2 class="r-fit-text">FIT TEXT</h2>
- </section>
-
- <section>
- <section id="fragments">
- <h2>Fragments</h2>
- <p>Hit the next arrow...</p>
- <p class="fragment">... to step through ...</p>
- <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
-
- <aside class="notes">
- This slide has fragments which are also stepped through in the notes window.
- </aside>
- </section>
- <section>
- <h2>Fragment Styles</h2>
- <p>There's different types of fragments, like:</p>
- <p class="fragment grow">grow</p>
- <p class="fragment shrink">shrink</p>
- <p class="fragment fade-out">fade-out</p>
- <p>
- <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
- <span style="display: inline-block;" class="fragment fade-up">up, </span>
- <span style="display: inline-block;" class="fragment fade-down">down, </span>
- <span style="display: inline-block;" class="fragment fade-left">left</span>
- </p>
- <p class="fragment fade-in-then-out">fade-in-then-out</p>
- <p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
- <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
- </section>
- </section>
-
- <section id="transitions">
- <h2>Transition Styles</h2>
- <p>
- You can select from different transitions, like: <br>
- <a href="?transition=none#/transitions">None</a> -
- <a href="?transition=fade#/transitions">Fade</a> -
- <a href="?transition=slide#/transitions">Slide</a> -
- <a href="?transition=convex#/transitions">Convex</a> -
- <a href="?transition=concave#/transitions">Concave</a> -
- <a href="?transition=zoom#/transitions">Zoom</a>
- </p>
- </section>
-
- <section id="themes">
- <h2>Themes</h2>
- <p>
- reveal.js comes with a few themes built in: <br>
- <!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
- <a href="#/themes" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
- </p>
- </section>
-
- <section>
- <section data-background="#dddddd">
- <h2>Slide Backgrounds</h2>
- <p>
- Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
- </p>
- <a href="#" class="navigate-down">
- <img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
- </a>
- </section>
- <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
- <h2>Gradient Backgrounds</h2>
- <pre><code class="hljs html wrap"><section data-background-gradient=
- "linear-gradient(to bottom, #ddd, #191919)"></code></pre>
- </section>
- <section data-background="https://static.slid.es/reveal/image-placeholder.png">
- <h2>Image Backgrounds</h2>
- <pre><code class="hljs html"><section data-background="image.png"></code></pre>
- </section>
- <section data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
- <h2>Tiled Backgrounds</h2>
- <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre>
- </section>
- <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000">
- <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
- <h2>Video Backgrounds</h2>
- <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre>
- </div>
- </section>
- <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
- <h2>... and GIFs!</h2>
- </section>
- </section>
-
- <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
- <h2>Background Transitions</h2>
- <p>
- Different background transitions are available via the backgroundTransition option. This one's called "zoom".
- </p>
- <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
- </section>
-
- <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
- <h2>Background Transitions</h2>
- <p>
- You can override background transitions per-slide.
- </p>
- <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre>
- </section>
-
- <section data-background-iframe="https://hakim.se" data-background-interactive>
- <div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
- <h2>Iframe Backgrounds</h2>
- <p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
- </div>
- </section>
-
- <section>
- <h2>Marvelous List</h2>
- <ul>
- <li>No order here</li>
- <li>Or here</li>
- <li>Or here</li>
- <li>Or here</li>
- </ul>
- </section>
-
- <section>
- <h2>Fantastic Ordered List</h2>
- <ol>
- <li>One is smaller than...</li>
- <li>Two is smaller than...</li>
- <li>Three!</li>
- </ol>
- </section>
-
- <section>
- <h2>Tabular Tables</h2>
- <table>
- <thead>
- <tr>
- <th>Item</th>
- <th>Value</th>
- <th>Quantity</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Apples</td>
- <td>$1</td>
- <td>7</td>
- </tr>
- <tr>
- <td>Lemonade</td>
- <td>$2</td>
- <td>18</td>
- </tr>
- <tr>
- <td>Bread</td>
- <td>$3</td>
- <td>2</td>
- </tr>
- </tbody>
- </table>
- </section>
-
- <section>
- <h2>Clever Quotes</h2>
- <p>
- These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
- </p>
- <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
- “For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
- reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”
- </blockquote>
- </section>
-
- <section>
- <h2>Intergalactic Interconnections</h2>
- <p>
- You can link between slides internally,
- <a href="#/2/3">like this</a>.
- </p>
- </section>
-
- <section>
- <h2>Speaker View</h2>
- <p>There's a <a href="https://revealjs.com/speaker-view/">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
- <p>Press the <em>S</em> key to try it out.</p>
-
- <aside class="notes">
- Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
- </aside>
- </section>
-
- <section>
- <h2>Export to PDF</h2>
- <p>Presentations can be <a href="https://revealjs.com/pdf-export/">exported to PDF</a>, here's an example:</p>
- <iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
- </section>
-
- <section>
- <h2>Global State</h2>
- <p>
- Set <code>data-state="something"</code> on a slide and <code>"something"</code>
- will be added as a class to the document element when the slide is open. This lets you
- apply broader style changes, like switching the page background.
- </p>
- </section>
-
- <section data-state="customevent">
- <h2>State Events</h2>
- <p>
- Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
- </p>
- <pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
-Reveal.on( 'customevent', function() {
- console.log( '"customevent" has fired' );
-} );
- </code></pre>
- </section>
-
- <section>
- <h2>Take a Moment</h2>
- <p>
- Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
- </p>
- </section>
-
- <section>
- <h2>Much more</h2>
- <ul>
- <li>Right-to-left support</li>
- <li><a href="https://revealjs.com/api/">Extensive JavaScript API</a></li>
- <li><a href="https://revealjs.com/auto-slide/">Auto-progression</a></li>
- <li><a href="https://revealjs.com/backgrounds/#parallax-background">Parallax backgrounds</a></li>
- <li><a href="https://revealjs.com/keyboard/">Custom keyboard bindings</a></li>
- </ul>
- </section>
-
- <section style="text-align: left;">
- <h1>THE END</h1>
- <p>
- - <a href="https://slides.com">Try the online editor</a> <br>
- - <a href="https://github.com/hakimel/reveal.js">Source code & documentation</a>
- </p>
- </section>
-
- </div>
-
- </div>
-
- <script src="dist/reveal.js"></script>
- <script src="plugin/zoom/zoom.js"></script>
- <script src="plugin/notes/notes.js"></script>
- <script src="plugin/search/search.js"></script>
- <script src="plugin/markdown/markdown.js"></script>
- <script src="plugin/highlight/highlight.js"></script>
- <script>
-
- // Also available as an ES module, see:
- // https://revealjs.com/initialization/
- Reveal.initialize({
- controls: true,
- progress: true,
- center: true,
- hash: true,
-
- // Learn about plugins: https://revealjs.com/plugins/
- plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
- });
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/500-slides.html b/recitation/debugging/examples/500-slides.html
deleted file mode 100644
index 2270c7479128045e5dceddd12f69695bda59a342..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/500-slides.html
+++ /dev/null
@@ -1,526 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - 500 slides</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/black.css">
- </head>
-
- <body>
- <div class="reveal">
- <div class="slides">
- <section><h1>1</h1></section>
- <section><h1>2</h1></section>
- <section><h1>3</h1></section>
- <section><h1>4</h1></section>
- <section><h1>5</h1></section>
- <section><h1>6</h1></section>
- <section><h1>7</h1></section>
- <section><h1>8</h1></section>
- <section><h1>9</h1></section>
- <section><h1>10</h1></section>
- <section><h1>11</h1></section>
- <section><h1>12</h1></section>
- <section><h1>13</h1></section>
- <section><h1>14</h1></section>
- <section><h1>15</h1></section>
- <section><h1>16</h1></section>
- <section><h1>17</h1></section>
- <section><h1>18</h1></section>
- <section><h1>19</h1></section>
- <section><h1>20</h1></section>
- <section><h1>21</h1></section>
- <section><h1>22</h1></section>
- <section><h1>23</h1></section>
- <section><h1>24</h1></section>
- <section><h1>25</h1></section>
- <section><h1>26</h1></section>
- <section><h1>27</h1></section>
- <section><h1>28</h1></section>
- <section><h1>29</h1></section>
- <section><h1>30</h1></section>
- <section><h1>31</h1></section>
- <section><h1>32</h1></section>
- <section><h1>33</h1></section>
- <section><h1>34</h1></section>
- <section><h1>35</h1></section>
- <section><h1>36</h1></section>
- <section><h1>37</h1></section>
- <section><h1>38</h1></section>
- <section><h1>39</h1></section>
- <section><h1>40</h1></section>
- <section><h1>41</h1></section>
- <section><h1>42</h1></section>
- <section><h1>43</h1></section>
- <section><h1>44</h1></section>
- <section><h1>45</h1></section>
- <section><h1>46</h1></section>
- <section><h1>47</h1></section>
- <section><h1>48</h1></section>
- <section><h1>49</h1></section>
- <section><h1>50</h1></section>
- <section><h1>51</h1></section>
- <section><h1>52</h1></section>
- <section><h1>53</h1></section>
- <section><h1>54</h1></section>
- <section><h1>55</h1></section>
- <section><h1>56</h1></section>
- <section><h1>57</h1></section>
- <section><h1>58</h1></section>
- <section><h1>59</h1></section>
- <section><h1>60</h1></section>
- <section><h1>61</h1></section>
- <section><h1>62</h1></section>
- <section><h1>63</h1></section>
- <section><h1>64</h1></section>
- <section><h1>65</h1></section>
- <section><h1>66</h1></section>
- <section><h1>67</h1></section>
- <section><h1>68</h1></section>
- <section><h1>69</h1></section>
- <section><h1>70</h1></section>
- <section><h1>71</h1></section>
- <section><h1>72</h1></section>
- <section><h1>73</h1></section>
- <section><h1>74</h1></section>
- <section><h1>75</h1></section>
- <section><h1>76</h1></section>
- <section><h1>77</h1></section>
- <section><h1>78</h1></section>
- <section><h1>79</h1></section>
- <section><h1>80</h1></section>
- <section><h1>81</h1></section>
- <section><h1>82</h1></section>
- <section><h1>83</h1></section>
- <section><h1>84</h1></section>
- <section><h1>85</h1></section>
- <section><h1>86</h1></section>
- <section><h1>87</h1></section>
- <section><h1>88</h1></section>
- <section><h1>89</h1></section>
- <section><h1>90</h1></section>
- <section><h1>91</h1></section>
- <section><h1>92</h1></section>
- <section><h1>93</h1></section>
- <section><h1>94</h1></section>
- <section><h1>95</h1></section>
- <section><h1>96</h1></section>
- <section><h1>97</h1></section>
- <section><h1>98</h1></section>
- <section><h1>99</h1></section>
- <section><h1>100</h1></section>
- <section><h1>101</h1></section>
- <section><h1>102</h1></section>
- <section><h1>103</h1></section>
- <section><h1>104</h1></section>
- <section><h1>105</h1></section>
- <section><h1>106</h1></section>
- <section><h1>107</h1></section>
- <section><h1>108</h1></section>
- <section><h1>109</h1></section>
- <section><h1>110</h1></section>
- <section><h1>111</h1></section>
- <section><h1>112</h1></section>
- <section><h1>113</h1></section>
- <section><h1>114</h1></section>
- <section><h1>115</h1></section>
- <section><h1>116</h1></section>
- <section><h1>117</h1></section>
- <section><h1>118</h1></section>
- <section><h1>119</h1></section>
- <section><h1>120</h1></section>
- <section><h1>121</h1></section>
- <section><h1>122</h1></section>
- <section><h1>123</h1></section>
- <section><h1>124</h1></section>
- <section><h1>125</h1></section>
- <section><h1>126</h1></section>
- <section><h1>127</h1></section>
- <section><h1>128</h1></section>
- <section><h1>129</h1></section>
- <section><h1>130</h1></section>
- <section><h1>131</h1></section>
- <section><h1>132</h1></section>
- <section><h1>133</h1></section>
- <section><h1>134</h1></section>
- <section><h1>135</h1></section>
- <section><h1>136</h1></section>
- <section><h1>137</h1></section>
- <section><h1>138</h1></section>
- <section><h1>139</h1></section>
- <section><h1>140</h1></section>
- <section><h1>141</h1></section>
- <section><h1>142</h1></section>
- <section><h1>143</h1></section>
- <section><h1>144</h1></section>
- <section><h1>145</h1></section>
- <section><h1>146</h1></section>
- <section><h1>147</h1></section>
- <section><h1>148</h1></section>
- <section><h1>149</h1></section>
- <section><h1>150</h1></section>
- <section><h1>151</h1></section>
- <section><h1>152</h1></section>
- <section><h1>153</h1></section>
- <section><h1>154</h1></section>
- <section><h1>155</h1></section>
- <section><h1>156</h1></section>
- <section><h1>157</h1></section>
- <section><h1>158</h1></section>
- <section><h1>159</h1></section>
- <section><h1>160</h1></section>
- <section><h1>161</h1></section>
- <section><h1>162</h1></section>
- <section><h1>163</h1></section>
- <section><h1>164</h1></section>
- <section><h1>165</h1></section>
- <section><h1>166</h1></section>
- <section><h1>167</h1></section>
- <section><h1>168</h1></section>
- <section><h1>169</h1></section>
- <section><h1>170</h1></section>
- <section><h1>171</h1></section>
- <section><h1>172</h1></section>
- <section><h1>173</h1></section>
- <section><h1>174</h1></section>
- <section><h1>175</h1></section>
- <section><h1>176</h1></section>
- <section><h1>177</h1></section>
- <section><h1>178</h1></section>
- <section><h1>179</h1></section>
- <section><h1>180</h1></section>
- <section><h1>181</h1></section>
- <section><h1>182</h1></section>
- <section><h1>183</h1></section>
- <section><h1>184</h1></section>
- <section><h1>185</h1></section>
- <section><h1>186</h1></section>
- <section><h1>187</h1></section>
- <section><h1>188</h1></section>
- <section><h1>189</h1></section>
- <section><h1>190</h1></section>
- <section><h1>191</h1></section>
- <section><h1>192</h1></section>
- <section><h1>193</h1></section>
- <section><h1>194</h1></section>
- <section><h1>195</h1></section>
- <section><h1>196</h1></section>
- <section><h1>197</h1></section>
- <section><h1>198</h1></section>
- <section><h1>199</h1></section>
- <section><h1>200</h1></section>
- <section><h1>201</h1></section>
- <section><h1>202</h1></section>
- <section><h1>203</h1></section>
- <section><h1>204</h1></section>
- <section><h1>205</h1></section>
- <section><h1>206</h1></section>
- <section><h1>207</h1></section>
- <section><h1>208</h1></section>
- <section><h1>209</h1></section>
- <section><h1>210</h1></section>
- <section><h1>211</h1></section>
- <section><h1>212</h1></section>
- <section><h1>213</h1></section>
- <section><h1>214</h1></section>
- <section><h1>215</h1></section>
- <section><h1>216</h1></section>
- <section><h1>217</h1></section>
- <section><h1>218</h1></section>
- <section><h1>219</h1></section>
- <section><h1>220</h1></section>
- <section><h1>221</h1></section>
- <section><h1>222</h1></section>
- <section><h1>223</h1></section>
- <section><h1>224</h1></section>
- <section><h1>225</h1></section>
- <section><h1>226</h1></section>
- <section><h1>227</h1></section>
- <section><h1>228</h1></section>
- <section><h1>229</h1></section>
- <section><h1>230</h1></section>
- <section><h1>231</h1></section>
- <section><h1>232</h1></section>
- <section><h1>233</h1></section>
- <section><h1>234</h1></section>
- <section><h1>235</h1></section>
- <section><h1>236</h1></section>
- <section><h1>237</h1></section>
- <section><h1>238</h1></section>
- <section><h1>239</h1></section>
- <section><h1>240</h1></section>
- <section><h1>241</h1></section>
- <section><h1>242</h1></section>
- <section><h1>243</h1></section>
- <section><h1>244</h1></section>
- <section><h1>245</h1></section>
- <section><h1>246</h1></section>
- <section><h1>247</h1></section>
- <section><h1>248</h1></section>
- <section><h1>249</h1></section>
- <section><h1>250</h1></section>
- <section><h1>251</h1></section>
- <section><h1>252</h1></section>
- <section><h1>253</h1></section>
- <section><h1>254</h1></section>
- <section><h1>255</h1></section>
- <section><h1>256</h1></section>
- <section><h1>257</h1></section>
- <section><h1>258</h1></section>
- <section><h1>259</h1></section>
- <section><h1>260</h1></section>
- <section><h1>261</h1></section>
- <section><h1>262</h1></section>
- <section><h1>263</h1></section>
- <section><h1>264</h1></section>
- <section><h1>265</h1></section>
- <section><h1>266</h1></section>
- <section><h1>267</h1></section>
- <section><h1>268</h1></section>
- <section><h1>269</h1></section>
- <section><h1>270</h1></section>
- <section><h1>271</h1></section>
- <section><h1>272</h1></section>
- <section><h1>273</h1></section>
- <section><h1>274</h1></section>
- <section><h1>275</h1></section>
- <section><h1>276</h1></section>
- <section><h1>277</h1></section>
- <section><h1>278</h1></section>
- <section><h1>279</h1></section>
- <section><h1>280</h1></section>
- <section><h1>281</h1></section>
- <section><h1>282</h1></section>
- <section><h1>283</h1></section>
- <section><h1>284</h1></section>
- <section><h1>285</h1></section>
- <section><h1>286</h1></section>
- <section><h1>287</h1></section>
- <section><h1>288</h1></section>
- <section><h1>289</h1></section>
- <section><h1>290</h1></section>
- <section><h1>291</h1></section>
- <section><h1>292</h1></section>
- <section><h1>293</h1></section>
- <section><h1>294</h1></section>
- <section><h1>295</h1></section>
- <section><h1>296</h1></section>
- <section><h1>297</h1></section>
- <section><h1>298</h1></section>
- <section><h1>299</h1></section>
- <section><h1>300</h1></section>
- <section><h1>301</h1></section>
- <section><h1>302</h1></section>
- <section><h1>303</h1></section>
- <section><h1>304</h1></section>
- <section><h1>305</h1></section>
- <section><h1>306</h1></section>
- <section><h1>307</h1></section>
- <section><h1>308</h1></section>
- <section><h1>309</h1></section>
- <section><h1>310</h1></section>
- <section><h1>311</h1></section>
- <section><h1>312</h1></section>
- <section><h1>313</h1></section>
- <section><h1>314</h1></section>
- <section><h1>315</h1></section>
- <section><h1>316</h1></section>
- <section><h1>317</h1></section>
- <section><h1>318</h1></section>
- <section><h1>319</h1></section>
- <section><h1>320</h1></section>
- <section><h1>321</h1></section>
- <section><h1>322</h1></section>
- <section><h1>323</h1></section>
- <section><h1>324</h1></section>
- <section><h1>325</h1></section>
- <section><h1>326</h1></section>
- <section><h1>327</h1></section>
- <section><h1>328</h1></section>
- <section><h1>329</h1></section>
- <section><h1>330</h1></section>
- <section><h1>331</h1></section>
- <section><h1>332</h1></section>
- <section><h1>333</h1></section>
- <section><h1>334</h1></section>
- <section><h1>335</h1></section>
- <section><h1>336</h1></section>
- <section><h1>337</h1></section>
- <section><h1>338</h1></section>
- <section><h1>339</h1></section>
- <section><h1>340</h1></section>
- <section><h1>341</h1></section>
- <section><h1>342</h1></section>
- <section><h1>343</h1></section>
- <section><h1>344</h1></section>
- <section><h1>345</h1></section>
- <section><h1>346</h1></section>
- <section><h1>347</h1></section>
- <section><h1>348</h1></section>
- <section><h1>349</h1></section>
- <section><h1>350</h1></section>
- <section><h1>351</h1></section>
- <section><h1>352</h1></section>
- <section><h1>353</h1></section>
- <section><h1>354</h1></section>
- <section><h1>355</h1></section>
- <section><h1>356</h1></section>
- <section><h1>357</h1></section>
- <section><h1>358</h1></section>
- <section><h1>359</h1></section>
- <section><h1>360</h1></section>
- <section><h1>361</h1></section>
- <section><h1>362</h1></section>
- <section><h1>363</h1></section>
- <section><h1>364</h1></section>
- <section><h1>365</h1></section>
- <section><h1>366</h1></section>
- <section><h1>367</h1></section>
- <section><h1>368</h1></section>
- <section><h1>369</h1></section>
- <section><h1>370</h1></section>
- <section><h1>371</h1></section>
- <section><h1>372</h1></section>
- <section><h1>373</h1></section>
- <section><h1>374</h1></section>
- <section><h1>375</h1></section>
- <section><h1>376</h1></section>
- <section><h1>377</h1></section>
- <section><h1>378</h1></section>
- <section><h1>379</h1></section>
- <section><h1>380</h1></section>
- <section><h1>381</h1></section>
- <section><h1>382</h1></section>
- <section><h1>383</h1></section>
- <section><h1>384</h1></section>
- <section><h1>385</h1></section>
- <section><h1>386</h1></section>
- <section><h1>387</h1></section>
- <section><h1>388</h1></section>
- <section><h1>389</h1></section>
- <section><h1>390</h1></section>
- <section><h1>391</h1></section>
- <section><h1>392</h1></section>
- <section><h1>393</h1></section>
- <section><h1>394</h1></section>
- <section><h1>395</h1></section>
- <section><h1>396</h1></section>
- <section><h1>397</h1></section>
- <section><h1>398</h1></section>
- <section><h1>399</h1></section>
- <section><h1>400</h1></section>
- <section><h1>401</h1></section>
- <section><h1>402</h1></section>
- <section><h1>403</h1></section>
- <section><h1>404</h1></section>
- <section><h1>405</h1></section>
- <section><h1>406</h1></section>
- <section><h1>407</h1></section>
- <section><h1>408</h1></section>
- <section><h1>409</h1></section>
- <section><h1>410</h1></section>
- <section><h1>411</h1></section>
- <section><h1>412</h1></section>
- <section><h1>413</h1></section>
- <section><h1>414</h1></section>
- <section><h1>415</h1></section>
- <section><h1>416</h1></section>
- <section><h1>417</h1></section>
- <section><h1>418</h1></section>
- <section><h1>419</h1></section>
- <section><h1>420</h1></section>
- <section><h1>421</h1></section>
- <section><h1>422</h1></section>
- <section><h1>423</h1></section>
- <section><h1>424</h1></section>
- <section><h1>425</h1></section>
- <section><h1>426</h1></section>
- <section><h1>427</h1></section>
- <section><h1>428</h1></section>
- <section><h1>429</h1></section>
- <section><h1>430</h1></section>
- <section><h1>431</h1></section>
- <section><h1>432</h1></section>
- <section><h1>433</h1></section>
- <section><h1>434</h1></section>
- <section><h1>435</h1></section>
- <section><h1>436</h1></section>
- <section><h1>437</h1></section>
- <section><h1>438</h1></section>
- <section><h1>439</h1></section>
- <section><h1>440</h1></section>
- <section><h1>441</h1></section>
- <section><h1>442</h1></section>
- <section><h1>443</h1></section>
- <section><h1>444</h1></section>
- <section><h1>445</h1></section>
- <section><h1>446</h1></section>
- <section><h1>447</h1></section>
- <section><h1>448</h1></section>
- <section><h1>449</h1></section>
- <section><h1>450</h1></section>
- <section><h1>451</h1></section>
- <section><h1>452</h1></section>
- <section><h1>453</h1></section>
- <section><h1>454</h1></section>
- <section><h1>455</h1></section>
- <section><h1>456</h1></section>
- <section><h1>457</h1></section>
- <section><h1>458</h1></section>
- <section><h1>459</h1></section>
- <section><h1>460</h1></section>
- <section><h1>461</h1></section>
- <section><h1>462</h1></section>
- <section><h1>463</h1></section>
- <section><h1>464</h1></section>
- <section><h1>465</h1></section>
- <section><h1>466</h1></section>
- <section><h1>467</h1></section>
- <section><h1>468</h1></section>
- <section><h1>469</h1></section>
- <section><h1>470</h1></section>
- <section><h1>471</h1></section>
- <section><h1>472</h1></section>
- <section><h1>473</h1></section>
- <section><h1>474</h1></section>
- <section><h1>475</h1></section>
- <section><h1>476</h1></section>
- <section><h1>477</h1></section>
- <section><h1>478</h1></section>
- <section><h1>479</h1></section>
- <section><h1>480</h1></section>
- <section><h1>481</h1></section>
- <section><h1>482</h1></section>
- <section><h1>483</h1></section>
- <section><h1>484</h1></section>
- <section><h1>485</h1></section>
- <section><h1>486</h1></section>
- <section><h1>487</h1></section>
- <section><h1>488</h1></section>
- <section><h1>489</h1></section>
- <section><h1>490</h1></section>
- <section><h1>491</h1></section>
- <section><h1>492</h1></section>
- <section><h1>493</h1></section>
- <section><h1>494</h1></section>
- <section><h1>495</h1></section>
- <section><h1>496</h1></section>
- <section><h1>497</h1></section>
- <section><h1>498</h1></section>
- <section><h1>499</h1></section>
- </div>
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- Reveal.initialize({
- transition: 'linear'
- });
- </script>
- </body>
-</html>
diff --git a/recitation/debugging/examples/assets/beeping.txt b/recitation/debugging/examples/assets/beeping.txt
deleted file mode 100644
index bf419974a47d1b5111eaff6c39d68bbbc17ba3b1..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/assets/beeping.txt
+++ /dev/null
@@ -1,2 +0,0 @@
-Source: https://freesound.org/people/fennelliott/sounds/379419/
-License: CC0 (public domain)
\ No newline at end of file
diff --git a/recitation/debugging/examples/assets/beeping.wav b/recitation/debugging/examples/assets/beeping.wav
deleted file mode 100644
index 38747a533a78497c52134dc0ea13ba197eec9e85..0000000000000000000000000000000000000000
Binary files a/recitation/debugging/examples/assets/beeping.wav and /dev/null differ
diff --git a/recitation/debugging/examples/assets/image1.png b/recitation/debugging/examples/assets/image1.png
deleted file mode 100644
index 87475945d0700ff26588a761aa87cab03d28a752..0000000000000000000000000000000000000000
Binary files a/recitation/debugging/examples/assets/image1.png and /dev/null differ
diff --git a/recitation/debugging/examples/assets/image2.png b/recitation/debugging/examples/assets/image2.png
deleted file mode 100644
index 6c403a0d20be97d7f4ce000487fac783764dbaf7..0000000000000000000000000000000000000000
Binary files a/recitation/debugging/examples/assets/image2.png and /dev/null differ
diff --git a/recitation/debugging/examples/auto-animate.html b/recitation/debugging/examples/auto-animate.html
deleted file mode 100644
index 199810e409a2eae2a2b5c14b418f67adb62b2521..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/auto-animate.html
+++ /dev/null
@@ -1,225 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Auto Animate</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/black.css" id="theme">
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
- <section data-auto-animate data-auto-animate-unmatched="fade">
- <h3>Auto-Animate Example</h3>
- <p>This will fade out</p>
- <img src="assets/image1.png" style="height: 100px;">
- <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
- function Example() {
- const [count, setCount] = useState(0);
- }
- </code></pre>
- </section>
- <section data-auto-animate data-auto-animate-unmatched="fade">
- <h3>Auto-Animate Example</h3>
- <p style="opacity: 0.2; margin-top: 100px;">This will fade out</p>
- <p>This element is unmatched</p>
- <img src="assets/image1.png" style="height: 150px;">
- <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
- function Example() {
- New line!
- const [count, setCount] = useState(0);
- }
- </code></pre>
- </section>
-
- <section data-auto-animate>
- <p data-id="text-props" style="background: #555; line-height: 1em; letter-spacing: 0em;">Line Height & Letter Spacing</p>
- </section>
- <section data-auto-animate>
- <p data-id="text-props" style="background: #555; line-height: 3em; letter-spacing: 0.2em;">Line Height & Letter Spacing</p>
- </section>
-
- <section>
- <section data-auto-animate>
- <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
- import React, { useState } from 'react';
-
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- ...
- );
- }
- </code></pre>
- </section>
- <section data-auto-animate>
- <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
- </code></pre>
- </section>
- <section data-auto-animate>
- <pre data-id="code"><code data-line-numbers class="hljs" data-trim>
- function Example() {
- // A comment!
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
- </code></pre>
- </section>
- </section>
-
- <section>
- <section data-auto-animate>
- <h3>Swapping list items</h3>
- <ul>
- <li>One</li>
- <li>Two</li>
- <li>Three</li>
- </ul>
- </section>
- <section data-auto-animate>
- <h3>Swapping list items</h3>
- <ul>
- <li>Two</li>
- <li>One</li>
- <li>Three</li>
- </ul>
- </section>
- <section data-auto-animate>
- <h3>Swapping list items</h3>
- <ul>
- <li>Two</li>
- <li>Three</li>
- <li>One</li>
- </ul>
- </section>
- </section>
-
- <section data-auto-animate style="height: 600px">
- <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h3>
- <h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
- <div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
- <div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
- <div data-id="3" style="background: white; position: absolute; top: 150px; left: 56%; width: 60px; height: 60px;"></div>
- <div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
- </section>
- <section data-auto-animate style="height: 600px">
- <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h3>
- <h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
- <div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
- <div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
- <div data-id="3" style="background: yellow; position: absolute; bottom: 190px; left: 56%; width: 60px; height: 260px;"></div>
- <div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
- </section>
- <section data-auto-animate style="height: 600px">
- <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
- <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
- <div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div>
- <div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
- <div data-id="3" style="background: yellow; position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 400px;"></div>
- <div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
- </section>
- <section data-auto-animate style="height: 600px">
- <h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
- <h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
- <div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
- <div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
- <div data-id="3" style="background: magenta; position: absolute; top: 250px; left: 56%; width: 60px; height: 60px;"></div>
- <div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
- </section>
-
- <section data-auto-animate data-auto-animate-id="a">
- <h2>data-auto-animate-id="a"</h2>
- <h3>A1</h3>
- </section>
- <section data-auto-animate data-auto-animate-id="a">
- <h2>data-auto-animate-id="a"</h2>
- <h3>A1</h3>
- <h3>A2</h3>
- </section>
- <section data-auto-animate data-auto-animate-id="b">
- <h2>data-auto-animate-id="b"</h2>
- <h3>B1</h3>
- </section>
- <section data-auto-animate data-auto-animate-id="b">
- <h2>data-auto-animate-id="b"</h2>
- <h3>B1</h3>
- <h3>B2</h3>
- </section>
-
- <section>
- <section id="stacked-slide-1" data-auto-animate>
- <a href="#/stacked-slide-1">Slide 1</a><br>
- <a href="#/stacked-slide-2">Slide 2</a><br>
- <a href="#/stacked-slide-3">Slide 3</a><br>
- <a href="#/stacked-slide-4">Slide 4</a><br>
- <div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
- </section>
- <section id="stacked-slide-2" data-auto-animate>
- <a href="#/stacked-slide-1">Slide 1</a><br>
- <a href="#/stacked-slide-2">Slide 2</a><br>
- <a href="#/stacked-slide-3">Slide 3</a><br>
- <a href="#/stacked-slide-4">Slide 4</a><br>
- <div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
- </section>
- <section id="stacked-slide-3" data-auto-animate>
- <a href="#/stacked-slide-1">Slide 1</a><br>
- <a href="#/stacked-slide-2">Slide 2</a><br>
- <a href="#/stacked-slide-3">Slide 3</a><br>
- <a href="#/stacked-slide-4">Slide 4</a><br>
- <div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
- </section>
- <section id="stacked-slide-4" data-auto-animate>
- <a href="#/stacked-slide-1">Slide 1</a><br>
- <a href="#/stacked-slide-2">Slide 2</a><br>
- <a href="#/stacked-slide-3">Slide 3</a><br>
- <a href="#/stacked-slide-4">Slide 4</a><br>
- <div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
- </section>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/highlight/highlight.js"></script>
- <script>
- Reveal.initialize({
- center: true,
- hash: true,
- plugins: [ RevealHighlight ]
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/backgrounds.html b/recitation/debugging/examples/backgrounds.html
deleted file mode 100644
index 19d40c3463e12f428c5c7189ac376ea642fe82dd..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/backgrounds.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Slide Backgrounds</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/serif.css" id="theme">
- <style type="text/css" media="screen">
- .slides section.has-dark-background,
- .slides section.has-dark-background h2 {
- color: #fff;
- }
- .slides section.has-light-background,
- .slides section.has-light-background h2 {
- color: #222;
- }
- </style>
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section data-background="#00ffff">
- <h2>data-background: #00ffff</h2>
- </section>
-
- <section data-background="#bb00bb">
- <h2>data-background: #bb00bb</h2>
- </section>
-
- <section data-background-color="lightblue">
- <h2>data-background: lightblue</h2>
- </section>
-
- <section>
- <section data-background="#ff0000">
- <h2>data-background: #ff0000</h2>
- </section>
- <section data-background="rgba(0, 0, 0, 0.2)">
- <h2>data-background: rgba(0, 0, 0, 0.2)</h2>
- </section>
- <section data-background="salmon">
- <h2>data-background: salmon</h2>
- </section>
- </section>
-
- <section data-background="rgba(0, 100, 100, 0.2)">
- <section>
- <h2>Background applied to stack</h2>
- </section>
- <section>
- <h2>Background applied to stack</h2>
- </section>
- <section data-background="rgb(66, 66, 66)">
- <h2>Background applied to slide inside of stack</h2>
- </section>
- </section>
-
- <section data-background-transition="slide" data-background="assets/image1.png">
- <h2>Background image</h2>
- </section>
-
- <section>
- <section data-background-transition="slide" data-background="assets/image1.png">
- <h2>Background image</h2>
- </section>
- <section data-background-transition="slide" data-background="assets/image1.png">
- <h2>Background image</h2>
- </section>
- </section>
-
- <section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111">
- <h2>Background image</h2>
- <pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
- </section>
-
- <section data-background="#888888">
- <h2>Same background twice (1/2)</h2>
- </section>
- <section data-background="#888888">
- <h2>Same background twice (2/2)</h2>
- </section>
-
- <section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
- <h2>Video background</h2>
- </section>
-
- <section data-background-iframe="https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000">
- <h2>Iframe background</h2>
- </section>
-
- <section>
- <section data-background="#417203">
- <h2>Same background twice vertical (1/2)</h2>
- </section>
- <section data-background="#417203">
- <h2>Same background twice vertical (2/2)</h2>
- </section>
- </section>
-
- <section data-background="#934f4d">
- <h2>Same background from horizontal to vertical (1/3)</h2>
- </section>
- <section>
- <section data-background="#934f4d">
- <h2>Same background from horizontal to vertical (2/3)</h2>
- </section>
- <section data-background="#934f4d">
- <h2>Same background from horizontal to vertical (3/3)</h2>
- </section>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- // Full list of configuration options:
- // https://revealjs.revealjs.com/config/
- Reveal.initialize({
- center: true,
-
- transition: 'linear',
- // transitionSpeed: 'slow',
- // backgroundTransition: 'slide'
- });
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/barebones.html b/recitation/debugging/examples/barebones.html
deleted file mode 100644
index 50adcb861320d29d417ae6601006b55f115a89f5..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/barebones.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>reveal.js - Barebones</title>
- <link rel="stylesheet" href="../dist/reveal.css">
- </head>
- <body>
-
- <div class="reveal">
- <div class="slides">
-
- <section>
- <h2>Barebones Presentation</h2>
- <p>This example contains the bare minimum includes and markup required to run a reveal.js presentation.</p>
- </section>
-
- <section>
- <h2>No Theme</h2>
- <p>There's no theme included, so it will fall back on browser defaults.</p>
- </section>
-
- </div>
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- Reveal.initialize();
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/layout-helpers.html b/recitation/debugging/examples/layout-helpers.html
deleted file mode 100644
index a129811f3e8eb0569ec22b925a6489d14ecb9eba..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/layout-helpers.html
+++ /dev/null
@@ -1,160 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Layout Helpers</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section>
- <h2>Layout Helper Examples</h2>
- <ul>
- <li><a href="#/fit-text">Big Text</a></li>
- <li><a href="#/stretch">Stretch</a></li>
- <li><a href="#/stack">Stack</a></li>
- <li><a href="#/hstack">HStack</a></li>
- <li><a href="#/vstack">VStack</a></li>
- </ul>
- </section>
-
- <section id="fit-text">
- <h2>Fit Text</h2>
- <p>Resizes text to be as large as possible within its container.</p>
- <pre><code class="html" data-trim data-line-numbers>
- <h2 class="r-fit-text">FIT</h2>
- </code></pre>
- </section>
-
- <section>
- <h2 class="r-fit-text">FIT</h2>
- </section>
-
- <section>
- <h2 class="r-fit-text">HELLO WORLD</h2>
- <h2 class="r-fit-text">BOTH THESE TITLES USE FIT-TEXT</h2>
- </section>
-
- <section id="stretch">
- <h2>Stretch</h2>
- <p>Makes an element as tall as possible while remaining within the slide bounds.</p>
- <pre><code class="html" data-trim data-line-numbers>
- <h2>Stretch Example</h2>
- <img src="assets/image2.png" class="r-stretch">
- <p>Image byline</p>
- </code></pre>
- </section>
-
- <section>
- <h2>Stretch Example</h2>
- <img src="assets/image2.png" class="r-stretch">
- <p>Image byline</p>
- </section>
-
- <section id="stack">
- <h2>Stack</h2>
- <p>Stacks multiple elements on top of each other, for use with fragments.</p>
- <pre><code class="html" data-trim data-line-numbers>
- <div class="r-stack">
- <img class="fragment" width="450" height="300" src="...">
- <img class="fragment" width="300" height="450" src="...">
- <img class="fragment" width="400" height="400" src="...">
- </div>
- </code></pre>
- </section>
-
- <section>
- <h2>Stack Example</h2>
- <div class="r-stack">
- <p class="fragment fade-in-then-out">One</p>
- <p class="fragment fade-in-then-out">Two</p>
- <p class="fragment fade-in-then-out">Three</p>
- <p class="fragment fade-in-then-out">Four</p>
- </div>
- <div class="r-stack">
- <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment">
- <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment">
- <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment">
- </div>
- </section>
-
- <section>
- <h2>Stack Example</h2>
- <p>fade-in-then-out fragments</p>
- <div class="r-stack">
- <img src="https://placekitten.com/450/300" width="450" height="300" class="fragment fade-in-then-out">
- <img src="https://placekitten.com/300/450" width="300" height="450" class="fragment fade-in-then-out">
- <img src="https://placekitten.com/400/400" width="400" height="400" class="fragment fade-in-then-out">
- </div>
- </section>
-
- <section id="hstack">
- <h2>HStack</h2>
- <p>Stacks multiple elements horizontally.</p>
- <pre><code class="html" data-trim data-line-numbers>
- <div class="r-hstack">
- <img width="450" height="300" src="...">
- <img width="300" height="450" src="...">
- <img width="400" height="400" src="...">
- </div>
- </code></pre>
- </section>
-
- <section data-auto-animate>
- <h2>HStack Example</h2>
- <div class="r-hstack">
- <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
- <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
- <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
- </div>
- </section>
-
- <section id="vstack">
- <h2>VStack</h2>
- <p>Stacks multiple elements vertically.</p>
- <pre><code class="html" data-trim data-line-numbers>
- <div class="r-vstack">
- <img width="450" height="300" src="...">
- <img width="300" height="450" src="...">
- <img width="400" height="400" src="...">
- </div>
- </code></pre>
- </section>
-
- <section data-auto-animate>
- <h2>VStack Example</h2>
- <div class="r-vstack">
- <p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
- <p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
- <p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
- </div>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/highlight/highlight.js"></script>
- <script>
- Reveal.initialize({
- center: true,
- hash: true,
- plugins: [ RevealHighlight ]
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/markdown.html b/recitation/debugging/examples/markdown.html
deleted file mode 100644
index 4d69f052a954bc9fc69e2a685347c8f28a15788f..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/markdown.html
+++ /dev/null
@@ -1,161 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Markdown Example</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
-
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
- <section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
-
- <!-- Slides are separated by three dashes (the default) -->
- <section data-markdown>
- <script type="text/template">
- ## Demo 1
- Slide 1
- ---
- ## Demo 1
- Slide 2
- ---
- ## Demo 1
- Slide 3
- </script>
- </section>
-
- <!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
- <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
- <script type="text/template">
- ## Demo 2
- Slide 1.1
-
- --
-
- ## Demo 2
- Slide 1.2
-
- ---
-
- ## Demo 2
- Slide 2
- </script>
- </section>
-
- <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
- <section data-markdown data-separator="$x">
- <script type="text/template">
- A
-
- ---
-
- B
-
- ---
-
- C
- </script>
- </section>
-
- <!-- Slide attributes -->
- <section data-markdown>
- <script type="text/template">
- <!-- .slide: data-background="#000000" -->
- ## Slide attributes
- </script>
- </section>
-
- <!-- Element attributes -->
- <section data-markdown>
- <script type="text/template">
- ## Element attributes
- - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
- </script>
- </section>
-
- <!-- Code -->
- <section data-markdown>
- <script type="text/template">
- ```php [1|3-5]
- public function foo()
- {
- $foo = array(
- 'bar' => 'bar'
- )
- }
- ```
- </script>
- </section>
-
- <!-- add optional line count offset, in this case 287 -->
- <section data-markdown>
- <script type="text/template">
- ## echo.c
-
- ```c [287: 2|4,6]
- /* All of the options in this arg are valid, so handle them. */
- p = arg + 1;
- do {
- if (*p == 'n')
- nflag = 0;
- if (*p == 'e')
- eflag = '\\';
- } while (*++p);
- ```
- [source](https://git.busybox.net/busybox/tree/coreutils/echo.c?h=1_36_stable#n287)
- </script>
- </section>
-
- <!-- Images -->
- <section data-markdown>
- <script type="text/template">
- 
- </script>
- </section>
-
- <!-- Math -->
- <section data-markdown>
- ## The Lorenz Equations
- `\[\begin{aligned}
- \dot{x} & = \sigma(y-x) \\
- \dot{y} & = \rho x - y - xz \\
- \dot{z} & = -\beta z + xy
- \end{aligned} \]`
- </section>
-
- </div>
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/markdown/markdown.js"></script>
- <script src="../plugin/highlight/highlight.js"></script>
- <script src="../plugin/notes/notes.js"></script>
- <script src="../plugin/math/math.js"></script>
-
- <script>
-
- Reveal.initialize({
- controls: true,
- progress: true,
- history: true,
- center: true,
-
- plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
- });
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/markdown.md b/recitation/debugging/examples/markdown.md
deleted file mode 100644
index 1315172c082cc86d7a0d70407c00b9cf60ad3f0c..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/markdown.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Markdown Demo
-
-
-
-## External 1.1
-
-Content 1.1
-
-Note: This will only appear in the speaker notes window.
-
-
-## External 1.2
-
-Content 1.2
-
-
-
-## External 2
-
-Content 2.1
-
-
-
-## External 3.1
-
-Content 3.1
-
-
-## External 3.2
-
-Content 3.2
-
-
-## External 3.3 (Image)
-
-
-
-
-## External 3.4 (Math)
-
-`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`
diff --git a/recitation/debugging/examples/math.html b/recitation/debugging/examples/math.html
deleted file mode 100644
index bd2e75a6dfb40cfcdd483203df084400b9b3e680..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/math.html
+++ /dev/null
@@ -1,206 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Math Plugin</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/night.css" id="theme">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section>
- <h2>reveal.js Math Plugin</h2>
- <p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
- </section>
-
- <section>
- <h3>The Lorenz Equations</h3>
-
- \[\begin{aligned}
- \dot{x} & = \sigma(y-x) \\
- \dot{y} & = \rho x - y - xz \\
- \dot{z} & = -\beta z + xy
- \end{aligned} \]
- </section>
-
- <section>
- <h3>The Cauchy-Schwarz Inequality</h3>
-
- <script type="math/tex; mode=display">
- \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
- </script>
- </section>
-
- <section>
- <h3>A Cross Product Formula</h3>
-
- \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
- \mathbf{i} & \mathbf{j} & \mathbf{k} \\
- \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
- \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
- \end{vmatrix} \]
- </section>
-
- <section>
- <h3>The probability of getting \(k\) heads when flipping \(n\) coins is</h3>
-
- \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]
- </section>
-
- <section>
- <h3>An Identity of Ramanujan</h3>
-
- \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
- 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
- {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
- </section>
-
- <section>
- <h3>A Rogers-Ramanujan Identity</h3>
-
- \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
- \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\]
- </section>
-
- <section>
- <h3>Maxwell’s Equations</h3>
-
- \[ \begin{aligned}
- \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
- \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
- \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
- \]
- </section>
-
- <section>
- <h3>TeX Macros</h3>
-
- Here is a common vector space:
- \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\]
- used in functional analysis.
- </section>
-
- <section>
- <section>
- <h3>The Lorenz Equations</h3>
-
- <div class="fragment">
- \[\begin{aligned}
- \dot{x} & = \sigma(y-x) \\
- \dot{y} & = \rho x - y - xz \\
- \dot{z} & = -\beta z + xy
- \end{aligned} \]
- </div>
- </section>
-
- <section>
- <h3>The Cauchy-Schwarz Inequality</h3>
-
- <div class="fragment">
- \[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]
- </div>
- </section>
-
- <section>
- <h3>A Cross Product Formula</h3>
-
- <div class="fragment">
- \[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
- \mathbf{i} & \mathbf{j} & \mathbf{k} \\
- \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
- \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0
- \end{vmatrix} \]
- </div>
- </section>
-
- <section>
- <h3>The probability of getting \(k\) heads when flipping \(n\) coins is</h3>
-
- <div class="fragment">
- \[P(E) = {n \choose k} p^k (1-p)^{ n-k} \]
- </div>
- </section>
-
- <section>
- <h3>An Identity of Ramanujan</h3>
-
- <div class="fragment">
- \[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
- 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
- {1+\frac{e^{-8\pi}} {1+\ldots} } } } \]
- </div>
- </section>
-
- <section>
- <h3>A Rogers-Ramanujan Identity</h3>
-
- <div class="fragment">
- \[ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
- \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}\]
- </div>
- </section>
-
- <section>
- <h3>Maxwell’s Equations</h3>
-
- <div class="fragment">
- \[ \begin{aligned}
- \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
- \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
- \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned}
- \]
- </div>
- </section>
-
- <section>
- <h3>TeX Macros</h3>
-
- Here is a common vector space:
- \[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 < +\infty}\]
- used in functional analysis.
- </section>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/math/math.js"></script>
- <script>
- Reveal.initialize({
- history: true,
- transition: 'linear',
-
- mathjax2: {
- config: 'TeX-AMS_HTML-full',
- TeX: {
- Macros: {
- R: '\\mathbb{R}',
- set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
- }
- }
- },
-
- // There are three typesetters available
- // RevealMath.MathJax2 (default)
- // RevealMath.MathJax3
- // RevealMath.KaTeX
- //
- // More info at https://revealjs.com/math/
- plugins: [ RevealMath.MathJax2 ]
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/media.html b/recitation/debugging/examples/media.html
deleted file mode 100644
index 388208f8091e77c580cd52b5013cd4bf71dcfcac..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/media.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Video, Audio and Iframes</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section>
- <h2>Examples of embedded Video, Audio and Iframes</h2>
- </section>
-
- <section>
- <h2>Iframe</h2>
- <iframe data-autoplay width="700" height="540" src="https://slides.com/news/auto-animate/embed" frameborder="0"></iframe>
- </section>
-
- <section data-background-iframe="https://www.youtube.com/embed/h1_nyI3z8gI" data-background-interactive>
- <h2 style="color: #fff;">Iframe Background</h2>
- </section>
-
- <section>
- <h2>Video</h2>
- <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-autoplay></video>
- </section>
-
- <section data-background-video="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
- <h2>Background Video</h2>
- </section>
-
- <section>
- <h2>Auto-playing audio</h2>
- <audio src="assets/beeping.wav" data-autoplay></audio>
- </section>
-
- <section>
- <h2>Audio inside slide fragments</h2>
- <div class="fragment">
- Beep 1
- <audio src="assets/beeping.wav" data-autoplay></audio>
- </div>
- <div class="fragment">
- Beep 2
- <audio src="assets/beeping.wav" data-autoplay></audio>
- </div>
- </section>
-
- <section>
- <h2>Audio with controls</h2>
- <audio src="assets/beeping.wav" controls></audio>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- Reveal.initialize({hash: true});
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/multiple-presentations.html b/recitation/debugging/examples/multiple-presentations.html
deleted file mode 100644
index e5347d4a25c4b2c076a97864abce5241ec8dc9e3..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/multiple-presentations.html
+++ /dev/null
@@ -1,102 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Multiple Presentations</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
- </head>
-
- <body style="background: #ddd;">
-
- <div style="display: flex; flex-direction: row;">
- <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;">
- <div class="slides">
- <section>Deck 1, Slide 1</section>
- <section>Deck 1, Slide 2</section>
- <section>
- <pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
- import React, { useState } from 'react';
- function Example() {
- const [count, setCount] = useState(0);
- }
- </code></pre>
- </section>
- </div>
- </div>
-
- <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;">
- <div class="slides">
- <section>Deck 2, Slide 1</section>
- <section>Deck 2, Slide 2</section>
- <section data-markdown>
- <script type="text/template">
- ## Markdown plugin
-
- - 1
- - 2
- - 3
- </script>
- </section>
- <section>
- <h3>The Lorenz Equations</h3>
-
- \[\begin{aligned}
- \dot{x} & = \sigma(y-x) \\
- \dot{y} & = \rho x - y - xz \\
- \dot{z} & = -\beta z + xy
- \end{aligned} \]
- </section>
- </div>
- </div>
- </div>
-
- <style>
- .reveal {
- border: 4px solid #ccc;
- }
- .reveal.focused {
- border-color: #94b5ff;
- }
- </style>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/highlight/highlight.js"></script>
- <script src="../plugin/markdown/markdown.js"></script>
- <script src="../plugin/math/math.js"></script>
- <script>
-
- let deck1 = new Reveal( document.querySelector( '.deck1' ), {
- embedded: true,
- progress: false,
- keyboardCondition: 'focused',
- plugins: [ RevealHighlight ]
- } );
- deck1.on( 'slidechanged', () => {
- console.log( 'Deck 1 slide changed' );
- } );
- deck1.initialize();
-
- let deck2 = new Reveal( document.querySelector( '.deck2' ), {
- embedded: true,
- progress: false,
- keyboardCondition: 'focused',
- plugins: [ RevealMarkdown, RevealMath ]
- } );
- deck2.initialize().then( () => {
- deck2.slide(1);
- } );
- deck2.on( 'slidechanged', () => {
- console.log( 'Deck 2 slide changed' );
- } );
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/scroll.html b/recitation/debugging/examples/scroll.html
deleted file mode 100644
index 546ca1c35bd537c7a3a0295939d82d86162daa22..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/scroll.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Scroll View</title>
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="../dist/reset.css">
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/black.css" id="theme">
- <link rel="stylesheet" href="../plugin/highlight/monokai.css">
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section><h1>Scroll View</h1></section>
- <section data-background="indigo">
- <h2>Scroll triggered fragments</h2>
- <ul>
- <li class="fragment fade-left">Step one</li>
- <li class="fragment fade-left">Step two</li>
- <li class="fragment fade-left">Step three</li>
- </ul>
- </section>
- <section data-background-color="#fff"><h2>Scrollbar inverts<br>based on slide bg</h2></section>
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <h2>Auto-Animate</h2>
- <p>Scroll triggered auto-animations ðŸ˜</p>
- <div class="r-hstack justify-center">
- <div data-id="box1" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- <div data-id="box2" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- <div data-id="box3" style="background: #999; width: 50px; height: 50px; margin: 10px; border-radius: 5px;"></div>
- </div>
- </section>
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <div class="r-hstack justify-center">
- <div data-id="box1" data-auto-animate-delay="0" style="background: cyan; width: 150px; height: 100px; margin: 10px;"></div>
- <div data-id="box2" data-auto-animate-delay="0.1" style="background: magenta; width: 150px; height: 100px; margin: 10px;"></div>
- <div data-id="box3" data-auto-animate-delay="0.2" style="background: yellow; width: 150px; height: 100px; margin: 10px;"></div>
- </div>
- <h2 style="margin-top: 20px;">Auto-Animate</h2>
- </section>
- <section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
- <div class="r-stack">
- <div data-id="box1" style="background: cyan; width: 300px; height: 300px; border-radius: 200px;"></div>
- <div data-id="box2" style="background: magenta; width: 200px; height: 200px; border-radius: 200px;"></div>
- <div data-id="box3" style="background: yellow; width: 100px; height: 100px; border-radius: 200px;"></div>
- </div>
- <h2 style="margin-top: 20px;">Auto-Animate</h2>
- </section>
- <section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" id="gradient-bg">
- <h2 data-id="code-title">Code highlights,<br />meet scroll triggers</h2>
- <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
- import React, { useState } from 'react';
-
- function Example() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
-
- function SecondExample() {
- const [count, setCount] = useState(0);
-
- return (
- <div>
- <p>You clicked {count} times</p>
- <button onClick={() => setCount(count + 1)}>
- Click me
- </button>
- </div>
- );
- }
- </script></code></pre>
- </section>
- <section class="stack">
- <section data-background="https://static.slid.es/reveal/image-placeholder.png" id="image-bg">
- <h2>Image Backgrounds</h2>
- </section>
- <section data-background-video-muted data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm">
- <h2>Video background</h2>
- </section>
- </section>
- <section><h2>The end</h2></section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/notes/notes.js"></script>
- <script src="../plugin/markdown/markdown.js"></script>
- <script src="../plugin/highlight/highlight.js"></script>
- <script>
- Reveal.initialize({
- view: 'scroll',
- hash: true,
-
- plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/examples/transitions.html b/recitation/debugging/examples/transitions.html
deleted file mode 100644
index adbfd150e722603a0a2942e4e7cf4d9ebfa6c48d..0000000000000000000000000000000000000000
--- a/recitation/debugging/examples/transitions.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Slide Transitions</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../dist/theme/white.css" id="theme">
- <style type="text/css" media="screen">
- .slides section.has-dark-background,
- .slides section.has-dark-background h3 {
- color: #fff;
- }
- .slides section.has-light-background,
- .slides section.has-light-background h3 {
- color: #222;
- }
- </style>
- </head>
-
- <body>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section>
- <h3>Default</h3>
- </section>
-
- <section>
- <h3>Default</h3>
- </section>
-
- <section data-transition="zoom">
- <h3>data-transition: zoom</h3>
- </section>
-
- <section data-transition="zoom-in fade-out">
- <h3>data-transition: zoom-in fade-out</h3>
- </section>
-
- <section>
- <h3>Default</h3>
- </section>
-
- <section data-transition="convex">
- <h3>data-transition: convex</h3>
- </section>
-
- <section data-transition="convex-in concave-out">
- <h3>data-transition: convex-in concave-out</h3>
- </section>
-
- <section>
- <section data-transition="zoom">
- <h3>Default</h3>
- </section>
- <section data-transition="concave">
- <h3>data-transition: concave</h3>
- </section>
- <section data-transition="convex-in fade-out">
- <h3>data-transition: convex-in fade-out</h3>
- </section>
- <section>
- <h3>Default</h3>
- </section>
- </section>
-
- <section data-transition="none">
- <h3>data-transition: none</h3>
- </section>
-
- <section>
- <h3>Default</h3>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- Reveal.initialize({
- center: true,
- history: true,
-
- // transition: 'slide',
- // transitionSpeed: 'slow',
- // backgroundTransition: 'slide'
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/index.html b/recitation/debugging/index.html
index 2097df32e217928e3a81e5f702c532443d3772ae..585a10486378c1e85999eb33e02cd7415ed392e7 100644
--- a/recitation/debugging/index.html
+++ b/recitation/debugging/index.html
@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>reveal.js</title>
+ <title>Programming recitation</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
@@ -16,25 +16,1029 @@
<body>
<div class="reveal">
<div class="slides">
- <section>Slide 1</section>
- <section>Slide 2</section>
- </div>
- </div>
-
- <script src="dist/reveal.js"></script>
- <script src="plugin/notes/notes.js"></script>
- <script src="plugin/markdown/markdown.js"></script>
- <script src="plugin/highlight/highlight.js"></script>
- <script>
- // More info about initialization & config:
- // - https://revealjs.com/initialization/
- // - https://revealjs.com/config/
- Reveal.initialize({
- hash: true,
-
- // Learn about plugins: https://revealjs.com/plugins/
- plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
- });
- </script>
- </body>
+
+<section>
+ <h1>Microcontroller programming</h1>
+ <figure><img src="img/mc.png" style="height:150px;"></figure>
+ <p>2024-02-26</p>
+ <p>Nicolas <span style="font-variant: small-caps;">De Coster</span> & Henk <span style="font-variant: small-caps;">Buursen</span></p>
+</section>
+
+<section>
+ <h2>Choose microcontroller</h2>
+ <section>
+ <h3>Better "fit for purpose"</h3>
+ <p>Consider:
+ <ul>
+ <li>processing power</li>
+ <li>memory</li>
+ <li>I/O capabilities</li>
+ <li>power consumption</li>
+ <li>existing libraries / support</li>
+ </ul>
+ </p>
+ </section>
+
+ <section>
+ <h3>AtTiny (412 / 1614 / 3216 / ...)</h3>
+ <p>AtTiny microcontrollers are low-cost and low-power devices suitable for simple embedded applications with limited processing and I/O requirements.</p>
+ <p>Programming : UPDI (older : ISP)</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/8pins.png" style="width : 25%">
+ </figure>
+ <p>AtTiny (412 / 1614 / 3216 / ...)</p>
+ <ul>
+ <li>8 bits - 1MHz-20Mhz (→ 32MHz overclock)</li>
+ <li>Versatile I/O (analog, pwm, i²c, UART, SPI, ...)</li>
+ <li>Single pin programming (UPDI)</li>
+ <li>Sandbox board : <a href="http://fabacademy.org/2020/labs/leon/students/adrian-torres/adrianino.html">Adrianino</a></li>
+ </ul>
+ <aside class="notes">
+ 8bits doesn't mean unable to handle 32bits numbers
+ </aside>
+ </section>
+
+ <section>
+ <h3>SAMD (11C, 11D, 21E, D51)</h3>
+ <p>SAMD microcontrollers offer a balance of performance and power efficiency, making them suitable for a wide range of applications including IoT devices and wearables.</p>
+ <p>Programming : SWD / JTAG</p>
+ <aside class="notes">
+ I pre-program bootloaders
+ </aside>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/32pins.png" style="width : 25%">
+ </figure>
+ <p>SAMD (11C, 11D, 21E, D51)</p>
+ <ul>
+ <li>32 bits - 48MHz - Single ARM Cortex-M0+</li>
+ <li>Native USB support (+CDC +HID)</li>
+ <li>Versatile I/O (analog, pwm, i²c, UART, SPI, ...)</li>
+ <li>Sandbox board : <a href="https://fabacademy.org/2020/labs/leon/students/adrian-torres/samdino.html">Samdino</a>
+ </ul>
+ </section>
+
+ <section>
+ <h3>RP2040</h3>
+ <p>The RP2040, developed by Raspberry Pi, is a dual-core ARM Cortex-M0+ microcontroller with versatile I/O capabilities (PIO!), making it ideal for projects requiring multitasking and connectivity.</p>
+ <p>Programming : UF2</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/rp2040.png" style="width : 25%">
+ </figure>
+ <p>RP2040</p>
+ <ul>
+ <li>32 bits - 133MHz (→ >250MHz overclocking)</li>
+ <li>Dual ARM Cortex-M0+</li>
+ <li>Hardcoded bootloader - XIAO module or RPi Zero</li>
+ <li>Sandbox board : <a href="https://fabacademy.org/2020/labs/leon/students/adrian-torres/fabxiao.html">FabXIAO</a>
+ </ul>
+ </section>
+
+ <section>
+ <h3>ESP32-C3/S3</h3>
+ <p>ESP32-C3 and ESP32-S3 are microcontrollers developed by Espressif Systems, known for their built-in Wi-Fi and Bluetooth capabilities. They are commonly used in IoT projects requiring wireless connectivity.</p>
+ <ul>
+ <li>RISC-V - 160MHz</li>
+ <li>Wifi 4 - BlueTooth 5 (LE)</li>
+ <li>Versatile I/O</li>
+ <li>Sandbox board : <a href="https://fabacademy.org/2020/labs/leon/students/adrian-torres/fabxiao.html">FabXIAO</a></li>
+ </ul>
+ </section>
+
+ <section>
+ <h3>Others</h3>
+ <p>
+ <dl>
+ <dd><a href="https://www.st.com/en/evaluation-tools/stm32-nucleo-boards.html">STM32</a></dd>
+ </dt></dt>
+ <dd><a href="https://www.microchip.com/en-us/products/microcontrollers-and-microprocessors">PIC (Microchip)</a></dd>
+ <dt></dt>
+ <dd><a href="https://www.ti.com/microcontrollers-mcus-processors/msp430-microcontrollers/overview.html">MSP/TI</a></dd>
+ <dt></dt>
+ <dd>...</dd>
+ <dt></dt>
+ </dl>
+ </p>
+ </section>
+
+ <section>
+ <h3>General rule : RTFM / RTFDatasheet</h3>
+ <p>Always refer to the microcontroller's datasheet and reference manual for detailed specifications and usage instructions. These documents provide essential information for programming and configuring the microcontroller.</p>
+ </section>
+ <section>
+ <figure>
+ <img src="img/rtfm.png">
+ </figure>
+ </section>
+</section>
+
+
+
+<section>
+ <h2>Choose language</h2>
+ <section>
+ <figure>
+ <img src="img/compiling.png" style="width:50%">
+ </figure>
+ <p>Bootcamp instructors 2024 : <a href="https://academany.fabcloud.io/fabacademy/2024/bootcamp-instructors/workshops/programming-languages/" target="programming_lang">different languages tests</a></p>
+ </section>
+ <section style="background-image: url('img/matrix.jpg'); background-size:cover;">
+ <h3>Assembly / PIO / VHDL / Verilog</h3>
+ <p>Assembly language provides direct control over the microcontroller's hardware, making it efficient but complex to write. Programmable I/O (PIO) offers a way to offload I/O operations from the CPU, enhancing performance in certain scenarios.</p>
+ <p>Learn binary/logic basics! (worth it!)</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/cpp.png" style="height:150px;">
+ </figure>
+ <p>C and C++ are widely used for microcontroller programming due to their efficiency and low-level access to hardware. They are compiled languages, meaning the code is translated into machine language before execution.</p>
+ <p>Note : Arduino is C++ based</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/rust.png" style="height:150px;">
+ </figure>
+ <p>Rust is gaining popularity for microcontroller development due to its strong safety guarantees and modern features. Like C and C++, Rust code is compiled before execution.</p>
+ <p>E.g.<a href="https://fab.cba.mit.edu/classes/863.23/EECS/people/Yohan/week2/">Minecraft rendering on RP2040</a></p>
+ </section>
+
+ <section>
+ <figure>
+ <a href="https://wiki.seeedstudio.com/XIAO-RP2040-with-MicroPython/"><img src="img/micropython.png" style="height:150px;"></a>
+ </figure>
+ <p>MicroPython offers a higher level of abstraction compared to C and assembly, making it easier to write and understand code. It can be either interpreted directly or precompiled into bytecode for execution.</p>
+ </section>
+
+ <section>
+ <figure>
+ <a href="https://kalumajs.org/"><img src="img/js.png" style="height:150px;"></a>
+ </figure>
+ <p>JavaScript can be used for microcontroller programming (<a href="https://kalumajs.org/">Kaluma</a> / <a href="https://www.espruino.com/">Esrpuino</a>). It offers a familiar syntax for web developers but typically requires more resources compared to lower-level languages like C.</p>
+ </section>
+
+ <section>
+ <h3>Mixed languages</h3>
+ <p>Mixing languages might give you the best of each world. E.g. : ASM → C → C++</p>
+ </section>
+
+ <section>
+ <h4>Mixing microPython and PIO "assembly" on RP2040</h4>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|15-19|21-36"><script type="text/template">
+import array, time
+import rp2
+import machine
+NUM_LEDS = 10
+BLACK = (0, 0, 0)
+RED = (255, 0, 0)
+YELLOW = (255, 150, 0)
+GREEN = (0, 255, 0)
+CYAN = (0, 255, 255)
+BLUE = (0, 0, 255)
+PURPLE = (180, 0, 255)
+WHITE = (255, 255, 255)
+COLORS = (BLACK, RED, YELLOW, GREEN, CYAN, BLUE, PURPLE, WHITE)
+BRIGHTNESS = 0.1
+def setColor(color):
+ r = int(color[0]*BRIGHTNESS)
+ g = int(color[1]*BRIGHTNESS)
+ b = int(color[2]*BRIGHTNESS)
+ return (g<<16) + (r<<8) + b
+
+@rp2.asm_pio(set_init=rp2.PIO.OUT_LOW, out_init=rp2.PIO.OUT_LOW, out_shiftdir=rp2.PIO.SHIFT_LEFT, autopull=True, pull_thresh=24)
+def ws2812():
+ # 1 step = 0.2us (clock frequency must be set to 5MHz)
+ wrap_target()
+ # 1 step at 0 (to wait for data in low state, reset code)
+ out(x, 1)
+ # start of the cycle
+ # 2 step at 1
+ set(pins, 1) [1]
+ # 2 step at x
+ mov(pins, x) [1]
+ # 1 step at 0
+ set(pins, 0)
+ wrap()
+sm = rp2.StateMachine(0, ws2812, freq=5_000_000, set_base=machine.Pin(12), out_base=machine.Pin(12))
+sm.active(1)
+
+ar = array.array("I", [0 for _ in range(NUM_LEDS)])
+
+# Set all leds to green
+for i in range(NUM_LEDS):
+ ar[i] = setColor(GREEN)
+sm.put(ar, 8)
+time.sleep_ms(50)
+
+# Rotate one red led
+cpt = 1
+while True:
+ ar[cpt-1] = setColor(GREEN)
+ ar[cpt] = setColor(RED)
+ sm.put(ar, 8)
+ time.sleep_ms(50)
+ cpt = (cpt+1)%NUM_LEDS
+ </script></code></pre>
+ </section>
+</section>
+
+<section>
+ <h2>Programming</h2>
+ <section>
+ <h3>Direct programming :<br> UPDI / ISP / SWD / JTAG</h3>
+ <p>These are various methods for directly programming microcontrollers. They involve using specialized hardware interfaces to transfer compiled code into the microcontroller's memory.</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/bootloader.png">
+ </figure>
+ <p>Bootloader : small program stored memory that initialize the µC and load/rewrite code from a secondary storage device such as serial port (USB/UART), flash memory or EEPROM.</p>
+ </section>
+
+ <section>
+ <h3>Hardcoded bootloader (<a href="https://github.com/microsoft/uf2">UF2</a>)</h3>
+ <p>Hardcoded bootloaders like UF2 provide a convenient way to load firmware onto a microcontroller without requiring a separate programming tool. They are often used in development boards and single-board computers. (e.g. : XIAO2040)</p>
+ </section>
+
+ <section>
+ <h3>One programmer to rule them all</h3>
+ <a href="https://gitlab.fabcloud.org/pub/programmers/quentorres"><figure>
+ <img src="img/ring.png" style="height : 150px;">
+ <figcaption>Quentorres</figcaption>
+ </figure></a>
+ <p>Basic board for using Alex Tardov's <a href="https://github.com/ataradov/free-dap">Free DAP</a></p>
+ </section>
+
+</section>
+
+<section>
+ <h2>Arduino (C/C++)</h2>
+ <section>
+ <h3>Know the differences:</h3>
+ <p>Understanding the distinction between Arduino as a hardware platform, the Arduino libraries, and the Arduino IDE is essential for effective microcontroller programming with Arduino-compatible boards.</p>
+ </section>
+
+ <section>
+ <h3>Arduino Uno = board = hardware</h3>
+ <p>The Arduino Uno refers to a specific hardware board featuring an Atmel ATmega328P microcontroller. It is (was?) one of the most commonly used Arduino boards for prototyping and educational purposes.</p>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/arduino_uno.png" style="width:40%">
+ <figcaption>Arduino Uno R3 board (quite outdated)</figcaption>
+ </figure>
+ </section>
+
+ <section>
+ <h3>Arduino is a set of libraries</h3>
+ <p>Arduino provides a rich set of libraries that simplify common tasks such as reading analog inputs, controlling digital outputs, and communicating with peripherals like sensors and displays.</p>
+ <ul>
+ <li>Let you write code without knowing all the registers details and in a portable (various chips) way.</li>
+ <li>Generated code usually (much) less efficient.</li>
+ </ul>
+ </section>
+
+ <section data-auto-animate>
+ <h3 data-id="code-title">"Pure C" VS Arduino</h3>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|27-30|44-47"><script type="text/template">
+//
+// ring.t412.ino
+//
+// ATtiny412 ring oscillator test
+//
+// Neil Gershenfeld 11/13/20
+//
+// This work may be reproduced, modified, distributed,
+// performed, and displayed for any purpose, but must
+// acknowledge this project. Copyright is retained and
+// must be preserved. The work is provided as is; no
+// warranty is provided, and users accept all liability.
+//
+
+void setup() {
+ CPU_CCP = CCP_IOREG_gc; // unprotect clock
+ CLKCTRL.MCLKCTRLB = 0; // turn off prescalar (20 MHz)
+ PORTA.DIRSET = PIN6_bm; // set output pin
+ }
+
+void loop() {
+ while(1) {
+ //
+ // VPORT: 1.808 MHz
+ // 250 ns high (5 cycles), 300 ns low (6 cycles)
+ //
+ if (VPORTA.IN & PIN7_bm)
+ VPORTA.OUT &= ~PIN6_bm;
+ else
+ VPORTA.OUT |= PIN6_bm;
+ //
+ // PORT: 1.056 MHz
+ //
+ /*
+ if (PORTA.IN & PIN7_bm)
+ PORTA.OUTCLR = PIN6_bm;
+ else
+ PORTA.OUTSET = PIN6_bm;
+ */
+ //
+ // digitalRead/Write: 0.331 MHz
+ //
+ //*
+ if (digitalRead(1))
+ digitalWrite(0,LOW);
+ else
+ digitalWrite(0,HIGH);
+ */
+ //
+ // digitalReadFast/WriteFast: 1.808 MHz
+ //
+ /*
+ if (digitalReadFast(1))
+ digitalWriteFast(0,LOW);
+ else
+ digitalWriteFast(0,HIGH);
+ */
+ }
+ }
+ </script></code></pre>
+ </section>
+
+
+ <section>
+ <p>
+ <ul>
+ <li><a href="http://drazzy.com/package_drazzy.com_index.json">AtTiny</a> : Spence Konde</li>
+ <li><a href="https://raw.githubusercontent.com/qbolsee/ArduinoCore-fab-sam/master/json/package_Fab_SAM_index.json">SAMD</a> : MattairTech. Fork Fab maintainted (<a href="https://github.com/qbolsee/ArduinoCore-fab-sam">QB fork</a>)</li>
+ <li><a href="https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json">Rp2040</a> : Earle F. Philhower porting</li>
+ <li><a href="https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json">ESP32</a> : Espressif</li>
+ <li>...</li>
+ </ul>
+ → add them to arduino preferences : additional boards manager
+ </p>
+ <textarea id="arduinoJsons" rows="4" cols="120">
+ http://drazzy.com/package_drazzy.com_index.json
+ https://raw.githubusercontent.com/qbolsee/ArduinoCore-fab-sam/master/json/package_Fab_SAM_index.json
+ https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json
+ https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json
+ </textarea><br><button onclick="copyToClipboard('arduinoJsons')">Copy them in clipboard!</button>
+ </section>
+
+ <section>
+ <h3>Arduino IDE is a development environment</h3>
+ <p>The Arduino Integrated Development Environment (IDE) is a software tool used for writing, compiling, and uploading code to Arduino boards. It includes features like syntax highlighting, serial monitor, and library management.</p>
+ </section>
+ <section>
+ <p>Be aware :
+ <ul>
+ <li>IDE v2 has a better editor BUT has compatibility issues with some libraries (AtTiny port!)</li>
+ <li>IDE v1.9 and above works fine but less user friendly (use external editor... [preferences > ])</li>
+ </ul>
+ </p>
+ </section>
+ <section>
+ <figure>
+ <img src="img/ide2.png" style="width : 70%">
+ <figcaption>Arduino IDE 2</figcaption>
+ </figure>
+ </section>
+</section>
+
+<section>
+ <h2>Good practice</h2>
+
+ <section>
+ <h3>Document your code</h3>
+ <p>Every programming language contains special section of "commented" code.</p>
+ <figure>
+ <img src="img/commented.png" style="width:70%">
+ </figure>
+ </section>
+
+ <section>
+ <figure>
+ <img src="img/comments.jpg" style="width:50%">
+ </figure>
+ </section>
+
+ <section>
+ <h3>Fit-for-purpose processor</h3>
+ <p>Selecting a microcontroller with appropriate processing power for your application can help conserve energy and reduce cost. Underclocking, or running the microcontroller at a lower frequency, may be beneficial for power-sensitive projects.</p>
+ <p>Underclocking may be as usefull as overclocking!</p>
+ </section>
+
+ <section>
+ <h3>Write modular and readable</h3>
+ <p>Breaking down your code into modular components enhances readability and maintainability. Organize your code into separate functions or modules based on their functionality to facilitate debugging and future updates.</p>
+ <p>Flat files are difficult to modify / maintain.</p>
+ </section>
+
+ <section data-auto-animate>
+ <h3 data-id="code-title">Modular writing</h3>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|7-8|11-12|15-16|19-20|26-29|33-38"><script type="text/template">
+// Flat File: Single File
+
+...
+
+void loop() {
+ // Turn on the LED
+ digitalWrite(LED_PIN, HIGH);
+ delay(200); // Wait for 200ms
+
+ // Turn off the LED
+ digitalWrite(LED_PIN, LOW);
+ delay(1000); // Wait for 1 second
+
+ // Turn on the LED
+ digitalWrite(LED_PIN, HIGH);
+ delay(400); // Wait for 400ms
+
+ // Turn off the LED
+ digitalWrite(LED_PIN, LOW);
+ delay(2000); // Wait for 1 second
+}
+
+
+// Modular writing :
+
+void flipAndWait(uint8_t pin, unsigned long time){
+ digitalWrite(pin, !digitalRead(pin));
+ delay(time);
+}
+
+void loop() {
+ // Turn on the LED
+ digitalWrite(LED_PIN, HIGH);
+ delay(200); // Wait for 1 second
+
+ flipAndWait(LED_PIN, 1000);
+ flipAndWait(LED_PIN, 400);
+ flipAndWait(LED_PIN, 2000);
+}
+ </script></code></pre>
+ <aside class="notes">
+ - don't go too far... (but using inline etc)<br>
+ - repeated blocs of code => function<br>
+ - modular devices init, pins config, etc.<br>
+ </aside>
+ </section>
+
+ <section>
+ <h3>Write "parametric"</h3>
+ <p>
+ <dl>
+ <dt>const / #DEFINE</dt><dd>Avoid constants/values directly into your code <br>→ use symbolic names or macros defined with const variables or #define directives.</dd>
+ <!--<li>Classes</li>-->
+ </dl>
+ </p>
+ <p> This improves code clarity and allows for easier modifications in the future.</p>
+ </section>
+
+ <section data-auto-animate>
+ <h3 data-id="code-title">Parametric : Example</h3>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|5,11,13|12,14"><script type="text/template">
+// the setup function runs once when you press reset or power the board
+void setup()
+{
+ // initialize digital pin (led connected to pin7) as an output.
+ pinMode(7, OUTPUT);
+}
+
+// the loop function runs over and over again forever
+void loop()
+{
+ digitalWrite(7, HIGH); // turn the LED on (HIGH is the voltage level)
+ delay(200); // flash for 200ms
+ digitalWrite(7, LOW); // turn the LED off by making the voltage LOW
+ delay(800); // wait for 800ms (total = ~1sec)
+}
+</script></code></pre>
+ </section>
+
+ <section data-auto-animate>
+ <h3 data-id="code-title">Parametric : Example</h3>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|1-3|8,14,16|15,17"><script type="text/template">
+#define LED 7
+#define PERIOD 1000
+#define FLASH_TIME 200
+// the setup function runs once when you press reset or power the board
+void setup()
+{
+ // initialize digital pin LED as an output.
+ pinMode(LED, OUTPUT);
+}
+
+// the loop function runs over and over again forever
+void loop()
+{
+ digitalWrite(LED, HIGH); // turn the LED on (HIGH is the voltage level)
+ delay(FLASH_TIME); // wait for a ON_TIME
+ digitalWrite(LED, LOW); // turn the LED off by making the voltage LOW
+ delay(PERIOD-FLASH_TIME); // wait to get a periodic time of ~PERIOD
+}
+</script></code></pre>
+ </section>
+
+ <section>
+ <h3>Use Classes</h3>
+ <p>Class:
+ <ul>
+ <li>Allows you to "think as objects"</li>
+ <li>Is called "object oriented" (C++ vs C)
+ <li>Widely used by Arduino hardware specific libraries</li>
+ </ul>
+ </p>
+ </section>
+
+ <section data-auto-animate>
+ <h3 data-id="code-title">Classes</h3>
+ <pre data-id="code-animation"><code class="hljs javascript" data-trim data-line-numbers="|13-16|29-33|41,46-47"><script type="text/template">
+// Definition of the LEDControl class
+class LEDControl {
+ private:
+ int pin; // Class variable to store the pin number
+
+ public:
+ // Constructor of the class to initialize the pin
+ LEDControl(int pinNumber) {
+ pin = pinNumber;
+ pinMode(pin, OUTPUT);
+ }
+
+ // Method to turn on the LED
+ void turnOn() {
+ digitalWrite(pin, HIGH);
+ }
+
+ // Method to turn off the LED
+ void turnOff() {
+ digitalWrite(pin, LOW);
+ }
+
+ // Method to toggle the state of the LED
+ void toggle() {
+ digitalWrite(pin, !digitalRead(pin));
+ }
+
+ // Method to flash the LED for a specified time
+ void flash(int flashTime) {
+ turnOn(); // Turn on the LED
+ delay(flashTime); // Wait for the specified time
+ turnOff(); // Turn off the LED
+ }
+};
+
+// Using the LEDControl class
+const int LED_PIN = 13; // LED pin number
+
+void setup() {
+ // Create an instance of LEDControl with pin 13
+ LEDControl myLED(LED_PIN);
+}
+
+void loop() {
+ // Turn on the LED for 1 second
+ myLED.flash(200);
+ delay(1000);
+}
+
+ </script></code></pre>
+ </section>
+ <section>
+ <h3>Optimizations</h3>
+ <p>Some tips :
+ <ul>
+ <li class="fragment fade-in">lookup tables (vs complex maths)</li>
+ <li class="fragment fade-in">inline</li>
+ <li class="fragment fade-in">pointers</li>
+ <li class="fragment fade-in">"simple" arithmetics : 2<sup>n</sup> divisions = >> </li>
+ <li class="fragment fade-in">Proper type : uint8_t, int16_t, etc. (pecularly on 8bits proc)</li>
+ <li class="fragment fade-in">...</li>
+ </ul>
+ </p>
+ </section>
+</section>
+<section>
+ <h3>Credits</h3>
+ <ul>
+ <li>Comics : <a href="https://xkcd.com/">XKCD</a></li>
+ <li>Beautiful microprocessors B&W : <a href="http://pinouts.org/">pinouts.org</a></li>
+ <li>Fragments of codes : some AI like chatGPT and Neil</li>
+ </ul>
+</section>
+
+<section>
+ <h3>Time for debugging</h3>
+ <figure>
+ <a href="debugging.html"><img src="img/fixing_problems.png" style="width:50%"></a>
+ </figure>
+</section>
+
+
+
+<!-- Example of nested vertical slides -->
+<section>
+<section>
+
+ <img style="height: 620px; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/hhg_question.png" alt="Attitude">
+
+ </a>
+<aside class="notes">
+<p>The answer never is: "it doesnt work!" In case of a just
+designed and produced circuitboard, break the "problem into pieces".</p>
+- is the board powered?
+- after producing the pcb you did a visual check. Do it again!
+- are the components soldered correctly?
+- are the components the right ones?
+- are the components placed correctly?
+</aside>
+</section>
+<section>
+ <p><img style="height: 100%; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/jump.jpg"></p>
+<aside class="notes">
+<p>Don't jump to conclusions. It's easy to assume that the
+problem is in the most complex part of the system. Or even
+worse: blaming the manifacturer of the components for faulty
+or misbehaving components. But it's often in the simplest
+part of the system. Maybe it's a mistake you made. You actually
+designed, milled, stuffed and programmed the circuit. </p>
+<p>Time pressure can be a factor in jumping to fast conclusions.
+ But it's better to stay calm and think of a step by step
+ approach.</p>
+</aside>
+</section>
+
+<section>
+ <p><img style="height: 300px; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/memory.jpg"></p>
+<aside class="notes">Debugging is difficult, and it's easy
+to forget what you've done. Writing down what you've done
+can help you remember what you've tried and what you haven't
+tried. It often also helps you to write down what you think
+the problem is. This can help you to think more clearly
+about the problem and the solution.
+ And last but not least: Often you break something while
+ trying to fix something else. Writing down what you did
+ can help you to undo what you did.
+</aside>
+
+ <h2>Write down what you do</h2>
+
+</section>
+<section>
+ <img style="background: rgba(255,255,255,0.1);" data-src="./img/ThePragmaticProgrammer.jpeg">
+<p><h5><a href="https://en.wikipedia.org/wiki/The_Pragmatic_Programmer">The Pragmatic Programmer</a></h5></p>
+ <aside class="notes">
+ <p>A good read is "The Pragmatic Programmer", a
+ collection of tips to improve the development process in
+ a pragmatic way.</p>
+</section>
+
+<section>
+<img style="height: 440px; background: rgba(255,255,255,0.1);" data-src="./img/duck.webp">
+
+<h2>Talk to me</h2>
+
+<aside class="notes">
+In software engineering, rubber duck debugging (or
+rubberducking) is a method of debugging code by articulating
+a problem in spoken or written natural language. Carry
+around a rubber duck and debug what you did by forcing
+yourself to explain what you did, step by step, to the duck.
+You can also use your instructor, fabacademy
+student or friend. Advantage of the duck is that it won't judge you.
+</aside>
+</section>
+
+</section>
+
+<section>
+<section>
+<img style="margin: 0 auto 4rem auto; background: transparent;" data-src="./img/dontpanic.jpg">
+
+<aside class="notes">
+<p>Don't panic. It's easy to get frustrated when you can't
+find the problem. But it's important to stay calm. If you
+get frustrated, you're more likely to make mistakes. And
+mistakes can make the problem worse. </p>
+<p>It's also important to remember that debugging is a
+normal part of the development process. It's not a sign that
+you're a bad engineer. It's a sign that you're a good
+engineer. </p>
+</aside>
+
+</section>
+
+<section>
+<video data-autoplay style="height: 800px; margin: 0 auto
+4rem auto; background: transparent;"
+data-src="./img/Debugging_strategy.mp4" controls></video>
+<aside class="notes"> So you are building something together
+with a lot of bricks. Narrow down the issue. Fixing a bug
+that is not, leads to a new bug, that <B>WAS</B> not a bug. And you
+don't want to end up a situation where you trashed the whole
+project because you can't localize the "bug" that wasn't a bug from the
+beginning. </aside>
+
+
+</section>
+<section>
+ <h2>Narrowing down the problem</h2>
+</section>
+<section data-auto-animate>
+<ul>
+ <li>Reproduce the problem</li>
+</ul>
+</section>
+<section data-auto-animate>
+<ul>
+ <li>Reproduce the problem</li>
+ <li>Always first do visual check</li>
+</ul>
+</section>
+<section data-auto-animate>
+<ul>
+ <li>Reproduce the problem</li>
+ <li>Always first do visual check</li>
+ <ol>traces</ol>
+ <ol>soldering</ol>
+ <ol>components</ol></li>
+</ul>
+</section>
+<section data-auto-animate>
+<ul>
+<li>Reproduce the problem</li>
+<li>Always first do visual check</li>
+<ol>traces</ol>
+<ol>soldering</ol>
+<ol>components</ol></li>
+<li>Keep in mind that the problem <br>
+ might not be visible without a microscope</li>
+</ul>
+</section>
+
+<section>
+<img src="img/visual.jpg" height="600">
+</section>
+
+<section>
+<div class="r-stack">
+<img class="fragment" src="img/D11Cserial.jpg">
+<img class="fragment" src="img/D11Cserial-1.jpg">
+<img class="fragment" src="img/D11Cserial-2.jpg">
+<img class="fragment" src="img/D11Cserial-3.jpg">
+</div>
+<aside class="notes">
+ <p>Concentrate only on the relevant parts. Isolate the problem.</p>
+ <p>The microcontroller is not receiving voltage / the wrong voltage></p>
+ <p>Can't program the microcontroller</p>
+ <p>Programmed, unable to program other microcontrollers</p>
+</aside>
+</section>
+</section>
+<section>
+<section>
+<h2>Multimeter</h2>
+
+<img class="fragment" src="img/multimeter.jpg" height="400px">
+
+
+<aside class="notes">
+A digital multimeter (DMM) is a hardware tool that can be
+used to measure two or more electrical values, usually
+voltage (in volts), current (in amps), and resistance (in
+ohms). Multimeters are great tools and one of the most fundamental
+pieces of test equipment that can be used to debug
+electrical problems within an embedded system. </aside>
+</section>
+
+<section>
+<h2>Continuity</h2>
+
+<img class="fragment" src="img/continuity.jpg" height="300px">
+<ul>
+<li>Test power supply to power pins continuity</li>
+<li>Check fuses, diodes orientations, ...</li>
+<li>Check short-circuits</li>
+<li>Check traces</li>
+</ul>
+</section>
+
+<section>
+
+<img class="fragment" src="img/parallel.png" height="300px">
+<ul><li>Parallel measurement => check your cables!</li>
+<li>! absolute maximum ratings (may burn your component)</li>
+<li>Power supply impedence / max power, badly selected</li>
+<li>GND/VCC loop</li>
+</ul>
+
+</section>
+
+<section>
+<h2>Continuity</h2>
+<video data-autoplay style="height: 620px;" data-src="./img/multimeter.mp4" controls></video>
+</section>
+
+<section>
+<h2>Voltage drop</h2>
+<video data-autoplay style="height: 620px;" data-src="./img/voltage_drop.mp4" muted controls></video>
+</section>
+</section>
+<section>
+<section>
+<h2>Logic Analyzer</h2>
+<video data-autoplay style="height: 620px;" data-src="./img/logicanalyzer.mp4" muted controls></video>
+<aside class="notes">
+A logic analyzer is a hardware tool designed specifically
+for capturing, displaying, and measuring electrical signals
+in a digital circuit. This tool consists of several digital
+inputs pins capable of detecting whether an electric signal
+is at a specific logic level (1 or 0). Logic analyzers are
+also capable of showing the relationship and timing of
+different electrical signals in a digital circuit and often
+capable also of analyzing digital communication protocols
+UART, I2C, SPI or 1-wire protocol. Logic analyzers can be
+used to debug hardware, software, and firmware. </aside>
+
+
+</section>
+
+<section>
+<h2>Logic Analayzer</h2>
+<ul>
+ <li><a href="https://www.amazon.com/KeeYees-Analyzer-Device-Channel-Arduino/dp/B07K6HXDH1">"logic analyzer 8 channel"</li>
+ <li><a href="https://www.amazon.nl/-/en/dp/B0BGQD8LKB">"logic analyzer 16 channel"</a></li>
+ <li><a href="https://www.digikey.com/en/products/detail/e-z-hook/XKMRED/528231">"Digikey 461-1010-ND: MICRO-HOOK RED 0.025" SQ PINS"</a></li>
+ <li><a href="https://www.digikey.com/en/products/detail/e-z-hook/XKMBLK/528230?s">"Digikey 461-1010-ND: MICRO-HOOK BLACK 0.025" SQ PINS"</a></li>
+</ul>
+</section>
+
+<section>
+<h2>Miniware LA104</h2>
+<img class="fragment" src="img/24.jpg" height="400px">
+<p><a href="https://e-design.com.cn/en/Logic-Analyzer-LA104-PG9226719">LA104</a> and <a href="https://github.com/gabonator/LA104">alternative firmware and apps</a></p>
+
+</section>
+
+</section>
+<section>
+<section>
+
+<h2>Oscilloscope</h2>
+
+<video data-autoplay style="height: 620px;" data-src="./img/oscilloscope_blink.mp4" muted controls>
+
+ <aside class="notes">
+An oscilloscope is a hardware tool that graphically displays
+electrical signals and shows how those signals change over
+time.
+This video is showing a blinking LED. The oscilloscope is
+connected to GND and the LED . The LED is blinking at an
+interval of 1 second. The oscilloscope is showing the
+voltage over time. </aside>
+
+</section>
+<section>
+<video data-autoplay style="height: 620px;" data-src="./img/oscilloscope_button.mp4" muted controls>
+</video>
+</section>
+
+</section>
+<section>
+<section>
+<h2>Radio communications</h2>
+<div class="r-stack">
+<img class="fragment" src="img/dvb-t.jpg" height="400">
+<img class="fragment" src="img/rtl_sdr.jpg" height="400">
+<img class="fragment" src="img/scope_fft.jpg" height="400">
+</div>
+<small><a href="https://www.rtl-sdr.com/buy-rtl-sdr-dvb-t-dongles/">RTL-SDR RTL2832U DVB-T Tuner Dongles</a></small>
+<aside class="notes">
+<p>RTL-SDR is a very cheap software defined radio that uses
+a DVB-T TV tuner dongle based on the RTL2832U chipset. With the right
+software the DVB-T TV tuner to be converted into a wideband
+software defined radio via a new software driver. </p>
+<p>Gnuradio can be used to debug your wireless projects.</p>
+</aside>
+</section>
+
+<section>
+<video data-autoplay style="height: 620px;" data-src="./img/sdr.mp4" controls></video>
+</section>
+
+</section>
+
+<section>
+<section>
+<h2>Flashing your board</h2>
+<small>and what can go wrong</small>
+<aside class="notes">
+ <p>A small chapter to talk about workflow how to actually program your boards</p>
+ <p>Using XIAO boards life looks easier, but its overkill for many projects. So also
+ try to use and understand the workflows how to program other MCU's. </p>
+ </p>
+</aside>
+</section>
+
+<section>
+<h2>USB</h2>
+<video data-autoplay style="height: 620px;" data-src="./img/dmesg.mp4" controls></video>
+
+</section>
+
+<section>
+<h2>SWD/JTag</h2>
+<img class="fragment" src="img/programmer_jtag.jpg" height="400px">
+<aside class="notes">
+ <p>Serial Wire Debug and Joint Test Action Group</p>
+ <p><UL><li>Connect a CMSIS-DAP SWD adapter</li>
+ <li>10-pin 1.27mm connectors are convenient, but triple check the orientation</li>
+ <li>If VCC pin is unused, power your target device separately</li>
+ <li>Make sure the programmer is on 3.3V if programming SAMD</li>
+ </ul>
+ </p>
+</section>
+
+<section>
+<h2>UPDI</h2>
+<p>Unified Program and Debug Interface</p>
+<img class="fragment" src="img/hello.serial-UPDI.3.jpg" height="400px">
+<aside class="notes">
+<ul><li>All you need is a serial adapter</li>
+ <li>RX and TX connected together with a 4.7k resistor or diode
+ (any res. between 1.5k and 10k will work)</li>
+ <li>VCC is optional but ensures both chips talk at the same logic level</li>
+ <li>Programming is initiated with a break (LOW level for a long duration)</li>
+</ul>
+</section>
+
+<section>
+<h2>Serial (or any) "Hello world!"</h2>
+<pre><code data-line-numbers="2|5,6">
+#define DEBUG_MODE 1
+ ...
+#if DEBUG_MODE
+ Serial.print("DEBUG -- MyVal value = ");
+ Serial.println(MyVal, DEC);
+#endif
+</code>
+</pre>
+<aside class="notes">
+ <p>Serial.print() and Serial.println() are your best friends</p>
+ <p>Serial.begin() is the first thing you do in setup()</p>
+ <p>Serial monitor is the first thing you open when debugging</p>
+</aside>
+</section>
+
+</section>
+
+<section>
+<section>
+
+<div class="r-stack">
+<h4>Read The F*cking Manual</h4>
+ <img class="fragment" src="img/tldr.jpg" width="650" height="400">
+ <img class="fragment" src="img/rtfm1.jpg" width="600" height="600">
+<img class="fragment" src="img/solderfrust.png" width="700" height="700">
+<img class="fragment" src="img/dontpanic.jpg" width="600" height="600">
+</div>
+
+</section>
+</section>
+
+</section>
+
+<script src="dist/reveal.js"></script>
+<script src="plugin/zoom/zoom.js"></script>
+<script src="plugin/notes/notes.js"></script>
+<script src="plugin/search/search.js"></script>
+<script src="plugin/markdown/markdown.js"></script>
+<script src="plugin/highlight/highlight.js"></script>
+<script>
+
+// Also available as an ES module, see:
+// https://revealjs.com/initialization/
+Reveal.initialize({
+controls: true,
+progress: true,
+center: true,
+hash: true,
+
+// Learn about plugins: https://revealjs.com/plugins/
+plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
+});
+
+</script>
+
+</body>
</html>
diff --git a/recitation/debugging/test/assets/external-script-a.js b/recitation/debugging/test/assets/external-script-a.js
deleted file mode 100644
index cbc8da11c5b87cf40da713f574f82248bc0a7230..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/assets/external-script-a.js
+++ /dev/null
@@ -1 +0,0 @@
-window.externalScriptSequence += 'A';
\ No newline at end of file
diff --git a/recitation/debugging/test/assets/external-script-b.js b/recitation/debugging/test/assets/external-script-b.js
deleted file mode 100644
index e5bca5ad3e0f44257d4a8717acd32568f20c9a57..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/assets/external-script-b.js
+++ /dev/null
@@ -1 +0,0 @@
-window.externalScriptSequence += 'B';
\ No newline at end of file
diff --git a/recitation/debugging/test/assets/external-script-c.js b/recitation/debugging/test/assets/external-script-c.js
deleted file mode 100644
index 7d4ccf6fd32be677676c74738a18561e69ccc593..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/assets/external-script-c.js
+++ /dev/null
@@ -1 +0,0 @@
-window.externalScriptSequence += 'C';
\ No newline at end of file
diff --git a/recitation/debugging/test/assets/external-script-d.js b/recitation/debugging/test/assets/external-script-d.js
deleted file mode 100644
index 1c5925bf238b2d85c92dd14e3c763db2f34492c3..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/assets/external-script-d.js
+++ /dev/null
@@ -1 +0,0 @@
-window.externalScriptSequence += 'D';
\ No newline at end of file
diff --git a/recitation/debugging/test/simple.md b/recitation/debugging/test/simple.md
deleted file mode 100644
index 97bae7e5e8711958056094d9b88414dd48021ce5..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/simple.md
+++ /dev/null
@@ -1,12 +0,0 @@
-## Slide 1.1
-
-```js
-var a = 1;
-```
-
-
-## Slide 1.2
-
-
-
-## Slide 2
\ No newline at end of file
diff --git a/recitation/debugging/test/test-auto-animate.html b/recitation/debugging/test/test-auto-animate.html
deleted file mode 100644
index a9c71f7802084dee25357b0cc6a5c7fa76e2e428..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-auto-animate.html
+++ /dev/null
@@ -1,167 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Auto-Animate</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal">
-
- <div class="slides">
-
- <section data-auto-animate>
- <h1>h1</h1>
- <h2>h2</h2>
- <h3 style="position: absolute; left: 0;">h3</h3>
- </section>
-
- <section data-auto-animate>
- <h1 data-auto-animate-duration="0.1">h1</h1>
- <h2 style="opacity: 0;">h2</h2>
- <h3 style="position: absolute; left: 100px;">h3</h3>
- </section>
-
- <section data-auto-animate data-auto-animate-duration="0.1">
- <h1>h1</h1>
- <h2>h2</h2>
- <h3>h3</h3>
- </section>
-
- <section>
- <h1>Non-auto-animate slide</h1>
- </section>
-
- <section data-auto-animate>
- <h1 class="fragment">h1</h1>
- <h2 class="fragment">h2</h2>
- <h3>h3</h3>
- </section>
-
- <section data-auto-animate>
- <h1 class="fragment">h1</h1>
- <h2 class="fragment">h2</h2>
- <h3 class="fragment">h3</h3>
- </section>
-
- <section>
- <h1>Non-auto-animate slide</h1>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
- QUnit.config.reorder = false;
-
- const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
- return {
- slide: slide,
- h1: slide.querySelector( 'h1' ),
- h2: slide.querySelector( 'h2' ),
- h3: slide.querySelector( 'h3' )
- };
- } );
-
- Reveal.initialize().then( async () => {
-
- QUnit.module( 'Auto-Animate' );
-
- QUnit.test( 'Adds data-auto-animate-target', assert => {
- Reveal.slide(1);
- assert.strictEqual( slides[0].h1.getAttribute( 'data-auto-animate-target' ), '', 'From elements have blank data-auto-animate-target' );
- assert.ok( slides[1].h1.getAttribute( 'data-auto-animate-target' ).length > 0, 'To elements have a data-auto-animate-target value' );
- });
-
- QUnit.test( 'Ends on correct target styles', assert => {
- Reveal.slide(1);
- assert.strictEqual( slides[1].h2.style.opacity, "0" );
- assert.strictEqual( slides[1].h3.offsetLeft, 100 );
- });
-
- QUnit.test( 'Does not add [data-auto-animate] on non auto-animated slides', assert => {
- Reveal.slide(2);
- Reveal.next();
- assert.ok( slides[3].slide.hasAttribute( 'data-auto-animate' ) === false )
- });
-
- QUnit.test( 'autoAnimate config option', assert => {
- Reveal.configure({ autoAnimate: false });
-
- assert.ok( document.querySelectorAll( 'data-auto-animate-target' ).length === 0, 'Removes all [data-auto-animate-target]' )
- assert.ok( Array.prototype.every.call( document.querySelectorAll( 'section[data-auto-animate]' ), el => {
- return el.dataset.autoAnimate === '';
- }, 'All data-auto-animate attributes are reset' ) );
-
- Reveal.configure({ autoAnimate: true });
- });
-
- QUnit.test( 'Carries forward matching fragment visibility', assert => {
- Reveal.slide(4);
- assert.ok( !slides[5].h1.classList.contains( 'visible' ) )
- Reveal.next();
- Reveal.next();
- Reveal.next();
- assert.ok( slides[5].h1.classList.contains( 'visible' ) )
- assert.ok( slides[5].h2.classList.contains( 'visible' ) )
- assert.ok( !slides[5].h3.classList.contains( 'visible' ) )
- Reveal.next();
- assert.ok( slides[5].h3.classList.contains( 'visible' ) )
- Reveal.next();
- assert.ok( slides[6].slide === Reveal.getCurrentSlide() )
- });
-
- QUnit.test( 'Slide specific data-auto-animate-duration', assert => {
- assert.timeout( 400 );
- assert.expect( 1 );
-
- return new Promise( resolve => {
- let callback = () => {
- slides[2].h3.removeEventListener( 'transitionend', callback );
- assert.ok( true, 'Transition ended within time window' );
- resolve();
- }
-
- Reveal.slide(1);
- Reveal.slide(2);
-
- slides[2].h3.addEventListener( 'transitionend', callback );
- } );
- });
-
- // QUnit.test( 'Element specific data-auto-animate-duration', assert => {
- // assert.timeout( 400 );
- // assert.expect( 1 );
-
- // return new Promise( resolve => {
- // let callback = () => {
- // slides[1].h1.removeEventListener( 'transitionend', callback );
- // assert.ok( true, 'Transition ended within time window' );
- // resolve()
- // }
-
-
- // Reveal.slide(1);
- // slides[1].h1.addEventListener( 'transitionend', callback );
- // } );
- // });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-dependencies-async.html b/recitation/debugging/test/test-dependencies-async.html
deleted file mode 100644
index de1404212aedbcdea199d597fa20e0c2325e3ddf..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-dependencies-async.html
+++ /dev/null
@@ -1,78 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Async Dependencies</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>Slide content</section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- var externalScriptSequence = '';
- var scriptCount = 0;
-
- QUnit.config.testTimeout = 30000;
- QUnit.config.autostart = false;
- QUnit.module( 'Async Dependencies' );
-
- QUnit.test( 'Async scripts are loaded', function( assert ) {
- assert.expect( 5 );
- var done = assert.async( 5 );
-
- function callback( event ) {
- if( externalScriptSequence.length === 1 ) {
- assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
- done();
- }
- else {
- assert.ok( true, 'async script loaded' );
- done();
- }
-
- if( externalScriptSequence.length === 4 ) {
- assert.ok( externalScriptSequence.indexOf( 'A' ) !== -1 &&
- externalScriptSequence.indexOf( 'B' ) !== -1 &&
- externalScriptSequence.indexOf( 'C' ) !== -1 &&
- externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
- done();
- }
-
- scriptCount ++;
- }
-
- Reveal.initialize({
- dependencies: [
- { src: 'assets/external-script-a.js', async: false, callback: callback },
- { src: 'assets/external-script-b.js', async: true, callback: callback },
- { src: 'assets/external-script-c.js', async: true, callback: callback },
- { src: 'assets/external-script-d.js', async: true, callback: callback }
- ]
- });
- });
-
- QUnit.start();
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-dependencies.html b/recitation/debugging/test/test-dependencies.html
deleted file mode 100644
index cf3cf0e5fd1e173b96ddf36cc7162dd0d3ab26bd..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-dependencies.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Dependencies</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>Slide content</section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- window.externalScriptSequence = '';
-
- QUnit.config.testTimeout = 30000;
- QUnit.config.autostart = false;
- QUnit.module( 'Dependencies' );
-
- Reveal.initialize({
- dependencies: [
- { src: 'assets/external-script-a.js' },
- { src: 'assets/external-script-b.js' },
- { src: 'assets/external-script-c.js' }
- ]
- }).then( () => {
-
- QUnit.start();
-
- QUnit.test( 'Load synchronous scripts', function( assert ) {
- assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
- });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-grid-navigation.html b/recitation/debugging/test/test-grid-navigation.html
deleted file mode 100644
index 837764c287830712c5c7a390bcb5662411b20917..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-grid-navigation.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Grid</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>0</section>
- <section>
- <section>1.1</section>
- <section>1.2</section>
- <section>1.3</section>
- <section>1.4</section>
- </section>
- <section>
- <section>2.1</section>
- <section>2.2</section>
- <section>2.3</section>
- <section>2.4</section>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- QUnit.config.testTimeout = 30000;
- QUnit.config.autostart = false;
- QUnit.module( 'Grid Navigation' );
-
- Reveal.initialize().then( () => {
-
- QUnit.start();
-
- QUnit.test( 'Disabled', function( assert ) {
- Reveal.right();
- Reveal.down();
- Reveal.down();
- assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
- Reveal.right();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' );
- });
-
- QUnit.test( 'Enabled', function( assert ) {
- Reveal.configure({ navigationMode: 'grid' });
- Reveal.slide( 0, 0 );
- Reveal.right();
- Reveal.down();
- Reveal.down();
- assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
- Reveal.right();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' );
- });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-iframe-backgrounds.html b/recitation/debugging/test/test-iframe-backgrounds.html
deleted file mode 100644
index 7df99a14ebfa15b477f737902ecf227227da0f67..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-iframe-backgrounds.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Iframe Backgrounds</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section data-background-iframe="https://revealjs.com">1</section>
- <section data-background-iframe="https://revealjs.com">2</section>
- <section data-background-iframe="https://revealjs.com" data-preload>3</section>
- <section data-background-iframe="https://revealjs.com">4</section>
- <section data-background-iframe="https://revealjs.com">5</section>
- <section data-background-iframe="https://revealjs.com">6</section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
-
- Reveal.initialize({ viewDistance: 3 }).then( () => {
-
- function getIframe( index ) {
- return document.querySelectorAll( '.slide-background' )[index].querySelector( 'iframe' );
- }
-
- QUnit.module( 'Iframe' );
-
- QUnit.test( 'Using default settings', function( assert ) {
-
- Reveal.slide(0);
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
-
- Reveal.slide(1);
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
- Reveal.slide(0);
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
-
- });
-
- QUnit.test( 'Using data-preload', function( assert ) {
-
- Reveal.slide(1);
- assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
- Reveal.slide(0);
- assert.strictEqual( getIframe(3).hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
-
- });
-
- QUnit.test( 'Using preloadIframes: true', function( assert ) {
-
- Reveal.configure({ preloadIframes: true });
-
- Reveal.slide(1);
- assert.strictEqual( getIframe(0).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
- assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
-
- });
-
- QUnit.test( 'Using preloadIframes: false', function( assert ) {
-
- Reveal.configure({ preloadIframes: false });
-
- Reveal.slide(0);
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
- assert.strictEqual( getIframe(2).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
-
- Reveal.slide(1);
- assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
-
- });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-iframes.html b/recitation/debugging/test/test-iframes.html
deleted file mode 100644
index fa4b434f4312cebaa06438b1334c87538f4ed787..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-iframes.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Iframes</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>1</section>
- <section>2</section>
- <section>
- <iframe class="default-iframe" data-src="#"></iframe>
- <iframe class="preload-iframe" data-src="#" data-preload></iframe>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
-
- Reveal.initialize({ viewDistance: 2 }).then( () => {
-
- var defaultIframe = document.querySelector( '.default-iframe' ),
- preloadIframe = document.querySelector( '.preload-iframe' );
-
- QUnit.module( 'Iframe' );
-
- QUnit.test( 'Using default settings', function( assert ) {
-
- Reveal.slide(1);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
-
- Reveal.slide(2);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
- Reveal.slide(1);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
-
- });
-
- QUnit.test( 'Using data-preload', function( assert ) {
-
- Reveal.slide(1);
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
-
- Reveal.slide(2);
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' );
-
- Reveal.slide(0);
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
-
- });
-
- QUnit.test( 'Using preloadIframes: true', function( assert ) {
-
- Reveal.configure({ preloadIframes: true });
-
- Reveal.slide(1);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
-
- Reveal.slide(2);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
- });
-
- QUnit.test( 'Using preloadIframes: false', function( assert ) {
-
- Reveal.configure({ preloadIframes: false });
-
- Reveal.slide(0);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
-
- Reveal.slide(2);
- assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
- assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-
- });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-markdown.html b/recitation/debugging/test/test-markdown.html
deleted file mode 100644
index e877284906df3c706ed8be8637f5011d1128b738..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-markdown.html
+++ /dev/null
@@ -1,516 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Markdown</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal deck1" style="display: none;">
- <div class="slides">
- <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
- <script type="text/template">
- ## Slide 1.1
-
- --
-
- ## Slide 1.2
-
- ---
-
- ## Slide 2
- </script>
- </section>
- </div>
- </div>
-
- <div class="reveal deck2" style="display: none;">
- <div class="slides">
- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section>
- </div>
- </div>
-
- <div class="reveal deck3" style="display: none;">
- <div class="slides">
- <section data-markdown data-separator="^\n\n\n"
- data-separator-vertical="^\n\n"
- data-separator-notes="^Note:"
- data-attributes="--\s(.*?)$"
- data-charset="utf-8">
- <script type="text/template">
- # Test attributes in Markdown
- ## Slide 1
-
-
-
- ## Slide 2
- <!-- -- id="slide2" data-transition="zoom" data-background="#A0C66B" -->
-
-
- ## Slide 2.1
- <!-- -- data-background="#ff0000" data-transition="fade" -->
-
-
- ## Slide 2.2
- [Link to Slide2](#/slide2)
-
-
-
- ## Slide 3
- <!-- -- data-transition="zoom" data-background="#C6916B" -->
-
-
-
- ## Slide 4
- </script>
- </section>
-
- <section data-markdown data-separator="^\n\n\n"
- data-separator-vertical="^\n\n"
- data-separator-notes="^Note:"
- data-charset="utf-8">
- <script type="text/template">
- # Test attributes in Markdown with default separator
- ## Slide 1 Def
-
-
-
- ## Slide 2 Def
- <!-- .slide: id="slide2def" data-transition="concave" data-background="#A7C66B" -->
-
-
- ## Slide 2.1 Def
- <!-- .slide: data-background="#f70000" data-transition="page" -->
-
-
- ## Slide 2.2 Def
- [Link to Slide2](#/slide2def)
-
-
-
- ## Slide 3 Def
- <!-- .slide: data-transition="concave" data-background="#C7916B" -->
-
-
-
- ## Slide 4
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- <!-- .slide: data-background="#ff0000" -->
- ## Hello world
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Hello world
- <!-- .slide: data-background="#ff0000" -->
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Hello world
-
- Test
- <!-- .slide: data-background="#ff0000" -->
-
- More Test
- </script>
- </section>
- </div>
- </div>
-
- <div class="reveal deck4" style="display: none;">
- <div class="slides">
- <section data-markdown>
- <script type="text/template">
- ## Testing Markdown Options
-
- This "slide" should contain 'smart' quotes.
- </script>
- </section>
- </div>
- </div>
-
- <div class="reveal deck5" style="display: none;">
- <div class="slides">
- <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$" data-element-attributes="{_\s*?([^}]+?)}">>
- <script type="text/template">
- ## Slide 1.1
- <!-- {_class="fragment fade-out" data-fragment-index="1"} -->
-
- --
-
- ## Slide 1.2
- <!-- {_class="fragment shrink"} -->
-
- Paragraph 1
- <!-- {_class="fragment grow"} -->
-
- Paragraph 2
- <!-- {_class="fragment grow"} -->
-
- - list item 1 <!-- {_class="fragment grow"} -->
- - list item 2 <!-- {_class="fragment grow"} -->
- - list item 3 <!-- {_class="fragment grow"} -->
-
-
- ---
-
- ## Slide 2
-
-
- Paragraph 1.2
- multi-line <!-- {_class="fragment highlight-red"} -->
-
- Paragraph 2.2 <!-- {_class="fragment highlight-red"} -->
-
- Paragraph 2.3 <!-- {_class="fragment highlight-red"} -->
-
- Paragraph 2.4 <!-- {_class="fragment highlight-red"} -->
-
- - list item 1 <!-- {_class="fragment highlight-green"} -->
- - list item 2<!-- {_class="fragment highlight-green"} -->
- - list item 3<!-- {_class="fragment highlight-green"} -->
- - list item 4
- <!-- {_class="fragment highlight-green"} -->
- - list item 5<!-- {_class="fragment highlight-green"} -->
-
- Test
-
-  <!-- {_class="reveal stretch"} -->
-
- </script>
- </section>
-
-
-
- <section data-markdown data-separator="^\n\n\n"
- data-separator-vertical="^\n\n"
- data-separator-notes="^Note:"
- data-charset="utf-8">
- <script type="text/template">
- # Test attributes in Markdown with default separator
- ## Slide 1 Def <!-- .element: class="fragment highlight-red" data-fragment-index="1" -->
-
-
- ## Slide 2 Def
- <!-- .element: class="fragment highlight-red" -->
-
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Hello world
- A paragraph
- <!-- .element: class="fragment highlight-blue" -->
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Hello world
-
- Multiple
- Line
- <!-- .element: class="fragment highlight-blue" -->
- </script>
- </section>
-
- <section data-markdown>
- <script type="text/template">
- ## Hello world
-
- Test<!-- .element: class="fragment highlight-blue" -->
-
- More Test
- </script>
- </section>
- </div>
- </div>
-
- <div class="reveal deck6" style="display: block;">
- <div class="slides">
- <section data-markdown class="defaults">
- <script type="text/template">
- ```
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-language">
- <script type="text/template">
- ```javascript
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-line-numbers">
- <script type="text/template">
- ```[]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-line-highlights">
- <script type="text/template">
- ```[1,2,3]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-offset">
- <script type="text/template">
- ```[123:]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-line-highlights-and-lanugage">
- <script type="text/template">
- ```javascript [1,2,3]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-line-highlights-offset-and-lanugage">
- <script type="text/template">
- ```javascript [456: 3,4,5]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-line-offset-and-lanugage">
- <script type="text/template">
- ```javascript [756:]
- code
- ```
- </script>
- </section>
- <section data-markdown class="with-code-in-fragment">
- <script type="text/template">
- ```js
- foo.bar();
- ```
-
- <!-- .element: class="fragment" -->
- </script>
- </section>
- </div>
- </div>
-
- <script type="module">
- import Reveal from '../dist/reveal.esm.js'
- import Markdown from '../plugin/markdown/markdown.esm.js'
- import Highlight from '../plugin/highlight/highlight.esm.js'
-
- QUnit.config.testTimeout = 30000;
-
- let deck1 = new Reveal( document.querySelector( '.deck1' ), { plugins: [ Markdown ] })
- deck1.addEventListener( 'ready', function() {
-
- QUnit.module( 'Inline' );
-
- QUnit.test( 'Vertical separator', function( assert ) {
- assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
- });
-
- QUnit.test( 'Horizontal separator', function( assert ) {
- assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
- });
-
- } );
-
- let deck2 = new Reveal( document.querySelector( '.deck2' ), { plugins: [ Markdown ] })
- deck2.addEventListener( 'ready', function() {
-
- QUnit.module( 'External' );
-
- QUnit.test( 'Vertical separator', function( assert ) {
- assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
- });
-
- QUnit.test( 'Horizontal separator', function( assert ) {
- assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
- });
-
- } );
-
- let deck3 = new Reveal( document.querySelector( '.deck3' ), { plugins: [ Markdown ] })
- deck3.addEventListener( 'ready', function() {
-
- QUnit.module( 'Slide Attributes' );
-
- QUnit.test( 'Id on slide', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
- });
-
- QUnit.test( 'data-background attributes', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
- });
-
- QUnit.test( 'data-transition attributes', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
- });
-
- QUnit.test( 'data-background attributes with default separator', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
- });
-
- QUnit.test( 'data-transition attributes with default separator', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
- });
-
- QUnit.test( 'data-transition attributes with inline content', function( assert ) {
- assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
- });
-
- } );
-
- let deck4 = new Reveal( document.querySelector( '.deck4' ), {
- markdown: {
- smartypants: true
- },
- plugins: [ Markdown ]
- })
- deck4.addEventListener( 'ready', function() {
-
- QUnit.module( 'Options' );
-
- QUnit.test( 'Options are set', function( assert ) {
- assert.strictEqual( deck4.getPlugin( 'markdown' ).marked.defaults.smartypants, true );
- });
-
- QUnit.test( 'Smart quotes are activated', function( assert ) {
- var text = deck4.getRevealElement().querySelector( '.reveal .slides>section>p' ).textContent;
-
- assert.strictEqual( /['"]/.test( text ), false );
- assert.strictEqual( /[“â€â€˜â€™]/.test( text ), true );
- });
-
- } );
-
- let deck5 = new Reveal( document.querySelector( '.deck5' ), { plugins: [ Markdown ] })
- deck5.addEventListener( 'ready', function() {
-
- QUnit.module( 'Element Attributes' );
-
- QUnit.test( 'Vertical separator', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
- });
-
- QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
- });
-
- QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
- });
-
- QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
- });
-
- QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
- });
-
- QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
- });
-
- QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
- });
-
- QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
- });
-
- QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
- assert.strictEqual( deck5.getRevealElement().querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
- });
-
- } );
-
- let deck6 = new Reveal( document.querySelector( '.deck6' ), {
- plugins: [ Markdown, Highlight ]
- })
- deck6.addEventListener( 'ready', function() {
-
- QUnit.module( 'Code Blocks' );
-
- QUnit.test( 'Defaults to no line numbers', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.defaults .hljs:not([data-line-numbers])' ).length, 1 );
- });
-
- QUnit.test( 'Can set language', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-language .hljs.javascript:not([data-line-numbers])' ).length, 1 );
- });
-
- QUnit.test( '```[] enables line numbers', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-numbers .hljs[data-line-numbers=""]' ).length, 1 );
- });
-
- QUnit.test( '```[1,2,3] enables line highlights', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
- });
-
- QUnit.test( '```[234: ] line offset only', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-offset .hljs[data-ln-start-from="123"]' ).length, 1 );
- });
-
- QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
- });
-
- QUnit.test( '```javascript [123: 3,4,5] add line offset and enables line highlights and sets language', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-line-numbers="3,4,5"]' ).length, 1 );
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-offset-and-lanugage .hljs.javascript[data-ln-start-from="456"]' ).length, 1 );
- });
-
- QUnit.test( '```javascript [756:] add line offset and sets no line highlights and sets language', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-offset-and-lanugage .hljs.javascript[data-ln-start-from="756"]' ).length, 1 );
- });
-
- QUnit.test( '```block should allow custom fragment', function( assert ) {
- assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
- });
-
- } );
-
- deck1.initialize();
- deck2.initialize();
- deck3.initialize();
- deck4.initialize();
- deck5.initialize();
- deck6.initialize();
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-multiple-instances-es5.html b/recitation/debugging/test/test-multiple-instances-es5.html
deleted file mode 100644
index c8bb189b98d9560d1e47af8ae50a2197ad08eede..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-multiple-instances-es5.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Iframes</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="deck1">
- <div class="reveal" style="display: none;">
- <div class="slides">
- <section>1.1</section>
- <section>1.2</section>
- <section>1.3</section>
- </div>
- </div>
- </div>
-
- <div class="deck2">
- <div class="reveal" style="display: none;">
- <div class="slides">
- <section>2.1</section>
- <section>2.2</section>
- <section>2.3</section>
- </div>
- </div>
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script src="../plugin/zoom/zoom.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
- QUnit.module( 'Multiple reveal.js instances' );
-
- let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), {
- embedded: true,
- keyboard: true,
- plugins: [RevealZoom()]
- } );
- r1.initialize();
-
- let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), {
- embedded: true,
- keyboard: false
- } );
- r2.initialize();
-
- QUnit.test( 'Can make independent changes', function( assert ) {
-
- r1.slide(1);
- r2.slide(2);
- assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' );
- assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' );
-
- r2.toggleOverview( true );
- assert.strictEqual( r1.isOverview(), false );
- assert.strictEqual( r2.isOverview(), true );
- r2.toggleOverview( false );
-
- assert.strictEqual( r1.getConfig().keyboard, true );
- assert.strictEqual( r2.getConfig().keyboard, false );
-
- });
-
- QUnit.test( 'Can register plugins independently', function( assert ) {
-
- assert.ok( r1.hasPlugin( 'zoom' ) );
- assert.notOk( r2.hasPlugin( 'zoom' ) );
-
- });
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-multiple-instances.html b/recitation/debugging/test/test-multiple-instances.html
deleted file mode 100644
index 4f16d7ee90db9b673aff1f51e02905eb78f586e8..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-multiple-instances.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Iframes</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="deck1">
- <div class="reveal" style="display: none;">
- <div class="slides">
- <section>1.1</section>
- <section data-state="deck1slide2">1.2</section>
- <section>1.3</section>
- </div>
- </div>
- </div>
-
- <div class="deck2">
- <div class="reveal" style="display: none;">
- <div class="slides">
- <section>2.1</section>
- <section>2.2</section>
- <section>2.3</section>
- </div>
- </div>
- </div>
-
- <script type="module">
-
- import Reveal from '../dist/reveal.esm.js';
- import Zoom from '../plugin/zoom/zoom.esm.js';
-
- QUnit.config.testTimeout = 30000;
- QUnit.module( 'Multiple reveal.js instances' );
-
- let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), {
- embedded: true,
- keyboard: true,
- plugins: [ Zoom ]
- } );
- r1.initialize();
-
- let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), {
- embedded: true,
- keyboard: false
- } );
- r2.initialize();
-
- QUnit.test( 'Can make independent changes', function( assert ) {
-
- r1.slide(1);
- r2.slide(2);
- assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' );
- assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' );
-
- r2.toggleOverview( true );
- assert.strictEqual( r1.isOverview(), false );
- assert.strictEqual( r2.isOverview(), true );
- r2.toggleOverview( false );
-
- assert.strictEqual( r1.getConfig().keyboard, true );
- assert.strictEqual( r2.getConfig().keyboard, false );
-
- });
-
- QUnit.test( 'Can register plugins independently', function( assert ) {
-
- assert.ok( r1.hasPlugin( 'zoom' ) );
- assert.notOk( r2.hasPlugin( 'zoom' ) );
-
- });
-
- QUnit.test( 'Slide state is set at the viewport level', function( assert ) {
-
- r1.slide(1);
-
- assert.ok( r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ) );
-
- r1.slide(2);
-
- assert.ok( !r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ), 'unset' );
-
- });
-
- </script>
- <script>
- QUnit.test( 'Reveal does not leak to window', function( assert ) {
- assert.strictEqual( window.Reveal, undefined );
- });
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-pdf.html b/recitation/debugging/test/test-pdf.html
deleted file mode 100644
index 8fa102abbe7dd5af5d142282ba4765353037aea9..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-pdf.html
+++ /dev/null
@@ -1,97 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test PDF exports</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>
- <h1>1</h1>
- <img data-src="">
- </section>
-
- <section>
- <section>
- <h1>2.1</h1>
- </section>
- <section>
- <h1>2.2</h1>
- </section>
- <section>
- <h1>2.3</h1>
- </section>
- </section>
-
- <section id="fragment-slides">
- <section>
- <h1>3.1</h1>
- <ul>
- <li class="fragment">4.1</li>
- <li class="fragment">4.2</li>
- <li class="fragment">4.3</li>
- </ul>
- </section>
-
- <section>
- <h1>3.2</h1>
- <ul>
- <li class="fragment" data-fragment-index="0">4.1</li>
- <li class="fragment" data-fragment-index="0">4.2</li>
- </ul>
- </section>
-
- <section>
- <h1>3.3</h1>
- <ul>
- <li class="fragment" data-fragment-index="1">3.3.1</li>
- <li class="fragment" data-fragment-index="4">3.3.2</li>
- <li class="fragment" data-fragment-index="4">3.3.3</li>
- </ul>
- </section>
- </section>
-
- <section>
- <h1>4</h1>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- QUnit.config.testTimeout = 30000;
- QUnit.config.autostart = false;
-
- Reveal.initialize({ pdf: true }).then( function() {
-
- QUnit.start();
-
- // Only one test for now, we're mainly ensuring that there
- // are no execution errors when running PDF mode
-
- QUnit.test( 'Reveal.isReady', function( assert ) {
- assert.strictEqual( Reveal.isReady(), true, 'returns true' );
- });
-
- } );
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-plugins.html b/recitation/debugging/test/test-plugins.html
deleted file mode 100644
index f9cd5b19c8307aca36ccc5eee4a520ab787e8bcb..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-plugins.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Plugins</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>Slide content</section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
- QUnit.module( 'Plugins' );
-
- var initCounter = { PluginB: 0, PluginC: 0, PluginD: 0 };
-
- // Plugin with no init method
- var PluginA = { id: 'PluginA' };
-
- // Plugin with init method
- var PluginB = { id: 'PluginB', init: function() {
- initCounter['PluginB'] += 1;
- } };
-
- // Async plugin with init method
- var PluginC = { id: 'PluginC', init: function() {
- return new Promise(function( resolve ) {
- setTimeout( () => {
- initCounter['PluginC'] += 1;
- resolve();
- }, 1000 );
- });
- } };
-
- // Plugin initialized after reveal.js is ready
- var PluginD = { id: 'PluginD', init: function() {
- initCounter['PluginD'] += 1;
- } };
-
- var PluginE = { id: 'PluginE' };
-
- var reveal = new Reveal( document.querySelector( '.reveal' ), {
- plugins: [ PluginA ]
- } );
-
- reveal.registerPlugin( PluginB );
- reveal.registerPlugin( PluginC );
-
- reveal.initialize();
-
- QUnit.test( 'Can initialize synchronously', function( assert ) {
- assert.strictEqual( initCounter['PluginB'], 1 );
-
- reveal.registerPlugin( PluginB );
-
- assert.strictEqual( initCounter['PluginB'], 1, 'prevents duplicate registration' );
- });
-
- QUnit.test( 'Can initialize asynchronously', function( assert ) {
- assert.expect( 3 );
- var done = assert.async( 2 );
-
- assert.strictEqual( initCounter['PluginC'], 0, 'async plugin not immediately initialized' );
-
- reveal.on( 'ready', function() {
- assert.strictEqual( initCounter['PluginC'], 1, 'finsihed initializing when reveal.js dispatches "ready"' );
- done();
-
- reveal.registerPlugin( PluginD );
- assert.strictEqual( initCounter['PluginD'], 1, 'plugin registered after reveal.js is ready still initiailizes' );
- done();
- });
- } );
-
- QUnit.test( 'Can check if plugin is registered', function( assert ) {
- assert.strictEqual( reveal.hasPlugin( 'PluginA' ), true );
- assert.strictEqual( reveal.hasPlugin( 'PluginE' ), false );
- reveal.registerPlugin( PluginE );
- assert.strictEqual( reveal.hasPlugin( 'PluginE' ), true );
- } );
-
- QUnit.test( 'Can retrieve plugin instance', function( assert ) {
- assert.strictEqual( reveal.getPlugin( 'PluginB' ), PluginB );
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-scroll.html b/recitation/debugging/test/test-scroll.html
deleted file mode 100644
index 786298b87ed7928bbb7ce918b66e3c70c14fed1a..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-scroll.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test Scroll View</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="opacity: 0; pointer-events: none;">
-
- <div class="slides">
-
- <section>
- <h1>slide 1</h1>
- </section>
-
- <section>
- <h1>slide 2</h1>
- </section>
-
- <section>
- <h1>slide 3</h1>
- <p class="fragment">fragment 1</p>
- <p class="fragment">fragment 2</p>
- <p class="fragment">fragment 3</p>
- </section>
-
- <section>
- <h1>slide 4</h1>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- QUnit.config.testTimeout = 30000;
- QUnit.config.reorder = false;
-
- function getScrollHeight() {
- return Reveal.getViewportElement().scrollHeight;
- }
-
- function getViewportHeight() {
- return Reveal.getViewportElement().offsetHeight;
- }
-
- Reveal.initialize({ view: 'scroll' }).then( async () => {
-
- QUnit.module( 'Scroll View' );
-
- QUnit.test( 'Activates', assert => {
- assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
- });
-
- QUnit.test( 'Can be toggled via API', assert => {
- Reveal.toggleScrollView( false );
- assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' );
- Reveal.toggleScrollView( true );
- assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' );
- });
-
- QUnit.test( 'Changes present slide when scrolling', assert => {
- assert.timeout( 200 );
- assert.expect( 2 );
-
- const slides = document.querySelectorAll( '.reveal .slides section' );
-
- assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' );
- Reveal.getViewportElement().scrollTop = getViewportHeight() * 1;
-
- return new Promise( resolve => {
- setTimeout(() => {
- assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' );
- resolve();
- }, 100);
- } );
- });
-
- QUnit.test( 'Fires slideschanged event when scrolling', assert => {
- assert.timeout( 200 );
- assert.expect( 2 );
-
- const slides = document.querySelectorAll( '.reveal .slides section' );
-
- return new Promise( resolve => {
- let callback = ( event ) => {
- Reveal.off( 'slidechanged', callback );
- assert.ok( true, 'slidechanged event fired' );
- assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' );
- resolve();
- }
-
- Reveal.on( 'slidechanged', callback );
- Reveal.getViewportElement().scrollTop = getViewportHeight() * 2;
- });
- });
-
- } );
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test-state.html b/recitation/debugging/test/test-state.html
deleted file mode 100644
index c2d50557a29285f0e8aa3059634a634cae26fed1..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test-state.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Test State</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="display: none;">
-
- <div class="slides">
-
- <section>No state</section>
- <section id="slide2" data-state="state1">State 1</section>
- <section data-state="state1">State 1</section>
- <section data-state="state2">State 2</section>
- <section>
- <section>No state</section>
- <section data-state="state1">State 1</section>
- <section data-state="state3">State 3</section>
- <section>No state</section>
- </section>
- <section>No state</section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
-
- Reveal.initialize();
-
- QUnit.module( 'State' );
-
- QUnit.test( 'Fire events when changing slide', function( assert ) {
- assert.expect( 2 );
- var state1 = assert.async();
- var state2 = assert.async();
-
- var _onState1 = function( event ) {
- assert.ok( true, 'state1 fired' );
- state1();
- }
-
- var _onState2 = function( event ) {
- assert.ok( true, 'state2 fired' );
- state2();
- }
-
- Reveal.on( 'state1', _onState1 );
- Reveal.on( 'state2', _onState2 );
-
- Reveal.slide( 1 );
- Reveal.slide( 3 );
-
- Reveal.off( 'state1', _onState1 );
- Reveal.off( 'state2', _onState2 );
- });
-
- QUnit.test( 'Fire state events for vertical slides', function( assert ) {
- assert.expect( 2 );
- var done = assert.async( 2 );
-
- var _onState1 = function( event ) {
- assert.ok( true, 'state1 fired' );
- done();
- }
-
- var _onState3 = function( event ) {
- assert.ok( true, 'state3 fired' );
- done();
- }
-
- Reveal.on( 'state1', _onState1 );
- Reveal.on( 'state3', _onState3 );
-
- Reveal.slide( 0 );
- Reveal.slide( 4, 1 );
- Reveal.slide( 4, 2 );
-
- Reveal.off( 'state1', _onState1 );
- Reveal.off( 'state3', _onState3 );
- });
-
- QUnit.test( 'No events if state remains unchanged', function( assert ) {
- var stateChanges = 0;
-
- var _onEvent = function( event ) {
- stateChanges += 1;
- }
-
- Reveal.on( 'state1', _onEvent );
-
- Reveal.slide( 0 ); // no state
- Reveal.slide( 1 ); // state1
- Reveal.slide( 2 ); // state1
- Reveal.prev(); // state1
- Reveal.next(); // state1
- Reveal.slide( 4, 1 ); // state1
- Reveal.slide( 0 ); // no state
-
- Reveal.off( 'state1', _onEvent );
-
- assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
- });
-
- QUnit.test( 'Event order', function( assert ) {
- var _onEvent = function( event ) {
- assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
- }
-
- Reveal.on( 'state1', _onEvent );
-
- Reveal.slide( 0 );
- Reveal.slide( 1 );
-
- Reveal.off( 'state1', _onEvent );
- });
-
- </script>
-
- </body>
-</html>
diff --git a/recitation/debugging/test/test.html b/recitation/debugging/test/test.html
deleted file mode 100644
index ab44922aee7139f8a9537efbdc75eda9e1e0e575..0000000000000000000000000000000000000000
--- a/recitation/debugging/test/test.html
+++ /dev/null
@@ -1,900 +0,0 @@
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>reveal.js - Tests</title>
-
- <link rel="stylesheet" href="../dist/reveal.css">
- <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
- <script src="../node_modules/qunit/qunit/qunit.js"></script>
- </head>
-
- <body style="overflow: auto;">
-
- <div id="qunit"></div>
- <div id="qunit-fixture"></div>
-
- <div class="reveal" style="visibility: hidden;">
-
- <div class="slides">
-
- <section data-visibility="hidden">
- This should be remove by reveal.js before our tests run.
- </section>
-
- <section data-background-image="examples/assets/image1.png">
- <h1>1</h1>
- <img data-src="">
- <video data-src=""></video>
- <audio data-src=""></audio>
- <aside class="notes">speaker notes 1</aside>
- </section>
-
- <section>
- <section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
- <h1>2.1</h1>
- </section>
- <section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
- <h1>2.2</h1>
- </section>
- <section>
- <h1>2.3</h1>
- </section>
- </section>
-
- <section id="fragment-slides">
- <section>
- <h1>3.1</h1>
- <ul>
- <li class="fragment">4.1</li>
- <li class="fragment">4.2</li>
- <li class="fragment">4.3</li>
- </ul>
- </section>
-
- <section>
- <h1>3.2</h1>
- <ul>
- <li class="fragment" data-fragment-index="0">4.1</li>
- <li class="fragment" data-fragment-index="0">4.2</li>
- </ul>
- <iframe data-src="http://example.com"></iframe>
- </section>
-
- <section id="fragments3">
- <h1>3.3</h1>
- <ul>
- <li class="fragment" data-fragment-index="1">3.3.1</li>
- <li class="fragment" data-fragment-index="4">3.3.2</li>
- <li class="fragment" data-fragment-index="4">3.3.3</li>
- </ul>
- </section>
- </section>
-
- <section>
- <h1>4</h1>
- </section>
-
- </div>
-
- </div>
-
- <script src="../dist/reveal.js"></script>
- <script>
- QUnit.config.testTimeout = 30000;
-
- window.location.hash = '';
-
- Reveal.configure({maxScale: 1.11});
-
- // These tests expect the DOM to contain a presentation
- // with the following slide structure:
- //
- // 1
- // 2 - Three sub-slides
- // 3 - Three fragment elements
- // 3 - Two fragments with same data-fragment-index
- // 4
- Reveal.initialize().then( function() {
-
- // Helper methods
- function triggerKeyboardEvent(config) {
- document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
- }
-
- // ---------------------------------------------------------------
- // DOM TESTS
-
- QUnit.module( 'DOM' );
-
- QUnit.test( 'Initial slides classes', function( assert ) {
- var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
-
- assert.strictEqual( document.querySelectorAll( '.reveal .slides section[data-visibility="hidden"]' ).length, 0, 'no data-visibility="hidden" slides' );
- assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
- assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
- assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
-
- assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
-
- assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
- });
-
- // ---------------------------------------------------------------
- // API TESTS
-
- QUnit.module( 'API' );
-
- QUnit.test( 'Reveal.configure before initialization', function( assert ) {
- assert.strictEqual( Reveal.getConfig().maxScale, 1.11 );
- });
-
- QUnit.test( 'Reveal.isReady', function( assert ) {
- assert.strictEqual( Reveal.isReady(), true, 'returns true' );
- });
-
- QUnit.test( 'Reveal.isOverview', function( assert ) {
- assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
-
- Reveal.toggleOverview();
- assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
-
- Reveal.toggleOverview();
- assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
- });
-
- QUnit.test( 'Reveal.isPaused', function( assert ) {
- assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
-
- Reveal.togglePause();
- assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
-
- Reveal.togglePause();
- assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
- });
-
- QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
-
- Reveal.slide( 1, 0 );
- assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
-
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
- });
-
- QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
- Reveal.slide( 1, 1 );
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
- });
-
- QUnit.test( 'Reveal.isLastSlide', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
-
- var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
-
- Reveal.slide( lastSlideIndex, 0 );
- assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
-
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
- });
-
- QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
- var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
-
- Reveal.slide( 1, 1 );
- Reveal.slide( lastSlideIndex );
- assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
- });
-
- QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
- assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
- });
-
- QUnit.test( 'Reveal.getIndices', function( assert ) {
- var indices = Reveal.getIndices();
-
- assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
- assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
- assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );
-
- Reveal.slide( 1, 0 );
- assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
- assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
-
- Reveal.slide( 1, 2 );
- assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
- assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
-
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.getIndices().h, 0, 'h 0' );
- assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
- });
-
- QUnit.test( 'Reveal.getSlide', function( assert ) {
- assert.equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
- assert.equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
- assert.equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
- assert.equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
-
- assert.strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
- assert.strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
- });
-
- QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
- assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
- assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
- assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
- assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
-
- assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
- assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
- });
-
- QUnit.test( 'Reveal.getSlideNotes', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
-
- Reveal.slide( 1, 0 );
- assert.ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
- });
-
- QUnit.test( 'Reveal.getPreviousSlide/getCurrentSlide', function( assert ) {
- Reveal.slide( 0, 0 );
- Reveal.slide( 1, 0 );
-
- var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
- var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' );
-
- assert.equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
- assert.equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
- });
-
- QUnit.test( 'Reveal.getProgress', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
-
- var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
-
- Reveal.slide( lastSlideIndex, 0 );
- assert.strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
- });
-
- QUnit.test( 'Reveal.getScale', function( assert ) {
- assert.ok( typeof Reveal.getScale() === 'number', 'has scale' );
- });
-
- QUnit.test( 'Reveal.getConfig', function( assert ) {
- assert.ok( typeof Reveal.getConfig() === 'object', 'has config' );
- });
-
- QUnit.test( 'Reveal.configure', function( assert ) {
- assert.strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
-
- Reveal.configure({ loop: true });
- assert.strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
-
- Reveal.configure({ loop: false, customTestValue: 1 });
- assert.strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
- });
-
- QUnit.test( 'Reveal.availableRoutes', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
-
- Reveal.slide( 1, 0 );
- assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
-
- Reveal.slide( 0, 0 );
- assert.deepEqual( Reveal.availableRoutes({ includeFragments: true }), { left: false, up: false, down: false, right: true }, 'correct with fragments included' );
- });
-
- QUnit.test( 'Reveal.next', function( assert ) {
- Reveal.slide( 0, 0 );
-
- // Step through vertical child slides
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
-
- // Step through fragments
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
- });
-
- QUnit.test( 'Reveal.next at end', function( assert ) {
- Reveal.slide( 3 );
-
- // We're at the end, this should have no effect
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
- });
-
-
- // ---------------------------------------------------------------
- // URL TESTS
-
- QUnit.module( 'URL' );
-
- QUnit.test( 'Write (fragmentInURL: false)', function( assert ) {
- Reveal.configure({ hash: true, fragmentInURL: false });
-
- Reveal.slide( 2, 0 );
- assert.strictEqual( Reveal.getSlidePath(), '/2' );
-
- Reveal.slide( 2, 1 );
- assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
-
- Reveal.slide( 2, 0, 1 );
- assert.strictEqual( Reveal.getSlidePath(), '/2' );
-
- Reveal.slide( 2, 2, 0 );
- assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
-
- Reveal.slide( 2, 2, 1 );
- assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
- });
-
- QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
- Reveal.configure({ hash: true, fragmentInURL: true });
-
- Reveal.slide( 2, 0, -1 );
- assert.strictEqual( Reveal.getSlidePath(), '/2' );
-
- Reveal.slide( 2, 1, -1 );
- assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
-
- Reveal.slide( 2, 0, 1 );
- assert.strictEqual( Reveal.getSlidePath(), '/2/0/1' );
-
- Reveal.slide( 2, 2, -1 );
- assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
-
- Reveal.slide( 2, 2, 1 );
- assert.strictEqual( Reveal.getSlidePath(), '/fragments3/1' );
- });
-
- QUnit.test( 'Read', async function( assert ) {
- Reveal.configure({ hash: true, fragmentInURL: true });
-
- let test = function( hash, indices ) {
- return new Promise( resolve => {
- window.onhashchange = () => {
- assert.deepEqual( Reveal.getIndices(), indices );
- resolve();
- };
- window.location.hash = hash;
- } );
- }
-
- await test( '#/0', { h: 0, v: 0, f: undefined } ); // horizontal
- await test( '#/1/1', { h: 1, v: 1, f: undefined } ); // vertical
- await test( '#/0/', { h: 0, v: 0, f: undefined } ); // trailing /
- await test( '#/1/1/', { h: 1, v: 1, f: undefined } ); // trailing /
- await test( '#/2/0/1', { h: 2, v: 0, f: 1 } ); // fragment
- });
-
- // ---------------------------------------------------------------
- // KEYBOARD TESTS
-
- QUnit.module( 'Keyboard' );
-
- QUnit.test( 'Add key bindings', function( assert ) {
- var done = assert.async( 1 );
-
- Reveal.addKeyBinding({keyCode: 88, key: 'X', description: 'X-SHORTCUT-X'}, function() {
- assert.ok( true, 'callback triggered' );
- done();
- } );
-
- Reveal.toggleHelp( true );
- assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' );
- Reveal.toggleHelp( false );
-
- triggerKeyboardEvent({ keyCode: 88 });
-
- Reveal.removeKeyBinding( 88 );
-
- // should do nothing
- triggerKeyboardEvent({ keyCode: 88 });
- });
-
- QUnit.test( 'Navigation bindings', function( assert ) {
- Reveal.slide( 0 );
-
- // right arrow
- triggerKeyboardEvent({ keyCode: 39 });
- assert.strictEqual( Reveal.getIndices().h, 1 );
-
- // down arrow + shift
- triggerKeyboardEvent({ keyCode: 40, shiftKey: true });
- assert.strictEqual( Reveal.getIndices().v, 2, 'shift + down arrow goes to last vertical slide' );
-
- // up arrow
- triggerKeyboardEvent({ keyCode: 38 });
- assert.strictEqual( Reveal.getIndices().v, 1 );
-
- // right arrow + shift
- triggerKeyboardEvent({ keyCode: 39, shiftKey: true });
- assert.ok( Reveal.isLastSlide(), 'shift + right arrow goes to last horizontal slide' );
-
-
- // right arrow on slide with fragments
- Reveal.slide( 2, 0, -1 );
- triggerKeyboardEvent({ keyCode: 39 });
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'right arrow shows fragment' );
-
- triggerKeyboardEvent({ keyCode: 39, altKey: true });
- assert.strictEqual( Reveal.getIndices().h, 3, 'right arrow skips fragments when alt key is pressed' );
- });
-
- // ---------------------------------------------------------------
- // FRAGMENT TESTS
-
- QUnit.module( 'Fragments' );
-
- QUnit.test( 'Sliding to fragments', function( assert ) {
- Reveal.slide( 2, 0, -1 );
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
-
- Reveal.slide( 2, 0, 0 );
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
-
- Reveal.slide( 2, 0, 2 );
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
-
- Reveal.slide( 2, 0, 1 );
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
- });
-
- QUnit.test( 'data-fragment is set on slide <section>', function( assert ) {
- Reveal.slide( 2, 0, -1 );
- assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '-1' );
-
- Reveal.slide( 2, 0, 2 );
- assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '2' );
-
- Reveal.slide( 2, 0, 0 );
- assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '0' );
-
- var fragmentSlide = Reveal.getCurrentSlide();
-
- Reveal.slide( 3, 0 );
- assert.deepEqual( fragmentSlide.getAttribute( 'data-fragment' ), '0', 'data-fragment persists when jumping to another slide' );
- });
-
- QUnit.test( 'Hiding all fragments', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
-
- Reveal.slide( 2, 0, 0 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
-
- Reveal.slide( 2, 0, -1 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
- });
-
- QUnit.test( 'Current fragment', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
- var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );
-
- Reveal.slide( 2, 0 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
-
- Reveal.slide( 2, 0, 0 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
-
- Reveal.slide( 1, 0, 0 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
-
- Reveal.slide( 3, 0, 0 );
- assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
-
- Reveal.slide( 2, 1, -1 );
- Reveal.prev();
- assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
- });
-
- QUnit.test( 'Stepping through fragments', function( assert ) {
- Reveal.slide( 2, 0, -1 );
-
- // forwards:
-
- Reveal.next();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
-
- Reveal.right();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
-
- Reveal.down();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
-
- Reveal.down(); // moves to f #3
-
- // backwards:
-
- Reveal.prev();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
-
- Reveal.left();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
-
- Reveal.up();
- assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
- });
-
- QUnit.test( 'Stepping past fragments', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
-
- Reveal.slide( 0, 0, 0 );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
-
- Reveal.slide( 3, 0, 0 );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
- });
-
- QUnit.test( 'Fragment indices', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
-
- Reveal.slide( 3, 0, 0 );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
-
- // This slide has three fragments, first one is index 0, second and third have index 1
- Reveal.slide( 2, 2, 0 );
- assert.equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
-
- Reveal.slide( 2, 2, 1 );
- assert.equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
- });
-
- QUnit.test( 'Index generation', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
-
- // These have no indices defined to start with
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
- });
-
- QUnit.test( 'Index normalization', function( assert ) {
- var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' );
-
- // These start out as 1-4-4 and should normalize to 0-1-1
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
- assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
- });
-
- QUnit.test( 'fragmentshown event', function( assert ) {
- assert.expect( 2 );
- var done = assert.async( 2 );
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'fragmentshown', _onEvent );
-
- Reveal.slide( 2, 0 );
- Reveal.slide( 2, 0 ); // should do nothing
- Reveal.slide( 2, 0, 0 ); // should do nothing
- Reveal.next();
- Reveal.next();
- Reveal.prev(); // shouldn't fire fragmentshown
-
- Reveal.off( 'fragmentshown', _onEvent );
- });
-
- QUnit.test( 'fragmenthidden event', function( assert ) {
- assert.expect( 2 );
- var done = assert.async( 2 );
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'fragmenthidden', _onEvent );
-
- Reveal.slide( 2, 0, 2 );
- Reveal.slide( 2, 0, 2 ); // should do nothing
- Reveal.prev();
- Reveal.prev();
- Reveal.next(); // shouldn't fire fragmenthidden
-
- Reveal.off( 'fragmenthidden', _onEvent );
- });
-
-
- // ---------------------------------------------------------------
- // AUTO-SLIDE TESTS
-
- QUnit.module( 'Auto Sliding' );
-
- QUnit.test( 'Reveal.isAutoSliding', function( assert ) {
- assert.strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
-
- Reveal.configure({ autoSlide: 10000 });
- assert.strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
-
- Reveal.configure({ autoSlide: 0 });
- assert.strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
- });
-
- QUnit.test( 'Reveal.toggleAutoSlide', function( assert ) {
- Reveal.configure({ autoSlide: 10000 });
-
- Reveal.toggleAutoSlide();
- assert.strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
- Reveal.toggleAutoSlide();
- assert.strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
-
- Reveal.configure({ autoSlide: 0 });
- });
-
- QUnit.test( 'autoslidepaused', function( assert ) {
- assert.expect( 1 );
- var done = assert.async();
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'autoslidepaused', _onEvent );
- Reveal.configure({ autoSlide: 10000 });
- Reveal.toggleAutoSlide();
-
- // cleanup
- Reveal.configure({ autoSlide: 0 });
- Reveal.off( 'autoslidepaused', _onEvent );
- });
-
- QUnit.test( 'autoslideresumed', function( assert ) {
- assert.expect( 1 );
- var done = assert.async();
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'autoslideresumed', _onEvent );
- Reveal.configure({ autoSlide: 10000 });
- Reveal.toggleAutoSlide();
- Reveal.toggleAutoSlide();
-
- // cleanup
- Reveal.configure({ autoSlide: 0 });
- Reveal.off( 'autoslideresumed', _onEvent );
- });
-
-
- // ---------------------------------------------------------------
- // CONFIGURATION VALUES
-
- QUnit.module( 'Configuration' );
-
- QUnit.test( 'Controls', function( assert ) {
- var controlsElement = document.querySelector( '.reveal>.controls' );
-
- Reveal.configure({ controls: false });
- assert.equal( controlsElement.style.display, 'none', 'controls are hidden' );
-
- Reveal.configure({ controls: true });
- assert.equal( controlsElement.style.display, 'block', 'controls are visible' );
- });
-
- QUnit.test( 'Progress', function( assert ) {
- var progressElement = document.querySelector( '.reveal>.progress' );
-
- Reveal.configure({ progress: false });
- assert.equal( progressElement.style.display, 'none', 'progress are hidden' );
-
- Reveal.configure({ progress: true });
- assert.equal( progressElement.style.display, 'block', 'progress are visible' );
- });
-
- QUnit.test( 'Loop', function( assert ) {
- Reveal.configure({ loop: true });
-
- Reveal.slide( 0, 0 );
-
- Reveal.left();
- assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
-
- Reveal.right();
- assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
-
- Reveal.configure({ navigationMode: 'linear' });
- Reveal.slide( 0, 0 );
-
- Reveal.prev();
- assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end in linear mode' );
-
- Reveal.next();
- assert.equal( Reveal.getIndices().h, 0, 'looped from end to start in linear mode' );
-
- Reveal.configure({ loop: false, navigationMode: 'default' });
- });
-
-
- // ---------------------------------------------------------------
- // LAZY-LOADING TESTS
-
- QUnit.module( 'Lazy-Loading' );
-
- QUnit.test( 'img with data-src', function( assert ) {
- assert.strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
- });
-
- QUnit.test( 'video with data-src', function( assert ) {
- assert.strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
- });
-
- QUnit.test( 'audio with data-src', function( assert ) {
- assert.strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
- });
-
- QUnit.test( 'iframe with data-src', function( assert ) {
- Reveal.slide( 0, 0 );
- assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
- Reveal.slide( 2, 1 );
- assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
- Reveal.slide( 2, 2 );
- assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
- });
-
- QUnit.test( 'background images', function( assert ) {
- var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
- var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
- var imageSource3 = Reveal.getSlide( 1, 1 ).getAttribute( 'data-background-image' );
-
- // check that the images are applied to the background elements
- assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
- assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
- assert.ok( Reveal.getSlideBackground( 1, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
- });
-
-
- // ---------------------------------------------------------------
- // EVENT TESTS
-
- QUnit.module( 'Events' );
-
- QUnit.test( 'beforeslidechange', function( assert ) {
- var done = assert.async( 2 );
-
- var normalEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
- var blockingEvent = function( event ) {
- event.preventDefault();
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'beforeslidechange', normalEvent );
- Reveal.slide( 2, 0 );
- Reveal.off( 'beforeslidechange', normalEvent );
-
- Reveal.on( 'beforeslidechange', blockingEvent );
- Reveal.slide( 3, 0 );
- Reveal.off( 'beforeslidechange', blockingEvent );
-
- assert.strictEqual( Reveal.getIndices().h, 2, 'preventing "beforeslidechange" blocks navigation ' );
-
- });
-
- QUnit.test( 'slidechanged', function( assert ) {
- assert.expect( 3 );
- var done = assert.async( 3 );
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'slidechanged', _onEvent );
-
- Reveal.slide( 1, 0 ); // should trigger
- Reveal.slide( 1, 0 ); // should do nothing
- Reveal.next(); // should trigger
- Reveal.slide( 3, 0 ); // should trigger
- Reveal.next(); // should do nothing
-
- Reveal.off( 'slidechanged', _onEvent );
-
- });
-
- /* Fails intermittently...
- QUnit.test( 'slidetransitionend', function( assert ) {
- assert.expect( 2 );
- let done = assert.async( 2 );
- let time = Date.now();
-
- let horizontalCallback = event => {
- assert.ok( Date.now() - time > 200, 'horizontal event fired' );
- done();
-
- let verticalCallback = event => {
- assert.ok( true, 'vertical event fired' );
- done();
- Reveal.off( 'slidetransitionend', verticalCallback );
- }
-
- Reveal.off( 'slidetransitionend', horizontalCallback );
- Reveal.on( 'slidetransitionend', verticalCallback );
- Reveal.slide( 1, 1 );
- }
-
- Reveal.slide( 0, 0 );
- Reveal.on( 'slidetransitionend', horizontalCallback );
- Reveal.slide( 1, 0 );
-
- });
- */
-
- QUnit.test( 'paused', function( assert ) {
- assert.expect( 1 );
- var done = assert.async();
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'paused', _onEvent );
-
- Reveal.togglePause();
- Reveal.togglePause();
-
- Reveal.off( 'paused', _onEvent );
- });
-
- QUnit.test( 'resumed', function( assert ) {
- assert.expect( 1 );
- var done = assert.async();
-
- var _onEvent = function( event ) {
- assert.ok( true, 'event fired' );
- done();
- }
-
- Reveal.on( 'resumed', _onEvent );
-
- Reveal.togglePause();
- Reveal.togglePause();
-
- Reveal.off( 'resumed', _onEvent );
- });
-
- } );
- </script>
-
- </body>
-</html>