HTML presentation

Framework

Mathematics, Chalkboard & Notes

Built with reveal.js 4.6.0

What is reveal.js?

It is an open source HTML presentation framework created by @hakimel. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Online editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com. It's a fully-featured visual editor and platform for reveal.js, by the same creator.

About this demo

In this demo you will find some basic elements to use reveal.js for text, mathematics and the chalkboard/notes plugin written in HTML.

Let's get started!

😃

Title

This is a normal line of text centered.

But you can also show each line by fragments and type some equations.

HTML code

Basic text

				<section>
	
				<h2>Title</h2>
	
				<p>This is a normal line of text centered.</p>
	
				<p>But you can also show each line by fragments and type some equations.</p>
	
				</section>
			

Left text, Equations & fragments

HTML code

Left text, equations & fragments

				<section>
				<h3>Title</h3>
				<p>Subtitle</p>
				<div class="mylftText"> 
				<p class="fragment" data-fragment-index="0">MathJax is used to render equations. 
				An inline equation looks like this: \(f(x,y) = \cos(x-y)\).</p> 
				<p class="fragment" data-fragment-index="1">Meanwhile the display mode 
				looks like this
				\[
				\prod_{p\text{ prime}}(1-p^{-s})^{-1}.
				\]
				</p>
				<p class="fragment" data-fragment-index="2">Notice also that each line of 
				text is shown by fragments. 👈</p>
				</div>
				</section>
				

Lists with text & equations

• \(e^{i\pi} + 1 = 0\).
• $\displaystyle \int_0^{\infty}\dfrac{\sin x}{x}=\dfrac{\pi}{2}$.
• This is part of a list.
• 🦖

HTML code

Lists

				<section>
	
				<h2>Lists with text & equations</h2>
	
				<ul>
				<li class="fragment" data-fragment-index="0">\(e^{i\pi}\)</li>
				<li class="fragment" data-fragment-index="1">$\displaystyle \int_0^{\infty}\dfrac{\sin x}{x}=\dfrac{\pi}{2}$</li>
				<li class="fragment" data-fragment-index="2">This is part of a list.</li>
				<li class="fragment" data-fragment-index="3">🦖</li>
				</ul>
	
				</section>
			  

Images

You can include images

Image by jcponce

HTML code

Images

				<section>
	
				<h2>Images</h2>
	
				<p><small>You can include images</small></p>
	
				<img style="width: 80%;" data-src="img/airfoil.jpg" />
	
				</section>
			

GIF images

You can include gif images

T-rex by jcponce

HTML code

GIF

				<section>
	
				<h2>GIF images</h2>
	
				<p<small>You can include gif images</small></p>
	
				<img class="r-stretch" data-preload 
			  data-src="https://1.bp.blogspot.com/-IILg9ax11qs/XizKGRwU9xI/AAAAAAAAYZo/Dw5WKy3WmKAjDJ9hOpRY9Vo1V-Y38gPIgCLcBGAsYHQ/s400/lightsaber.gif" />
	
				</section>
			

iFrame

You can embed iFrames (pre-loaded) with online applets or websites

GeoGebra applet by jcponce

HTML code

iFrame

				<section id="riemann-sphere">
	
				<h2>iFrame</h2>
	
				<p><small>You can embed iFrames (pre-loaded) with online applets or websites</small></p>
	
				<iframe width="100%" height="397px" style="border:0px" noscrolling data-preload
				data-src="https://www.geogebra.org/material/iframe/id/qyty8sba/width/827/height/358/border/888888/sfsb/false/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false"></iframe>
	
				</section>
			   

Notice also that you can add an ID to the slide so you can access it with hyperlinks.
For example, click HERE to go back to the Riemann sphere applet.

That's all with the basics

Now let's explore the chalkboard

Chalkboard 2.3.3
& Notes

with reveal.js 4.6.0

Created by Asvin Goel

Access the Chalkboard

Have you ever missed the traditional classroom experience where you can quickly sketch something on a chalkboard?

Just press 'b' or click on the    button to open and close your chalkboard.

After you are done please advance to the next slide.

Easy to use

• Click the left mouse button to write on the chalkboard.
• Click the right mouse button to wipe the chalkboard.
• Click the 'DEL' key to clear the chalkboard.

Touch support

• Touch and drag to write on the chalkboard.
• Touch and hold, then drag to wipe the chalkboard.

Make notes on slides

Did you notice the    button?

By pressing 'c' or clicking the button you can start and stop the notes taking mode allowing you to write comments and notes directly on the slide.

After you are done please advance to the next slide.

Default settings

By default, a drawing cannot be edited after navigating away from the slide.

Please check out Github for a documentation of the settings.

Credits

The chalk effect is based on Chalkboard
by Mohamed Moustafa.

The plugin Menu was created
by Greg Denehy.

The end

Check out other plugins on the GitHub Wiki.

Check out also the source code & documentation for reveal.js on GitHub.