Skip to content

Demo of Interactive Features#

This page is a showcase of the features that TeX4TUM provides and demonstrates how learning materials could be made interactive, fast accessible, and neat.

Math with KaTeX#

We use KaTeX as TeX interpreter, such that you can typeset math equations simply using $. For example to display \(\sqrt{x^2 + \alpha}\) as inline you write $\sqrt{x^2 + \alpha}$. Please note that there must not be a space between the $ and your tex code! For display style equations, leave a blank line and surround your tex code by double $$s. You may optionally explain used symbols by a line starting with with or where that directly follows the equation.

The equation (you can click on it)

\[\oint_{\partial A} \vec E \cdot \diff \vec s\]

with electric field \(\vec E\), surface \(A\) and direction \(\vec s\)

is simply written as one paragraph

$$\oint_{\partial A} \vec E \cdot \diff \vec s$$
with electric field $\vec E$, surface $A$ and direction $\vec s$

Interactive Equations#

Inline equations can be made interactive using JS. Click on the values of R and C in the text to change them!

For a low-pass filter, the Cut-Off Frequency is

\[f_c = \frac{1}{2\pi R C}\]

with the resistance \(R\) and capacity \(C\)

For resistance \(R\) = 10kΩ and capacity \(C\) = 100nF the Cut-Off Frequency is \(f_c\) = 159 Hz.

How is this implemented?

For the first value we write $R$ = <span id="R_val" onclick="askValue(this.id)">10k</span>Ω. The function askValue() will take care of the rest. The JS code is added at the end of the document within a <script> tag.

Creating Interactive Boxes#

Boxes are special content that separates from normal text.

Hidden Details#

Read only content you really need. We provide two easy methods to provide foldable content that unfolds when you click on it.

  1. Paragraphs: start a paragraph with Details: or Q: ... \n A: ...
  2. Headings: start a heading with Example, Explanation, or Details

Using Paragraphs

A simple question?

Maybe not.

To create Q&A, start a paragraph with Q: and have A: on the second line.

Q: A simple question?
A: Maybe not.

Using Headings

Explanation of Details

This is an explanation to demonstrate the auto detection of an explanation. All you need to do is to start a heading with the term Explanation like in this example. It was created using the code

### Explanation of Details
This is an explanation to demonstrate ...

The advantage of this method is that it allows to include multiple paragraphs.

Nested Headings#

Furthermore, any heading with a higher level will be included as well. The box will stop at the next heading with an equal or lower level than the heading which has started the explanation box.

Example Subsection

This is an example to demonstrate the auto detection of an example even over several lines.

Info on more details

At this section, the example should stop.

Special Content Boxes#

Similar to the details, you can also create boxes that show the content by default.

Tex4TUM Markdown#

Our syntax for creating special colored boxes ("Admonitions") is very simple. Just start a paragraph with Note:, Example:, or Warning:

Note:

This is an attempt with syntax from tex4tum

The Example heading.

And some details.

Warning:

If you directly start the next line, the first term will be used as heading.

Note: This is an attempt with syntax from tex4tum

Example: The Example heading.
And some details.

Warning:
If you directly start the next line, the first term will be used as heading.

HTML in Markdown#

The third option is to directly use the <blockquote> or <details> tag.

The summary heading The details of this example.

Interactive Diagrams#

Play with diagrams for better understanding. Click and drag the black ray with the mouse or change any value in the diagram.

image/svg+xml n₁ = 1.0 n₂ = 1.5 α = 60
Interactive diagram of refraction.

Creating Diagrams from Code#

Normal Distribution

Find an answer blazingly fast. The fuzzy search in the top bar displays results immediately without slow sever communication. Just hit tab to focus the search, then type e.g. "did" to search for "Diode".

Basic Fomartting#

Tables#

Tables are easily generated.

Feature Works
Tables yes
MOSI Master Out, Slave In
MISO Master In, Slave Out

Abreviations#

Furthermore, abbreviations such as USB, BIOS, SVG, or JPEG do not need explanations anymore. If you do not know it just move the mouse over it.

Tab Boxes with MkDocs Syntax#

You can use boxes with tabs for content that exists in similiar variations.

This should by displayed in tab 1

tabs are simply created by the headers

and this is tab 3. Markdown elements and tex \(\sqrt{3}\) are supported.

Tab Boxes with JavaScript#

You can use boxes with tabs for content that exists in similiar variations.

Tab 1#

This should by displayed in tab 1

Tab 2#

tabs are simply created by the headers

Tab 3#

and this is tab 3. Markdown elements and tex \(\sqrt{3}\) are supported.

Also content after the tabbox is displayed normally.

ToDo#

  • Full responsive design
  • remember options with cookies
  • consistent JS framework for interactive content
  • Improved search: Sorting results, reaction to no results
  • More content