The (unofficial) reveal.js UBD theme

An example presentation using quarto

Haziq Jamil

haziq.jamil@ubd.edu.bn

Universiti Brunei Darussalam

Naqiyyah Afrah

naqiyyah@haziqj.ml

Primary School

September 29, 2023

Table of contents

• Features
• Mathematics
• Code
• reveal.js features
• Summary

Introduction

All about the theme

The UBD reveal.js¹ Theme is a modern and minimal theme designed for getting information across in a clean and uncluttered manner.

This theme is based on the Quarto Clean Theme by Grant McDermott, with its logos and fonts changed, and colour scheme adapted to UBD’s official brand colours.

This document was created using quarto. Check out the source code here

1. reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Colour palette

• Blues: ubdblue a.k.a. Y In Mn Blue (#325494)
• Greens: ubdteal a.k.a. Medium Aquamarine (#58DDB3)
• Yellows: ubdyellow a.k.a. Maize Crayola Red (#F5C946)
• Alerted text: ubdred a.k.a. Upsdell Red (#B10F2E)
• Normal text: ubdblack a.k.a. Dark Sienna (#230C0F)
• Grays: ubdgray a.k.a. Spanish Gray (#999999)

https://coolors.co/palette/325494-58ddb3-f5c946-b10f2e-230c0f

Features

Unordered lists

Universiti Brunei Darussalam (UBD; translation University of Brunei Darussalam; Jawi: يونيبرسيتي بروني دارالسلام) is the first university in Brunei.

• UBD in figures
  • Established: 1985
  • Academic faculties: 9
  • Research Institutes: 7
  • Student enrolment: 3,137 (in 2015, approx.)
• History
  • 1985: UBD established, first campus in Gadong
  • 1995: UBD moved to Tungku Link
  • 2009: Introduction of GenNEXT Programme
  • 2011: Commencement of the first Discovery Year programme
• Credits: https://ubd.edu.bn/ and Wikipedia

Ordered lists

Universiti Brunei Darussalam (UBD; translation University of Brunei Darussalam; Jawi: يونيبرسيتي بروني دارالسلام) is the first university in Brunei.

1. UBD in figures
   1. Established: 1985
   2. Academic faculties: 9
   3. Research Institutes: 7
   4. Student enrolment: 3,137 (in 2015, approx.)
2. History
   1. 1985: UBD established, first campus in Gadong
   2. 1995: UBD moved to Tungku Link
   3. 2009: Introduction of GenNEXT Programme
   4. 2011: Commencement of the first Discovery Year programme
3. Credits: https://ubd.edu.bn/ and Wikipedia

Callout blocks

Quarto provides a built-in way to create blocks.

Note

Note that there are five types of callouts, including: note, tip, warning, caution, and important.

Warning

Callouts provide a simple way to attract attention, for example, to this warning.

This is Important

Danger, callouts will really improve your writing.

Callout blocks (cont.)

Tip With Title

This is an example of a callout with a title.

Expand To Learn About Collapse

This is an example of a ‘collapsed’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

There are several options that you can customise (set at the project yaml):

• callout-appearance: either default, simple, or minimal.
• callout-icon: either true or false.

Quotation (via blockquote)

Archimedes will be remembered when Aeschylus is forgotten, because languages die and mathematical ideas do not. “Immortality” may be a silly word, but probably a mathematician has the best chance of whatever it may mean.

— G. H. Hardy in A Mathematician’s Apology, 1941

Multiple columns

Column 1

Here is a long sentence that will wrap onto the next line as it hits the column width, and continue this way until it stops.

A second paragraph. And here’s some code:

my_fn <- function(x) {
  print("Hello, World!")
}

Column 2

Some other text in another column.

A nice photo¹:

1. Credit: @domlafou

Alerts & cross-refs

To emphasize specific words or text, you can:

• Use the default .alert class, e.g. important note.
• Use the .fg class for custom colour, e.g. important note.
• Use the .bg class for custom background, e.g. important note.
• I’ve also added some convenient CSS classes, e.g. .ubdblue, .ubdteal, .ubdyellow, .ubdred.

To cross-reference, you have several options, for example:

• Beamer-like .button class provided by this theme, e.g. Appendix
• Quarto’s native cross-ref syntax, e.g., “See Section 5.3.”

Citations

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

• Topic 1: Spatial Frictions (Fajgelbaum et al. 2018; Hsieh and Moretti 2019; Moretti 2011)

• Topic 2: Blah (Suárez Serrato and Zidar 2016)

Hover over the citations to get the full reference.

Mathematics

Using maths

Let \(X\) be a simple random variable defined on \((\Omega,\mathcal F,\mathbb P)\) that takes on finitely many values \(\{x_1,\dots,x_n\}\). The expectation of \(X\), \(\operatorname{E}(X)\), is the Lebesgue integral of \(X\) with respect to \(\mathbb P\), \[ \operatorname{E}(X) := \int X(\omega) \operatorname{d \mathbb P} = \sum_{i=1}^n x_i \operatorname{\mathbb P}(\omega \in A_i), \] where \(A_i=\{\omega\in\Omega \mid X(\omega)=x_i \}\).

Using maths (cont.)

This is what the font looks like for all the letters and numbers.

\[ \begin{gather*} AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVv\\WwXxYyZz \\[0.5em] 1234567890 \\[0.5em] \alpha \beta \Gamma \gamma \Delta \delta \epsilon \varepsilon \zeta \eta \Theta \theta \vartheta \iota \kappa \varkappa \Lambda \lambda \mu \nu \Xi \xi \Pi \pi \varpi \rho \Sigma \sigma \tau \Upsilon \upsilon \Phi \phi \varphi \chi \Psi \psi \Omega \omega \\[0.5em] \prod \oint \bigoplus \bigotimes \bigcup \bigcap \end{gather*} \]

Theorems et al.

Definition 1 (Prime numbers) A prime number is a natural number greater than 1 that is not a product of two smaller natural numbers.

Theorem 1 (Infinitude of primes) There are infinite prime numbers.

Proof. To prove Theorem 1, we need to use Definition 1. Suppose that there exist only a finite number of primes, \(p_1,\dots,p_n\), say. The number \[ N = 1+p_1\cdots p_n \] is divisible by some prime \(p\). But \(p\) cannot be any of \(p_1,\dots,p_n\), since the latter all leave remainder 1 on dividing \(N\). This contradicts our assumption that \(p_1,\dots,p_n\) is the complete list of primes.

See also https://quarto.org/docs/authoring/cross-references.html#theorems-and-proofs

Theorems via callout blocks?

In presentation format, it’s arguably more effective just to use a Callout Block Block.

Regression Specification

The main specification is as follows:

\[ y_{it} = X_{it} \beta + \mu_i + \varepsilon_{it} \]

But it isn’t able to be cross-referenced, and if a different qmd document is rendered (e.g. to \(\LaTeX\)), the theorem block functionality is lost.

Code

Pretty code

• Over 20 syntax highlighting themes available
• Default theme optimized for accessibility

# Define a server for the Shiny app
function(input, output) {

  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
  })
}

Code animations

• Over 20 syntax highlighting themes available
• Default theme optimized for accessibility

# Define a server for the Shiny app
function(input, output) {

  # Fill in the spot we created for a plot
  output$phonePlot <- renderPlot({
    # Render a barplot
    barplot(WorldPhones[,input$region]*1000,
            main=input$region,
            ylab="Number of Telephones",
            xlab="Year")
  })
}

Line highlighting

• Highlight specific lines for emphasis
• Incrementally highlight additional lines

import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()

Executable code

library(ggplot2)
ggplot(mtcars, aes(hp, mpg, color = am)) +
  geom_point() +
  geom_smooth(formula = y ~ x, method = "loess")

Automatic multicolumn code and output

library(GGally)
library(palmerpenguins)

ggpairs(
  penguins,
  columns = 3:5,
  aes(col = species),
  progress = FALSE
) +
  theme_bw()

Figure 1: Pairwise scatterplot

reveal.js features

Incremental lists

Lists can optionally be displayed incrementally:

• First item
• Second item
• Third item

Insert pauses to make other types of content display incrementally.

Fragments

Incremental text display and animation with fragments:

Fade in

Slide up while fading in

Slide left while fading in

Fade in then semi out

Strike

Highlight red

Slide vackgrounds

Set the background attribute on a slide to change the background color (all CSS color formats are supported).

Different background transitions are available via the background-transition option.

Media Backgrounds

You can also use the following as a slide background:

• An image: background-image

• A video: background-video

• An iframe: background-iframe

Credit: @usgs

Absolute position

Position images or other elements at precise locations

Auto animate

Automatically animate matching elements across slides with Auto-Animate.

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate.

Slide transitions

The next few slides will transition using the slide transition

Transition	Description
none	No transition (default, switch instantly)
fade	Cross fade
slide	Slide horizontally
convex	Slide at a convex angle
concave	Slide at a concave angle
zoom	Scale the incoming slide so it grows in from the center of the screen.

Tabsets

• Plot
• Data

	mpg	cyl	disp	hp	drat	wt	qsec	vs	am	gear	carb
Mazda RX4	21.0	6	160.0	110	3.90	2.620	16.46	0	1	4	4
Mazda RX4 Wag	21.0	6	160.0	110	3.90	2.875	17.02	0	1	4	4
Datsun 710	22.8	4	108.0	93	3.85	2.320	18.61	1	1	4	1
Hornet 4 Drive	21.4	6	258.0	110	3.08	3.215	19.44	1	0	3	1
Hornet Sportabout	18.7	8	360.0	175	3.15	3.440	17.02	0	0	3	2
Valiant	18.1	6	225.0	105	2.76	3.460	20.22	1	0	3	1
Duster 360	14.3	8	360.0	245	3.21	3.570	15.84	0	0	3	4
Merc 240D	24.4	4	146.7	62	3.69	3.190	20.00	1	0	4	2
Merc 230	22.8	4	140.8	95	3.92	3.150	22.90	1	0	4	2
Merc 280	19.2	6	167.6	123	3.92	3.440	18.30	1	0	4	4
Merc 280C	17.8	6	167.6	123	3.92	3.440	18.90	1	0	4	4
Merc 450SE	16.4	8	275.8	180	3.07	4.070	17.40	0	0	3	3
Merc 450SL	17.3	8	275.8	180	3.07	3.730	17.60	0	0	3	3
Merc 450SLC	15.2	8	275.8	180	3.07	3.780	18.00	0	0	3	3
Cadillac Fleetwood	10.4	8	472.0	205	2.93	5.250	17.98	0	0	3	4
Lincoln Continental	10.4	8	460.0	215	3.00	5.424	17.82	0	0	3	4
Chrysler Imperial	14.7	8	440.0	230	3.23	5.345	17.42	0	0	3	4
Fiat 128	32.4	4	78.7	66	4.08	2.200	19.47	1	1	4	1
Honda Civic	30.4	4	75.7	52	4.93	1.615	18.52	1	1	4	2
Toyota Corolla	33.9	4	71.1	65	4.22	1.835	19.90	1	1	4	1
Toyota Corona	21.5	4	120.1	97	3.70	2.465	20.01	1	0	3	1
Dodge Challenger	15.5	8	318.0	150	2.76	3.520	16.87	0	0	3	2
AMC Javelin	15.2	8	304.0	150	3.15	3.435	17.30	0	0	3	2
Camaro Z28	13.3	8	350.0	245	3.73	3.840	15.41	0	0	3	4
Pontiac Firebird	19.2	8	400.0	175	3.08	3.845	17.05	0	0	3	2
Fiat X1-9	27.3	4	79.0	66	4.08	1.935	18.90	1	1	4	1
Porsche 914-2	26.0	4	120.3	91	4.43	2.140	16.70	0	1	5	2
Lotus Europa	30.4	4	95.1	113	3.77	1.513	16.90	1	1	5	2
Ford Pantera L	15.8	8	351.0	264	4.22	3.170	14.50	0	1	5	4
Ferrari Dino	19.7	6	145.0	175	3.62	2.770	15.50	0	1	5	6
Maserati Bora	15.0	8	301.0	335	3.54	3.570	14.60	0	1	5	8
Volvo 142E	21.4	4	121.0	109	4.11	2.780	18.60	1	1	4	2

Interactive slides

An interactive map using the {mapview} package. GIS data provided by the {bruneimap} package.

Preview links

Navigate to hyperlinks without disrupting the flow of your presentation.

Use the preview-links option to open links in an iframe on top of your slides. Try clicking the link below for a demonstration:

Matplotlib: Visualization with Python

Easy navigation

Quickly jump to other parts of your presentation

Toggle the slide menu with the menu button (bottom left of slide) to go to other slides and access presentation tools.

You can also press m to toggle the menu open and closed.

Chalkboard

Free form drawing and slide annotations

Use the chalkboard button at the bottom left of the slide to toggle the chalkboard.

Use the notes canvas button at the bottom left of the slide to toggle drawing on top of the current slide.

You can also press b to toggle the chalkboard or c to toggle the notes canvas.

Point of view

Press o to toggle overview mode:

Hold down the Alt key (or Ctrl in Linux) and click on any element to zoom towards it—try it now on this slide.

Speaker view

Press s (or use the presentation menu) to open speaker view

And more…

• Touch optimized (presentations look great on mobile, swipe to navigate slides)
• Footer & Logo (optionally specify custom footer per-slide)
• Auto-Slide (step through slides automatically, without any user input)
• Multiplex (allows your audience to follow the slides of the presentation you are controlling on their own phone, tablet or laptop).

Summary

Summary

The Quarto reveal.js UBD theme aims to be a minimal and elegant presention theme.

Install the theme:

quarto install extension haziqj/quarto-revealjs-ubd

Use these demo slides as a template:

quarto use template haziqj/quarto-revealjs-ubd

References

Fajgelbaum, Pablo D, Eduardo Morales, Juan Carlos Suarez Serrato, and Owen Zidar. 2018. “State Taxes and Spatial Misallocation,” 90.

Hsieh, Chang-Tai, and Enrico Moretti. 2019. “Housing Constraints and Spatial Misallocation.” American Economic Journal: Macroeconomics 11 (2): 39.

Moretti, Enrico. 2011. “Local Labor Markets.” In Handbook of Labor Economics. Vol. 4. Elsevier.

Suárez Serrato, Juan Carlos, and Owen Zidar. 2016. “Who Benefits from State Corporate Tax Cuts? A Local Labor Markets Approach with Heterogeneous Firms.” American Economic Review 106 (9).

Appendix

	mpg	cyl	disp	hp	wt
Mazda RX4	21.0	6	160	110	2.620
Mazda RX4 Wag	21.0	6	160	110	2.875
Datsun 710	22.8	4	108	93	2.320
Hornet 4 Drive	21.4	6	258	110	3.215
Hornet Sportabout	18.7	8	360	175	3.440
Valiant	18.1	6	225	105	3.460

Back to main