Specials - Open Educational Resources - Studiengang Digitale Methodik Mainz

Specials

Zusätzlich zu den Standardformatierungen in Markdown verfügt die OER Vorlage über zusätzliche Syntaxerweiterungen, mit denen sich unterschiedliche Diagrammtypen, mathematische Formeln und Notensatz realisieren lassen. Hierbei werden alle Möglichkeiten des Online-Editors HedgeDoc umgesetzt, der als Referenzeditor für die Vorlage dient und sich ausgezeichnet zur Echtzeit-Kollaboration bei der Erstellung von OER Materialien eignet.

Hinweisboxen

Es werden fünf verschiedene Typen von Hinweisboxen unterstützt. Hierbei können auch Icons in den Überschriften der Boxen aus der Font Awesome Icon-Bibliothek eingesetzt werden.

Standard

Text in der Hinweisbox

Syntax:

{{% notice %}}
##### <i class="fa fa-book-open"></i> Standard
Text in der Hinweisbox
{{% /notice %}}

Notiz

Text in der Hinweisbox

Syntax:

{{% notice note %}}
##### <i class="fa fa-sticky-note"></i> Standard
Text in der Hinweisbox
{{% /notice %}}

Info

Text in der Hinweisbox

Syntax:

{{% notice info %}}
##### <i class="fa fa-info-circle"></i> Standard
Text in der Hinweisbox
{{% /notice %}}

Tipp

Tip

Text in der Hinweisbox

Syntax:

{{% notice tip %}}
##### <i class="fa fa-hand-point-right"></i> Standard
Text in der Hinweisbox
{{% /notice %}}

Warnung

Text in der Hinweisbox

Syntax:

{{% notice warning %}}
##### <i class="fa fa-exclamation-circle"></i> Standard
Text in der Hinweisbox
{{% /notice %}}

Buttons

Mit folgender Syntax können Buttons erzeugt werden:

{{% button href="https://mainzed.org/" %}}mainzed{{% /button %}}

{{% button href="https://mainzed.org/" icon="fas fa-user-astronaut" %}}mainzed{{% /button%}}

{{% button href="https://mainzed.org/" icon="fas fa-user-astronaut" icon-position="right" %}}mainzedt{{% /button %}}

Ausgabe:

mainzed mainzed mainzed

Diagramme

Mermaid

Mermaid ist eine leistungsstarke Bibliothek zur Erstellung verschiedener Typen von Diagramme in einer an Markdown orientierten Reintext-Syntax. Ein hilfreiches Instrument zur Live-Erstellung der Diagramme ist der Mermaid Live Editor. Mermaid-Diagramme können über Code-Block Syntax mit dem Schlüsselwort mermaid eingebunden werden.

    ```mermaid
    gantt
      title A Gantt Diagram
    
      section Section
      A task: a1, 2014-01-01, 30d
      Another task: after a1, 20d
      
      section Another
      Task in sec: 2014-01-12, 12d
      Another task: 24d
    ```

Ausgabe:

gantt
  title A Gantt Diagram

  section Section
  A task: a1, 2014-01-01, 30d
  Another task: after a1, 20d
  
  section Another
  Task in sec: 2014-01-12, 12d
  Another task: 24d

Weitere Mermaid Diagrammtypen:

Die Syntax für diese Diagrammtypen findet sich in der Mermaid-Dokumentation.

Flowchart

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Sequenzdiagramm

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

Git Graph

gitGraph:
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch

Klassendiagramm

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Entity-Relationship Diagramm

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

Sequenzdiagramme (Alternative)

Alternativ können auch Sequenzdiagramme mit der Syntax der JS Sequence Diagrams Bibliothek erstellt werden:

    ```sequence
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks
    Bob-->Alice: I am good thanks!
    Note left of Alice: Alice responds
    Alice->Bob: Where have you been?
    ```

Ausgabe:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
Note left of Alice: Alice responds
Alice->Bob: Where have you been?

Flowcharts (Alternative)

Die Bibliothek Flowcharts.js eignet sich zur Erstellung von Flowchart Diagrammen in Reintext-Syntax:

    ```flow
    st=>start: Start
    e=>end: End
    op=>operation: My Operation
    op2=>operation: lalala
    cond=>condition: Yes or No?
    
    st->op->op2->cond
    cond(yes)->e
    cond(no)->op2
    ```

Ausgabe:

st=>start: Start
e=>end: End
op=>operation: My Operation
op2=>operation: lalala
cond=>condition: Yes or No?

st->op->op2->cond
cond(yes)->e
cond(no)->op2

Graphviz

Zur Visualisierung aller Typen von Graphen steht die äußert leistungsfähige Graphviz Bibliothek zur Verfügung:

    ```graphviz
    digraph hierarchy {
      nodesep=1.0 // Increases the separation between nodes
    
      node [fontname=Courier,shape=box] // All nodes will this shape and colour
      edge [style=dashed] // All the lines look like this
    
      Headteacher->{Deputy1 Deputy2 BusinessManager}
      Deputy1->{Teacher1 Teacher2}
      BusinessManager->ITManager
      {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
    }
    ```

Ausgabe:

digraph hierarchy {
  nodesep=1.0 // Increases the separation between nodes

  node [fontname=Courier,shape=box] // All nodes will this shape and colour
  edge [style=dashed] // All the lines look like this

  Headteacher->{Deputy1 Deputy2 BusinessManager}
  Deputy1->{Teacher1 Teacher2}
  BusinessManager->ITManager
  {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level
}

ABC notation

Auch die Darstellung von Notensatz ist mittels der Reintext-Syntax ABC möglich:

X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|

Mathematische Formeln

Weiterhin können mathematische Formeln mit der MathJAX Syntax geschrieben und dargestellt werden:

    ```math
    $$
    x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
    $$
    
    $$
    \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
    $$
    ```

Ausgabe:

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

Tabs

Eine interessante Möglichkeit zur dynamischen vergleichenden Darstellung von Inhalten ist der Einsatz von Tabs, die mit folgender Syntax erzeugt werden können (z.B. für Code-Beispiele etc.):

    {{< tabs >}}
    {{% tab name="python" %}}
    ```python
    print("Hello World!")
    ```
    {{% /tab %}}
    {{% tab name="R" %}}
    ```R
    > print("Hello World!")
    ```
    {{% /tab %}}
    {{% tab name="Bash" %}}
    ```Bash
    echo "Hello World!"
    ```
    {{% /tab %}}
    {{< /tabs >}}

Ausgabe:

print("Hello World!")

> print("Hello World!")

echo "Hello World!"

Video

Über den Youtube bzw. Vimeo Shortcode können Videos von beiden Plattformen direkt eingebunden werden. Beispiel:

{{< vimeo 71408738 >}}

Ausgabe:

Die Einbindung lokaler Videos ist über folgenden Shortcode möglich:

{{< video src="/my.webm" type="video/webm" preload="auto" >}}

Hierbei müssen die einzubindenden lokalen Videodateien im Ordner static abgelegt werden.