31 | ```
32 |
33 |
34 | ===
35 |
36 | ### Example: Flip of a coin
37 |
38 | The following configuration
39 | ```js
40 | Reveal.initialize({
41 | // ...
42 | anything: [
43 | { className: "flipofacoin",
44 | initialize: (function(container, options){
45 | container.innerHTML = Math.random() < 0.5 ? "heads" : "tails";
46 | })
47 | },
48 | // ...
49 | ],
50 | plugins: [
51 | RevealAnything,
52 | // ...
53 | ]
54 | });
55 | ```
56 | can be used to insert a random result into
57 |
58 | ```html
59 | Today's flip of a coin is: .
60 | ```
61 |
62 | producing this output:
63 |
64 | > Today's flip of a coin is: .
65 |
66 |
67 | ===
68 |
69 | ### Example: Roll of a die
70 |
71 | Assuming `rollofadie` is an appropriate function, the following configuration
72 | ```js
73 | Reveal.initialize({
74 | // ...
75 | anything: [
76 | { className: "rollofadie",
77 | initialize: rollofadie
78 | },
79 | // ...
80 | ],
81 | plugins: [
82 | RevealAnything,
83 | // ...
84 | ]
85 | });
86 | ```
87 | can be used to insert a random result into
88 |
89 | ```html
90 | Today's roll of a die is: .
91 | ```
92 |
93 | producing this output:
94 |
95 | > Today's roll of a die is: .
96 |
97 |
98 | ===
99 |
100 | ### Options and defaults
101 |
102 | Options can be provided as a JSON string within a comment inside the HTML object.
103 |
104 |
105 | The following configuration
106 |
107 | ```js
108 | Reveal.initialize({
109 | // ...
110 | anything: [ {
111 | className: "randomnumber",
112 | defaults: {min: 0, max: 9},
113 | initialize: (function(container, options){ container.innerHTML = Math.trunc( options.min + Math.random()*(options.max-options.min + 1) ); })
114 | },
115 | ],
116 | plugins: [
117 | RevealAnything,
118 | // ...
119 | ]
120 | });
121 | ```
122 | defines default values to be used in the function.
123 |
124 | ---
125 |
126 | If optional values are provided, e.g., by
127 |
128 | ```html
129 | Today's roll of a icosahedron is:
130 |
131 |
132 | .
133 | ```
134 |
135 | these values will be used when creating the output:
136 |
137 | > Today's roll of a icosahedron is:
138 | >
139 | >
140 | > .
141 |
142 | ---
143 |
144 | If no options are given, e.g.,
145 |
146 | ```html
147 | Today's random digit is: .
148 | ```
149 |
150 | default values will be used by the function, producing this output:
151 |
152 | > Today's random digit is: .
153 |
154 | ---
155 |
156 | ### Generic configuration
157 |
158 | The following configuration
159 | ```js
160 | Reveal.initialize({
161 | // ...
162 | anything: [
163 | {
164 | className: "anything",
165 | initialize: (
166 | function(container, options) {
167 | if (options && typeof options.initialize === "function") {
168 | options.initialize(container);
169 | }
170 | }
171 | )
172 | },
173 | // ...
174 | ],
175 | plugins: [
176 | RevealAnything,
177 | // ...
178 | ]
179 | });
180 | ```
181 | provides a generic class that can be used be providing an arbitrary initialization function.
182 |
183 |
184 |
--------------------------------------------------------------------------------
/audio-slideshow/jungle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajgoel/reveal.js-demos/0fa890910e10f62848bb9cad40444b98f1278c2f/audio-slideshow/jungle.jpg
--------------------------------------------------------------------------------
/audio-slideshow/playback/33seconds_silence.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajgoel/reveal.js-demos/0fa890910e10f62848bb9cad40444b98f1278c2f/audio-slideshow/playback/33seconds_silence.ogg
--------------------------------------------------------------------------------
/audio-slideshow/playback/birds.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajgoel/reveal.js-demos/0fa890910e10f62848bb9cad40444b98f1278c2f/audio-slideshow/playback/birds.ogg
--------------------------------------------------------------------------------
/audio-slideshow/slides.md:
--------------------------------------------------------------------------------
1 | ## Audio slideshows with Reveal.js
2 |
3 | The `audio-slideshow` plugin allows to add audio playback to a slide deck.
4 |
5 | Please click the play button below.
6 |
7 | ---
8 |
9 | ### Audio playback
10 |
11 |
12 |
13 | With audio slideshows you can add recorded audio to whatever you want to deliver to your audience.
14 |
15 | Listen to the birds.
16 |
17 |
18 | ---
19 |
20 | ### Audio recording
21 |
22 | By using the `slideshow-recorder` plugin you can easily record audio to be played in your slideshow.
23 |
24 | Just press R to start or stop recording audio (and allow the browser to use the microphone).
25 |
26 | You can download a ZIP-file containing the recorded audio by pressing Z.
27 |
28 | ---
29 |
30 | ### Player controls
31 |
32 |
33 |
34 |
35 | The audio controls can also be used to control embedded videos.
36 |
37 |
39 |
40 | ---
41 |
42 | ### Synchronised audio and video
43 |
44 | Audio playback and embedded videos can be synchronised.
45 |
46 |
48 | Source: NASA Marshall Space Flight Center (NASA-MSFC)
49 |
--------------------------------------------------------------------------------
/chalkboard/Manga_grayscale.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/chalkboard/Manga_lines.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
340 |
--------------------------------------------------------------------------------
/chalkboard/playback/38seconds_silence.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rajgoel/reveal.js-demos/0fa890910e10f62848bb9cad40444b98f1278c2f/chalkboard/playback/38seconds_silence.ogg
--------------------------------------------------------------------------------
/chalkboard/slides.md:
--------------------------------------------------------------------------------
1 | ## Chalkboard with Reveal.js
2 |
3 | The `chalkboard` plugin allows to quickly make hand-written notes on a virtual chalkboard or on the slides.
4 |
5 | ---
6 |
7 | ### Virtual chalkboard
8 |
9 | Press B or click on the button at the lower left to open and close your chalkboard.
10 |
11 | ---
12 |
13 | ### Slide annotation
14 |
15 | Press C or click on the button at the lower left to open and close slide annotation.
16 |
17 | ---
18 |
19 | ### Easy to use
20 |
21 | After opening the chalkboard or slide annotation mode
22 | - click the left mouse button and drag to write on the chalkboard,
23 | - click the right mouse button and drag to wipe the chalkboard,
24 | - use the palette on the left to select the color or the sponge, or
25 | - use a pen or finger to draw.
26 |
27 | ---
28 |
29 | ### Chalkboard navigation
30 |
31 | In chalkboard mode, use the and buttons at the right to add a new chalkboard above or below the current view or to navigate to an existing chalkboard.
32 |
33 | ---
34 |
35 | ### PDF printout
36 |
37 | Each chalkboard is included in the PDF printouts.
38 |
39 | ---
40 |
41 | ### Download drawings
42 |
43 | Press D to download chalkboard drawings. Downloaded drawings can be added to a slidedeck for permanent availability.
44 |
45 | ---
46 |
47 |
48 |
49 |
50 | ### Playback
51 |
52 | Press the play button below to play back recorded drawings.
53 |
54 | ---
55 |
56 | ### Clear drawings
57 |
58 | - Click the DEL key to clear drawings on the current slide or chalkboard
59 | - Click the BACKSPACE key to clear drawings on all slides and chalkboards
60 |
--------------------------------------------------------------------------------
/chart/data.csv:
--------------------------------------------------------------------------------
1 | ,January, February, March, April, May, June, July
2 | My first dataset, 65, 59, 80, 81, 56, 55, 40
3 | My second dataset, 28, 48, 40, 19, 86, 27, 90
4 |
--------------------------------------------------------------------------------
/chart/slides.md:
--------------------------------------------------------------------------------
1 | ## Charts with Reveal.js and Chart.js
2 |
3 | The `chart` plugin allows to add beautiful charts to a slide deck.
4 |
5 | ---
6 |
7 | ## Line chart from JSON string
8 |
9 |
10 |
31 |
32 |
33 | ---
34 |
35 | ## Line chart with CSV data and JSON configuration
36 |
37 |
38 |
51 |
52 |
53 | ---
54 |
55 | ## Bar chart with CSV data
56 |
57 |
58 |
63 |
64 |
65 | ---
66 |
67 | ## Stacked bar chart from CSV file with JSON configuration
68 |
69 |
132 | You have reached the last slide of this slide deck. Please click
133 |
134 |
to open a version printable to PDF, or
135 |
to continue with the next slide deck.
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
487 |
488 |
489 |
490 |
--------------------------------------------------------------------------------
/overview/slides.md:
--------------------------------------------------------------------------------
1 | ## Reveal.js
2 |
3 | [Reveal.js](https://revealjs.com/) is an open-source HTML framework allowing to create beautiful presentations supporting
4 |
5 | - authoring via MarkDown,
6 | - math equations with MathJax,
7 | - syntax highlighting for code, and
8 | - much more.
9 |
10 | This presentation showcases examples created with the [reveal.js plugin collection](https://github.com/rajgoel/reveal.js-plugins).
11 |
12 | ---
13 |
14 | ### Navigation
15 |
16 | Open the menu by clicking in the lower left corner and click to navigate to demos for specific plugins or continue with the next slides to see a few examples created with the plugin collection.
17 |
18 | ===
19 |
20 | ## Examples
21 |
22 | ---
23 |
24 | ### Animations
25 |
26 |
58 |
59 | ---
60 |
61 |
62 |
63 | ### Embedded online content
64 |
65 |
66 |
67 | ===
68 |
69 | ## Open source
70 |
71 | You can find the source code of
72 |
73 | - the presentation framework [here](https://github.com/hakimel/reveal.js)
74 |
75 | - the plugin collection [here](https://github.com/rajgoel/reveal.js-plugins)
76 |
77 | - the demo presentations [here](https://github.com/rajgoel/reveal.js-demos)
78 |
79 |
--------------------------------------------------------------------------------
/seminar/slides.md:
--------------------------------------------------------------------------------
1 | ## Seminars with Reveal.js
2 |
3 | The `seminar` plugin allows to add live broadcasting of slide changes, chalkboard drawings, online polls, and Q&As to a slide deck.
4 |
5 | ---
6 |
7 | ### Requirements
8 |
9 | The `seminar` plugin requires a running socket.io server.
10 |
11 | This demo presentation is not connected to a running server.
12 |
13 |
14 | This demo presentation is connected to a running server.
15 |
16 |
17 | ---
18 |
19 | ### Seminar server
20 |
21 | The seminar server can be obtained here [here](https://github.com/rajgoel/seminar).
22 |
23 |
24 |
25 | To learn how to setup your own server please check the [documentation](https://github.com/rajgoel/reveal.js-plugins/tree/master/seminar).
26 |
27 | ---
28 |
29 | ### Local test installation
30 |
31 | To test the seminar plugin locally simply [download](https://github.com/rajgoel/seminar) the seminar server and run
32 |
33 | ```
34 | npm install
35 | npm run start
36 | ```
37 |
38 | When you open this demo presentation it will connect to the locally running seminar server.
39 |
40 | ---
41 |
42 | ### Online seminars
43 |
44 | For online seminars, you need to install the seminar server on a publicly reachable server and change the plugin configuration accordingly.
45 |
46 | ---
47 |
48 | ### Generating a password hash
49 |
50 | You can create a password hash on the page displayed when opening the URL of the seminar server in the browser.
51 |
52 | ===
53 |
54 | ### Hosting a seminar
55 |
56 | Everyone knowing the password of the seminar can start and host a seminar.
57 |
58 |
59 | ---
60 |
61 | ### Start the demo seminar
62 |
63 | To start this demo seminar, you can enter the password `123456` and an optional (nick)name of your choice in the Broadcast section of the menu that you can reach by clicking the button in the lower left corner. To host a seminar simply click the 'Start' button.
64 |
65 | ---
66 |
67 | #### Multiple hosts
68 |
69 | Multiple users can host a seminar together. When the last host leaves the seminar, the seminar is closed and all remaining attendees are kicked out.
70 |
71 | ---
72 |
73 | Whenever a host advances to a new slide or fragment, the respective instruction is broadcasted to all connected attendees of the seminar and their presentation will automatically follow.
74 |
75 | ===
76 |
77 | ### Chalkboard
78 |
79 | Chalkboard drawings and handwritten slide annotations of a host are broadcasted to all connected attendees of the seminar and their presentation will also display them.
80 |
81 | This requires the `chalkboard` plugin.
82 |
83 | ===
84 |
85 | ### Online polls
86 |
87 | With the `poll` plugin you can add instant polls like the one below to your slides.
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
Responses: 0
98 |
99 | ---
100 |
101 | The results of the poll can be displayed with help of the `chart` plugin.
102 |
103 |
104 |
108 |
109 |
110 |
111 | ===
112 |
113 | ### Questions & Answers
114 |
115 | With the `questions` plugin you can give attendees the possibility ask and upvote questions during the presentation.
116 |
117 | To ask a question or view all questions simply click on the button that is shown when the presentation is being hosted.
118 |
--------------------------------------------------------------------------------