{"id":23949687,"url":"https://github.com/liaplayground/e-learning-2019","last_synced_at":"2026-06-18T11:31:39.829Z","repository":{"id":86328258,"uuid":"166004286","full_name":"LiaPlayground/e-Learning-2019","owner":"LiaPlayground","description":"Interactive conference paper for the eLearning 2019 conference in Porto ","archived":false,"fork":false,"pushed_at":"2020-08-24T17:45:44.000Z","size":719,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T08:47:19.385Z","etag":null,"topics":["education","liascript","liascript-course","markdown"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/andre-dietrich/e-Learning-2019/master/README.md","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/LiaPlayground.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-16T08:35:58.000Z","updated_at":"2024-07-04T18:00:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2e4551a-8dc9-465b-96e5-a1f4b580cd58","html_url":"https://github.com/LiaPlayground/e-Learning-2019","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/LiaPlayground/e-Learning-2019","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2Fe-Learning-2019","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2Fe-Learning-2019/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2Fe-Learning-2019/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2Fe-Learning-2019/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaPlayground","download_url":"https://codeload.github.com/LiaPlayground/e-Learning-2019/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2Fe-Learning-2019/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34489019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["education","liascript","liascript-course","markdown"],"created_at":"2025-01-06T11:49:42.616Z","updated_at":"2026-06-18T11:31:39.797Z","avatar_url":"https://github.com/LiaPlayground.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nauthor:   André Dietrich, Sebastian Zug\n\nemail:    andre.dietrich@ovgu.de\n\nversion:  0.0.3\n\nlanguage: en\n\nnarrator: US English Female\n\nlogo:     https://cdn.pixabay.com/photo/2017/01/11/17/51/porto-1972450_960_720.jpg\n\ncomment:  This is a the course-demo of a paper that was presented at the\n          e-Learning-2019 conference in Porto. Actually this is the entire paper\n          made interactive.\n\nimport:   https://raw.githubusercontent.com/liaScript/rextester_template/master/README.md\n          https://raw.githubusercontent.com/liaScript/processing_template/master/README.md\n\nscript:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\nlink:     https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\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: A Domain-Specific-Language for Interactive Online Courses\n\n\u003e __1.__ Use the arrow buttons above for navigation\n\u003e\n\u003e __2.__ Turn on your sound for the text output.\n\nSee this project on:\n\n* GitHub: https://github.com/andre-dietrich/e-Learning-2019\n* LiaScript: https://liascript.github.io/course/?https://raw.githubusercontent.com/andre-dietrich/e-Learning-2019/master/README.md#1\n\nLiaScript is an attempt to enable everyone to create free and interactive online\ncourses, without the need of being an experienced programmer. Instead, it aims\nto bring both parties, software- and course-developers, closer together by\nintroducing Open-Source techniques into the Open-courSe development process.\nLiaScript was designed to be compatible to Common-Markdown, but it introduces\nlots of language extensions that deal with quizzes, surveys, ASCII-art,\ntext2speech, animations, online programming, the integration of JavaScript, etc.\nas well as its own macro-system that simplifies tedious and repetitive tasks. It\ncomes along with its own Just-In-Time compiler that runs in the Browser and\ntherefor does not require additional tooling.\n\n## 1. Introduction\n\n                             --{{0}}--\nLiaScript was initially developed within the _\"Industrial eLab-Project [^1]\"_,\nwhich aims to make university hardware and laboratories accessible via the\nInternet. But, we soon realized that only by giving remote access to these\nresources via a fancy website we will run into problems. Our mobile\nArduino-Bots could be used to teach programming, sensing, navigation, dive into\noperating systems or even to apply artificial intelligence. Thus, the real\nproblem was to develop an extendable and adaptable system for creating courses\n(instead of a single Web-App) with different objectives and for students with\ndifferent backgrounds.\n\n                              {{0-1}}\n![robot](pics/robot.jpg)\u003c!-- width=\"100%\" --\u003e\n\n                             --{{1}}--\nSurely, creating an online-course from scratch requires a lot of expertise in\ndifferent web technologies at front-end (e.g., HTML, JavaScript, CSS, testing),\nback-end (e.g., webservers, databases), and different communication standards to\nconnect both sides (e.g., CRUD, WebSockets, AJAX). Hence, it is nearly\nimpossible for a non-programmer to understand all of these issues, before\nstarting to develop his or her own online course.\n\n                              {{1-2}}\n![eLab](pics/eLab.jpg)\u003c!-- width=\"100%\" --\u003e\n\n\n                             --{{2}}--\nScreen- or pod-casts are not a real alternative, since they are expensive and\ntime-consuming in production, not easy to change or translate, and require\nadditional skills in movie cutting. That is why platforms such as\n[Udacity](https://eu.udacity.com) or [Coursea](https://www.coursera.org) invest\na lot of effort and money in high-quality course productions, which is\ncomparable to movie productions, including screenplays, actors, different sets\nand locations. Fortunately, there are so called Learing Management Systems (LMS)\n[(Dobre, 2015)](#19 \"Learning Management Systems for higher education-an overview of available options for Higher Education Organizations\")\nthat try to ease the course development.\n\n\n                             --{{3}}--\nBut how is such a kind of \"simplicity\" achieved? Mostly, by offering integrated\nconfiguration-systems, editors and authoring-tools, that shall enable the user\nto create a course with a lot of buttons and menus, sub-sub-menus, and masks,\nwhose only purpose is to hide the non-intuitive syntax and semantics of a\nlanguage that can be easily interpreted machines, not by humans.\n\n\n                               {{3}}\n\u003e We should instead start to create languages that can be easy understood and\n\u003e applied by humans, in order to describe their intentions, and let the\n\u003e machine rack its CPU in order to find an appropriate translation.\n\n[^1]: Project-site: http://www.elab.ovgu.de\n\n## 2. Adapting Open-Source Development\n\n                             --{{0}}--\nMore or less, all the aforementioned systems have drawbacks in some of the\nfollowing points:\n\n**Requirements from an Open-Source perspective**\n\n1. No support for larger course developer-teams, including those who develop\n   additional functionality and those who provide content\n2. No versioning, in contrast to Wikipedia as a single source of truth, content\n   shall be provided in different \"styles\" for heterogeneous groups of students\n3. No re-usability, parts of one course cannot simply be applied of copied into\n   another project\n4. No support for internationalization/localization (i18n), thus a course cannot\n   simply be translated into another language\n5. No variance in representation\n6. Difficulties in adopting and integrating new web technologies\n\n\n                             --{{1}}--\nPin-points 1 and 2 can be easily solved by applying a purely text-based approach\nfor the course development and version control systems[^3]\n[(Zhou et al. 2018)](#19 \"A collaborative and open solution for large‐scale online learning\").\nAll required resources, including images, videos, data-sheets, JavaScript and\nCSS-styles, and everything else can be easily uploaded and made available via\nthe internet.\n\n[^3]: E.g. [Git](https://git-scm.com) and its web-based hosting services\n      [GitHub](https://github.com) or [GitLab](https://gitlab.com).\n\n### 2.1 Why Markdown?\n\n                             --{{0}}--\nMarkdown [(Wikipedia, 2019)](#19 \"Markdown\") is a simple meta-markup language\nused to structure and annotate simple text documents. Its goal is to keep the\nsource text easy to read and write, that is why it has become more or less the\nstandard documentation-format for Open-Source projects. Originally, it was\ndeveloped to write HTML content efficiently, without having to use a WYSIWYG[^2]\neditor. Directly writing a markup language such as HTML is considered too error\nprone and annoying for the writing process. Of course, we are not the first ones\nthat apply Markdown to ship educational contents, earlier examples are:\n\n* __[GitBook](https://www.gitbook.com)/[Pandoc](https://pandoc.org)__:\n  free Markdown parser that have been widely applied in OER generation\n  [(Ovadia, 2019)](#19 \"Addressing the Technical Challenges of Open Educational Resources\")\n* __[elearn-js](https://github.com/elb-min-uhh/markdown-elearnjs)__:\n  converter for Markdown documents into responsive OER websites, which allows\n  integrating quizzes, interactive images, videos, etc.\n  [(Heinecke, 2016)](#19 \"Produktion digitaler Skripte\")\n* __[Iodide](https://alpha.iodide.io)__:\n  [Jupyter Notebooks](https://jupyter.org) brought to the internet, next to OER\n  it can be interpreted as an example of literate programming\n\n\n                             --{{1}}--\nOf course there are other approaches that have to be mentioned\n[(McKiernan, 2017)](#19 \"Imagining the 'open' university: Sharing scholarship to improve research and education\"),\nbut the commonality of all system is that it's about creating static documents,\nwhich, although it is translated into a more beautiful format, still have to be\nread. To our knowledge, our approach is the only one that deals with the\ncreation of interactive presentations, which are still generated from simple and\nstatic Markdown documents.\n\n[^2]: Stands for: _What You See Is What You Get_\n\n### 2.2 What is LiaScript?\n\n                             --{{0}}--\nIn contrast to other Markdown compilers that generate static HTML, LiaScript is\nan interpreter that downloads and renders the original Markdown document\ndirectly within the browser. That means, if the document is updated, the\nresulting representation will be updated too. Thus, there is no need for\nadditional tooling, compiling steps, or server-side support. LiaScript was\nimplemented from scratch with Elm[^3] for efficiency and speed, which includes\nits own parser and run-time environment.\n\n* Online interpreter, that runs directly within the browser\n* Written in Elm[^3]\n* Support for different representation styles\n  (see [Sec. 2.3.5](#11 \"Output Modes\"))\n* New Markdown language features:\n  _Quizzes_, _Coding_, _Animations_, _Multimedia_, _ASCII-art_, ...\n\n                             --{{1}}--\nOne of our design goals was to support different rendering modes, which covers\nthe traditional textbook mode, next to presentations with animations and spoken\ntext. Furthermore, we extended the language itself with various features, that\nshould transform Markdown from a traditionally static markup approach into\nsomething new, suitable for interactive online courses and more.\n\n\n[^3]: Elm is a functional programming language that compiles to JavaScript,\n      see the project-website: https://elm-lang.org\n\n\n### 2.3 Extensions to Markdown\n\n\u003e __Why does Markdown only support static content?__\n\u003e\n\u003e We came a long way from written scrolls to printed books to electronic books,\n\u003e which can still be printed out or copied by hand! But, actually it is the same\n\u003e old format that has been brought to a new device. Although a computer and the\n\u003e Internet give us much more opportunities for visualization, interaction, an\n\u003e story telling ...\n\n\n#### 2.3.1 Multimedia\n\n                             --{{0}}--\nMarkdown supports 2 types of links (onto internal and external resources), which\ncan be either direct or formatted:\n\n\n                              {{0-1}}\n*******************************************************************************\n\n__Markdown-Code: (Reference)__\n\n``` markdown\n* Direct reference:\n  https://LiaScript.github.io\n\n* Formatted reference:\n  [Link to LiaScript](https://LiaScript.github.io)\n```\n\n__Result:__\n\n* Direct reference:\n  https://LiaScript.github.io\n\n* Formatted reference:\n  [Link to LiaScript](https://LiaScript.github.io)\n\n**********************************************************\n\n                             --{{1}}--\nImages can be included via formatted references that start with an exclamation\nmark:\n\n                              {{1-2}}\n*******************************************************************************\n\n__Markdown-Code: (Image)__\n\n``` markdown\n ![School in the year 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__Result:__\n\n![School in the year 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                             --{{2}}--\nIn contrast to this, it is still complicated to include multimedia content.\nBased on the previous notation, it is possible in LiaScript to mark a link as an\naudio-file by adding a starting question-mark, which can be interpreted as an\near.\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__Result:__\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                             --{{3}}--\nDue to the combination of images and sound, it is possible to insert videos. One\nof the benefits that lays in this notation is that every common Markdown-viewer\nwill still generate a fully working link to these resources.\n\n                              {{3-4}}\n*******************************************************************************\n\n__LiaScript-Code: (Video)__\n\n``` markdown\n!?[The eLab-Project on YouTube](https://www.youtube.com/watch?v=bICfKRyKTwE)\u003c!--\nwidth=\"560px\"\nheight=\"315px\"\n--\u003e\n```\n\n__Result:__\n\n!?[The eLab-Project on YouTube](https://www.youtube.com/watch?v=bICfKRyKTwE)\u003c!--width=\"560px\" height=\"315px\"--\u003e\n\n*******************************************************************************\n\n                             --{{4}}--\nYou might probably have noticed, that some examples contain HTML-comments with\nadditional annotations. This is a cheap way of formatting any kind of elements,\nsuch as text, images, tables, videos, etc. A starting comment defines the format\nof the entire block, whereby a trailing comment changes the format of its\npredecessor only.\n\n\n                               {{4}}\n*******************************************************************************\n\n__LiaScript-Code: (Annotations)__\n\n``` markdown\n\u003c!--style=\"color: red\"--\u003e\nThis whole paragraph will be colored in red ;-)\u003c!--\nclass=\"animated infinite bounce\"\nstyle=\"animation-delay: 3s;\"\n--\u003e, but only this smiley is going to start jumping\nafter 3 seconds.\n```\n\n__Result:__\n\n\u003c!--style=\"color: red\"--\u003e\nThis whole paragraph will be colored in red ;-)\u003c!--\nclass=\"animated infinite bounce\"\nstyle=\"animation-delay: 3s;\"\n--\u003e, but only this smiley is going to start jumping\nafter 3 seconds.\n\n\n*******************************************************************************\n\n                             --{{5}}--\nThis way it is even possible to define complex animation-sequences, while the\ncontent remains readable with another Markdown-viewer, since they tend to ignore\ncomments.\n\n#### 2.3.2 ASCII-Art 1\n\n                             --{{0}}--\nFrom our experience, we know that a lot of produced images represent simple\ndiagrams that represent functions, signal waves, trends, etc. These have to be\ngenerated with Excel, Gnuplot, Matlab or other tools, and to be exported, which\nmakes it also difficult to change them or to translate labels. LiaScript offers\nthe opportunity to draw diagrams directly within the document. Such diagrams can\nbe easily adapted and it is not necessary to switch to another \"tool\".\n\n\n``` HTML\n                         Title and axes are 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      x |            *           *\n      i | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n        | *  * *                       * *  *\n        +------------------------------------\n        0              x-axis               1\n```\n\n                             --{{1}}--\nThis is turned into a nicely rendered diagram, wherein the color and the size of\ndots is defined by the original characters.\n\n\n        \u003c!--style=\"max-width: 720px\"--\u003e\n                         Title and axes are 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      x |            *           *\n      i | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n        | *  * *                       * *  *\n        +------------------------------------\n        0              x-axis               1\n\n\n#### 2.3.3 ASCII-Art 2\n\n                             --{{0}}--\nIf necessary, it is also possible to depict complex issues, such as graphs,\nUML-diagrams, or even pictures with the help of simple characters.\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}}--\nAdditionally, it is also possible to use any kind of Unicode-character. Thus,\nLiaScript has support for Chinese, Greek, Arabic, or any other kind of\ncharacters and symbols.\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#### 2.3.4 Quizzes\n\n                              --{{0}}--\nOne of the language feature we wanted at most, was an easy way to integrate\nquizzes in different flavors and thus, to give learners the possibility to check\ntheir knowledge. Quizzes are always associate with double brackets, such that to\nadd a text quiz, you only have to enter the solution in double braces and the\ninput field, check-, and resolve-buttons are generated automatically.\n\n\n                               {{0-1}}\n*******************************************************************************\n\n``` markdown Text-Quiz\nWhat did the **fish** say when he hit a **concrete wall**?\n\n      [[dam]]\n```\n\nWhat did the **fish** say when he hit a **concrete wall**?\n\n      [[dam]]\n\n*******************************************************************************\n\n                               --{{1}}--\nSome might adapt the question to handle the ambiguity in this case. But let us\ntry out what LiaScript has to offer. It is either possible to add hints, by\nadding question-marks in double brackets and let the user decide if he needs\nhelp, by clicking onto the associated button in the rendered course. The\noptional `script`-tag allows to check the input, in this case to trim it and to\ntransform it lower-case and finally to compare it with different possible\nsolution. Therefor the `@input`-macro gets replaced by the current user input.\nThe trailing Markdown-blocks surrounded by two lines of stars show a more\ndetailed explanation, which appears either if the user input was correct or if\nthe user clicked onto the resolve button.\n\n                                {{1-2}}\n*******************************************************************************\n\n``` markdown Text-Quiz #2\nWhat did the **fish** say when he hit a **concrete wall**?\n\n[[dam]]\n[[?]]   Do not take this question serious.\n[[?]]   It is actually a joke in lower-case.\n[[?]]   Fishes cannot realy speak.\n\u003cscript\u003e\n  let input = \"@input\".trim().toLowerCase();\n  input == \"damn\" || input == \"dam\";\n\u003c/script\u003e\n******************************************************\n\nA __dam__ is a barrier obstructing flowing water and\n__damn__ usually refers to damnation, a condemnation,\nusually by a god.\n\n$$\n   \\sum_{i=1}^\\infty\\frac{1}{n^2}\n        =\\frac{\\pi^2}{6}\n$$\n\n******************************************************\n```\n\nWhat did the **fish** say when he hit a **concrete wall**?\n\n    [[dam]]\n    [[?]]   Do not take this question serious.\n    [[?]]   It is actually a joke in lower-case.\n    [[?]]   Fishes cannot realy speak.\n    \u003cscript\u003e\n      let input = \"@input\".trim().toLowerCase();\n      input == \"damn\" || input == \"dam\";\n    \u003c/script\u003e\n    ******************************************************\n\n    A __dam__ is a barrier obstructing flowing water and\n    __damn__ usually refers to damnation, a condemnation,\n    usually by a god.\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}}--\nA single-choice quiz is defined by stylized radio buttons, where the `X` marks\nthe right solution and only one line is allowed to contain the `X` contain.\nExtensions with hints, solutions, or JavaScript checks can also be applied.\n\n\n                                {{3-4}}\n*******************************************************************************\n\n``` markdown Single-Choice-Quiz\n**What is the only correct option?**\n\n[( )] Option 1\n[( )] Option 2\n[(X)] Option 3\n[( )] Option 4\n```\n\n---\n\n**What is the only correct option?**\n\n[( )] Option 1\n[( )] Option 2\n[(X)] Option 3\n[( )] Option 4\n\n*******************************************************************************\n\n                               --{{3}}--\nHow would you encode a multiple-choice quiz with a typewriter, probably\nsimilarly as we did it. It looks like a list of simple check-buttons that\ndefine the solution. You can add as much rows/options and of course add also\nhints, scripts, or an explanation...\n\n\n                                {{2-3}}\n*******************************************************************************\n\n``` markdown Multiple-Choice-Quiz\nJust add as many points as you wish:\n\n    [[X]] Only the **X** marks the correct point.\n    [[ ]] Empty ones are wrong.\n    [[X]] ...\n```\n\nJust add as many points as you wish:\n\n    [[X]] Only the **X** marks the correct point.\n    [[ ]] Empty ones are wrong.\n    [[X]] ...\n\n*******************************************************************************\n\n                               --{{5}}--\nA generic quiz can be defined with the help of an exclamation-mark in double\nbrackets and a `script`-tag. In this case a random-number is used to generate\nthe outcome. Additional HTML-elements might be required to define different\ninput possibilities.\n\n\n                                 {{5}}\n*******************************************************************************\n\n``` markdown Generic-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#### 2.3.5 Output Modes\n\n                               --{{0}}--\nIn the following two parts are intended to explain, how a section can be divided\ninto several fragments and how speech output can be generated.\n\n\n                                {{0-1}}\n![boring](https://media.giphy.com/media/HlqvH9JrahLZ6/giphy.gif)\u003c!-- width=\"100%\" --\u003e\n\n                               --{{1}}--\nIf you are using the online rendered version of this course at LiaScript\nwebsite, then you will probably have noticed that there is a button in the upper\nright corner. It allows switching between three different display modes. The\nuser can decide, if he or she rather wants to listen to the explanatory text as\nin a presentation or to read it like a book.\n\n                                 {{1}}\n1. Presentation (with voice output)\n2. Slides (with notes ...)\n3. Textbook (without fragmentation and voice output)\n\n\n##### 2.3.5.1 Fragmentation\n\n                               --{{0}}--\nDefining fragments and revealing them step by step is quite simple, only a\nnumber in double braces has to be put in front of a Markdown-block. Fragments\nwith only one number will sustain until the end of a slide. A point of\ndisappearance can be defined by putting a minus and a second number into double\nbraces. Inline fragments can be defined by putting the fragment number and the\nelements to appear into successive braces. And it is also possible to attach\ndifferent blocks to the same fragment number, either by attaching a number to\nevery block or by putting them into a body of stars, as it was done with the\nsolution in [Sec. 2.3.4](#10 \"Quizzes\").\n\n``` markdown\n                  {{1}}\nThis text will appear at {3}{__inline is also possible__}first.\n\n\n{{2-4}} This block will appear afterwards and\ndisappear at step number 4.\n\nI am here to the end of slide ...\n\n{{4}} I come at last.\n```\n\n                  {{1}}\nThis text will appear at {3}{__inline is also possible__}first.\n\n\n{{2-4}} This block will appear afterwards and\ndisappear at step number 4.\n\nI am here to the end of slide ...\n\n{{4}} I come at last.\n\n\n##### 2.3.5.2 Voice Output\n\n                               --{{0}}--\nVoice output is implemented with the help of\n[ResponsiveVoice](http://responsivevoice.org). Within an initial `comment`-tag\nat the beginning of the document, it is possible to define the default voice for\na course. This voice can be changed at every section as well as within every\nvoice comment itself. Such comments are treated as extended fragments, which are\nused to explain certain fragments in more detail. Therefor, they are defined\nsimilar to block-fragments surrounded by minuses. Depending on the presentation\nmode, these texts are either displayed within the slide or read out loud. This\nway it is also possible to implement a dialog between different persons.\n\n\n``` markdown\n\u003c!--\n..\nnarrator: US English Female\n--\u003e\n\n# Title 1\n\n              --{{1}}--\nThis text is spoken by a female.\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}}--\nThis text is spoken by a female.\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### 2.4 Extending LiaScript\n\n                               --{{0}}--\nIn the previous sections we had presented syntactic extensions to Markdown. But\nthe Internet is full libraries and possibilities that a might be necessary for a\nparticular course or topic. In contrast to many other Markdown-interpreters\nLiaScript allows integrating JavaScript, HTML, and CSS directly within the\ndocument. Additionally, it has support for a macro-notation that allows\nautomating and thus simplify repetitive and tedious tasks.\n\n![www](https://media.giphy.com/media/RxR1KghIie2iI/giphy.gif)\u003c!-- width=\"100%\"--\u003e\n\n#### 2.4.1 ... with JavaScript and HTML\n\n                               --{{0}}--\nIt is possible use HTML everywhere and if you want to make use of a certain\nJavaScript library or CSS-file, their URLs have to be included in the main\ncomment-tag at first. Using the keyword `script` followed by a colon and a URL\nor multiple URLs, JavaScript can be integrated and similarly by using the\nkeyword `link` style-sheets can be loaded.\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}}--\nAfterwards it is possible everywhere to access the new functionality. The\nfollowing example depicts, how the JavaScript library\n[Chartist](https://gionkunz.github.io/chartist-js/) is used to plot a certain\ngraph.\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}}--\nAnd this is the resulting graph rendered by Chartist ...\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#### 2.4.2 ... with Macros\n\n\n                               --{{0}}--\nIn [Sec. 2.3.4](#10 \"Quizzes\"), the `@input` macro has already been used to mark\nthe replacement for the user input. A macro always starts with an `@` symbol and\ncan be defined in the \"main\" comment of a document. Macros describe simple rules\nfor text replacement. For the one-line `@red` macro, everything following the\ncolon defines the replacement text. Parameter substitutions are defined by a `@`\nsymbol followed by a number.\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}}--\nThese extensions can then be used arbitrarily in the document, as shown in the\nfollowing example.\n\n                                {{1-2}}\n*******************************************************************************\n\n``` markdown\n\u003e This is a block-citation contains\n\u003e a @red(very important) example...\n```\n\n---\n\n\u003e This is a block-citation contains\n\u003e a @red(very important) example...\n\n*******************************************************************************\n\n                               --{{2}}--\nA macro can also call other macros, and more complex macros can be defined as a\nblock consisting of multiple HTML, Markdown, or JavaScript elements. In this\nexample the use of Chartist should be simplified by changing the ID for the\n`div` element and the content to be drawn is passed as the second parameter.\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}}--\nThis macro can also be called via a \"function-like\" notation. Since commas are\nused as separators for the parameters, back-ticks must be used here to pass the\nsecond parameter as an entire string. Admittedly, for very long entries, this\ncan quickly become unreadable.\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}}--\nFor this reason, macros can also be called within a code-block, therefor only\nthe respective macro must be called in the head of the block. The body of the\nblock is then passed as a single parameter. This makes it easier to define\ncomplex macros and additionally, all popular Markdown-viewers should at least\ndisplay this kind of inputs in a nicely rendered code-block with syntax\nhighlighting, which enables the interpretation of data.\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### 2.4 Executable Code\n\n                               --{{0}}--\nThe following syntax can be used to combine several Markdown code-blocks into\none project. To the different files titles can be associated, and they can be\nopened and closed. The additional `script` tag at the end identifies these\nblocks as executable code and defines how to handle the contents of each block.\nIn this case the `@input` macro is called with a parameter, which defines which\ncode-block gets substituted at this position.\n\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}}--\nThe LiaScript interpretation of these blocks then looks like this. All files are\neditable and a linear version management system is used to track changes. Try\nit, change the code and go back to earlier versions.\n\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}}--\nAs shown in [Sec. 2.3](#13 \"Extending LiaScript\"), it is also possible to\nintegrate different JavaScript functionalities and libraries, so that also\ndifferent programming languages can be supported. The example below shows a\nsimple _C_ program that can be compiled and executed using the\n[rextester API](https://rextester.com/main). The more complex definition of the\nassociated `script`-tag was provided using the `@Rextester.eval` macro. Only by\nattaching such a macro, any code block can be turned into an executable one.\n\n\n                                {{2-3}}\n``` c source_file.c\n#include \u003cstdio.h\u003e\nint main()\n{\n  int i; // Try to delete the semicolon\n         // to see what happens next...\n\n  for(i=0; i\u003c10; ++i) {\n    printf(\"Hello, World! #% d\\n\", i);\n  }\n  return 0;\n}\n```\n@Rextester.C(true)\n\n\n                               --{{3}}--\nThe combination with other languages and visualizations (using HTML and\nJavaScript) is also possible, see the interactive example for the programming\nlanguage [_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  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    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    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.eval\n\n\n                                --{{4}}--\nFor such JavaScript libraries and also for the use of other functionalities, we\noffer templates that have been implemented via our macro system[^4]. These\ncan be used freely and furthermore it also minimizes the breaks when reading the\noriginal Markdown document.\n\n[^4]: List of LiaScript templates:\n      https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/templates/master/README.md#1\n\n## 3. Conclusion\n\n                                --{{0}}--\nLooking back onto [Sec. 2](#3 \"Adapting Open-Source Development\"), we did not\ndiscuss points 3 to 6 so far. LiaScript was build around the idea of\ncourse-development as Open-Source projects.\n\n                                --{{1}}--\nThus, anything from one course can be used in another course, either by linking\ndirectly onto a slide or by simply copy and pasting the required parts\n(__req 3__). Furthermore, we offer a growing number of templates, which are\nfounded on our macro-system, that ease the usage and integration of new and\ncomplex web technologies (__req 6__).\n\n                                --{{2}}--\nLiaScript currently supports three different styles of rendering modes (see\n[Sec. 2.3.5](#11 \"Output Modes\")), allowing every user to choose his/her\npreferred type (__req 5__). Concerning the preferred course language,\ntranslating a single text-document is much easier than translating a whole\nsoftware-project or a YouTube-video or podcast and LiaScript offers some options\nthat allow to host different language versions of one course at the same project\n(__req 4__).\n\n\n                                  {{1}}\n* (3.) Reusability --\u003e anything can simply be copied into any course\n* (6.) Integrating new web technologies --\u003e via a macro-system and templates\n\n\n                                  {{2}}\n* (5.) Variance in representation -\u003e three different modes\n* (4.) Internationalization/localization (i18n) --\u003e supported by specific header\n       tags\n\n## References\n\nDobre, Iuliana. (2015).\n_Learning Management Systems for higher education-an overview of available options for Higher Education Organizations._\nIn: Procedia-Social and Behavioral Sciences 180, pp. 313-320.\n\nHeinecke, Michael. (2016).\n_Production digitaler Skripte._\n[online] Available at: http://www.sumo.uni-hamburg.de/DigitaleSkripte/\nURL [Accessed Date 26 Mar. 2019].\n\nMcKiernan, Erin C. (2017).\n_Imagining the \"open\" university: Sharing scholarship to improve research and education._\nIn: PLoS biology, 15.10.\n\nOvadia, Steven. (2019).\n_Addressing the Technical Challenges of Open Educational Resources._\nIn: Portal - Libraries and the Academy, 19.1, pp. 79-93.\n\nWikipedia contributors. (2019).\n_Markdown._\n[online] Available at:\nhttps://en.wikipedia.org/wiki/Markdown\nURL [Accessed Date 26 Mar. 2019].\n\nZhou, Qingguo, et al. (2018).\n_A collaborative and open solution for large‐scale online learning._\nIn: Computer Applications in Engineering Education, 26.6, pp. 2266-2281.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliaplayground%2Fe-learning-2019","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliaplayground%2Fe-learning-2019","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliaplayground%2Fe-learning-2019/lists"}