Download

File	Version	Description
notebook	1.3.7	Notebook Compiler (requires node.js, save as notebook)
tutorial1.html	3.12.19	Tutorial 1
tutorial1.md	3.12.19	Tutorial 1 (Source)
tutorial2.html	2.12.19	Tutorial 2
tutorial2.md	2.12.19	Tutorial 2 (Source)
tutorial3.html	19.12.19	Tutorial 3
tutorial3.md	19.12.19	Tutorial 3 (Source)

Introduction

The notebook compiler (a complete JavaScript program for node.js) creates interactive and multimedia WEB tutorials from simple MarkDown text.

Among the common MarkDown text blocks like headers, lists, images, tables, and code there is a set of special block environments providing interactive and multimedia content.

A notebook can provide different input fields like code editors, editable tables, or generic text input fields.

Input blocks can be combined with output blocks like message consoles, graphic windows, plots, or tables. An output block commonly adds control buttons that control code execution from input fields.

The notebook compiler adds different interpreter and media libraries automatically to a notebook. The output is a self-contained HTML file that can be processed by any modern WEB browser (off- and online). There are no side dependencies. All necessary resources are embedded in the HTML file.

Different programming environments (embedded compiler/interpreters and virtual machines) are supported:

• JavaScript (activated by the [JS] tag)
• Lua (activated by the [LUA] tag)
• Python
• Haskel
• OCaML
• and many more.

The basic concept of a notebook is the partition of a complex and long task (or program) in multiple cascaded simple tasks (snippets).

Actually, there is german (selected by the [DE] tag) and english (selected by the [EN] tag) language support.

MarkDown Extension

Notebook Blocks

A notebook block environment statement is defined by block tag [TAG], followed by optional caption text and option parameters. A block statement can be followed by another block like fenced code, table, list, or a text paragraph. Options are enclosed in curled parenthesis { a:v; } pairs.

[TAG] text { a:v; .. }
<block>

The following notebook block environments are actually supported:

• [ANSWER]
• [CODE]
• [EXERCISE]
• [GRAPH]
• [INFO]
• [INPUT]
• [QUESTION]
• [SOLUTION]
• [TABLE]
• [TURTLE]

Auxiliary blocks:

• [FUN]
• [SCRIPT]
• [USE]
• [LUA]
• [JS]
• ..

To be added:

• [PLOT]

[ALGORITHM]

This block creates a numbered algorithm.

Template

[ALGORITHM] <captiontext> { <options> }
<block>

Options

• label:string
• number:boolean|number|string

Example

[ALGORITHM] BDD Reduktion
1. Isomorphe Teilbäume dürfen nicht mehrfach vorkommen, mehrere Vorkommen werden auf einen Teilbaum reduziert.
2. Gleiche Nachfolger: Knoten *f* mit *f*~0~=*f*~1~ werden gelöscht und Kanten, die auf *f* zeigen auf *f*~0~ (bzw. *f*~1~) umgebogen.

[ANSWER]

This block creates an answer block (output) with a spoiler. The opening of the spoiler can be delayed (either by a timeout relative to the starting time of the notebook or by a conditional function),

Template

[ANSWER] <captiontext> { <options> }
<block>

Options

• label:string
• delay:number|function
• number:boolean|number|string

[CODE]

The code block bundles a code editor with a text output console. The text output console provides buttons to execute (run) the code and to erase the text window. The code execution (evaluation) is either performed by the main interpreter defined by the language setting or by a custom evaluator provide by the eval:func option.

Template

[CODE] <captiontext> { options }
'''<langmode>
<code>
'''

Options

• eval:function
• open:boolean
• label:string

[DEFINITION]

This block creates a numbered definition.

Template

[DEFINITION] <captiontext> { <options> }
<block>

Options

• label:string
• number:boolean|number|string

Example

[DEFINITION] Shanon Zerlegung
$$
\begin{gathered}
  f(a,b,c,..):(a,b,c,..) \to y \hfill \\
  \operatorname{var} (f) = \{ a,b,c,..\}  \hfill \\
  f{|_{x \in \operatorname{var} (f)}} = {f_0}{|_{x = 0}} \vee {f_1}{|_{x = 1}} \hfill \\
\end{gathered}
$$

[EXAMPLE]

This block creates a numbered example.

Template

[EXAMPLE] <captiontext> { <options> }
<block>

Options

• label:string
• number:boolean|number|string

Example

[EXAMPLE] Recursion
'''lua
function fac(n)
  if n > 1 then return n*fac(n)
  else return 1 end
end
'''

[EXERCISE]

In contrast to other blocks, the exercise block requires a start and end block tag enclosing arbitrary MarkDown content (lists, paragraphs, ..). The exercise creates an highlighted (and numbered) display block.

Template

[EXERCISE] <captiontext> { <options> }
...
[EXERCISE]

Options

• label:string
• number:boolean|number|string

[FUN]

This block adds a user defined function or code block (JavaScript). It can be used in conjunction with another notebook block (e.g., table or graph), or as a single statement adding global functions.

Template

[FUN]
***
<code>
'''

Example

The first example adds a user function to the notebook used by other notebook blocks (evaluation function to update App user setting, e.g., used by the WEB clipboard).

[FUN]
'''
function updateConfig(id) {
  console.log(id,Inputs[id])
  switch (id) {
    case 'input1': appConfig.user=Inputs[id]; break;
  }
}
'''

The next example adds a code that is executed by a dynamic table block (embedded evaluation function).

[TABLE] Test 1 { label:"table1-test" }
[FUN]
'''
var rows =Tables["table1"].getRows();
var dnf = '', knf = '', sep1='', sep2='';
rows.forEach(function (row) {
  if (row.y=="1" && row.Term!="") { dnf = dnf + sep1 + row.Term; sep1 = '+'; }
  if (row.y=="0" && row.Term!="") { knf = knf + sep2 + row.Term; sep2 = '*'; }
})
Print('DNF (y1): '+dnf)
Print('KNF (y2): '+knf)
var t1 = boolEvalTable(dnf||'0',Print,PrintError,{silent:true})
var t2 = boolEvalTable(knf||'0',Print,PrintError,{silent:true})
t1.columns.push({name:'y1',type:'string'});
t1.columns.push({name:'y2',type:'string'});
t1.data.forEach (function (row, index) { row.y1=row.y; row.y2=t2.data[index]?t2.data[index].y:"0"; row.y=rows[index].y; });
Codes['bool1'].setText(dnf);
return t1;
'''

[GRAPH]

The graph block bundles a code editor with a graph (DAG) renderer. Default a dot language description is used to create a graph.

Template

[GRAPH] <captiontext> { <options> }
'''
<code>
'''

Options

• eval:function
• arg:string
• label:string
• open:boolean
• silent:boolean

Example

The first example shows the default graph rendering using dot language description.

[GRAPH] { open:false; silent:true; }
'''
digraph {
  1; 2;
  subgraph X { 3; 4 };
  subgraph Y {} ;
  1 -> 2;
  3 -> 4;
  1 ->3;
}
'''

The second example shows a different configuration. The graph is built by using JavaScript statements and the graphlib API. The code block language mode selects this configuration (default is dot specification without a language mode setting).

[GRAPH]
'''javascript
var g = Graph();
g.setNode("A", {});
g.setNode("B", {});
g.setNode("C", {});
g.setEdge("A", "B", {lineInterpolate: 'basis'});
g.setEdge("A", "C", {lineInterpolate: 'basis'});
g.render();
'''

[INFO]

This block creates a generic information block with a spoiler.

Template

[INFO] caption { <options> }
<block>

Options

• label:string

Example

[INFO] Turtle Graphics API
'''
- `turtle:forward(n)` moves the turtle in current direction `n` pixels forward
- `turtle:goTo(x,y)` moves the turtle to a new position
- `turtle:left(n)` turns turtle `n` degree left
- `turtle:right(n)` turns turtle `n` degree right
- `turtle:reset()` clears the drawing area
- `turtle:up()` activates the pen
- `turtle:down()` deactivates the pen
'''

[INPUT]

This block creates a generic text input field.

Template

[INPUT] caption { <options> }

Options

• eval:function
• arg:string
• label:string

Example

[INPUT] Name { label:"username"; eval:updateConfig; }
[INPUT] Matrikelnummer { label:"usernumber" }

[SCRIPT]

This statement adds user code from a file to the notebook.

Template

[SCRIPT} <file>

[SOLUTION]

This block creates a solution block (output) with a spoiler. The opening of the spoiler can be delayed (either by a timeout relative to the starting time of the notebook or by a conditional function),

Template

[SOLUTION] <captiontext> { <options> }
<block>

Options

• label:string
• delay:number|function

[TABLE]

Two classes of dynamic tables are supported:

1. Mutable by the user
2. Immutable and created by a program function

Template

1. Table derived from a MarkDown table

[TABLE] <captiontext> { options }
|header|header|
|---|---|
|body|body|

Default all columns can be modified by double clicking the columns. Some columns can be set read-only by the readonlyColumns option.

2. Table generated by function code

[TABLE] <captiontext> { <options> }
[FUN]
'''javascript
<code>
return tabledata
'''

The table data returned by the function must have the following structure:

type tabledata = {
  columns: {name:string, type:string="string"|"number"} [],
  data: { $colname:$colval }
}

Options

• readonlyColumns:number []
• label:string

[QUESTION]

This block creates a (numbered) question.

Template

[QUESTION] <captiontext> { <options> }
<block>

Options

• label:string
• number:boolean|number|string

Example

[QUESTION]
What is function recursion?

[USE]

This statement imports a built-in module that is not automatically added to the current notebook.

Currently available modules:

• graph
• turtle

Inline Extensions

Dynamic input and output fields can be embedded anywhere in text and block captions.

Input Fields

Template

?????????
?????????:{ <options> }

Options

• label:string
• eval:function
• arg:boolean|number|string

Output Fields

Template

?????????:<label>

Coupling of input and output fields

Text from input fields can be automatically copied to output fields or by using user supplied evalution functions.

Template

??????:{label:"field1"; eval:copyIO; arg:"field2"}
!!!!!:field2

The built-in copyIO function copies text of the input field field1 to the output field field2 if the input field was modified.

User customized functions must have the following signature:

function copyTO(from:element id,to:label id) {
  // get text from input field
  var text = $('#'+id).val();
  // copy text to output field (if any argument was specified)
  $('#'+Labels[to]).html(text);
}

---

Author: Stefan Bosse Version: 1.1.20