How to teach using org-mode for fun and profit
Table of Contents
- 1. Introduction
- 2. About this slides deck
- 3. About this handbook
- 4. Features
- 4.1. Writing teaching material in org-mode
- 4.2. org-reveal slides
- 4.3. Structure of the sections / slides
- 4.4. Presenter notes / content for the handbook
- 4.5. Masking content for some audiences
- 4.6. Stuff only meant for presentation
- 4.7. Stuff only meant for teachers
- 4.8. Notes only for the teachers
- 4.9. Stuff only in the handbooks
- 4.10. Code colorization
- 4.11. Misc org-mode
- 4.12. Missing features ?
- 5. HowTo
- 6. How it works / Installation
- 7. Annex
1 Introduction
This is a demo document about the
codename org-teaching
framework.
- You're viewing a reveal.js Web slides deck. You may press 's' to view presenter notes.
You'll find the source code at Gitlab : https://gitlab.com/olberger/org-teaching
I mention codename org-teaching
because it really hasn't yet a proper name, and may never have. This is far from a full fledged product.
1.1 Org-mode powa
This framework heavily relies on org-mode (version 9 at the time of writing) and the org-reveal exporter for reveal.js
.
2 About this slides deck
These slides are one variant of the same teaching material, also available as a handbook.
You may prefer to view them in your Web browser in full-screen (F11
for instance). Should Reveal-JS
fail on displaying slides, an
alternate format would be the printed PDF (but
you're gonna lose the ability to display speaker notes).
This section is displayed only in the slides variant, but not in the handbook variant, which contains, in turn, a section that is different.
3 About this handbook
This PDF handbook is one variant of the same teaching material, also available as a slides deck. Note that the layout is formatted as a portrait handbook, including speaker notes.
This section may contain content that is best viewed in (LaTeX) PDF export of org-mode.
4 Features
4.1 Writing teaching material in org-mode
The goal is to be able to edit a single file (namely lesson.org
) which will contain, in a single source, all the content of a lesson, written with org-mode syntax.
From this single source, several documents are generated :
- slides (as a dynamic Web document) for overhead presentation
- a handbook that contains the same information (or more) and can be handed to the students for work outside the classroom (a PDF file)
- another handbook for the teaching team, to provide additional instructions (also a PDF file)
The handbook LaTeX formatting has a summarized content table and nice looking (in principle) title page. Customize at will
The teachers handbook contains a less nice-looking format, includes a detailed table of contents, and has a watermark. Again, customize at will and submit improvements.
4.2 org-reveal slides
Pretty much all features of reveal.js
supported by the org-mode reveal.js exporter org-reveal, should be supported too.
An example org-reveal
document is available here for inspiration (it's the export of org-reveal's README.org
, actually).
If you're already familiar with reveal.js, you may have noticed that the current settings adopted for our slides generation are quite frugal: no fancy 3D effects and likes.
It's a matter of taste : I didn't want to show off, and prefer to give students a clear content on the projector behind me.
4.3 Structure of the sections / slides
I'm using the 3 levels of outlining / sectioning so that the content can be sectioned in the same way in lesson.org
and appear appropriately in the slides and handbook, with these principles:
- First level outlines define main sections of the document.
- Second level outlines are the main "horizontal" slides that will be played with page up/down
- Third level outlines may be used for additional content ("vertical" slides) that may be skipped for the presentation, but is still accessible with cursor keys.
The first level outlines can be rendered as a "separating" slides which may get a different reveal_background
and class="center"
slide layout, but that isn't automatic. See Section separators.
4.4 Presenter notes / content for the handbook
org-reveal's Speaker notes may be added to the slides (and will only appear on dual-screen presentation after having pressed 's': standard reveal.js feature).
They will be masked for the audience, but will, by default appear in the handbook given to the students.
#+BEGIN_NOTES This is a note #+END_NOTES
4.5 Masking content for some audiences
I've implemented some easy ways to preserve some of the content of the same lesson.org
source for certain outputs (using org exporter's standard EXCLUDE_TAGS
):
- Slides only material
- that won't be embedded in the handbook : surprise stuff for live audience, or HTML-only hacks;
- Teachers only material
- secret knowledge that only adults need to know (for instance), which won't be exported;
- Handbook only material
- stuff that only fits in the handbook, and/or only exports as LaTeX and not HTML.
The choice to reveal or not some details to the students is quite arbitrary and depends on your pedagogical approach. I'm not advisable in this matter. YMMV.
4.6 Stuff only meant for presentation
Tagging a section/slide with :slidesonly:
means it isn't exported in the handbooks.
Below is an example (or not)…
4.6.1 Regular slide (no tag on heading line)
There should be no "Only in the slides" after this section, in the
handbooks, as it has been tagged with slidesonly
.
4.6.2 Only in the slides
On the contrary, in the slides view, this appears, as there's a :slidesonly:
tag on the current head line.
4.7 Stuff only meant for teachers
Tagging a section/slide with :teachersonly:
means it isn't exported in the students handbook (nor in the slides).
Below is an example…
4.7.1 Regular slide (no tag on heading line)
There should be no "Only for teachers" after this section, in the slides or in the
students handbook, as it has been tagged with teachersonly
.
4.7.2 Only for teachers
On the contrary this appears in the teachers handbook, as there's a :teachersonly:
tag on the current head line.
4.8 Notes only for the teachers
This slide/section contains notes, but only part of it is displayed in the presentation notes included in the handbook. Special notes and are kept only for the teachers handbook.
We use an org-mode drawer for that (additional benefit is that the content is folded by default in emacs, as it may be verbose and/or "sensitive") :
#+BEGIN_NOTES This part of the note can be viewed by the students in the handbook. :TEACHERSONLY: Not this one :END: #+END_NOTES
This part of the note can be viewed by the students in the handbook, but not the rest.
- TEACHERSONLY
- but this part is only for the teachers.
You naughty ;-)
4.9 Stuff only in the handbooks
Just like sections are for slides only, others can be for the handbook
only, using the handbookonly
tag. This may be useful for Annex
sections for instance, or for stuff that the HTML exporter won't like, with inline LaTeX.
4.10 Code colorization
Code is colorized / highlighted in the slides :-)
Nice when like me, you're teaching Computer Science stuff
4.11 Misc org-mode
4.11.1 Babel powa
As you're using org-mode, its babel
components are available, to embed source code in the same lesson.org
source, and manage executable code and teaching material at once.
Look for literate programing instructions in the org-mode docs to know more.
4.12 Missing features ?
Please try and talk to me to suggest new stuff and/or provide patches ;)
See the teacher's handbook for some ideas
- a way to manage graphics alongside the slides/handbook source… not yet found a perfect solution, unless for plantuml with babel or likes (tikz…).
- some breadcrumb or recap feature / template to help give a sense of the progression in the slides : only the progress bar isn't enough and doesn't help giving the audience some kind of scaffolding to hang on, for long presentations.
5 HowTo
5.1 Use Emacs
There's no production chain, makefiles or other authoring tools.
No new Elisp either.
You're welcome to suggest improvements. But I'm not an Elisp hacker, so I may not be able to maintain them. At the moment, the intent is to rely on the original org-reveal only, as much as possible.
5.2 Modify only the lesson.org
Only one file should be edited for writing the lesson's material : lesson.org
Only exception is modification of some configurations for title pages and other bits that shouldn't change much in time (see next section).
5.3 Configuration
Each lesson.org needs some configuration :
- Configure
org-reveal-title-slide
inslides.org
. - Configure header (
\lhead{...}
and\rhead{...}
) and footer (\lfoot{...}
and\rfoot{...}
) elements in the headers like#+LaTeX_HEADER: \rhead{...}
inhandbook.org
andteacher-handbook.org
.
These may be better handled, but some limitations of the exporters or my lack of knowledge/time have prevented a better result so far. Improvements much welcome.
5.4 Generating final documents
We're using the standard exporters so each output format will be exported from its corresponding umbrella .org
source :
- slides
- open
slides.org
, thenC-c C-e R ...
fororg-reveal
export (toslides.html
), provided that you have loaded org-reveal in Emacs - handbook
- open
handbook.org
, thenC-c C-e l ...
for LaTeX export (tohandbook.pdf
) - teacher handbook
- open
teacher-handbook.org
, thenC-c C-e l ...
for LaTeX export (toteacher-handbook.pdf
)
5.4.1 Exporting slides to HTML with org-reveal
Depending on how you installed org-reveal (Git submodules or otherwise), org-reveal
may already be available.
If not yet, load it with M-x load-file
from the location of its Git submodule (elisp/org-reveal/ox-reveal.el
by default).
I'm not sure which solution is better : org-reveal from Git (hence the Git submodule) or from an Emacs package. Please report.
5.4.2 Printing slides
I've tested DeckTape using a Docker container containing PhantomJS
and
decktape
to convert the slides to a single PDF document.
See the provided decktape.sh script that runs the container, bind-mounting the working dir into the container, so that input and output files can be found.
Note that I used a rebuilt Docker image, reusing the DeckTape Dockerfile, rebuilding with something alongside:
docker build -t obergixlocal/decktape .
5.5 Known Issues
5.5.1 Firefox issues ?
We have experienced issues with presentations made on some versions of Firefox, which are known by reveal.js maintainer… maybe best viewed in chrome.
You may prefer to have a PDF variant of the slides (see Printing slides) in case.
6 How it works / Installation
6.1 Use the source Luke
See the contents of the files… but be wary that it's sometimes messy and incrementally obtained.
Emacs is your buddy.
Git clone from https://gitlab.com/olberger/org-teaching.git
(see the Gitlab project)
6.2 Git submodules
The repository contains Git submodules for :
- reveal.js
- org-reveal
So :
git submodule init git submodule update
You may prefer to install them another way (ELPA repo, CDN, etc.)
Refer to org-reveal's documentation for more details.
6.3 Slides appearance
6.3.1 Reveal.js settings
See the org-reveal settings set in the sources and the docs for a detailed explanation.
I'm using the following for a "frugal" look close to what powerpoint or beamer (?) could look like :
#+REVEAL_HLEVEL: 2 #+REVEAL_THEME: simple #+REVEAL_TRANS: fade #+REVEAL_SPEED: fast #+REVEAL_MARGIN: 0.0 #+REVEAL_EXTRA_CSS: ./presentation.css #+REVEAL_ROOT: ./reveal.js #+OPTIONS: reveal_center:nil
6.3.2 Section separators
The highest level sections include the following properties below the heading line, to customize the look of the slide.
:PROPERTIES: :REVEAL_EXTRA_ATTR: class="center" :reveal_background: #dbdbed :END:
This is intended to provide some visual sense of the transitions between sections. Please adapt and report.
6.3.3 Title screen picture (logos, etc.)
I'm not yet sure how much may be achieved with HTML and CSS for the title page of the slides deck, so I've relied on the embedding of a background image that will contain the logos and additional graphics.
#+REVEAL_TITLE_SLIDE_BACKGROUND: ./media/title-slide-background.png
I'm quite sure this could be improved.
7 Annex
7.1 Thanks
- All contributors to org-mode (special kudos to Carsten Dominik and Bastien Guerry)
- Yujie Wen for
org-reveal
- Hakim El Hattab for
reveal.js
- My colleagues at Telecom SudParis who had to teach with this tool without much rehersal
- Our students who endured it for a brand new course (and included bugs)
7.2 Feedback
I may be contacted from my Web page or via the Gitlab project.
7.3 Usage reports
7.3.1 2016 at Telecom SudParis
Created and used for the first time for teaching "Web Architecture and Applications" in the CSC4101 module at Telecom SudParis (Olivier Berger and colleagues)