{"id":18597862,"url":"https://github.com/liascript/demo","last_synced_at":"2026-03-19T05:16:35.974Z","repository":{"id":114116227,"uuid":"166269319","full_name":"LiaScript/demo","owner":"LiaScript","description":"A simple Demo-presentation of most of the LiaScript elements... ","archived":false,"fork":false,"pushed_at":"2022-10-19T18:03:15.000Z","size":194,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T23:07:17.523Z","etag":null,"topics":["liascript","liascript-course"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaScript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-17T17:42:34.000Z","updated_at":"2024-09-14T09:29:54.000Z","dependencies_parsed_at":"2023-06-13T09:15:19.407Z","dependency_job_id":null,"html_url":"https://github.com/LiaScript/demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LiaScript/demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaScript","download_url":"https://codeload.github.com/LiaScript/demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdemo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28870638,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T07:35:32.468Z","status":"ssl_error","status_checked_at":"2026-01-29T07:33:31.463Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["liascript","liascript-course"],"created_at":"2024-11-07T01:29:40.417Z","updated_at":"2026-01-29T07:39:23.791Z","avatar_url":"https://github.com/LiaScript.png","language":null,"readme":"\u003c!--\nauthor:   André Dietrich, Sebastian Zug\n\nemail:    andre.dietrich@ovgu.de\n\nversion:  0.0.1\n\nlanguage: de\n\nnarrator: Deutsch Female\n\ncomment:  Demo für den 25. sächsischen Schulinformatiktag.\n\n\nscript:   https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\n\n@Rextester.__eval\n\u003cscript\u003e\n//var result = null;\nvar error  = false;\n\nconsole.log = function(e){ send.lia(\"log\", JSON.stringify(e), [], true); };\n\nfunction grep_(type, output) {\n  try {\n    let re_s = \":(\\\\d+):(\\\\d+): \"+type+\": (.+)\";\n\n    let re_g = new RegExp(re_s, \"g\");\n    let re_i = new RegExp(re_s, \"i\");\n\n    let rslt = output.match(re_g);\n\n    let i = 0;\n    for(i = 0; i \u003c rslt.length; i++) {\n        let e = rslt[i].match(re_i);\n\n        rslt[i] = { row : e[1]-1, column : e[2], text : e[3], type : type};\n    }\n    return [rslt];\n  } catch(e) {\n    return [];\n  }\n}\n\n$.ajax ({\n    url: \"https://rextester.com/rundotnet/api\",\n    type: \"POST\",\n    timeout: 10000,\n    data: { LanguageChoice: @0,\n            Program: `@input`,\n            Input: `@1`,\n            CompilerArgs : @2}\n    }).done(function(data) {\n        if (data.Errors == null) {\n            let warnings = grep_(\"warning\", data.Warnings);\n\n            let stats = \"\\n-------Stat-------\\n\"+data.Stats.replace(/, /g, \"\\n\");\n\n            if(data.Warnings)\n              stats = \"\\n-------Warn-------\\n\"+data.Warnings + stats;\n\n            send.lia(\"log\", data.Result+stats, warnings, true);\n            send.lia(\"eval\", \"LIA: stop\");\n\n        } else {\n            let errors = grep_(\"error\", data.Errors);\n\n            let stats = \"\\n-------Stat-------\\n\"+data.Stats.replace(/, /g, \"\\n\");\n\n            if(data.Warning)\n              stats = data.Errors + data.Warnings + stats;\n            else\n              stats = data.Errors + data.Warnings + stats;\n\n            send.lia(\"log\", stats, errors, false);\n            send.lia(\"eval\", \"LIA: stop\");\n        }\n    }).fail(function(data, err) {\n        send.lia(\"log\", err, [], false);\n        send.lia(\"eval\", \"LIA: stop\");\n    });\n\n\"LIA: wait\"\n\u003c/script\u003e\n@end\n\n\n@Rextester.eval: @Rextester.__eval(6, ,\"-Wall -std=gnu99 -O2 -o a.out source_file.c\")\n\n@Rextester.eval_params: @Rextester.__eval(6, ,\"@0\")\n\n@Rextester.eval_input: @Rextester.__eval(6,`@input(1)`,\"-Wall -std=gnu99 -O2 -o a.out source_file.c\")\n\n\nscript:   https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.6/processing.min.js\n\n\n@processing\n\u003cscript\u003e\nlet container = document.getElementById('sketch-container-@0');\n\ncontainer.innerHTML = \"\";\n\nlet canvas = document.createElement('canvas');\ncanvas.id = 'sketch-@0';\n\ncontainer.appendChild(canvas);\n\nif(!window[\"processing\"]){\n    window[\"processing\"] = {};\n    window[\"running\"] = null;\n}\n\nif(window[\"running\"]) {\n  window[\"processing\"][window[\"running\"]].exit();\n\n}\n\nlet sketch = Processing.compile(`@input`);\n\nwindow[\"processing\"][\"@0\"] = new Processing(canvas, sketch);\nwindow[\"running\"] = \"@0\";\n\u003c/script\u003e\n\n\u003cdiv id=\"sketch-container-@0\"\u003e\u003c/div\u003e\n\n\u003cscript\u003e\nif(window[\"running\"]) {\n    window[\"processing\"][window[\"running\"]].exit();\n    document.getElementById(\"sketch-container-\"+window[\"running\"]).innerHTML = \"\";\n\n    window[\"running\"] = null;\n}\n\u003c/script\u003e\n@end\n\n\nscript:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\n\nlink: https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\n\n\n@Chartist\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart@0\"\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n  $.getScript(\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\", function(){\n    let x = new Chartist.Line('#chart@0', {@1});\n  });\n\u003c/script\u003e\n\n@end\n\n@red: \u003cb style=\"color: red\"\u003e @0\u003c/b\u003e\n\n--\u003e\n\n# LiaScript: Demo\n\n\n                              {{0-1}}\n\u003e __1.__ Nutzen Sie die oberen Pfeile um im Kurs weiter zugehen.\n\u003e\n\u003e __2.__ Schalten Sie den Ton für die Sprachausgabe ein.\n\n\n                             --{{1}}--\nLiaScript ist eine Erweiterung der Auszeichnungssprache\n[Markdown](https://de.wikipedia.org/wiki/Markdown). Das ursprüngliche Ziel von\nMarkdown war es, die Ausgangsform auch ohne weitere Konvertierung für einen\nMenschen leicht lesbar und damit auch editierbar zu machen.\n\n\n                              {{1-2}}\n```markdown Markdown-Beispiel.md\n# Überschrift\n\nAbsätze werden durch eine Leerzeile voneinander getrennt.\n\n2ter Absatz. *Kursiv*, **fett**, und `Monospace`.\nUngeordnete Listen sehen wie folgt aus:\n\n* dieses\n* jenes\n* und noch weiteres\n\n## Abschnitt: Zitate\n\n\u003e Blockzitate werden\n\u003e folgendermaßen definiert...\n\u003e\n\u003e ... und können auf mehrere Absätze\n\u003e aufgeteilt werden, wenn Sie mögen.\n\n## Abschnitt: Tabellen\n\n| Tabellen      |       Sind       |  Cool |\n| ------------- |:----------------:| -----:|\n| Spalte 3 ist  | rechtsbündig     | 1600€ |\n| Spalte 2 ist  | zentriert        |   12€ |\n| Zebrastreifen | sind ordentlich  |    1€ |\n\n### Unterabschnitte ...\n```\n\n                             --{{2}}--\nLiaScript setzt auf dieser Notation auf, erweitert diese um viele multimediale\nElemente und erlaubt es beliebige JavaScript-Funktionalität einzubinden. Der\nFokus von LiaScript lag bei der einfachen Entwicklung von Online-Kursen für\njedermann. Diese sollten einerseits über einen Screencast-Charakter verfügen,\ngemixt mit dem Stil einer PowerPoint-Präsentation, aber auch interaktive\nElemente einbinden, wie Quizze, Umfragen, Animationen, online Programmierung,\netc. Es sollte einfach um zusätzliche Funktionalität erweiterbar sein und durch\nein integriertes Makro-System auch wiederverwendbare Komponenten kapseln.\n\n\n                               {{2}}\n* Projektseite:\n  https://LiaScript.github.io\n* Dieser Kurs auf:\n  * GitHub --\u003e https://github.com/LiaScript/Demo\n  * LiaScript --\u003e https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/demo/master/README.md#1\n\n\n## Erweiterungen\n\n                             --{{0}}--\nAuf den folgenden Seiten sollen kurz einige Erweiterungen vorgestellt werden.\nFür eine ausführliche Erläuterung zu allen Möglichkeiten sei jedoch auf die\n[LiaScript Dokumentation](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#1)\nauf der [Projekseite](https://liascript.github.io) verwiesen.\n\n![knowledge hit](https://media.giphy.com/media/jCL5JbYPYQz96/giphy.gif)\u003c!--width=\"100%\"--\u003e\n\n\n### Multimedia\n\n                             --{{0}}--\nMarkdown unterstützt von Haus aus zwei Typen von Verweisen, dazu zählen\neinerseits einfache Links auf externe oder interne Seiten, die wie folgt,\ndefiniert werden:\n\n\n                              {{0-1}}\n*******************************************************************************\n\n__Markdown-Code: (Verweis)__\n\n``` markdown\n* Direkter Verweis:\n  https://LiaScript.github.io\n\n* Formatierter Verweis:\n  [Link zu LiaScript](https://LiaScript.github.io)\n```\n\n__Resultat:__\n\n* Direkter Verweis: https://LiaScript.github.io\n* Formatierter Verweis: [Link zu LiaScript](https://LiaScript.github.io)\n\n*******************************************************************************\n\n                             --{{1}}--\nBilder werden wie Verweise behandelt, nur dass hier ein Ausrufezeichen vor den\nformatierten Verweis gestellt werden muss:\n\n                              {{1-2}}\n*******************************************************************************\n\n__Markdown-Code: (Bild)__\n\n``` markdown\n ![Schule im Jahr 2000](https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/France_in_XXI_Century._School.jpg/1024px-France_in_XXI_Century._School.jpg)\u003c!--width=\"100%\"--\u003e\n```\n\n__Resultat:__\n\n![Schule im Jahr 2000](https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/France_in_XXI_Century._School.jpg/1024px-France_in_XXI_Century._School.jpg)\u003c!--\n  width=\"100%\"\n--\u003e\n\n*******************************************************************************\n\n\n                             --{{2}}--\nZum Einfügen von Audio-Elementen in LiaScript muss nur ein Fragezeichen\nvorangestellt werden, welches mit etwas Fantasie auch als stilisiertes Ohr\ninterpretiert werden kann.\n\n                              {{2-3}}\n*******************************************************************************\n\n__LiaScript-Code: (Audio)__\n\n``` markdown\n ?[Joy to the world](http://www.orangefreesounds.com/wp-content/uploads/2018/11/Joy-to-the-world-song.mp3?_=1)\n```\n\n__Resultat:__\n\n?[Joy to the world](http://www.orangefreesounds.com/wp-content/uploads/2018/11/Joy-to-the-world-song.mp3?_=1)\n\n*******************************************************************************\n\n\n                             --{{3}}--\nUnd kombiniert man Bild und Ton, so kann man auch Videos einfügen. Diese beiden\nOptionen sind sonst unter Markdown nicht gegeben. Der Vorteil bei dieser\nDarstellung ist auch, dass die Referenzen mit einem anderen Markdown-Viewer\nimmer noch als Verweise dargestellt werden.\n\n\n                              {{3-4}}\n*******************************************************************************\n\n__LiaScript-Code: (Video)__\n\n``` markdown\n!?[Das eLab-Projekt auf YouTube](https://www.youtube.com/embed/bICfKRyKTwE)\u003c!--\n  width=\"560px\"\n  height=\"315px\"\n--\u003e\n```\n\n__Resultat:__\n\n!?[Das eLab-Projekt auf YouTube](https://www.youtube.com/embed/bICfKRyKTwE)\u003c!--width=\"560px\" height=\"315px\"--\u003e\n\n*******************************************************************************\n\n                             --{{4}}--\nDem aufmerksamen Betrachter wird nicht entfallen sein, dass in manchen\nBeispielen HTML-Kommentare mit zusätzlichen HTML-Annotationen enthalten waren.\nDies ist eine Möglichkeit, jedes Element, sei es Text, Bild, Tabelle oder Video,\nnoch mit weiteren Eigenschaften zu versehen. Ein vorangestellter Kommentar\ndefiniert die Attribute für einen ganzen Block, während ein hinten angestellter\nKommentar nur die Eigenschaften des vorangegangenen Elementes verändert.\n\n\n                               {{4}}\n*******************************************************************************\n\n__LiaScript-Code: (Annotationen)__\n\n``` markdown\n\u003c!--style=\"color: red\"--\u003e\nDieser ganze Absatz ist in Rot gefasst ;-)\u003c!--\nclass=\"animated infinite bounce\"\nstyle=\"animation-delay: 3s;\"\n--\u003e, mit Ausnahme diese Smileys, dass nach drei\nSekunden zu hüpfen beginnt.\n```\n\n__Resultat:__\n\n\u003c!--style=\"color: red\"--\u003e\nDieser ganze Absatz ist in Rot gefasst ;-)\u003c!--\nclass=\"animated infinite bounce\"\nstyle=\"animation-delay: 3s;\"\n--\u003e, mit Ausnahme diese Smileys, dass nach drei\nSekunden zu hüpfen beginnt.\n\n*******************************************************************************\n\n                             --{{5}}--\nDamit lassen sich auch komplexe Animationsabläufe definieren, während der Text\nmit einem anderen Markdown-Viewer noch lesbar bleibt, da Kommentare von diesen\neinfach ignoriert werden.\n\n\n### ASCII-Art 1\n\n                             --{{0}}--\nAus unserer Erfahrung wissen wir, dass Bilder häufig zur Darstellung von\neinfachen Signalverläufen, Trends, Funktionen, also Diagrammen genutzt werden.\nDiese müssen meist aufwendig mit Excel, Gnuplot, Matlab oder anderen Werkzeugen\nerstellt und exportiert werden. LiaScript bietet hierzu auch die Möglichkeit\nDiagramme auch direkt im Text zu kodieren, diese lassen sich leicht anpassen und\nverändern und man muss nicht sein \"Werkzeug\" wechseln.\n\n``` HTML\n                       Der Titel ist optional\n    1.9 |    DotS\n        |                 ***\n      y |               *     *\n      - | r r r r r r r*r r r r*r r r r r r r\n      A |             *         *\n      c |            *           *\n      h | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n      e | *  * *                       * *  *\n        +------------------------------------\n        0              x-Achse              1\n```\n\n\n                             --{{1}}--\nDas konvertierte Ergebnis ist ein grafisch ansehnliches Diagramm, in dem die\nFarben und die Form und Größe der Punkte jeweils durch die ursprünglichen\nBuchstaben kodiert sind.\n\n\n                               {{1}}\n                       Der Titel ist optional\n    1.9 |    DotS\n        |                 ***\n      y |               *     *\n      - | r r r r r r r*r r r r*r r r r r r r\n      A |             *         *\n      c |            *           *\n      h | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n      e | *  * *                       * *  *\n        +------------------------------------\n        0              x-Achse              1\n\n\n### ASCII-Art 2\n\n                             --{{0}}--\nWer möchte, der kann auch noch kompliziertere Sachverhalte, wie zum Beispiel\nGraphen, UML-Diagramme oder Bilder mithilfe von einfachen Textbausteinen\nabbilden.\n\n``` HTML\n                           .---\u003e  F\n  A       B     C   D     /\n  *-------*-----*---*----*-----\u003e  E\n           \\            ^ \\\n            v          /   '---\u003e  G\n             B --\u003e C -'\n```\n\n\u003c!-- style=\"display: block; margin-left: auto; margin-right: auto; max-width: 315px;\" --\u003e\n`````````````````````````````````````\n                           .---\u003e  F\n  A       B     C   D     /\n  *-------*-----*---*----*-----\u003e  E\n           \\            ^ \\\n            v          /   '---\u003e  G\n             B --\u003e C -'\n`````````````````````````````````````\n\n                             --{{1}}--\nUnd dazu auch alle möglichen Unicode-Zeichen nutzen. Da LiaScript international\nist und somit auch chinesische, griechische, arabische oder anderweitige Zeichen\nund Symbole interpretieren kann.\n\n                               {{1}}\n*******************************************************************\n\n```\n  ┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕\n  │ ││  ║ ║║  ║ ║║  │ ││\n  ├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡\n  └─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛\n  ┌───────────────────┐\n  │  ╔═══╗ Some Text  │▒\n  │  ╚═╦═╝ in the box │▒\n  ╞═╤══╩══╤═══════════╡▒\n  │ ├──┬──┤           │▒\n  │ └──┴──┘           │▒\n  └───────────────────┘▒\n   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n```\n\n\u003c!-- style=\"display: block; margin-left: auto; margin-right: auto; max-width: 315px;\" --\u003e\n````````````````````````````````\n  ┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕\n  │ ││  ║ ║║  ║ ║║  │ ││\n  ├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡\n  └─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛\n  ┌───────────────────┐\n  │  ╔═══╗ Some Text  │▒\n  │  ╚═╦═╝ in the box │▒\n  ╞═╤══╩══╤═══════════╡▒\n  │ ├──┬──┤           │▒\n  │ └──┴──┘           │▒\n  └───────────────────┘▒\n   ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n````````````````````````````````\n\n*******************************************************************\n\n\n### Quizze\n\n                             --{{0}}--\nEin Quiz ist eine gute Möglichkeit dem Lernenden kurz noch mal die Möglichkeit\nzu geben, sein Wissen bezüglich eines aktuellen Lernmoduls zu überprüfen.\nLiaScript unterstützt grundsätzlich 4 Quiz-Typen, die durch zusätzliche Elemente\nangepasst werden können:\n\n                              {{0-1}}\n1. Texteingaben\n2. Single-Choice\n3. Multiple-Choice\n4. Freie, mithilfe von JavaScript\n\n\n                             --{{1}}--\nEin Text-Quiz wird durch doppelt eckige Klammern definiert, welches diese\njeweilige Lösung schon enthält. Diese Lösung ist für den Nutzer nicht sichtbar.\nEr kann seine Eingaben mehrfach prüfen und gegebenenfalls die Auflösung\nanfordern:\n\n\n                              {{1-2}}\n*******************************************************************************\n\n``` markdown Text-Quiz 1\n**Welche Markdown-Erweiterung wird hier vorgestellt?**\n\n    [[LiaScript]]\n```\n\n---\n\n**Welche Markdown-Erweiterung wird hier vorgestellt?**\n\n    [[LiaScript]]\n\n*******************************************************************************\n\n\n                             --{{2}}--\nHinweise können in der dargestellten Notation an jeden Quiz-Typ angehängt\nwerden, beziehungsweise kann auch jedes Quiz mit einer erweiterten Erklärung zur\nAuflösung versehen werden. Diese Erklärung muss nur in einen Block\neingeschlossen werden, der durch zwei Reihen \"Sternchen\" definiert ist. Der\nzusätzliche `script`-Block erlaubt es die aktuelle Eingabe gesondert zu\nüberprüfen und damit auf verschiedene Schreibweisen (groß/klein) sowie den\nEinschub von Leerzeichen zu prüfen.\n\n                              {{2-3}}\n*******************************************************************************\n\n``` markdown Text-Quiz 2\n**Welche Markdown-Erweiterung wird hier vorgestellt?**\n\n    [[LiaScript]]\n    [[?]] Es handelt sich dabei um eine neue Sprache...\n    [[?]] Diese wurde speziell zur Erstellung von online-Kursen entwickelt.\n    [[?]] Es kommen ein __L__ und ein __S__ darin vor.\n    \u003cscript\u003e\n      let input = \"@input\".trim().toLowerCase();\n      input == \"liascript\";\n    \u003c/script\u003e\n    **************************\n\n    Diese zusätzliche Auflösung ist optional und kann so __viele__\n    Markdown-Blöcke und Absätze, Bilder, Videos oder Formeln\n    enthalten, wie sie wünschen ...\n\n    $$\n       \\sum_{i=1}^\\infty\\frac{1}{n^2}\n            =\\frac{\\pi^2}{6}\n    $$\n\n    **************************\n```\n\n---\n\n**Welche Markdown-Erweiterung wird hier vorgestellt?**\n\n    [[LiaScript]]\n    [[?]] Es handelt sich dabei um eine neue Sprache...\n    [[?]] Diese wurde speziell zur Erstellung von online-Kursen entwickelt.\n    [[?]] Es kommen ein __L__ und ein __S__ darin vor.\n    \u003cscript\u003e\n      let input = \"@input\".trim().toLowerCase();\n      input == \"liascript\";\n    \u003c/script\u003e\n    **************************\n\n    Diese zusätzliche Auflösung ist optional und kann so __viele__\n    Markdown-Blöcke und Absätze, Bilder, Videos oder Formeln\n    enthalten, wie sie wünschen ...\n\n    $$\n       \\sum_{i=1}^\\infty\\frac{1}{n^2}\n            =\\frac{\\pi^2}{6}\n    $$\n\n    **************************\n\n*******************************************************************************\n\n\n                             --{{3}}--\nEin Single-Choice-Quiz wird durch stilisierte Radio-Buttons dargestellt, wobei\ndas `X` hier die richtige Lösung markiert. Hierbei darf nur eine Zeile ein `X`\nenthalten. Erweiterungen um Hinweise und Auflösungen sind genauso wie bei einem\nText-Quiz möglich.\n\n\n{{3-4}}\n*******************************************************************************\n\n``` markdown Single-Choice-Quiz\n**Welche Antwort trifft zu?**\n\n    [( )] Antwort 1\n    [( )] Antwort 2\n    [(X)] Antwort 3\n    [( )] Antwort 4\n```\n\n---\n\n**Welche Antwort trifft zu?**\n\n    [( )] Antwort 1\n    [( )] Antwort 2\n    [(X)] Antwort 3\n    [( )] Antwort 4\n\n*******************************************************************************\n\n\n                             --{{4}}--\nMehrere Auswahloptionen und damit Multiple-Choice-Fragen können durch eine\nGruppe sogenannter Check-Buttons angegeben werden. Dabei können auch alle\nElemente durch ein `X` markiert sein oder keines.\n\n\n                              {{4-5}}\n*******************************************************************************\n\n``` markdown Multiple-Choice-Quiz\n**Welche Antworten treffen zu?**\n\n    [[ ]] Antwort 1\n    [[X]] Antwort 2\n    [[ ]] Antwort 3\n    [[X]] Antwort 4\n    [[ ]] Antwort 5\n```\n\n---\n\n**Welche Antworten treffen zu?**\n\n    [[ ]] Antwort 1\n    [[X]] Antwort 2\n    [[ ]] Antwort 3\n    [[X]] Antwort 4\n    [[ ]] Antwort 5\n\n*******************************************************************************\n\n\n                             --{{5}}--\nEin generisches Quiz kann mithilfe der folgenden Notation erstellt werden, wobei\nhier das Ergebnis einzig und allein von einer Zufallszahl abhängig ist. Über andere HTML-Elemente können dann auch die Eingaben abgebildet werden.\n\n\n                               {{5}}\n*******************************************************************************\n\n``` markdown Generisches Quiz\n[[!]]\n\u003cscript\u003e\n  // you are free to check anything you want\n  if(Math.random() \u003c 0.2)\n    true;\n  else\n    false;\n\u003c/script\u003e\n```\n\n    [[!]]\n    \u003cscript\u003e\n      // you are free to check anything you want\n      if(Math.random() \u003c 0.2)\n        true;\n      else\n        false;\n    \u003c/script\u003e\n\n*******************************************************************************\n\n\n### Ausgaben\n\n                              --{{0}}--\nIm folgenden Teil soll die Aufteilung eines Abschnittes in mehrere Fragmente\nerläutert werden sowie die Nutzung der Sprachausgabe.\n\n                               {{0-1}}\n![boring](https://media.giphy.com/media/HlqvH9JrahLZ6/giphy.gif)\u003c!-- width=\"100%\" --\u003e\n\n\n                              --{{1}}--\nFalls Sie es noch nicht bemerkt haben, oben in der rechten Ecke befindet sich\nein Knopf, der es erlaubt zwischen den unterschiedlichen Darstellungsmodi zu\nwechseln. Diese Option kommt frei Haus und sie können selber entscheiden, ob sie\nlieber den Erklärtext wie in einer Präsentation hören oder lieber ein Buch\nlesen.\n\n                                {{1}}\n1. Präsentation (mit Text2Speech)\n2. Folien (mit Notizen)\n3. Lehrbuch (ohne Fragmente und Sprachausgabe)\n\n\n#### Fragmente\n\n                              --{{0}}--\nUm Fragmente zu definieren, muss nur die jeweilige Fragment-Nummer in doppelt\ngeschweifte Klammern geschrieben werden und einem Markdown-Block vorangestellt.\nEine zweite Zahl nach einem Minus definiert, bei welchem Punkt das Fragment\nwieder ausgeblendet wird. Innerhalb eines Blocks können auch einzelne Elemente\naufgedeckt werden, dazu muss die doppelt geschweifte Klammer nur ausgepackt\nwerden, wobei die zweiten Klammern das oder die jeweiligen Elemente umschließen,\ndie ein- beziehungsweise ausgeblendet werden sollen. Verschiedenen Blöcken\nkönnen die gleichen Nummern zugewiesen werden oder man umschließt sie mit zwei\nLinien aus Sternchen `*`, ebenso wie es auch im Abschnitt [Quizze](#6) mit der\nAuflösung gemacht wurde.  \n\n``` markdown\n                  {{1}}\nDieser Text erscheint zu{3}{__aller__}erst.\n\n\n{{2-4}} Dieser Block erscheint als zweites\nFragment und verschwindet bei Punkt 4.\n\nIch bin immer da ...\n\n{{4}} Ich komme zuletzt.\n```\n\n                               {{1}}\nDieser Text erscheint zu{3}{__aller__}erst.\n\n\n{{2-4}} Dieser Block erscheint als zweites\nFragment und verschwindet bei Punkt 4.\n\nIch bin immer da ...\n\n{{4}} Ich komme zuletzt.\n\n\n#### Spracheausgabe\n\n                              --{{0}}--\nDie Sprachausgabe erfolgt mithilfe von\n[ResponsiveVoice](http://responsivevoice.org). In initialen Kommentar-Tag kann\ndie Standardstimme definiert werden, diese kann je Abschnitt und Sprachausgabe\nauch geändert werden. Die Kommentarfunktion kann als Erweiterung der\nFragment-Notation interpretiert werden und muss in doppelte Minuszeichen\neingefügt werden. Sozusagen, die Erläuterung zu einem bestimmten Unterpunkt.\nInnerhalb eines Kommentars kann auch die Sprachausgabe geändert werden. In\nAbhängigkeit zum aktuellen Präsentationsmodus wird dieser Text entweder\ngesprochen oder im Dokument dargestellt. Des Weiteren lassen sich so auch\nDialoge zwischen unterschiedlichen Personen realisieren.\n\n``` markdown\n\u003c!--\n..\nnarrator: Deutsch Female\n--\u003e\n\n# Überschrift 1\n\n              --{{1}}--\nDieser Text wird deutsch ausgesprochen.\n\n\n     --{{2 UK English Male}}--\nI should speak with a UK like accent.\n\n     --{{3 Russian Female}}--\nЯ говорю по-русски с женским голосом.\n```\n\n                             --{{1}}--\nDieser Text wird deutsch ausgesprochen.\n\n\n                      --{{2 UK English Male}}--\nI should speak with a UK like accent.\n\n                       --{{3 Russian Female}}--\nЯ говорю по-русски с женским голосом.\n\n\n\n## Eigene Erweiterungen\n\n                             --{{0}}--\nAuf den vorhergehenden Seiten wurden sprachliche Erweiterungen von Markdown\nvorgestellt. Das Internet bietet aber weitaus mehr Möglichkeiten, die für einen\nKurs von Interesse sein könnten. LiaScript erlaubt es, im Gegensatz zu anderen\nMarkdown-Interpretern, auch JavaScript, HTML und CSS auf verschiedenste Art und\nWeise zu integrieren. Außerdem bietet LiaScript eine eigene Makro-Notation um\nwiederkehrende und aufwendige Aufgaben zu automatisieren.\n\n![www](https://media.giphy.com/media/RxR1KghIie2iI/giphy.gif)\u003c!-- width=\"100%\"--\u003e\n\n### JavaScript und HTML\n\n                             --{{0}}--\nWer mit den Möglichkeiten von Markdown nicht zufrieden ist, kann auch HTML,\nJavaScript und CSS Elemente direkt einfügen. Um externe Bibliotheken zu laden,\nmüssen diese im \"Haupt\"-Kommentar des Dokumentes oder des Abschnittes definiert\nsein. Handelt es sich um eine JavaScript-Bibliothek so muss das Schlüsselwort\n`script` verwendet werden und bei einem Style-Sheet das Schlüsselwort `link`.\n\n``` html\n\u003c!--\nscript: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js\n        https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\n\nlink:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\n--\u003e\n```\n\n                             --{{1}}--\nDanach kann überall im Dokument auf die eingefügte Funktionalität mit\nzugegriffen werden. Das nun dargestellte Beispiel nutzt die\nJavaScript-Bibliothek [Chartist](https://gionkunz.github.io/chartist-js/), um\neinen einfachen Graphen zu plotten.\n\n                               {{1}}\n``` html\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart\"\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  let chart = new Chartist.Line('#chart', {\n    labels: [1, 2, 3, 4],\n    series: [[100, 120, 180, 200]]\n  });\n\u003c/script\u003e\n```\n\n                             --{{2}}--\nDer erzeugte Graph sieht dann wie folgt aus ...\n\n                               {{2}}\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n$.getScript(\"https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\", function(){\n  let chart = new Chartist.Line('#chart', {\n    labels: [1, 2, 3, 4],\n    series: [[100, 120, 180, 200]]\n  })});\n\u003c/script\u003e\n\n\n### Makros\n\n\n                             --{{0}}--\nIm Abschnitt [Quizze](#6) wurde bereits das `@input`-Makro genutzt um die\nStellen zu markieren, die durch die Nutzereingaben ersetzt werden sollen. Ein\nMakro beginnt immer mit einem `@`-Symbol und kann im  \"Haupt\"-Kommentar eines\nDokumentes definiert werden. Makros beschreiben einfache Regeln für die\nTextersetzung. Für das einzeilige `@red` Makro gilt, alles was nach dem\nDoppelpunkt folgt definiert den Ersetzungstext. Parameterersetzungen werden\njeweils durch ein `@`-Symbol gefolgt mit einer Nummer definiert.\n\n\n                              {{0-2}}\n``` html\n\u003c!--\n...\n@red: \u003cb style=\"color: red\"\u003e @0\u003c/b\u003e\n...\n--\u003e\n```\n\n                             --{{1}}--\nDiese Erweiterungen können dann beliebig im Dokument eingesetzt werden, wie im\nfolgenden Beispiel dargestellt.\n\n                              {{1-2}}\n*******************************************************************************\n\n``` markdown\n\u003e Dies ist ein Blockzitate mit\n\u003e einem @red(sehr wichtigen)\n\u003e Beispiel...\n```\n\n---\n\n\u003e Dies ist ein Blockzitate mit\n\u003e einem @red(sehr wichtigen)\n\u003e Beispiel...\n\n*******************************************************************************\n\n                             --{{2}}--\nEin Makro kann auch andere Makros aufrufen und komplexere Makros können, wie im\nBeispiel gezeigt, auch als Block definiert werden, welches aus beliebigen HTML-,\nMarkdown- und JavaScript-Elementen besteht. In diesem Fall sollte die Nutzung\nvon Chartist vereinfacht werden, indem einmal die ID für das `div`-Element\nverändert wird, aber auch der zu zeichnende Inhalt als zweiter Parameter\nübergeben wird.\n\n                               {{2}}\n``` html\n\u003c!--\n...\n@Chartist\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart@0\"\u003e\n\u003c/div\u003e\n\u003cscript\u003e\n  let chart = new Chartist.Line('#chart@0', {@1});\n\u003c/script\u003e\n\n@end\n...\n--\u003e\n```\n\n                             --{{3}}--\nAuch dieses Makro kann über die bekannte \"funktionsähnliche\" Notation aufgerufen\nwerden. Da Kommas als Separatoren für die Parameter genutzt werden, müssen hier\nsogenannte back-ticks verwendet werden, um den zweiten Parameter als ganzen\nString zu übergeben. Zugegebenermaßen kann dies für sehr lange Eingaben auch\nsehr schnell unleserlich werden.\n\n\n                              {{3-4}}\n*******************************************************************************\n\n``` markdown\n@Chartist(id1,`labels: [1,2,3], series: [[1,3,1]]`)\n```\n\n---\n\n@Chartist(id1,`labels: [1,2,3], series: [[1,3,1]]`)\n\n*******************************************************************************\n\n                             --{{4}}--\nAus diesem Grund können Makros auch über einen Code-Block aufgerufen werden,\ndazu muss nur im Kopf des Blockes das jeweilige Makro aufgerufen werden. Der\nKörper des Blocks wird dann insgesamt als letzter Parameter an die Textersetzung\nübergeben. Neben der übersichtlicheren Schreibweise werden von allen gängigen\nMarkdown-Viewern diese Elemente zumindest als Code-Block mit Syntax-Highlighting\nrichtig dargestellt und erlaubt zumindest die Interpretation der Parameter.\n\n\n                               {{4}}\n*******************************************************************************\n\n``` markdown\n` ` `json @Chartist(id2)\nlabels: [1, 2, 3, 4, 5, 6, 7],\nseries: [\n  [100, 120, 180, 200, 0, 12, -1],\n  [10, 20, 30, 40, 50, 90, -100]]\n` ` `\n```\n\n---\n\n```json @Chartist(id2)\nlabels: [1, 2, 3, 4, 5, 6, 7],\nseries: [\n  [100, 120, 180, 200, 0, 12, -1],\n  [10, 20, 30, 40, 50, 90, -100]]\n```\n\n*******************************************************************************\n\n\n\n## Programmierung\n\n                             --{{0}}--\nDurch die folgende Syntax können mehrere standard Markdown Code-Blöcke zu einem\nProjekt zusammengefasst werden. Die unterschiedlichen Dateien können mit einem\nNamen versehen werden und lassen sich auf und zu klappen. Das zusätzliche\n`script`-tag am Ende weist diese Blöcke als ausführbaren Code aus und definiert,\nwie mit den Inhalten der einzelnen Blöcke zu verfahren ist.\n\n                              {{0-1}}\n``` markdown\n` ` ` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n` ` `\n` ` ` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n` ` `\n\u003cscript\u003e\n  // insert the JSON dataset into the local variable data\n  let data = @input(1);\n\n  // eval the script that uses this dataset\n  eval(`@input(0)`);\n\u003c/script\u003e\n```\n\n                             --{{1}}--\nDie LiaScript-Interpretation dieser Blöcke sieht dann wie folgt aus. Alle\nDateien sind editierbar und es wird, um Änderungen zu verfolgen, auch ein\neigenes lineares Versions-Management-System genutzt. Probieren Sie es aus,\nverändern Sie den Code und kehren zu früheren Versionen zurück.\n\n                              {{1-2}}\n``` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n```\n``` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n```\n\u003cscript\u003e\n  // insert the JSON dataset into the local variable data\n  let data = @input(1);\n\n  // eval the script that uses this dataset\n  eval(`@input(0)`);\n\u003c/script\u003e\n\n\n                             --{{2}}--\nDa es, wie in Abschnitt [Eigene Erweiterungen](#10) gezeigt, auch möglich ist\nverschiedene JavaScript-Funktionalität und Bibliotheken einzubinden, können auch\nunterschiedliche Programmiersprachen unterstützt werden. Das Beispiel zeigt ein\neinfaches _C_-Programm, dass mithilfe der\n[rextester-API](https://rextester.com/main) kompiliert und ausgeführt werden\nkann. Die etwas komplexere Definition im benötigten `script`-tag wurde hier\nmithilfe des Makros `@Rextester.eval` zur Verfügung gestellt. Auf diese Weise\nkönnen beliebige ausführbare Code-Fragmente in einem Dokument definiert werden.\n\n\n                              {{2-3}}\n``` c source_file.c\n#include \u003cstdio.h\u003e\nint main()\n{\n  int i; // Löschen Sie das Semikolon und\n         // schauen was passiert ...\n\n  for(i=0; i\u003c10; ++i) {\n    printf(\"Hello, World! #% d\\n\", i);\n  }\n  return 0;\n}\n```\n@Rextester.eval\n\n\n                             --{{3}}--\nAuch die Kombination mit anderen Sprachen und Visualisierungen ist möglich, wie\nhier zum Beispiel mit [_Processing_](https://de.wikipedia.org/wiki/Processing):\n\n                               {{3}}\n``` cpp ABSTRACT01js\nint num,cnt,px,py,fadeInterval;\nParticle[] particles;\nboolean initialised=false,doClear=false;\nfloat lastRelease=-1,scMod,fadeAmount;\n\nvoid setup() {\n  size(400,300);\n  background(255);\n  smooth();\n  rectMode(CENTER_DIAMETER);\n  ellipseMode(CENTER_DIAMETER);\n\n  cnt=0;\n  num=150;\n  particles=new Particle[num];\n  for(int i=0; i\u003cnum; i++) particles[i]=new Particle();\n\n  reinit();\n  px=-1;\n  py=-1;\n}\n\nvoid draw() {\n  if(doClear) {\n    background(255);\n    doClear=false;\n  }\n\n  noStroke();\n\n  if(frameCount%fadeInterval==0) {\n    fill(255,255,255, fadeAmount);\n    rect(width/2,height/2, width,height);\n  }  \n\n  updateAuto();\n\n  for(int i=0; i\u003cnum; i++)\n    if(particles[i].age\u003e0) particles[i].update();\n}\n\nvoid reinit() {\n  doClear=true;\n  scMod=random(1,1.4);\n  fadeInterval=(int)random(220,300);\n  fadeAmount=random(30,60);\n//  println(\"fadeInterval \"+fadeInterval+\" scMod \"+nf(scMod,0,3)+\n//    \" fadeAmount \"+nf(fadeAmount,0,3));\n  for(int i=0; i\u003cnum; i++) particles[i].age=-1;\n  initAuto();\n}\n\nvoid mousePressed() {\n  reinit();\n}\n\nAutoMover auto[];\nint autoN;\n\nvoid initAuto() {\n  autoN=(int)random(3,6);\n//  println(\"initAuto \"+autoN);\n  auto=new AutoMover[autoN];\n  for(int i=0; i\u003cautoN; i++) auto[i]=new AutoMover();\n\n}\n\nvoid updateAuto() {\n  for(int i=0; i\u003cautoN; i++) auto[i].update();\n}\n\nclass AutoMover {\n  Vec2D pos,posOld;\n  float dir,dirD,speed,sc,dirCnt;\n  int type,age,ageGoal,interval;\n\n\n  AutoMover() {\n    reinit();\n  }\n\n  void reinit() {\n    ageGoal=(int)random(150,350);\n    if(random(100)\u003e95) ageGoal*=1.25;\n    age=-(int)random(50,150);    \n    pos=new Vec2D(random(width-100)+50,random(height-100)+50);\n\n\n    dir=(int)random(36)*10;\n    type=0;\n    if(random(100)\u003e60) type=1;\n\n    interval=(int)random(2,5);    \n    if(type==1) {\n      interval=1;\n      dir=degrees(atan2(-(pos.y-height/2),pos.x-width/2));\n    }\n\n    dirD=random(1,2);\n    if(random(100)\u003c50) dirD=-dirD;\n    speed=random(3,6);\n\n    sc=random(0.5,1);\n    if(random(100)\u003e90) sc=random(1.2,1.6);\n    dirCnt=random(20,35);\n\n\n    if(type==0) {\n      if(random(100)\u003e95) sc=random(1.5,2.25);\n      else sc=random(0.8,1.2);\n    }\n    sc*=scMod;\n    speed*=sc;\n  }\n\n  void update() {\n    age++;\n    if(age\u003c0) return;\n    else if(age\u003eageGoal) reinit();\n    else {\n      if(type==1) {\n        pos.add(\n          cos(radians(dir))*speed,sin(radians(dir))*speed);\n\n        dir+=dirD;\n        dirD+=random(-0.2,0.2);\n        dirCnt--;\n        if(dirCnt\u003c0) {\n          dirD=random(1,5);\n          if(random(100)\u003c50) dirD=-dirD;\n          dirCnt=random(20,35);\n        }\n      }\n      if(age%interval==0) newParticle();   \n      if(pos.x\u003c-50 || pos.x\u003ewidth+50 ||\n        pos.y\u003c-50 || pos.y\u003eheight+50) reinit();\n    }\n  }\n\n  void newParticle() {\n    int partNum,i;\n\n    if(type==0) dir=int(random(36))*10;\n\n    i=0;\n    while(i\u003cnum) {\n      if(particles[i].age\u003c1) {\n        float offs=random(30,90);\n        if(random(100)\u003e50) offs=-offs;\n        particles[i].init(dir+offs,pos.x,pos.y,sc);\n\n        break;\n      }\n      i++;\n    }\n\n    px=mouseX;\n    py=mouseY;\n  }\n}\n\nclass Particle {\n  Vec2D v,vD;\n  float dir,dirMod,speed,sc;\n  int col,age,stateCnt;\n  int type;\n\n  Particle() {\n    v=new Vec2D(0,0);\n    vD=new Vec2D(0,0);\n    age=0;\n  }\n\n  void init(float _dir,float mx,float my,float _sc) {\n    dir=_dir;\n    sc=_sc;\n\n    float prob=random(100);\n    if(prob\u003c80) age=15+int(random(30));\n    else if(prob\u003c99) age=45+int(random(50));\n    else age=100+int(random(100));\n\n    if(random(100)\u003c80) speed=random(2)+0.5;\n    else speed=random(2)+2;\n\n    if(random(100)\u003c80) dirMod=20;\n    else dirMod=60;\n\n    v.set(mx,my);\n    initMove();\n    dir=_dir;\n    stateCnt=10;\n    if(random(100)\u003e50) col=0;\n    else col=1;\n\n    type=(int)random(30000)%2;\n  }\n\n  void initMove() {\n    if(random(100)\u003e50) dirMod=-dirMod;\n    dir+=dirMod;\n\n    vD.set(speed,0);\n    vD.rotate(radians(dir+90));\n\n    stateCnt=10+int(random(5));\n    if(random(100)\u003e90) stateCnt+=30;\n  }\n\n  void update() {\n    age--;\n\n    if(age\u003e=30) {\n      vD.rotate(radians(1));\n      vD.mult(1.01f);\n    }\n\n    v.add(vD);\n    if(col==0) fill(255-age,0,100,150);\n    else fill(100,200-(age/2),255-age,150);\n\n    if(type==1) {\n      if(col==0) fill(255-age,100,0,150);\n      else fill(255,200-(age/2),0,150);\n    }\n\n    pushMatrix();\n    scale(sc);\n    translate(v.x,v.y);\n    rotate(radians(dir));\n    rect(0,0,1,16);\n    popMatrix();\n\n    if(age==0) {\n      if(random(100)\u003e50) fill(200,0,0,200);\n      else fill(00,200,255,200);\n      float size=2+random(4);\n      if(random(100)\u003e95) size+=5;\n      size*=sc;\n      ellipse(v.x*sc,v.y*sc,size,size);\n    }\n    if(v.x\u003c0 || v.x\u003ewidth || v.y\u003c0 || v.y\u003eheight) age=0;\n\n    if(age\u003c30) {\n      stateCnt--;\n      if(stateCnt==0) {\n        initMove();\n      }\n    }\n   }\n\n}\n\n// General vector class for 2D vectors\nclass Vec2D {\n  float x,y;\n\n  Vec2D(float _x,float _y) {\n    x=_x;\n    y=_y;\n  }\n\n  Vec2D(Vec2D v) {\n    x=v.x;\n    y=v.y;\n  }\n\n  void set(float _x,float _y) {\n    x=_x;\n    y=_y;\n  }\n\n  void set(Vec2D v) {\n    x=v.x;\n    y=v.y;\n  }\n\n  void add(float _x,float _y) {\n    x+=_x;\n    y+=_y;\n  }\n\n  void add(Vec2D v) {\n    x+=v.x;\n    y+=v.y;\n  }\n\n  void sub(float _x,float _y) {\n    x-=_x;\n    y-=_y;\n  }\n\n  void sub(Vec2D v) {\n    x-=v.x;\n    y-=v.y;\n  }\n\n  void mult(float m) {\n    x*=m;\n    y*=m;\n  }\n\n  void div(float m) {\n    x/=m;\n    y/=m;\n  }\n\n  float length() {\n    return sqrt(x*x+y*y);\n  }\n\n  float angle() {\n    return atan2(y,x);\n  }\n\n  void normalise() {\n    float l=length();\n    if(l!=0) {\n      x/=l;\n      y/=l;\n    }\n  }\n\n  Vec2D tangent() {\n    return new Vec2D(-y,x);\n  }\n\n  void rotate(float val) {\n    // Due to float not being precise enough, double is used for the calculations\n    double cosval=Math.cos(val);\n    double sinval=Math.sin(val);\n    double tmpx=x*cosval - y*sinval;\n    double tmpy=x*sinval + y*cosval;\n\n    x=(float)tmpx;\n    y=(float)tmpy;\n  }\n}\n```\n@processing(ABSTRACT01js)\n\n\n                               --{{4}}--\nFür solche JavaScript-Bibliotheken und auch zur Nutzung anderer Funktionalitäten\nbieten wir Templates an, die über ein eigenes Makro-System implementiert wurden.\nDiese können frei übernommen werden und minimieren auch den Bruch beim lesen des\noriginalen Markdown-Dokumentes.\n\n\n## Abschließende Worte\n\n                              --{{0}}--\nLiaScript ist eine reine JavaScript-Implementierung, das heißt, der Kurs wird\nlive im Browser beim Besucher geladen und interpretiert. LiaScript speichert\nauch keine Zustände auf der Webseite oder nutzt Cookies.\n\n                              --{{1}}--\nKurse können überall gehostet werden, es wird nur der Verweis auf das jeweilige\nMarkdown-Dokument benötigt. Hierfür eignet sich GitHub besonders, Kurse können\nhier in mehreren Versionen vorliegen und es können auch private Projekte\nangelegt werden, die nicht von jedem eingesehen werden können.\n\n                              --{{2}}--\nJeder, der einen Kurs erstellt, behält auch all seine Rechte daran und kann\nseine Inhalte nach eigenem Belieben und Ermessen verändern und mit anderen\nMenschen teilen.\n\n\n1. LiaScript ist eine reine clientseitige Implementierung in JavaScript\n   ([Elm](https://elm-lang.org))\n2. Kurse können überall gehostet werden\n   (bevorzugt auf [GitHub](https://github.com))\n3. Jeder behält die Rechte an seinem Kurs\n\n## Werkzeuge\n\n                              --{{0}}--\nDerzeit existieren zwei Plugins für [Atom](https://atom.io), den freien Editor\nvon [GitHub](https://github.com). Diese sollen den Einstieg und die Entwicklung\nvon Kursen in LiaScript vereinfachen.\n\n__[Atom](https://atom.io) Editor-Plugins:__\n\n1. liascript-preview: https://atom.io/packages/liascript-preview\n2. liascript-snippets: https://atom.io/packages/liascript-snippets\n\n![Preview](https://raw.githubusercontent.com/andre-dietrich/liascript-preview/master/preview.gif)\u003c!-- width=\"100%\"--\u003e\n\n## Kontakt\n\n| Name           | eMail                                   |\n|----------------|-----------------------------------------|\n| André Dietrich | andre.dietrich@ovgu.de                  |\n| Sebastian Zug  | sebastian.zug@informatik.tu-freiberg.de |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fdemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliascript%2Fdemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fdemo/lists"}