Handout Test
Generate handouts from slide source
2019-10-19
Henrik Tramberend
Chair for Human-Computer Interaction, University of Würzburg

Notes

Currently

  • Content marked .notes serves two purposes
  • Reveal.js uses it as speaker notes
  • It augments slide content in handouts

In the future

  • Content marked .notes is used only as speaker notes
  • Content marked .handout is only shown in handout documents
  • Content marked .deck is only shown in slide decks
  • Untagged content is shown in decks and handouts

Untagged content

This is untagged content

  • The entire content shows up in slide decks and in handouts

include/06-metal.png

Source code

# Untagged content {layout="columns"}

## This is untagged content {.left}

- The entire content shows up in *slide decks* and in *handouts*

##  {.right}

![](include/06-metal.png)

Source code

This slide is tagged handout

  • The entire slide only shows up in handouts
# Content tagged `handout` {.handout layout="columns"}

## This slide is tagged `handout` {.left}

- The entire slide only shows up in *handouts*

##  {.right}

![](include/06-metal.png)

Content tagged deck

This slide is tagged deck

  • The entire slide only shows up in slide decks

include/06-metal.png

Source code

# Content tagged `deck` {.deck layout="columns"}

## This slide is tagged `deck` {.left}

- The entire slide only shows up in *slide decks*

##  {.right}

![](include/06-metal.png)

Content tagged deck and handout

This column is tagged deck

  • This column only shows up in slide decks
include/06-metal.png

Source code

# Content tagged `deck` and `handout` {layout="columns"}

## This column is tagged `deck` {.deck .left}

- This column only shows up in *slide decks*

![](include/06-metal.png)

## This column is tagged `handout` {.handout .right}

- This column only shows up in *handouts*

![](include/06-metal.png)

Content tagged notes

This slide contains speaker notes

  • The second paragraph contains speaker notes
  • Speaker Notes are not visible in decks and handouts

Source code

# Content tagged `notes`

## This slide contains speaker notes

- The second paragraph contains speaker notes
- Speaker Notes are not visible in decks and handouts

## Speaker Notes from a block {.notes}

- This content is included as speaker notes
- It is not included in handouts

![](include/06-metal.png)

Slide tagged notes

This slide has some speaker notes

  • The following slide contains the speaker notes
  • Slides with speaker Notes are not visible in decks and handouts

Source code

# Slide tagged `notes`

## This slide has some speaker notes

- The following slide contains the speaker notes
- Slides with speaker Notes are not visible in decks and handouts

# Speaker notes from an entire slide {.notes}

## This slide is not shown anywhere

- It shows up as speaker notes to the slide before it

Div and Span tagged notes

Div

The follwing Div is not visible here

Span

The follwing Span is not visible here: This is a speaker note from a Span

Source code

# Div and Span tagged `notes`

## Div

The follwing Div is not visible here

::: notes
This is a speaker note from a Div
:::

## Span

The follwing Span is not visible here: [This is a speaker note from a Span]{.notes}

Backgrounds 1

Background Images in Handouts

  • Converted to inline images
  • Just after the header

Source code

# Backgrounds 1 ![In a slide, this is a background image.](include/06-metal.png)

## Background Images in Handouts

- Converted to inline images
- Just after the header

Backgrounds 2

Background Videos in Handouts

  • Converted to inline videos
  • Just after the header

Source code

# Backgrounds 2 ![In a slide, this is a background video.](pacman-perfect-game.mp4){.inverse controls="1"}

## Background Videos in Handouts

- Converted to inline videos
- Just after the header

Two columns with figures

Left

include/06-metal.png
Caption text is here.

Source code

# Two columns with figures {.columns}

## Left {.left}

![Caption text is here.](include/06-metal.png)

## Right {.right}

![Caption text is here.](include/06-metal.png)

Source code

# Links

## Do we really need them readable

- This can get [ugly](https://en.wikipedia.org/wiki/Unattractiveness) fast

Just a table

Once

This is just a table
This is just a table
This is just a table
This is just a table
This is just a table

Twice

This is just a table
This is just a table
This is just a table
This is just a table
This is just a table

Source code

``` {.markdown} # Just a table {.columns}

Once

This is just a table
This is just a table
This is just a table
This is just a table
This is just a table

Twice

This is just a table
This is just a table
This is just a table
This is just a table
This is just a table