https://github.com/liascript/demo
A simple Demo-presentation of most of the LiaScript elements...
https://github.com/liascript/demo
liascript liascript-course
Last synced: 7 months ago
JSON representation
A simple Demo-presentation of most of the LiaScript elements...
- Host: GitHub
- URL: https://github.com/liascript/demo
- Owner: LiaScript
- Created: 2019-01-17T17:42:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-19T18:03:15.000Z (about 3 years ago)
- Last Synced: 2025-05-16T14:11:12.646Z (8 months ago)
- Topics: liascript, liascript-course
- Homepage:
- Size: 189 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LiaScript: Demo
{{0-1}}
> __1.__ Nutzen Sie die oberen Pfeile um im Kurs weiter zugehen.
>
> __2.__ Schalten Sie den Ton für die Sprachausgabe ein.
--{{1}}--
LiaScript ist eine Erweiterung der Auszeichnungssprache
[Markdown](https://de.wikipedia.org/wiki/Markdown). Das ursprüngliche Ziel von
Markdown war es, die Ausgangsform auch ohne weitere Konvertierung für einen
Menschen leicht lesbar und damit auch editierbar zu machen.
{{1-2}}
```markdown Markdown-Beispiel.md
# Überschrift
Absätze werden durch eine Leerzeile voneinander getrennt.
2ter Absatz. *Kursiv*, **fett**, und `Monospace`.
Ungeordnete Listen sehen wie folgt aus:
* dieses
* jenes
* und noch weiteres
## Abschnitt: Zitate
> Blockzitate werden
> folgendermaßen definiert...
>
> ... und können auf mehrere Absätze
> aufgeteilt werden, wenn Sie mögen.
## Abschnitt: Tabellen
| Tabellen | Sind | Cool |
| ------------- |:----------------:| -----:|
| Spalte 3 ist | rechtsbündig | 1600€ |
| Spalte 2 ist | zentriert | 12€ |
| Zebrastreifen | sind ordentlich | 1€ |
### Unterabschnitte ...
```
--{{2}}--
LiaScript setzt auf dieser Notation auf, erweitert diese um viele multimediale
Elemente und erlaubt es beliebige JavaScript-Funktionalität einzubinden. Der
Fokus von LiaScript lag bei der einfachen Entwicklung von Online-Kursen für
jedermann. Diese sollten einerseits über einen Screencast-Charakter verfügen,
gemixt mit dem Stil einer PowerPoint-Präsentation, aber auch interaktive
Elemente einbinden, wie Quizze, Umfragen, Animationen, online Programmierung,
etc. Es sollte einfach um zusätzliche Funktionalität erweiterbar sein und durch
ein integriertes Makro-System auch wiederverwendbare Komponenten kapseln.
{{2}}
* Projektseite:
https://LiaScript.github.io
* Dieser Kurs auf:
* GitHub --> https://github.com/LiaScript/Demo
* LiaScript --> https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/demo/master/README.md#1
## Erweiterungen
--{{0}}--
Auf den folgenden Seiten sollen kurz einige Erweiterungen vorgestellt werden.
Für eine ausführliche Erläuterung zu allen Möglichkeiten sei jedoch auf die
[LiaScript Dokumentation](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#1)
auf der [Projekseite](https://liascript.github.io) verwiesen.
### Multimedia
--{{0}}--
Markdown unterstützt von Haus aus zwei Typen von Verweisen, dazu zählen
einerseits einfache Links auf externe oder interne Seiten, die wie folgt,
definiert werden:
{{0-1}}
*******************************************************************************
__Markdown-Code: (Verweis)__
``` markdown
* Direkter Verweis:
https://LiaScript.github.io
* Formatierter Verweis:
[Link zu LiaScript](https://LiaScript.github.io)
```
__Resultat:__
* Direkter Verweis: https://LiaScript.github.io
* Formatierter Verweis: [Link zu LiaScript](https://LiaScript.github.io)
*******************************************************************************
--{{1}}--
Bilder werden wie Verweise behandelt, nur dass hier ein Ausrufezeichen vor den
formatierten Verweis gestellt werden muss:
{{1-2}}
*******************************************************************************
__Markdown-Code: (Bild)__
``` markdown
```
__Resultat:__
*******************************************************************************
--{{2}}--
Zum Einfügen von Audio-Elementen in LiaScript muss nur ein Fragezeichen
vorangestellt werden, welches mit etwas Fantasie auch als stilisiertes Ohr
interpretiert werden kann.
{{2-3}}
*******************************************************************************
__LiaScript-Code: (Audio)__
``` markdown
?[Joy to the world](http://www.orangefreesounds.com/wp-content/uploads/2018/11/Joy-to-the-world-song.mp3?_=1)
```
__Resultat:__
?[Joy to the world](http://www.orangefreesounds.com/wp-content/uploads/2018/11/Joy-to-the-world-song.mp3?_=1)
*******************************************************************************
--{{3}}--
Und kombiniert man Bild und Ton, so kann man auch Videos einfügen. Diese beiden
Optionen sind sonst unter Markdown nicht gegeben. Der Vorteil bei dieser
Darstellung ist auch, dass die Referenzen mit einem anderen Markdown-Viewer
immer noch als Verweise dargestellt werden.
{{3-4}}
*******************************************************************************
__LiaScript-Code: (Video)__
``` markdown
!?[Das eLab-Projekt auf YouTube](https://www.youtube.com/embed/bICfKRyKTwE)
```
__Resultat:__
!?[Das eLab-Projekt auf YouTube](https://www.youtube.com/embed/bICfKRyKTwE)
*******************************************************************************
--{{4}}--
Dem aufmerksamen Betrachter wird nicht entfallen sein, dass in manchen
Beispielen HTML-Kommentare mit zusätzlichen HTML-Annotationen enthalten waren.
Dies ist eine Möglichkeit, jedes Element, sei es Text, Bild, Tabelle oder Video,
noch mit weiteren Eigenschaften zu versehen. Ein vorangestellter Kommentar
definiert die Attribute für einen ganzen Block, während ein hinten angestellter
Kommentar nur die Eigenschaften des vorangegangenen Elementes verändert.
{{4}}
*******************************************************************************
__LiaScript-Code: (Annotationen)__
``` markdown
Dieser ganze Absatz ist in Rot gefasst ;-), mit Ausnahme diese Smileys, dass nach drei
Sekunden zu hüpfen beginnt.
```
__Resultat:__
Dieser ganze Absatz ist in Rot gefasst ;-), mit Ausnahme diese Smileys, dass nach drei
Sekunden zu hüpfen beginnt.
*******************************************************************************
--{{5}}--
Damit lassen sich auch komplexe Animationsabläufe definieren, während der Text
mit einem anderen Markdown-Viewer noch lesbar bleibt, da Kommentare von diesen
einfach ignoriert werden.
### ASCII-Art 1
--{{0}}--
Aus unserer Erfahrung wissen wir, dass Bilder häufig zur Darstellung von
einfachen Signalverläufen, Trends, Funktionen, also Diagrammen genutzt werden.
Diese müssen meist aufwendig mit Excel, Gnuplot, Matlab oder anderen Werkzeugen
erstellt und exportiert werden. LiaScript bietet hierzu auch die Möglichkeit
Diagramme auch direkt im Text zu kodieren, diese lassen sich leicht anpassen und
verändern und man muss nicht sein "Werkzeug" wechseln.
``` HTML
Der Titel ist optional
1.9 | DotS
| ***
y | * *
- | r r r r r r r*r r r r*r r r r r r r
A | * *
c | * *
h | B B B B B * B B B B B B * B B B B B
s | * *
e | * * * * * *
+------------------------------------
0 x-Achse 1
```
--{{1}}--
Das konvertierte Ergebnis ist ein grafisch ansehnliches Diagramm, in dem die
Farben und die Form und Größe der Punkte jeweils durch die ursprünglichen
Buchstaben kodiert sind.
{{1}}
Der Titel ist optional
1.9 | DotS
| ***
y | * *
- | r r r r r r r*r r r r*r r r r r r r
A | * *
c | * *
h | B B B B B * B B B B B B * B B B B B
s | * *
e | * * * * * *
+------------------------------------
0 x-Achse 1
### ASCII-Art 2
--{{0}}--
Wer möchte, der kann auch noch kompliziertere Sachverhalte, wie zum Beispiel
Graphen, UML-Diagramme oder Bilder mithilfe von einfachen Textbausteinen
abbilden.
``` HTML
.---> F
A B C D /
*-------*-----*---*----*-----> E
\ ^ \
v / '---> G
B --> C -'
```
`````````````````````````````````````
.---> F
A B C D /
*-------*-----*---*----*-----> E
\ ^ \
v / '---> G
B --> C -'
`````````````````````````````````````
--{{1}}--
Und dazu auch alle möglichen Unicode-Zeichen nutzen. Da LiaScript international
ist und somit auch chinesische, griechische, arabische oder anderweitige Zeichen
und Symbole interpretieren kann.
{{1}}
*******************************************************************
```
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│ ││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
┌───────────────────┐
│ ╔═══╗ Some Text │▒
│ ╚═╦═╝ in the box │▒
╞═╤══╩══╤═══════════╡▒
│ ├──┬──┤ │▒
│ └──┴──┘ │▒
└───────────────────┘▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
```
````````````````````````````````
┌─┬┐ ╔═╦╗ ╓─╥╖ ╒═╤╕
│ ││ ║ ║║ ║ ║║ │ ││
├─┼┤ ╠═╬╣ ╟─╫╢ ╞═╪╡
└─┴┘ ╚═╩╝ ╙─╨╜ ╘═╧╛
┌───────────────────┐
│ ╔═══╗ Some Text │▒
│ ╚═╦═╝ in the box │▒
╞═╤══╩══╤═══════════╡▒
│ ├──┬──┤ │▒
│ └──┴──┘ │▒
└───────────────────┘▒
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
````````````````````````````````
*******************************************************************
### Quizze
--{{0}}--
Ein Quiz ist eine gute Möglichkeit dem Lernenden kurz noch mal die Möglichkeit
zu geben, sein Wissen bezüglich eines aktuellen Lernmoduls zu überprüfen.
LiaScript unterstützt grundsätzlich 4 Quiz-Typen, die durch zusätzliche Elemente
angepasst werden können:
{{0-1}}
1. Texteingaben
2. Single-Choice
3. Multiple-Choice
4. Freie, mithilfe von JavaScript
--{{1}}--
Ein Text-Quiz wird durch doppelt eckige Klammern definiert, welches diese
jeweilige Lösung schon enthält. Diese Lösung ist für den Nutzer nicht sichtbar.
Er kann seine Eingaben mehrfach prüfen und gegebenenfalls die Auflösung
anfordern:
{{1-2}}
*******************************************************************************
``` markdown Text-Quiz 1
**Welche Markdown-Erweiterung wird hier vorgestellt?**
[[LiaScript]]
```
---
**Welche Markdown-Erweiterung wird hier vorgestellt?**
[[LiaScript]]
*******************************************************************************
--{{2}}--
Hinweise können in der dargestellten Notation an jeden Quiz-Typ angehängt
werden, beziehungsweise kann auch jedes Quiz mit einer erweiterten Erklärung zur
Auflösung versehen werden. Diese Erklärung muss nur in einen Block
eingeschlossen werden, der durch zwei Reihen "Sternchen" definiert ist. Der
zusätzliche `script`-Block erlaubt es die aktuelle Eingabe gesondert zu
überprüfen und damit auf verschiedene Schreibweisen (groß/klein) sowie den
Einschub von Leerzeichen zu prüfen.
{{2-3}}
*******************************************************************************
``` markdown Text-Quiz 2
**Welche Markdown-Erweiterung wird hier vorgestellt?**
[[LiaScript]]
[[?]] Es handelt sich dabei um eine neue Sprache...
[[?]] Diese wurde speziell zur Erstellung von online-Kursen entwickelt.
[[?]] Es kommen ein __L__ und ein __S__ darin vor.
let input = "@input".trim().toLowerCase();
input == "liascript";
**************************
Diese zusätzliche Auflösung ist optional und kann so __viele__
Markdown-Blöcke und Absätze, Bilder, Videos oder Formeln
enthalten, wie sie wünschen ...
$$
\sum_{i=1}^\infty\frac{1}{n^2}
=\frac{\pi^2}{6}
$$
**************************
```
---
**Welche Markdown-Erweiterung wird hier vorgestellt?**
[[LiaScript]]
[[?]] Es handelt sich dabei um eine neue Sprache...
[[?]] Diese wurde speziell zur Erstellung von online-Kursen entwickelt.
[[?]] Es kommen ein __L__ und ein __S__ darin vor.
let input = "@input".trim().toLowerCase();
input == "liascript";
**************************
Diese zusätzliche Auflösung ist optional und kann so __viele__
Markdown-Blöcke und Absätze, Bilder, Videos oder Formeln
enthalten, wie sie wünschen ...
$$
\sum_{i=1}^\infty\frac{1}{n^2}
=\frac{\pi^2}{6}
$$
**************************
*******************************************************************************
--{{3}}--
Ein Single-Choice-Quiz wird durch stilisierte Radio-Buttons dargestellt, wobei
das `X` hier die richtige Lösung markiert. Hierbei darf nur eine Zeile ein `X`
enthalten. Erweiterungen um Hinweise und Auflösungen sind genauso wie bei einem
Text-Quiz möglich.
{{3-4}}
*******************************************************************************
``` markdown Single-Choice-Quiz
**Welche Antwort trifft zu?**
[( )] Antwort 1
[( )] Antwort 2
[(X)] Antwort 3
[( )] Antwort 4
```
---
**Welche Antwort trifft zu?**
[( )] Antwort 1
[( )] Antwort 2
[(X)] Antwort 3
[( )] Antwort 4
*******************************************************************************
--{{4}}--
Mehrere Auswahloptionen und damit Multiple-Choice-Fragen können durch eine
Gruppe sogenannter Check-Buttons angegeben werden. Dabei können auch alle
Elemente durch ein `X` markiert sein oder keines.
{{4-5}}
*******************************************************************************
``` markdown Multiple-Choice-Quiz
**Welche Antworten treffen zu?**
[[ ]] Antwort 1
[[X]] Antwort 2
[[ ]] Antwort 3
[[X]] Antwort 4
[[ ]] Antwort 5
```
---
**Welche Antworten treffen zu?**
[[ ]] Antwort 1
[[X]] Antwort 2
[[ ]] Antwort 3
[[X]] Antwort 4
[[ ]] Antwort 5
*******************************************************************************
--{{5}}--
Ein generisches Quiz kann mithilfe der folgenden Notation erstellt werden, wobei
hier das Ergebnis einzig und allein von einer Zufallszahl abhängig ist. Über andere HTML-Elemente können dann auch die Eingaben abgebildet werden.
{{5}}
*******************************************************************************
``` markdown Generisches Quiz
[[!]]
// you are free to check anything you want
if(Math.random() < 0.2)
true;
else
false;
```
[[!]]
// you are free to check anything you want
if(Math.random() < 0.2)
true;
else
false;
*******************************************************************************
### Ausgaben
--{{0}}--
Im folgenden Teil soll die Aufteilung eines Abschnittes in mehrere Fragmente
erläutert werden sowie die Nutzung der Sprachausgabe.
{{0-1}}
--{{1}}--
Falls Sie es noch nicht bemerkt haben, oben in der rechten Ecke befindet sich
ein Knopf, der es erlaubt zwischen den unterschiedlichen Darstellungsmodi zu
wechseln. Diese Option kommt frei Haus und sie können selber entscheiden, ob sie
lieber den Erklärtext wie in einer Präsentation hören oder lieber ein Buch
lesen.
{{1}}
1. Präsentation (mit Text2Speech)
2. Folien (mit Notizen)
3. Lehrbuch (ohne Fragmente und Sprachausgabe)
#### Fragmente
--{{0}}--
Um Fragmente zu definieren, muss nur die jeweilige Fragment-Nummer in doppelt
geschweifte Klammern geschrieben werden und einem Markdown-Block vorangestellt.
Eine zweite Zahl nach einem Minus definiert, bei welchem Punkt das Fragment
wieder ausgeblendet wird. Innerhalb eines Blocks können auch einzelne Elemente
aufgedeckt werden, dazu muss die doppelt geschweifte Klammer nur ausgepackt
werden, wobei die zweiten Klammern das oder die jeweiligen Elemente umschließen,
die ein- beziehungsweise ausgeblendet werden sollen. Verschiedenen Blöcken
können die gleichen Nummern zugewiesen werden oder man umschließt sie mit zwei
Linien aus Sternchen `*`, ebenso wie es auch im Abschnitt [Quizze](#6) mit der
Auflösung gemacht wurde.
``` markdown
{{1}}
Dieser Text erscheint zu{3}{__aller__}erst.
{{2-4}} Dieser Block erscheint als zweites
Fragment und verschwindet bei Punkt 4.
Ich bin immer da ...
{{4}} Ich komme zuletzt.
```
{{1}}
Dieser Text erscheint zu{3}{__aller__}erst.
{{2-4}} Dieser Block erscheint als zweites
Fragment und verschwindet bei Punkt 4.
Ich bin immer da ...
{{4}} Ich komme zuletzt.
#### Spracheausgabe
--{{0}}--
Die Sprachausgabe erfolgt mithilfe von
[ResponsiveVoice](http://responsivevoice.org). In initialen Kommentar-Tag kann
die Standardstimme definiert werden, diese kann je Abschnitt und Sprachausgabe
auch geändert werden. Die Kommentarfunktion kann als Erweiterung der
Fragment-Notation interpretiert werden und muss in doppelte Minuszeichen
eingefügt werden. Sozusagen, die Erläuterung zu einem bestimmten Unterpunkt.
Innerhalb eines Kommentars kann auch die Sprachausgabe geändert werden. In
Abhängigkeit zum aktuellen Präsentationsmodus wird dieser Text entweder
gesprochen oder im Dokument dargestellt. Des Weiteren lassen sich so auch
Dialoge zwischen unterschiedlichen Personen realisieren.
``` markdown
# Überschrift 1
--{{1}}--
Dieser Text wird deutsch ausgesprochen.
--{{2 UK English Male}}--
I should speak with a UK like accent.
--{{3 Russian Female}}--
Я говорю по-русски с женским голосом.
```
--{{1}}--
Dieser Text wird deutsch ausgesprochen.
--{{2 UK English Male}}--
I should speak with a UK like accent.
--{{3 Russian Female}}--
Я говорю по-русски с женским голосом.
## Eigene Erweiterungen
--{{0}}--
Auf den vorhergehenden Seiten wurden sprachliche Erweiterungen von Markdown
vorgestellt. Das Internet bietet aber weitaus mehr Möglichkeiten, die für einen
Kurs von Interesse sein könnten. LiaScript erlaubt es, im Gegensatz zu anderen
Markdown-Interpretern, auch JavaScript, HTML und CSS auf verschiedenste Art und
Weise zu integrieren. Außerdem bietet LiaScript eine eigene Makro-Notation um
wiederkehrende und aufwendige Aufgaben zu automatisieren.
### JavaScript und HTML
--{{0}}--
Wer mit den Möglichkeiten von Markdown nicht zufrieden ist, kann auch HTML,
JavaScript und CSS Elemente direkt einfügen. Um externe Bibliotheken zu laden,
müssen diese im "Haupt"-Kommentar des Dokumentes oder des Abschnittes definiert
sein. Handelt es sich um eine JavaScript-Bibliothek so muss das Schlüsselwort
`script` verwendet werden und bei einem Style-Sheet das Schlüsselwort `link`.
``` html
```
--{{1}}--
Danach kann überall im Dokument auf die eingefügte Funktionalität mit
zugegriffen werden. Das nun dargestellte Beispiel nutzt die
JavaScript-Bibliothek [Chartist](https://gionkunz.github.io/chartist-js/), um
einen einfachen Graphen zu plotten.
{{1}}
``` html
let chart = new Chartist.Line('#chart', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
});
```
--{{2}}--
Der erzeugte Graph sieht dann wie folgt aus ...
{{2}}
$.getScript("https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js", function(){
let chart = new Chartist.Line('#chart', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
})});
### Makros
--{{0}}--
Im Abschnitt [Quizze](#6) wurde bereits das `@input`-Makro genutzt um die
Stellen zu markieren, die durch die Nutzereingaben ersetzt werden sollen. Ein
Makro beginnt immer mit einem `@`-Symbol und kann im "Haupt"-Kommentar eines
Dokumentes definiert werden. Makros beschreiben einfache Regeln für die
Textersetzung. Für das einzeilige `@red` Makro gilt, alles was nach dem
Doppelpunkt folgt definiert den Ersetzungstext. Parameterersetzungen werden
jeweils durch ein `@`-Symbol gefolgt mit einer Nummer definiert.
{{0-2}}
``` html
```
--{{1}}--
Diese Erweiterungen können dann beliebig im Dokument eingesetzt werden, wie im
folgenden Beispiel dargestellt.
{{1-2}}
*******************************************************************************
``` markdown
> Dies ist ein Blockzitate mit
> einem @red(sehr wichtigen)
> Beispiel...
```
---
> Dies ist ein Blockzitate mit
> einem @red(sehr wichtigen)
> Beispiel...
*******************************************************************************
--{{2}}--
Ein Makro kann auch andere Makros aufrufen und komplexere Makros können, wie im
Beispiel gezeigt, auch als Block definiert werden, welches aus beliebigen HTML-,
Markdown- und JavaScript-Elementen besteht. In diesem Fall sollte die Nutzung
von Chartist vereinfacht werden, indem einmal die ID für das `div`-Element
verändert wird, aber auch der zu zeichnende Inhalt als zweiter Parameter
übergeben wird.
{{2}}
``` html
```
--{{3}}--
Auch dieses Makro kann über die bekannte "funktionsähnliche" Notation aufgerufen
werden. Da Kommas als Separatoren für die Parameter genutzt werden, müssen hier
sogenannte back-ticks verwendet werden, um den zweiten Parameter als ganzen
String zu übergeben. Zugegebenermaßen kann dies für sehr lange Eingaben auch
sehr schnell unleserlich werden.
{{3-4}}
*******************************************************************************
``` markdown
@Chartist(id1,`labels: [1,2,3], series: [[1,3,1]]`)
```
---
@Chartist(id1,`labels: [1,2,3], series: [[1,3,1]]`)
*******************************************************************************
--{{4}}--
Aus diesem Grund können Makros auch über einen Code-Block aufgerufen werden,
dazu muss nur im Kopf des Blockes das jeweilige Makro aufgerufen werden. Der
Körper des Blocks wird dann insgesamt als letzter Parameter an die Textersetzung
übergeben. Neben der übersichtlicheren Schreibweise werden von allen gängigen
Markdown-Viewern diese Elemente zumindest als Code-Block mit Syntax-Highlighting
richtig dargestellt und erlaubt zumindest die Interpretation der Parameter.
{{4}}
*******************************************************************************
``` markdown
` ` `json @Chartist(id2)
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[100, 120, 180, 200, 0, 12, -1],
[10, 20, 30, 40, 50, 90, -100]]
` ` `
```
---
```json @Chartist(id2)
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[100, 120, 180, 200, 0, 12, -1],
[10, 20, 30, 40, 50, 90, -100]]
```
*******************************************************************************
## Programmierung
--{{0}}--
Durch die folgende Syntax können mehrere standard Markdown Code-Blöcke zu einem
Projekt zusammengefasst werden. Die unterschiedlichen Dateien können mit einem
Namen versehen werden und lassen sich auf und zu klappen. Das zusätzliche
`script`-tag am Ende weist diese Blöcke als ausführbaren Code aus und definiert,
wie mit den Inhalten der einzelnen Blöcke zu verfahren ist.
{{0-1}}
``` markdown
` ` ` js -EvalScript.js
let who = data.first_name + " " + data.last_name;
if(data.online) {
who + " is online"; }
else {
who + " is NOT online"; }
` ` `
` ` ` json +Data.json
{
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}
` ` `
// insert the JSON dataset into the local variable data
let data = @input(1);
// eval the script that uses this dataset
eval(`@input(0)`);
```
--{{1}}--
Die LiaScript-Interpretation dieser Blöcke sieht dann wie folgt aus. Alle
Dateien sind editierbar und es wird, um Änderungen zu verfolgen, auch ein
eigenes lineares Versions-Management-System genutzt. Probieren Sie es aus,
verändern Sie den Code und kehren zu früheren Versionen zurück.
{{1-2}}
``` js -EvalScript.js
let who = data.first_name + " " + data.last_name;
if(data.online) {
who + " is online"; }
else {
who + " is NOT online"; }
```
``` json +Data.json
{
"first_name" : "Sammy",
"last_name" : "Shark",
"online" : true
}
```
// insert the JSON dataset into the local variable data
let data = @input(1);
// eval the script that uses this dataset
eval(`@input(0)`);
--{{2}}--
Da es, wie in Abschnitt [Eigene Erweiterungen](#10) gezeigt, auch möglich ist
verschiedene JavaScript-Funktionalität und Bibliotheken einzubinden, können auch
unterschiedliche Programmiersprachen unterstützt werden. Das Beispiel zeigt ein
einfaches _C_-Programm, dass mithilfe der
[rextester-API](https://rextester.com/main) kompiliert und ausgeführt werden
kann. Die etwas komplexere Definition im benötigten `script`-tag wurde hier
mithilfe des Makros `@Rextester.eval` zur Verfügung gestellt. Auf diese Weise
können beliebige ausführbare Code-Fragmente in einem Dokument definiert werden.
{{2-3}}
``` c source_file.c
#include
int main()
{
int i; // Löschen Sie das Semikolon und
// schauen was passiert ...
for(i=0; i<10; ++i) {
printf("Hello, World! #% d\n", i);
}
return 0;
}
```
@Rextester.eval
--{{3}}--
Auch die Kombination mit anderen Sprachen und Visualisierungen ist möglich, wie
hier zum Beispiel mit [_Processing_](https://de.wikipedia.org/wiki/Processing):
{{3}}
``` cpp ABSTRACT01js
int num,cnt,px,py,fadeInterval;
Particle[] particles;
boolean initialised=false,doClear=false;
float lastRelease=-1,scMod,fadeAmount;
void setup() {
size(400,300);
background(255);
smooth();
rectMode(CENTER_DIAMETER);
ellipseMode(CENTER_DIAMETER);
cnt=0;
num=150;
particles=new Particle[num];
for(int i=0; i0) particles[i].update();
}
void reinit() {
doClear=true;
scMod=random(1,1.4);
fadeInterval=(int)random(220,300);
fadeAmount=random(30,60);
// println("fadeInterval "+fadeInterval+" scMod "+nf(scMod,0,3)+
// " fadeAmount "+nf(fadeAmount,0,3));
for(int i=0; i95) ageGoal*=1.25;
age=-(int)random(50,150);
pos=new Vec2D(random(width-100)+50,random(height-100)+50);
dir=(int)random(36)*10;
type=0;
if(random(100)>60) type=1;
interval=(int)random(2,5);
if(type==1) {
interval=1;
dir=degrees(atan2(-(pos.y-height/2),pos.x-width/2));
}
dirD=random(1,2);
if(random(100)<50) dirD=-dirD;
speed=random(3,6);
sc=random(0.5,1);
if(random(100)>90) sc=random(1.2,1.6);
dirCnt=random(20,35);
if(type==0) {
if(random(100)>95) sc=random(1.5,2.25);
else sc=random(0.8,1.2);
}
sc*=scMod;
speed*=sc;
}
void update() {
age++;
if(age<0) return;
else if(age>ageGoal) reinit();
else {
if(type==1) {
pos.add(
cos(radians(dir))*speed,sin(radians(dir))*speed);
dir+=dirD;
dirD+=random(-0.2,0.2);
dirCnt--;
if(dirCnt<0) {
dirD=random(1,5);
if(random(100)<50) dirD=-dirD;
dirCnt=random(20,35);
}
}
if(age%interval==0) newParticle();
if(pos.x<-50 || pos.x>width+50 ||
pos.y<-50 || pos.y>height+50) reinit();
}
}
void newParticle() {
int partNum,i;
if(type==0) dir=int(random(36))*10;
i=0;
while(i50) offs=-offs;
particles[i].init(dir+offs,pos.x,pos.y,sc);
break;
}
i++;
}
px=mouseX;
py=mouseY;
}
}
class Particle {
Vec2D v,vD;
float dir,dirMod,speed,sc;
int col,age,stateCnt;
int type;
Particle() {
v=new Vec2D(0,0);
vD=new Vec2D(0,0);
age=0;
}
void init(float _dir,float mx,float my,float _sc) {
dir=_dir;
sc=_sc;
float prob=random(100);
if(prob<80) age=15+int(random(30));
else if(prob<99) age=45+int(random(50));
else age=100+int(random(100));
if(random(100)<80) speed=random(2)+0.5;
else speed=random(2)+2;
if(random(100)<80) dirMod=20;
else dirMod=60;
v.set(mx,my);
initMove();
dir=_dir;
stateCnt=10;
if(random(100)>50) col=0;
else col=1;
type=(int)random(30000)%2;
}
void initMove() {
if(random(100)>50) dirMod=-dirMod;
dir+=dirMod;
vD.set(speed,0);
vD.rotate(radians(dir+90));
stateCnt=10+int(random(5));
if(random(100)>90) stateCnt+=30;
}
void update() {
age--;
if(age>=30) {
vD.rotate(radians(1));
vD.mult(1.01f);
}
v.add(vD);
if(col==0) fill(255-age,0,100,150);
else fill(100,200-(age/2),255-age,150);
if(type==1) {
if(col==0) fill(255-age,100,0,150);
else fill(255,200-(age/2),0,150);
}
pushMatrix();
scale(sc);
translate(v.x,v.y);
rotate(radians(dir));
rect(0,0,1,16);
popMatrix();
if(age==0) {
if(random(100)>50) fill(200,0,0,200);
else fill(00,200,255,200);
float size=2+random(4);
if(random(100)>95) size+=5;
size*=sc;
ellipse(v.x*sc,v.y*sc,size,size);
}
if(v.x<0 || v.x>width || v.y<0 || v.y>height) age=0;
if(age<30) {
stateCnt--;
if(stateCnt==0) {
initMove();
}
}
}
}
// General vector class for 2D vectors
class Vec2D {
float x,y;
Vec2D(float _x,float _y) {
x=_x;
y=_y;
}
Vec2D(Vec2D v) {
x=v.x;
y=v.y;
}
void set(float _x,float _y) {
x=_x;
y=_y;
}
void set(Vec2D v) {
x=v.x;
y=v.y;
}
void add(float _x,float _y) {
x+=_x;
y+=_y;
}
void add(Vec2D v) {
x+=v.x;
y+=v.y;
}
void sub(float _x,float _y) {
x-=_x;
y-=_y;
}
void sub(Vec2D v) {
x-=v.x;
y-=v.y;
}
void mult(float m) {
x*=m;
y*=m;
}
void div(float m) {
x/=m;
y/=m;
}
float length() {
return sqrt(x*x+y*y);
}
float angle() {
return atan2(y,x);
}
void normalise() {
float l=length();
if(l!=0) {
x/=l;
y/=l;
}
}
Vec2D tangent() {
return new Vec2D(-y,x);
}
void rotate(float val) {
// Due to float not being precise enough, double is used for the calculations
double cosval=Math.cos(val);
double sinval=Math.sin(val);
double tmpx=x*cosval - y*sinval;
double tmpy=x*sinval + y*cosval;
x=(float)tmpx;
y=(float)tmpy;
}
}
```
@processing(ABSTRACT01js)
--{{4}}--
Für solche JavaScript-Bibliotheken und auch zur Nutzung anderer Funktionalitäten
bieten wir Templates an, die über ein eigenes Makro-System implementiert wurden.
Diese können frei übernommen werden und minimieren auch den Bruch beim lesen des
originalen Markdown-Dokumentes.
## Abschließende Worte
--{{0}}--
LiaScript ist eine reine JavaScript-Implementierung, das heißt, der Kurs wird
live im Browser beim Besucher geladen und interpretiert. LiaScript speichert
auch keine Zustände auf der Webseite oder nutzt Cookies.
--{{1}}--
Kurse können überall gehostet werden, es wird nur der Verweis auf das jeweilige
Markdown-Dokument benötigt. Hierfür eignet sich GitHub besonders, Kurse können
hier in mehreren Versionen vorliegen und es können auch private Projekte
angelegt werden, die nicht von jedem eingesehen werden können.
--{{2}}--
Jeder, der einen Kurs erstellt, behält auch all seine Rechte daran und kann
seine Inhalte nach eigenem Belieben und Ermessen verändern und mit anderen
Menschen teilen.
1. LiaScript ist eine reine clientseitige Implementierung in JavaScript
([Elm](https://elm-lang.org))
2. Kurse können überall gehostet werden
(bevorzugt auf [GitHub](https://github.com))
3. Jeder behält die Rechte an seinem Kurs
## Werkzeuge
--{{0}}--
Derzeit existieren zwei Plugins für [Atom](https://atom.io), den freien Editor
von [GitHub](https://github.com). Diese sollen den Einstieg und die Entwicklung
von Kursen in LiaScript vereinfachen.
__[Atom](https://atom.io) Editor-Plugins:__
1. liascript-preview: https://atom.io/packages/liascript-preview
2. liascript-snippets: https://atom.io/packages/liascript-snippets
## Kontakt
| Name | eMail |
|----------------|-----------------------------------------|
| André Dietrich | andre.dietrich@ovgu.de |
| Sebastian Zug | sebastian.zug@informatik.tu-freiberg.de |