Generating interactive and individualized course content on time using Markdown, Python and JavaScript

Kwang Hyun Kim
kkim@qcc.cuny.edu

Queensborough Community College

12/2/22

Goals

https://kwangkim.github.io/it22/

Quarto

  • Open-source scientific and technical publishing system built on Pandoc
  • Create dynamic content with script
  • (Backend Script) Python, R ,Julia (Choose one of them)
  • (Frontend Script) (Observable) javascript
  • (Extension for Panddoc) lua
  • (Multiple outputs) html, pdf, docx, pptx and more.

Setup

  • We use python as a backend and observable javascript as a frontend
  • We use vscode as an editor with quarto vscode-extension
  • We use xelatex for pdf output
  • We demonstrate how to make an interactiverevealjs slide
  • We demonstrate how to make an individual exam as a pdf

Markdown

Markdown is basically a simple and readerable markup which can be converted into html. Quarto is based on Pandoc markdown.

For example, the output of *italics* and **bold** is italics and bold.

Link: Markdown Basics

YAML

The document yaml contains options and metadata. We can put options of a output format.

For revealjs slide,

---
title: "revealjs demo"
format:
  revealjs: 
    slide-number: true
---

For pdf,

---
title: "pdf demo"
format:
  pdf:
    documentclass: article
---

(REVEALJS) How to make a slide

Each slide is defined with a level 2 heading (##).

---
format: revealjs
---
## Slide 1

Hello

## Slide 2

Bye

Preview

DEMO 1

Make a Trigometry lecture.

Note: We use a custom css for details

Observable Javascript (ojs)

  • Observable is a platform where you can collaboratively explore, analyze, visualize, and communicate with data on the web
  • Observable notebooks are made of cells.
  • Cell is markdown, html or observable javascript.
  • Observable Javascript is almost javascript with a automatic dataflow.

Note: ojs is only working with html type output.

How to use ojs in quarto

To embed a value from ojs, use ${expr} where expr is a variable or expression (inline code). To deliver a data from python to ojs, we use ojs_define function.

# python code
p=1
ojs_define(y=p+1)
// ojs code: ${x+y} ?
x=100

\(x+y\) is .

Interactive code: Reference angle

import {make_ref} from '@kkim/ma121'
ref120=make_ref(120)

Please, move \(\theta\) to see the corresponding reference angle of \(\theta\).

Note: This ojs is made using Geogebra.

Hide ojs on pdf output

To prevent from running ojs for pdf output,

we can hide ojs code using {.content-hidden when-format="pdf"} with a block ::: :::

::: {.content-hidden when-format="pdf"}
```{ojs}
//| echo: true
x=100
```


$x+y$ is ${x+y}. 
:::

Separation of Concerns: include shortcode

Includes are a convenient way to re-use content across documents. To include a file, add the {{< include >}} shortcode at the location in your document where you want it included:

{{< include p1.qmd >}}

Demo1 files

Demo 2: EXAM with pdf output

Use exam class in latex to make a short exam.

  • We use matplotlib to plot a right triangle.
  • We use sympy for symbolic computations

quarto extension: latex-environment

Pandoc ignores other formats within a Latex environment. This extension is useful when you’d like to share content between LaTeX and other formats, but need the content to be placed in an environment when emitting LaTeX.

installation on a terminal

quarto install extension qcckkim/latex-environment

Example

---
format:
   html: default
filters:
   - latex-environment
environments: [center]
---
::: {.center}
The contents of this div will be output in a `center`
LaTeX environment, but will appear in HTML (and any other output 
format as a simple div with the class `center`)
:::

Demo2 files

Current stability issues

  • quarto is still in development.
  • A code which works for html may not work for revealjs
  • A code may not work with a particular setting
  • Proper spaces matters. Please, check whether you put enough spaces among blocks.

Advanced topic: Run observable js on python

Using playwright, we can run ojs or js code on python.

This example shows how to get SVG from a python code with jsxgraph js library.

ojs2py.qmd

QnA

Any question?

https://kwangkim.github.io/it22/