Choosing a presentation framework

ASQ currently supports two frameworks: impress.js (we use our own forked version which can be found here) and reveal.js. In general, impress.js offers a lot of control in the positioning of the slides in the expense of ease of use and performance in mobile (it uses a lot of 3D transformations). reveal.js does more out of the box, is easier to use and has a nice plugin architecture.

impress.js

The full documentation of impress.js can be found here. The following guide covers just the basics to get you started.

Setup

You need to include the impress.js script for testing locally. When you upload the presentation it will be replaced by ASQ.

Important: Use the ASQ fork of impress which adds some extra functionality like substeps and better event handling.

1

$ bower install --save ASQ-USI/impress.js

Let’s include it in the presentation

1
2

<!-- in index.html -->
<script src="impress.js"></script>

Include your CSS styles

1
2

<!-- in index.html -->
<link href="slide-styles.css" rel="stylesheet">

Starting impress

When you upload the presentation to ASQ, impress will be automatically initialized for you. However when you test locally you need to initialize it yourself. To avoid initializing twice, add the following code for initialization

1
2
3

if (! document.body.classList.contains('asq')){
  impress().init()
}

Container

All slides go inside a div with id="impress"

1
2
3
4

<!-- in index.html -->
<div id="impress">
  <!-- slides go here-->
</div>

Slides

Basic

Each slide, minimally, needs id (must be unique) and a class="step" attributes.

1
2
3
4

<!-- in index.html -->
<div id="intro" class="step">
  <h1> My first ASQ talk!</h1>
</div>

Positioning

To position slides use data-* attributes. If you omit them, the default values are 0 except from data-scale which is 1. The available attributes are

1. Translation: data-x, data-y and data-z.
2. Rotation: data-rotate, data-rotate-x, data-rotate-y and data-rotate-z.
3. Scale: data-scale, data-scale-x and data-scale-y.

1
2
3
4
5
6
7

<!-- in index.html -->
<!-- This slide is 1000 on the x-axis, 0 on the y-axis(default,) 2000 on the z-axis
scaled 0.4 times and rotated 90 degrees on the z-axis-->
<div id="positioned-slide" class="step"
  data-x="1000" data-y="2000" data-scale="0.4" data-rotate-z="90">
  <h1> This slide is transformed!</h1>
</div>

Substeps

The ASQ fork of impress.js has support for substeps (or fragments in reveal.js lingo). This allows you to gradually step into sections inslide a slide (for example to reveal bullets one after another). To use them simply add the class .substep.

1
2
3
4
5
6
7
8
9
10

<!-- in index.html -->
<div id="slide-with-substeps" class="step"
  data-x="1000" data-y="2000" data-scale="0.4" data-rotate-z="90">
  <h1 class="substep"> This will show up first </h1>
  <ul>
    <li class="substep">Thiw will show up second</li>
    <li class="substep">Thiw will show up third</li>
    <li class="substep">Thiw will show up last</li>
  </ul>
</div>

reveal.js

TBD