{"id":18597852,"url":"https://github.com/liascript/docs","last_synced_at":"2025-04-10T17:31:24.461Z","repository":{"id":37811034,"uuid":"123891927","full_name":"LiaScript/docs","owner":"LiaScript","description":"LiaScript documentation course","archived":false,"fork":false,"pushed_at":"2024-10-21T17:27:54.000Z","size":29532,"stargazers_count":16,"open_issues_count":0,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-22T07:30:52.117Z","etag":null,"topics":["documentation","education","liascript","liascript-course","markdown","oer"],"latest_commit_sha":null,"homepage":"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md","language":"HTML","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":"citation.md","codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-05T08:55:52.000Z","updated_at":"2024-10-21T17:28:04.000Z","dependencies_parsed_at":"2024-10-21T23:29:45.548Z","dependency_job_id":null,"html_url":"https://github.com/LiaScript/docs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaScript%2Fdocs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaScript","download_url":"https://codeload.github.com/LiaScript/docs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223442438,"owners_count":17145783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["documentation","education","liascript","liascript-course","markdown","oer"],"created_at":"2024-11-07T01:29:38.331Z","updated_at":"2025-04-10T17:31:24.425Z","avatar_url":"https://github.com/LiaScript.png","language":"HTML","readme":"\u003c!--\n\nauthor:   André Dietrich\nemail:    LiaScript@web.de\ndate:     06/03/2025\nversion:  30.0.1\nlanguage: en\nnarrator: UK English Female\n\nrepository: https://github.com/LiaScript/docs\n\nlogo:     img/logo.png\n\ncomment:  This document shall provide an entire compendium and course on the\n          development of Open-courSes with [LiaScript](https://LiaScript.github.io).\n          As the language and the systems grows, also this document will be updated.\n          Feel free to fork or copy it, translations are very welcome...\n\nscript:   https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js\n          https://felixhao28.github.io/JSCPP/dist/JSCPP.es5.min.js\n\nlink:     https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css\n\nlink:     https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\n\nimport:   https://raw.githubusercontent.com/liaTemplates/ABCjs/main/README.md\n\nlink:     https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs\n          https://fonts.googleapis.com/css2?family=Noto+Sans+Ogham\n\nfont:     Noto Sans Egyptian Hieroglyphs, Noto Sans Ogham\n--\u003e\n\n\n# LiaScript\n\n\n\u003e To see this document as an interactive LiaScript rendered version, click on the\n\u003e following link/badge:\n\u003e\n\u003e [![LiaScript](https://raw.githubusercontent.com/LiaScript/LiaScript/master/badges/course.svg)](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md)\n\u003e\n\u003e If you need help, feel free to ask us any questions in the chat:\n\u003e\n\u003e [![Gitter](https://badges.gitter.im/LiaScript/community.svg)](https://gitter.im/LiaScript/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n\n\n                            --{{0}}--\nWith LiaScript, we tried to implement an extended\n[Markdown](https://en.wikipedia.org/wiki/Markdown) format that should enable\neveryone to create, share, adapt, translate or correct online courses without\nthe need of being a web-developer. We believe that a language-based approach,\ninstead of a tooling-centered one, provides more flexibility, freedom of\ncreativity, and sustainability. Therefore we tried to develop a simplistic syntax\nthat extends the static Markdown with quizzes, animations, spoken text,\nautomated visualization [ASCII-art](https://en.wikipedia.org/wiki/ASCII_art) and\nmuch more. Everything has been woven around Markdown, so that the content can\nstill be read and interpreted with any kind of editor or Markdown-interpreter.\n\n\n**What is LiaScript?**\n\n* a Markdown dialect for interactive courses and data-driven publishing,\n* everything is implemented in Elm/JavaScript and runs directly within the\n  browser (online),\n* the interpreter itself is also a reader, which allows for storing documents as\n  well as the progress,\n* courses can also be taken offline, since the interpreter is also a progressive\n  web app (PWA), that allows to store documents and progress directly within\n  the browser (locally),\n* everything is private, we do not store any data about the courses nor the\n  users and their progress\n\n\n                            --{{1}}--\nThere are a couple of problems that we currently see in the creation of\n[Open educational resources (OER)](https://en.wikipedia.org/wiki/Open_educational_resources).\nOne of them is isolation, that means people, who want to create content, are\nseldom connected via the applied technologies, instead, they are separated by\nplatforms, authoring tools and used core technologies (programming languages).\nFurthermore, it is not possible to simply grab an educational website/project\nand to adapt its content for another audience. Additionally, it seems to be\nnearly impossible for people without a technical background to simply set up a\nsmall course. Thus, they stuck with Word, PowerPoint, and PDF, since they\nprovide a simple continuation of the static formats people have used before the\ncomputer-era.\n\"_If I want to publish content for the computer, I want my audience to dive in, experiment, simulate, play with the content... but not only read._\"\n\n                              {{1}}\n********************************************************************************\n\n**Goals**\n\n* Simplicity: with a human-centered markup-language, anyone should be enabled to\n  create and modify content.\n* Interactive: the browser is the next operating systems and although content\n  with LiaScript is developed within a \"static\" markup-language it should not be\n  presented that way.\n* Extendability: everything that is not part of LiaScript shall be embeddable\n  and importable.\n* Durability: platforms go down, the development of proprietary software/formats\n  is discontinued, but LiaScript is not hosted on one platform (it can be\n  hosted everywhere) and even without the LiaScript interpreter the content is\n  still readable and interpretable with every editor; you could even print or\n  engrave it on stone or clay. Furthermore, if you use some kind of versioning\n  system (e.g. [git](https://en.wikipedia.org/wiki/Git)) you can refer to any\n  previous version of your course.\n\n********************************************************************************\n\n                           --{{2}}--\nImagine a world where everyone would have the same access to high quality\neducational content for free. Imagine all kind of schoolbooks, technical or\nscientific literature could become open-courSe projects and more interactive,\nwith collaborating teachers and students. Everything that is required is a\nsimple text-editor and a web-browser.\n\n                             {{2}}\n![OER logo](https://upload.wikimedia.org/wikipedia/commons/2/20/Global_Open_Educational_Resources_Logo.svg)\n\n\n## Tools\n\n                           --{{0}}--\nAs already mentioned all you need to work with LiaScript is an text-editor, but\nit can be useful to apply one of the following tools. At least we apply them to\nsee the result of a change within the course document immediately. You will see,\nthat the development of online-courses will speed up, especially if there is no\nneed for memorizing complex point and click sequences.\n\n\u003e \"_Let the editor be your canvas and the keyboard your brush._\"\n\n### Editing\n\n\n                           --{{0}}--\nThere are currently 2 plugins for the [Atom Editor](https://atom.io) and\n[Visual-Studio-Code](https://code.visualstudio.com/Download) available, which\nare intended to ease and simplify the development of online courses with\nLiaScript. Additionally you can use the LiveEditor, an entirely browser based application.\n\n![Atom with liascript-plugins](https://raw.githubusercontent.com/andre-dietrich/liascript-preview/master/preview.gif \"Screencast of the Atom-editor with the liascript-preview and liascript-snippets installed.\")\n\n0. [LiveEditor](https://liascript.github.io/LiveEditor): Fully functional online editor, that looks like CodiMD, but is entirely browser based. With support for uploading images and videos and collaborative editing.\n\n1. [Atom](https://atom.io): This is the free and open and official\n   [GitHub](https://github.com) editor, with lots of plugins for various use\n   cases.\n\n   1. [liascript-preview](https://github.com/andre-dietrich/liascript-preview):\n      Is a tiny previewer that, if it was toggled ( `Alt+L` ), updates the view\n      on your course each time you save your document.\n   2. [liascript-snippets](https://github.com/andre-dietrich/liascript-snippets):\n      If you start typing `lia` in your Markdown document you switch on a fuzzy\n      search, that contains a lot of LiaScript help, examples, and snippets.\n\n   Detailed installation instructions can be found [here](https://liascript.github.io/blog/install-atom-with-liascript/).\n\n2. [Visual-Studio-Code](https://code.visualstudio.com/Download): This is\n   Microsoft's free popular editor with various plugins and extensions.\n\n   1. [liascript-preview](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview):\n      Is a tiny previewer that, if it was toggled ( `Alt+L` ), updates the view\n      on your course each time you save your document.\n   2. [liascript-snippets](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-snippets):\n      If you start typing `lia` in your Markdown document you switch on a fuzzy\n      search, that contains a lot of LiaScript help, examples, and snippets.\n\n   Detailed installation instructions can be found [here](https://liascript.github.io/blog/install-visual-studio-code-with-liascript/).\n\n3. [Visual-Studio-Web](https://github.dev):\n\n   !?[GitHub web-based Editor](https://www.youtube.com/watch?v=-VBolTxLSeU)\n\n   Using the GitHub builtin Web editor, you can install the following extension to preview your course while editing:\n\n   [liascript-preview-web](https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview-web)\n\n\n                             {{1}}\n********************************************************************************\n\n**LiaScript-DevServer:**\n\n                           --{{1}}--\nIf you are used to another editor, you can also start a LiaScript development\nserver locally. It works like the plugin for Atom and updates your course within\nyour browser on every save, but this can also be used to monitor multiple\nprojects. And you can also use it for testing purposes, as if you would deploy\nyour projects.\n\n![liascript-development-server](https://raw.githubusercontent.com/liascript/liascript-devserver/main/pics/navigation.gif \"Screencast of the liascript-development-server while navigating through a folder-structure.\")\n\nGet the project from:\n\n* npmjs: https://www.npmjs.com/package/@liascript/devserver\n* GitHub: https://github.com/LiaScript/LiaScript-DevServer\n\n********************************************************************************\n\n\n                             {{2}}\n********************************************************************************\n\n**CodiLIA:**\n\n                           --{{2}}--\nIf you prefer to work with multiple authors simultaneously, then you should give\n[CodiLIA](https://github.com/liascript/codilia) a try. It is a fork of the\ncollaborative editor\n[CodiMD/HedgeDoc](https://github.com/hedgedoc/hedgedoc/tree/master), but instead\nof a Markdown preview, you will have a LiaScript preview, and you can\nimmediately publish your courses.\n\nProject: https://github.com/liascript/codilia\n\n!?[CodiLIA deploy to Heroku](https://www.youtube.com/watch?v=AERiykLvcoQ \"**Movie:** A HowTo deploy CodiLIA server to Heroku for free.\")\n\n********************************************************************************\n\n### Projects\n\n                           --{{0}}--\nThe easiest way of importing a LiaScript into another website or\n[Learning Management System (LMS)](https://en.wikipedia.org/wiki/Learning_management_system)\nsuch as\n[Moodle](https://en.wikipedia.org/wiki/Moodle),\n[ILIAS](https://en.wikipedia.org/wiki/ILIAS), or\n[OPAL](https://de.wikipedia.org/wiki/OPAL_%28Lernplattform%29), is via importing\nan external website or if possible via an\n[`iframe`](https://en.wikipedia.org/wiki/HTML_element#Frames).\n\n!?[LiaScript embed into OPAL](https://www.youtube.com/watch?v=c97m2guiAeA \"Movie: Screencast of a LiaScript course that is hosted via CodiLIA and imported as an external resource into OPAL.\")\n\n\n                             {{1}}\n********************************************************************************\n\n**LiaScript-Exporter:**\n\n                           --{{1}}--\nHowever, there might be cases where you want to store the progress within the\nLMS. We therefore have developed an experimental exporter, which allows to bundle\nyour entire project as an\n[SCORM](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model)\ncompliant zip-file that can be imported into most common LMS. Other formats than\nSCORM can be added too, simply write us a mail or create an issue, if you\nrequire another one.\n\n* npmjs: https://www.npmjs.com/package/@liascript/exporter\n* GitHub: https://github.com/liascript/liascript-exporter\n\n********************************************************************************\n\n\n                             {{2}}\n********************************************************************************\n\n**Preview-Lia:**\n\n                           --{{2}}--\nIf you want to refer to your own courses or to foreign ones on your personal\nwebsite or blog, you can make use of our \"preview web component\". This creates\npreview cards, which are updated at client-side, so that there is no need to\nmanually update all information whenever there is a change in the course. Simply\nadd the `script` tag as depicted in the code-snippet and link to your courses\nvia the tag `preview-lia`.\n\n``` html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"text/javascript\" src=\"https://liascript.github.io/course/preview-lia.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n    \u003cpreview-lia src=\"https://raw.githubusercontent.com/liaScript/docs/master/README.md\"\u003e\n    \u003c/preview-lia\u003e\n\n    \u003cpreview-lia src=\"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md\"\u003e\n    \u003c/preview-lia\u003e\n\n    ...\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e For more information visit the blog entry:\n\u003e [Markdown just got a new preview tag](https://liascript.github.io/blog/markdown-just-got-a-new-preview-tag)\n\u003e\n\u003e _However, you can also use this to refer to your personal GitHub projects._\n\n********************************************************************************\n\n\n                           --{{3}}--\nLiaScript was originally developed for supporting programming courses for\nembedded systems. You can see an example of the previous eLab remote laboratory\ninstallation.\n\n                             {{3}}\n!?[eLab demonstrator](https://www.youtube.com/watch?v=bICfKRyKTwE \"**Movie:** A review on the historical eLab system, the predecessor to LiaScript.\")\n\n                           --{{4}}--\nNow it is the opposite, our main focus lays in the development of the Markup\nlanguage, but parts of the old systems can still be used. Especially if you want\nto teach programming in (_Java_, _C_, _C++_, _C#_, _Mono_, _Go_ and _Python_).\nThe CodeRunner is an open-source project that enables remote compiling and\nexecution of code. We apply it to teach procedural and object-oriented\nprogramming. You can either host your own server or use our free herokuapp:\n\n       {{4}}\n\u003e **CodeRunner:**\n\u003e\n\u003e * GitHub: https://github.com/liascript/CodeRunner\n\u003e\n\u003e * Try the interactive LiaScript version at:\n\u003e\n\u003e   https://liascript.github.io/course/?https://github.com/liascript/CodeRunner\n\u003e\n\u003e * Or if you want to import this functionality into your course, then add the\n\u003e   following statement into the main header of your LiaScript course:\n\u003e\n\u003e   `import: https://raw.githubusercontent.com/LiaScript/CodeRunner/master/README.md`\n\n\n### Publishing\n\n                           --{{0}}--\nBy now you should have a basic idea of what you can do with LiaScript, but\nprobably not how you can publish your courses. The best way is actually to use\n[GitHub](https://github.com), this way no prior versions of your course get\nlost, and you give others (you can even invite them) the opportunity to\ncontribute to your project.\n\n                           --{{1}}--\nNo further hosting is required, no further compilation step, the JavaScript\ninterpreter of LiaScript does everything else directly within the browser at\nclient-side.\n\n                           --{{2}}--\nAs you can see from the _example_, it is also possible to refer to a specific\nslide. You only have to add a `#` with the number of the slide, or you can add\nthe name of the specific slide as well.\n\n                           --{{3}}--\nYou can also add additional tags to your project to make it discoverable. We\ncurrently use three distinct categories: `liascript` to mark it to be related to\nthe projects, while the others `liascript-course` and `liascript-template` are\nused to distinguish the projects into courses or extension, which can be added\nto courses.\n\n                           --{{4}}--\nThe same way you can also refer to courses that you have put into your\n[DropBox](https://en.wikipedia.org/wiki/Dropbox_%28service%29),\n[ownCloud](https://en.wikipedia.org/wiki/OwnCloud),\n[NextCloud](https://en.wikipedia.org/wiki/Nextcloud), or if you have access to\nsome old-fashioned web-space then you can also store all of your files there. You\nonly have to make them publicly available and to refer to the raw or in other\nwords, the text document. All other sources are loaded relative to this URL.\n\n0. Create a free account at https://github.com\n1. Refer to your projects as via a URL parameter:\n\n   `https://LiaScript.github.io/course/?YOUR_RAW_COURSE_URL.md`\n\n2. Example with reference to a specific slide:\n\n   https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#5\n\n3. Make your document discoverable by adding the tags `liascript` and or\n   `liascript-course`, `liascript-template` to make it appear in one of the\n   following GitHub topics:\n\n   - general: https://github.com/topics/liascript\n   - free courses: https://github.com/topics/liascript-course\n   - extensions: https://github.com/topics/liascript-template\n\n   _More information on tagging projects can be found [here](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/classifying-your-repository-with-topics)._\n\n4. Use other ways of hosting repositories as well (e.g.\n   [DropBox](https://en.wikipedia.org/wiki/Dropbox_%28service%29),\n   [ownCloud](https://en.wikipedia.org/wiki/OwnCloud),\n   [NextCloud](https://en.wikipedia.org/wiki/Nextcloud)).\n\n#### LiaBooks\n\n                           --{{0}}--\nHowever, we have no idea who is using LiaScript elsewhere, so it might be hard\nto find some resources online. From time to time we translate open-books into\nLiaScript and make them more interactive. You can see some of our the\nexperiments at the following URL and use them as a source of inspiration:\n\nhttps://github.com/LiaBooks\n\n![screenshot of the LiaBooks repository](img/screenshot_liabooks.png)\n\n\u003e __Full overview on courses via the topic `liascript-course`:__\n\u003e\n\u003e https://github.com/topics/liascript-course\n\n\n#### LiaTemplates\n\n                           --{{0}}--\nIf you tried out CodeRunner, you will have probably noticed that you can reuse\nfunctionality from different courses, simply by using the keyword `import:`\nwithin the main definition of your LiaScript document. Such a functionality is\ndefined with the help of macros. We will dive deeper into this feature at the\nend of this document, but if you are interested you can inspect some of our\ntemplates, which shall provide self-explaining courses of how to embed and use\nthe implemented macros.\n\nhttps://github.com/LiaTemplates\n\n![screenshot of the LiaTemplates repository](img/screenshot_liatemplates.png)\n\n\u003e __Full overview on extensions via the topic `liascript-template`:__\n\u003e\n\u003e https://github.com/topics/liascript-template\n\n## Markdown-Syntax\n\n                          --{{0}}--\nThis section is intended to give a brief overview on the basic Markdown syntax\nelements. The only difference to common Markdown at this point is, that you can\ndefine meta-information such as author, language, voice, etc. within a\nHTML-comment at the beginning of every document. We will describe all of these\nelements in more detail in [section: Macros](#macros). All of these `macros`\nstart with a single word, which is followed by a colon. If you require more\nspace, like for `comment:` or `link:` you can use multiple lines, but every\nfollowing line has to start with an indentation.\n\nInitial LIA-comment-tag for basic definitions:\n\n``` XML\n\u003c!--\n\nauthor:   Andre Dietrich\n\nemail:    LiaScript@web.de\n\nversion:  0.0.1\n\nlanguage: en\n\nnarrator: US English Female\n\ncomment:  Write a short abstract of your course, that\n          might contain multiple lines and sentences.\n\nscript:   https://javascript_resourse_url\n\nscript:   https://another_javascript_resourse_url\n\nlink:     https://some_css_stuff\n          https://and_some_more_css\n--\u003e\n```\n\n\n                          --{{1}}--\nThe meta-information from your document is later shown within the\ninformation-section as well as within the home-section.\n\n                            {{1}}\n![Screencast of meta-information usage](img/meta-information.gif)\n\n\n\n                          --{{2}}--\nIf you already know Markdown, then you can skip most of the content in this\nsection. However, there are some slight differences that will be marked with a\ntrailing star at the section title.\n\n            {{2}}\n\u003c!-- style=\"font-size: 2em\" --\u003e\n\u003e Something might be different 💫\n\n\n### Structuring\n\n                          --{{0}}--\nA course is structured as any other Markdown document with starting hash-tags,\nwhereby the number of hash-tags is used to define the hierarchy of your\ndocument.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\n# Main Title\n\n ...\n\n## Section Title 1\n\n ...\n\n### Subsection Title\n\n ...\n## Section Title 2\n```\n\n                          --{{1}}--\nEvery section is presented separately. In contrast to most Markdown-parsers,\nLiaScript applies a two step-approach. Sections are parsed at first, which means\nthat the parsers searches for patterns as depicted below. Parsing the content of\na section is quite time-consuming, that is why the section-content gets only\nanalyzed, if this specific section should be displayed to the user. However,\nthis happens only at the first appearance, afterwards the resulting view is\nrestored from a local cache.\n\n                            {{1}}\n**Preprocessing pattern:** `## foo bar`\n\n#### Semantic Correct HTML\n\n                          --{{0}}--\nAs mentioned earlier, the preprocessor searches for patterns `## header` at the beginning of a line to identify sections.\nHowever, there might be cases where you want to have multiple different sections on one slide, with different headers.\n[Semantic HTML](https://en.wikipedia.org/wiki/Semantic_HTML) can help us to deal with this, especially the two [HTML5](https://en.wikipedia.org/wiki/HTML_5) tags [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) and [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).\n\n``` markdown\n# Slide-Title\n\n\u003csection\u003e\n## Section-Title\n\n...\n\u003c/section\u003e\n\n\u003carticle\u003e\n## Article-Title\n\n...\n\u003c/article\u003e\n```\n\n                          --{{1}}--\nLiaScript will identify these HTML-tags and the content, such that the content within cannot be used as a separator.\nIf you use these two semantic tags, your content is grouped in semantic correct way, which improves the readability if screen-readers are used or keyboard navigation is used.\n\n                          --{{2}}--\nWhen to use which tag might be philosophical question.\nWe can say, if you just want to structure your content with different sub-headers, then use `\u003csection\u003e`.\nIf your content represents a self-contained document, then use `\u003carticle\u003e`.\nHowever, the visually presented result will be the same, such that you could also\nuse a `\u003cdiv\u003e` to structure your content.\n\n\u003csection\u003e\n##### Section-Title\n\n\u003e The `\u003csection\u003e` HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.\n\u003e Sections should always have a heading, with very few exceptions.\n\u003e\n\u003e Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section\n\n\u003c/section\u003e\n\n\n\u003carticle\u003e\n##### Article-Title\n\n\u003e The `\u003carticle\u003e` HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).\n\u003e Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.\n\u003e\n\u003e Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article\n\n\u003c/article\u003e\n\n#### Sub-Titles 💫\n\n                          --{{0}}--\nThere might be some cases, where you want to add further headings quickly. We therefore\napply the following syntax with underlining \"equal signs\" or \"dashes\". In\ncommon Markdown, this alternative syntax is applied to define level-1 and\nlevel-2 headings. We use it to create headings that are one level `=` or two\nlevels `-` below the main heading. However, these subsections will not be part\nof the table of contents, and since their interpretation is slightly different\nto common Markdown, you should use the method presented in the previous section.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\n...\n\n## Section Title\n\nLocal Subsection\n================\n\nLocal Sub-SubSection\n--------------------\n```\n\n### Content blocks\n\n                          --{{0}}--\nHow would you separate paragraphs or other content elements from each other, if\nyou only have a type-writer? The easiest way is a spatial separation, and in\nMarkdown this is done via an empty line. Thus, whenever you have blocks such as\nparagraphs, enumerations, or tables, it is common practice to separate them via\na newline. This makes it easier for you to edit and structure your course, and\nit prevents the interpreter from too much work.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nThis is a paragraph that consist only of one line.\n\nHere comes another paragraph\nwith multiple lines.\nAnd multiple sentences.\n```\n\n### Text-Formatting 💫\n\n\n                            --{{0}}--\nHow does text-highlighting work in a text file and thus within a paragraph?\nWell, Markdown defines some basic characters that can be used to surround a word\nor a collection of words. We tried to use the GitHub flavored Markdown style for\nsimple formatting, thus simply use multiple asterisks or underscores to mark\ncertain parts of a text.\n\n* `*italic*` -\u003e *italic*\u003c!-- class=\"notranslate\"--\u003e\n* `**bold**` -\u003e **bold**\u003c!-- class=\"notranslate\"--\u003e\n* `***bold and italic ***` -\u003e ***bold and italic ***\u003c!-- class=\"notranslate\"--\u003e\n* `_also italic_` -\u003e _also italic_\u003c!-- class=\"notranslate\"--\u003e\n* `__also bold__` -\u003e __also bold__\u003c!-- class=\"notranslate\"--\u003e\n* `___also bold and italic___` -\u003e ___also bold and italic___\u003c!-- class=\"notranslate\"--\u003e\n* `~strike~` -\u003e ~strike~\u003c!-- class=\"notranslate\"--\u003e\n\n\n                          --{{1}}--\nWe define some additions to common Markdown, such as underline and superscript,\nwhich can be defined with the following syntax:\n\n                            {{1}}\n* `~~underline~~` -\u003e ~~underline~~\u003c!-- class=\"notranslate\"--\u003e\n* `~~~strike and underline~~~` -\u003e ~~~strike and underline~~~\u003c!-- class=\"notranslate\"--\u003e\n* `^superscript^` -\u003e ^superscript^\u003c!-- class=\"notranslate\"--\u003e\n\n\n#### Combinations\n\n                          --{{0}}--\nAs you can see from the examples, you can combine and nest all elements freely.\n\n\n* `**bold _bold italic_**` -\u003e **bold _bold italic_**\u003c!-- class=\"notranslate\"--\u003e\n* `**~bold strike~ ~~bold underline~~**` -\u003e **~bold strike~ ~~bold underline~~**\u003c!-- class=\"notranslate\"--\u003e\n* `*~italic strike~ ~~italic underline~~*` -\u003e *~italic strike~ ~~italic underline~~*\u003c!-- class=\"notranslate\"--\u003e\n\n#### Typography\n\n                          --{{0}}--\nIt is now possible within a LiaScript Markdown to apply sequences of dashes for typography. A sequence of dashes is now translated into:\n\n1. single dash `-` --\u003e Hyphen or minus sign -\n2. double dash `--` --\u003e En dash --\n3. triple dash `---` --\u003e Em dash ---\n\n                          --{{1}}--\nAn Ellipsis is indicated by a sequence of three dots:\n\n                            {{1}}\n`...` will be translated to the Unicode symbol ...\n\n##### Quotes\n\n                          --{{0}}--\nAdditionally single and double quotes are translated into their typographical counterparts, based on the defined [`language`](#language) in the header of the course.\nGerman, French, English or Welsh will be translated into different Unicode symbols.\n\n\u003c!-- style=\"font-size: 20px\" --\u003e\n`\"That's a 'magic' shoe.\"` --\u003e “That’s a ‘magic’ shoe.”\n\nApplied quote translation as defined here: https://en.wikipedia.org/wiki/Quotation_mark\n\n                          --{{1}}--\nIf you want o use the original characters, you will have to escape them, as shown also in the [next section](#escape-characters):\n\n      {{1}}\n`\\\"` --\u003e \\\"\\\n`\\'` --\u003e \\'\n\n                            {{2}}\n\u003csection\u003e\n\n                          --{{2}}--\nAs an alternative you can still use the quote tag `\u003cq\u003e` for double quotations.\nThis will still use the language definition for that document, but you can also overwrite this per markdown block or quote:\n\n``` markdown\n\u003cq\u003eThat's a 'magic' shoe.\u003c/q\u003e\\\n\u003cq lang=\"de\"\u003eDas ist ein magischer Schuh.\u003c/q\u003e\n\n---\n\n\u003c!-- lang=\"fr\" --\u003e\nEt voici un autre example: \u003cq\u003eC'est une chaussure magique.\u003c/q\u003e\n```\n\n\u003cq\u003eThat's a 'magic' shoe.\u003c/q\u003e\\\n\u003cq lang=\"de\"\u003eDas ist ein magischer Schuh.\u003c/q\u003e\n\n---\n\n\u003c!-- lang=\"fr\" --\u003e\nEt voici un autre example: \u003cq\u003eC'est une chaussure magique.\u003c/q\u003e\n\n\u003c/section\u003e\n\n#### Escape Characters\n\n                          --{{0}}--\nIf you want to use asterisks, hash-tags, or other syntax elements within your\ndocument without applying their functionality, then you can escape or in other\nwords indicate them with a starting backslash. If you want to escape a\nbackslash, you will have to write two subsequent backslashes. But you do not\nhave to use it, if there is only one asterisk within a line, this will be\ninterpreted as a single character. So you will have to apply this kind of\nescaping only to prevent misunderstandings between you and the interpreter.\n\n\n``` markdown\n\\*, \\~, \\_, \\#, \\{, \\}, \\[, \\], \\|, \\`, \\$, \\@, \\\\, \\\u003c, \\\u003e, \\\", \\'\n```\n\n**Result:** \\*, \\~, \\_, \\#, \\{, \\}, \\[, \\], \\|, \\`, \\$, \\@, \\\\, \\\u003c, \\\u003e, \\\", \\'\n\n### Symbols \u0026 Unicode 💫\n\n                          --{{0}}--\nOne thing that we missed in standard Markdown, was an implementation for arrows.\nThe verbatim text shows, how arrows are defined in our Markdown implementation with\ntheir result on the right.\n\n`-\u003e` -\u003e, `-\u003e\u003e` -\u003e\u003e, `\u003e-\u003e` \u003e-\u003e, `\u003c-` \u003c-, `\u003c-\u003c` \u003c-\u003c,\n`\u003c\u003c-` \u003c\u003c-, `\u003c-\u003e` \u003c-\u003e, `=\u003e` =\u003e, `\u003c=` \u003c=, `\u003c=\u003e` \u003c=\u003e\n\n`--\u003e` --\u003e, `\u003c--` \u003c--, `\u003c--\u003e` \u003c--\u003e, `==\u003e` ==\u003e, `\u003c==` \u003c==, `\u003c==\u003e` \u003c==\u003e\n\n`~\u003e` ~\u003e, `\u003c~` \u003c~\n\n                          --{{1}}--\nBut you can also use some basic smileys. We will try to extend this partial\nsupport in the future.\n\n                            {{1}}\n`:-)` :-), `;-)` ;-), `:-D` :-D, `:-O` :-O, `:-(` :-(, `:-|` :-|,\n`:-/` :-/, `:-P` :-P, `:-*` :-*, `:')` :'), `:'(` :'(\n\n                          --{{2}}--\nHowever, since LiaScript accepts\n[Unicode](https://en.wikipedia.org/wiki/Unicode), you can also copy and paste\nany kind of character including [emojis](https://emojipedia.org).\n\n\n### References\n\n\u003e The next section shows how external resources can be referenced and integrated.\n\n\n#### Simple Links\n\n                          --{{0}}--\nThere are two ways of adding links to a Markdown document, either by inlining\nthe URL directly or you can name it (as shown in listing 2), by applying the\ntypical brackets and parenthesis notation, the optional information is put in\ndouble quotes at the end of the URL. This optional information is used as a\ntitle attribute, and it is shown, when the user hovers the link with the mouse.\n\n\n1. Example of an URL-link -\u003e http://goo.gl/fGXNvu\n\n   text-formatting can be applied also `*** http://goo.gl/fGXNvu ***` -\u003e\n   *** http://goo.gl/fGXNvu ***\n\n2. Naming the link (`[title](http://goo.gl/fGXNvu \"optional info\")`) -\u003e\n   [title](http://goo.gl/fGXNvu \"optional info\")\n\n3. For internal navigation you can refer to the slide number or to title with\n   a starting `#`\n\n   * `[next slide](#18)` -\u003e [next slide](#18)\n   * `[next slide](#preview-lia-💫)` -\u003e [next slide](#preview-lia-💫)\n   * If your internal link includes parentheses or other characters, you can\n     also use percent-encoding. An opening parentheses would then be written as\n     `%28` and a closing one as `%29`.\n\n     For more information visit:\n     https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding\n\n##### Preview-Lia 💫\n\n                          --{{0}}--\nLiaScript has an advanced preview link, that will load the remote course and\nparse the meta-information such as title, version, comment, logo, email, tags,\nform your main HTML-comment at the top of your document. To do this, you will\nhave to use `[preview-lia]` as the title of your link, which is followed by the\nraw URL of your course document.\n\n\n`[preview-lia](https://raw.githubusercontent.com/LiaScript/docs/master/README.md)`\n\n[preview-lia](https://raw.githubusercontent.com/LiaScript/docs/master/README.md)\n\n\n                          --{{1}}--\nYou can use this technique also to create previews for other courses on your\npersonal website or for other GitHub projects, as it was described in section\n[Projects](#projects). For more information follow the link:\n\n{{1}} https://liascript.github.io/blog/markdown-just-got-a-new-preview-tag/\n\n\n##### QR-Codes 💫\n\n                          --{{0}}--\nSometimes it might be required to have both, a link and a visual representation\nof it as an __QR-Codes__. Similar to previews, you simply name your link\n`qr-code`:\n\n\n* Syntax: `[qr-code](https://LiaScript.github.io)`\n* Example:\n\n  [qr-code](https://LiaScript.github.io)\n\n                          --{{1}}--\nYou can add further information to your link by adding a title. Markdown is also\nallowed within the link title. In case of an image or media link, the title will\nbe used as a subtitle and displayed accordingly.\n\n                            {{1}}\n* Syntax: `[qr-code](https://LiaScript.github.io \"Checkout the LiaScript website or the __[blog](https://liascript.github.io/blog/)__\")`\n* Example:\n\n  [qr-code](https://LiaScript.github.io \"Checkout the LiaScript website or the __[blog](https://liascript.github.io/blog/)__\")\n\n\n##### eMail \u0026 Telephone 💫\n\n      --{{0}}--\nThese are two additional link types that you can also use within the `\u003ca\u003e` tag, but LiaScript supports them natively.\n\n        {{1}}\n* __mailto:__\n\n  `[Write me a Mail](mailto:LiaScript@web.de)` --\u003e [Write me a Mail](mailto:LiaScript@web.de)\n\n  `[LiaScript\\@web.de](mailto:LiaScript@web.de)` --\u003e [LiaScript\\@web.de](mailto:LiaScript@web.de)\n\n      --{{1}}--\n  The `mailto` link type does not need to be explained.\n  On most modern systems, clicking on such a link will open your email client and insert the email address after the colon directly into the recipient address field.\n  Since the __\\@__ symbol is used for [macro](#macro) calls, this has to be escaped at the moment.\n\n        {{2}}\n* __tel:__\n\n  `[Call me](tel:+49-12345-67890)` --\u003e [Call me](tel:+49-12345-67890)\n\n  `[+49-12345-67890](tel:+49-12345-67890)` --\u003e [+49-12345-67890](tel:+49-12345-67890)\n\n      --{{2}}--\n  The `tel` link type is lesser known and has been introduced for mobile phones.\n  Clicking on such a link will trigger the dial dialog, allowing you to call the pre-set number without any need for copy and paste.\n\n\n#### Images 💫\n\n                          --{{0}}--\nImages are defined similar to links, but they are indicated with a starting\nexclamation mark.\n\n                          --{{1}}--\nThe name of the link or the alt-text is not wasted, since it is not displayed\nanymore. Instead, it is displayed, if the image cannot be loaded for some\nreasons, and it is used by screen readers to give visually impaired people a\nhint, of what will be visible on the image. So please, don't leave it empty.\n\n                          --{{2}}--\nThe URL can be either relative to your Markdown document or it can be absolute,\nwhich means it is pointing to an external resource.\n\n                          --{{3}}--\nThe optional title in LiaScript is not only used as a title attribute, instead\nit is used as a real sub-title for all media links.\n\n\u003c!-- style=\"font-size: 1.4em\" --\u003e\n**Image-notation: !\\[{1}{`alt-text`}\\]({2}{url} {3}{\"optional sub-title\"})**\n\n                            {{2}}\n* relative URL: `![Beautiful Lenna](img/lenna.jpg)`\n\n  ![Beautiful Lenna](img/lenna.jpg)\n\n* absolute URL: `![Annunciation of ...](https://upload.wiki...jpg)`\n\n  ![Annunciation of the birth of Christ](https://upload.wikimedia.org/wikipedia/commons/5/51/Leonardo_da_Vinci_Annunciation.jpg \"{3}{*Annunciation c. 1472–1476*: is thought to be Leonardo's earliest complete work}\")\n\n\n                          --{{4}}--\nNote, that LiaScript is smart enough to scale your images to the optimal size.\nIf your image is smaller than the current maximal applicable width, it is shown\nin full size. If it is larger, than it is scaled to fit in width and also in\nheight. You can further click on all images to open them as modal and if the\nimage is quite large, such as Leonardo's painting, then you can also zoom and\ninspect it, by hovering with the mouse or thumb.\n\n                         --{{5}}--\nAdditionally, if you start a paragraph with an image, LiaScript expects it to be\na floating object, which is depicted with a maximal size of 50% of your\nview-port, if it is not smaller than that.\n\n                           {{5}}\n********************************************************************************\n\n``` markdown\n![Beautiful Lenna](img/lenna.jpg \"subtitles are allowed too\")\nLorem ipsum dolor sit amet, consectetur adipisicing elit, ...\n\n```\n\n---\n\n![Beautiful Lenna](img/lenna.jpg \"subtitles are allowed too\") Lorem ipsum dolor\nsit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut\nlabore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\nexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute\nirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat\nnulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa\nqui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\ndolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\nlaboris nisi ut aliquip ex ea commodo consequat.\n\n\n********************************************************************************\n\n##### Galleries 💫\n\n                          --{{0}}--\nHow would you interpret a paragraph full of images? We thought that the only\nreasonable depiction of this could be a gallery.\n\n``` markdown\n![img1](url) ![img2](url) ![img3](url)\n![img4](url)\n![img5](url)\n```\n\n                          --{{1}}--\nAnd we like this idea... You can click on every image and inspect it also with\nthe zooming feature.\n\n                            {{1}}\n![Portrait of a lady](https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Leonardo_da_Vinci_%28attrib%29-_la_Belle_Ferroniere.jpg/723px-Leonardo_da_Vinci_%28attrib%29-_la_Belle_Ferroniere.jpg \"La Belle Ferronnière, c. 1490–1498\")\n![Lady with an Ermine](https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Lady_with_an_Ermine_-_Leonardo_da_Vinci_-_Google_Art_Project.jpg/761px-Lady_with_an_Ermine_-_Leonardo_da_Vinci_-_Google_Art_Project.jpg \"Lady with an Ermine, c. 1489–1491, Czartoryski Museum, Kraków, Poland\")\n![Mona Lisa](https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg \"Mona Lisa or La Gioconda c. 1503–1516, Louvre, Paris\")\n![Virgin and Child ](https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Leonardo_da_Vinci_-_Virgin_and_Child_with_St_Anne_C2RMF_retouched.jpg/764px-Leonardo_da_Vinci_-_Virgin_and_Child_with_St_Anne_C2RMF_retouched.jpg \"The Virgin and Child with Saint Anne, c. 1501–1519, Louvre, Paris\")\n![The Death of Leonardo da Vinci](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Francois_Ier_Leonard_de_Vinci-Jean_Auguste_Dominique_Ingres.jpg/1276px-Francois_Ier_Leonard_de_Vinci-Jean_Auguste_Dominique_Ingres.jpg \"The Death of Leonardo da Vinci, by Ingres, 1818\")\n\n\n#### Audio 💫\n\n                          --{{0}}--\nIf an exclamation mark indicates visual content, why not using a question mark\nto indicate auditive content. (From our perspective it resembles an ear.)\nEverything is similar to images and the URLs can be either relative or absolute.\n\n* Syntax: `?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")`\n* Example:\n\n  ?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")\n\n\n                          --{{1}}--\nAdditionally, you can also directly reference music from the\n[SoundCloud](https://Soundcloud.com) website or from\n[Music.YouTube](https://music.youtube.com). The associated song will be\nautomatically embedded for you.\n\n                            {{1}}\n* Syntax: `?[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)`\n* Example:\n\n  ?[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)\n\n\n#### Movies 💫\n\n                          --{{0}}--\nImages are marked with a starting exclamation mark before the link, audio by a\nstarting question mark and movies are made of images and sound, that is why you\ncombine both marks `!?`. Defining resources this way shows at least the links\ncorrectly in other Markdown parsers or on GitHub. There is baked-in support for\n[YouTube](https://YouTube.com), [Vimeo](https://Vimeo.com),\n[PeerTube](https://peertube.tv), [DailyMotion](https://www.dailymotion.com) and\n[TeacherTube](https://TeacherTube.com), which means that you only have to\ninclude the link and the resource will be embedded appropriately.\n\n**Movie-notation: `!?[alt-text](movie-url)`**\n\n- YouTube: `!?[The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4)`\n\n  !?[The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4)\n\n- relative path: `!?[Something about math](vid/math.mp4)`\n\n  !?[Something about math](vid/math.mp4)\n\n- \u003e # List of supported Video Platforms\n  \u003e\n  \u003e * [DailyMotion](https://www.dailymotion.com)\n  \u003e * [PeerTube](https://peertube.tv)\n  \u003e * [TeacherTube](https://TeacherTube.com)\n  \u003e * [Video TU-Freiberg](https://video.tu-freiberg.de)\n  \u003e * [Vimeo](https://Vimeo.com)\n  \u003e * [YouTube](https://YouTube.com)\n\n\n                          --{{1}}--\nIf you required more control over your video, such as autoplay, muted,\nstart-time, and probably also size and colors, the you can also apply custom\nstyling rules, then you should take a look at the following section:\n\n                            {{1}}\n[Customizing-Multimedia](#Customizing-Multimedia)\n\n\n#### So what is left?? 💫\n\n                          --{{0}}--\nIf it is something else that you want to embed something else from another\nwebsite, then you should try out the link syntax with two starting question\nmarks. This means, LiaScript will try to use the [oEmbed](https://oembed.com)\nservice, which is offered by a couple of websites. If this succeeds, this will\nembed only a specific part. If it fails, then LiaScript will at least try to\nembed the website via an `iframe`.\n\nExamples:\n\n* [SketchFab](https://sketchfab.com): `??[ear model](https://sketchfab.com/3d-models/ear-anatomy-468e2039bde34a3fabb9e90bff9cd56b)`\n\n  ??[ear model](https://sketchfab.com/3d-models/ear-anatomy-468e2039bde34a3fabb9e90bff9cd56b)\n\n* [StoryMaps](https://storymaps.arcgis.com): `??[presentation](https://storymaps.arcgis.com/stories/583f8b48a857442cb8d27411c93a9664)`\n\n  ??[presentation](https://storymaps.arcgis.com/stories/583f8b48a857442cb8d27411c93a9664)\n\n* [CircuitJS](https://www.falstad.com/circuit): `  ??[Simulation: Non-inverting Amplifier](https://www.falstad.com/circuit/circuitjs.html?startCircuit=amp-noninvert.txt)`\n\n  ??[Simulation: Non-inverting Amplifier](https://www.falstad.com/circuit/circuitjs.html?startCircuit=amp-noninvert.txt)\n\n\n##### Galleries \\#2 💫\n\n                          --{{0}}--\nWhat you have seen previously with images is also possible with any kind of\nmultimedia link. Simply put everything into one paragraph and LiaScript will\nautomatically generate a gallery for you:\n\n``` markdown\n![img](url) ?[audio](url) !?[movie](url)\n??[something else](url)\n??[something else](url)\n```\n\n![Photo of Jupiter](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3d/Latest_NASA_photo_of_Jupiter_taken_this_Sunday_by_the_Juno_probe.png/1280px-Latest_NASA_photo_of_Jupiter_taken_this_Sunday_by_the_Juno_probe.png)\n?[a horse](https://www.w3schools.com/html/horse.mp3 \"hear a horse\")\n!?[Fun with Tables](https://www.youtube.com/watch?v=Y_7q9T5jYHo)\n??[VTK VolumeContour](https://kitware.github.io/vtk-js/examples/VolumeContour/index.html)\n??[Circuit simulation](https://www.falstad.com/circuit/circuitjs.html?startCircuit=majority.txt)\n??[Bust of Nefertiti](https://sketchfab.com/3d-models/bust-of-nefertiti-foia-results-8c60faca6152405e9d35784efa8b9aa1)\n\n\n## Markdown-Blocks\n\n                          --{{0}}--\nSo far we had introduced Markdown only on a tiny level, which means, by now you\nshould know how to emphasize words and phrases within a paragraph, how to add\nimages and how you can use references to point to internal or external\nresources. But, all we did so far is to work with **paragraphs**. But as pointed\nout in the quote below, Markdown can do even more.\n\n\u003e ... Markdown’s syntax is comprised entirely of punctuation characters, which\n\u003e punctuation characters have been carefully chosen so as to look like what\n\u003e they mean. E.g., asterisks around a word actually look like \\*emphasis\\*.\n\u003e Markdown lists look like, well, lists. Even blockquotes look like quoted\n\u003e passages of text, assuming you’ve ever used email.\n\u003e\n\u003e -- Markdown philosophy by\n\u003e [John Gruber](https://daringfireball.net/projects/markdown/syntax#philosophy)\n\n                          --{{1}}--\nWithin the following part we will learn how to deal with Markdown blocks and\nhow to format your content to define the following elements:\n\n\u003c!-- --{{1}}--\nlist, blockquotes, tables, custom HTML, horizontal rules and dealing with\ncode-blocks.\n --\u003e\n\n       {{1}}\n1. Lists\n2. Blockquotes\n3. Tables\n4. HTML\n5. Code-Snippets\n6. Horizontal rules\n\n### Lists\n\n                          --{{0}}--\nThe GitHub-flavored Markdown supports two types of lists, ordered and unordered\nones, and so does LiaScript. If you every used a typewriter then the following\nsyntax for lists would look natural to you. The only thing that matters here is\nthe correct indentation.\n\n\u003e **Use spaces for correct indentation!** Tabs are allowed too, but might be\n\u003e confusing, since editors tend to use varying lengths from 2 to 4 spaces to\n\u003e display them...\n\n#### Unordered Lists\n\n                          --{{0}}--\nTo define an unordered list, starting asterisks `*`, pluses `+`, and dashes `-`\ncan be used and mixed. If one point has more than one line, you can also use\nmultiple lines to define paragraphs. All other Markdown elements, you will get\nto know, can be included in the same way.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n* alpha\n+ **beta**\n- gamma\n  and delta\n\n  new Paragraph\n\n  - and another\n  - important list\n\n- epsilon\n```\n\n                          --{{1}}--\nAs you can see from the result, you can apply all Markdown styling elements\nfreely. The starting characters will be interpreted equally, thus it makes no\ndifference, if you use asterisks, pluses and dashes. To improve the readability\nof your document, we would recommend to stick with one format for every level.\nStarting with asterisks on the first level and dashes within the second level,\netc.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n* alpha\n+ **beta**\n- gamma\n  and delta\n\n  new Paragraph\n\n  - and another\n  - important list\n\n- epsilon\n\n********************************************************************************\n\n                           {{2}}\n\u003e __Note:__\n\u003e At the moment it is required to separate blocks by at least one empty line.\n\u003e The following example will be interpreted as a single paragraph:\n\u003e\n\u003e ``` markdown\n\u003e * this is one single\n\u003e   - paragraph with a dash.\n\u003e ```\n\u003e\n\u003e Whereby the following will result in a bullet point with another one nested\n\u003e\n\u003e ``` markdown\n\u003e * separate paragraph\n\u003e\n\u003e   - and this is a separate sub listing\n\u003e ```\n\n\n#### Ordered Lists 💫\n\n                          --{{0}}--\n\nOrdered lists start with a number and a dot. As you can see from the example,\nthe numbering is important. In contrast to the GitHub flavored Markdown or the\noriginal Markdown, where the list below would result in **two** separate lists,\nand the numbering for every list would start at 1, ignoring your numbering\norder. With the LiaScript interpretation you can separate your lists, add more\nexplanations in between, or use animations to make certain parts appear or\ndisappear.\n\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n0. alpha\n1. **beta**\n\nSomething else ...\n\n3. * gamma\n   * delta\n   * and epsilon\n2. probably zeta\n```\n\n**Result:**\n\n0. alpha\n1. **beta**\n\nSomething else ...\n\n3. * gamma\n   * delta\n   * and epsilon\n2. probably zeta\n\n\n### Blockquotes\n\n                          --{{0}}--\nIf you, from time to time, reply to emails, than the following notation will\nlook quite familiar to you. To make use of quoted text, simply start a line with\na `\u003e` greater than character.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` md\n\u003e This was said some time ago ...\n\u003e\n\u003e\u003e This was said even longer ago,\n\u003e \u003e I guess ...\n\u003e\n\u003e * aleph\n\u003e * beth\n```\n\n                          --{{1}}--\nAs you can see from the example, all Markdown elements can be used within a\nblockquote and vice versa. Everything you have learned so far can be easily\ncombined, it could also be a gallery or an embedded object...\n\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003e This was said some time ago ...\n\u003e\n\u003e\u003e This was said even longer ago,\n\u003e \u003e I guess ...\n\u003e\n\u003e * aleph\n\u003e * beth\n\n********************************************************************************\n\n#### Citations 💫\n\n                          --{{0}}--\nBlockquotes are often used for citations, and so do we. You can use the\nfollowing pattern to mark a blockquote as a citation. Simply use two paragraphs\nwithin a blockquote and start the second one with two dashes `--`.\n\n**LiaScript-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n```\n\u003e “Live as if you were to die tomorrow.\n\u003e Learn as if you were to live forever.”\n\u003e\n\u003e -- Mahatma Gandhi\n```\n\n                          --{{1}}--\nThe resulting blockquote looks slightly different. Furthermore, the paragraph\nfollowed by dashes is put into and HTML `cite`-tag.\n\n             {{1}}\n\u003e “Live as if you were to die tomorrow.\n\u003e Learn as if you were to live forever.”\n\u003e\n\u003e -- Mahatma Gandhi\n\n\n                          --{{2}}--\nYou can use this syntax, with starting dashes, everywhere within a LiaScript\ndocument and your corresponding paragraph it will be rendered within a\n`cite`-tag. But, at this time it will only affect the representation of\nblockquotes. We are not sure yet, how this can also be applied to images,\ntables, lists, etc.\n\n             {{2}}\n\u003c!-- class=\"translate\"--\u003e\n``` md\nlorem ipsum ....\n\n-- Some more citations\n```\n\n### Tables\n\n                          --{{0}}--\nTables, _as we hope_, are easy to interpret and to create. Simply use horizontal\nrules to separate cells. The header is always defined by the first line, while\nthe second line is used to separate the table header from the body visually and\nto define the column alignment.\n\n\n**Markdown-format:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n| Tables               |      Are      |  Cool |\n| -------------------- |:-------------:| -----:|\n| *** columns 3 is *** | right-aligned | $1600 |\n| ** column 2 is **    |   centered    |   $12 |\n| * zebra stripes *    |   are neat    |    $1 |\n```\n\n                          --{{1}}--\nAs you can see in the result, you can sort tables, by clicking onto the icon\nthat appears on the right of every header cell. A table will then be either\nsorted ascending, descending, or not sorted, which means your initial row order\nwill be restored.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n| Tables               |      Are      |  Cool |\n| -------------------- |:-------------:| -----:|\n| *** columns 3 is *** | right-aligned | $1600 |\n| ** column 2 is **    |   centered    |   $12 |\n| * zebra stripes *    |   are neat    |    $1 |\n\n********************************************************************************\n\n                          --{{2}}--\nThe position of the colon defines whether a column should be centered, aligned\nto the left or to the right. By default, if you do not use colons, all columns\nare aligned to the left.\n\n\n          {{2}}\n* centered --\u003e `:---:`\n* right --\u003e `---:`\n* left --\u003e `:---` or `---` (default)\n\n\n#### Tables \u003c--\u003e Data (Demo) 💫\n\n                          --{{0}}--\nBut why stopping here? A table, in many cases, is just a representation of a\ndataset. If so, why not simply visualizing it accordingly and plot a graph,\ndisplay a chart or a map, or whatever fits the most for your data. At the moment\nwe apply simple rules to identify the nature of your dataset and thus choose a\nvisual representation.\n\n\u003e For more details have a look at section [Fun With Tables](#fun-with-tables),\n\u003e which provides and extensive overview onto all supported representation\n\u003e schemes.\n\n                          --{{1}}--\nThe easiest and probably most obvious representation of a simple plot, would be\nthe following. A header with some names and columns that contain numbers. The\nfirst column is interpreted as the main column and thus defines the \u003cvar\u003ex\u003c/var\u003e\nvalues, the rest is up to you. A cell is then only associated with a number, if\nthe first \"word\", _sequence of characters separated by a space_, can be parsed\nas a number. The `0km` within this example gets ignored. So if you want certain\nvalues to be ignored, simply attach something directly to the number, or add a\ncharacter in front of it.\n\n\n          {{1}}\n``` md\n| x's |  some y's  |                  dist |\n| --- |:----------:| ---------------------:|\n| 1   |    1 \\$    |                 16 km |\n| 2.2 |    2 \\$    |                 12 km |\n| 3.3 |    5 \\$    |                  1 km |\n| 4   | -12.333 \\$ | 0km _will be ignored_ |\n```\n\n                          --{{2}}--\nLiaScript identifies this pattern and automatically adds a button above the\ntable, which allows to switch between the table and the \"line chart\"\nrepresentation. You can modify the chart interactively and even download the\nresulting image.\n\n          {{2}}\n\u003c!-- class=\"notranslate\"--\u003e\n| x's |  some y's  |                  dist |\n| --- |:----------:| ---------------------:|\n| 1   |    1 \\$    |                 16 km |\n| 2.2 |    2 \\$    |                 12 km |\n| 3.3 |    5 \\$    |                  1 km |\n| 4   | -12.333 \\$ | 0km _will be ignored_ |\n\n\n                            --{{3}}--\nA function cannot possess different \u003cvar\u003ey\u003c/var\u003e-values for one\n\u003cvar\u003ex\u003c/var\u003e-value, thus, if you have two or more equal \u003cvar\u003ex\u003c/var\u003e-values, the\nresulting plot will be a scatter plot.\n\n           {{3}}\n``` markdown\n| x's |  some y's  |  dist |\n| --- |:----------:| -----:|\n| 1   |    1 \\$    | 16 km |\n| 2.2 |    2 \\$    | 12 km |\n| 3.3 |    5 \\$    |  1 km |\n| 4   | -12.333 \\$ | -5 km |\n| 4   |            |     1 |\n```\n\n           {{3}}\n\u003c!-- class=\"notranslate\"--\u003e\n| x's |  some y's  |  dist |\n| --- |:----------:| -----:|\n| 1   |    1 \\$    | 16 km |\n| 2.2 |    2 \\$    | 12 km |\n| 3.3 |    5 \\$    |  1 km |\n| 4   | -12.333 \\$ | -5 km |\n| 4   |            |     1 |\n\n\n                                   --{{4}}--\nLast but not least _bar-charts_. If the first column contains at least one cell,\nthat cannot be parsed as a number while the others do have, then this table gets\ninterpreted as a bar-chart. The first column thus defines your set of groups. It\nis now also possible to sort your table according to different columns, and to\nsee this ordering also within the bar-chart representation.\n\n\n                               {{4}}\n```markdown\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |             02 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n```\n\n                               {{4}}\n\u003c!-- class=\"notranslate\"--\u003e\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |             02 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n\n\n                          --{{5}}--\nAs mentioned earlier, this is only a brief introduction into this topic. So\ncheck out section [Fun With Tables](#fun-with-tables) for a complete overview.\n\n#### Editing\n\n                          --{{0}}--\nEditing tables might seem tedious, but actually it is not. There is a huge\nnumber of plugins for different editors that you can use, which do the\nformatting for you. You can use them to quickly navigate through your cells, and\nsome even allow sorting.\n\n![Demo of a table editor](img/table-editing.gif)\n\n**Editors: Plugins**\n\n* Atom: [markdown-table-editor](https://atom.io/packages/markdown-table-editor)\n* VS-Code: [Markdown Table](https://marketplace.visualstudio.com/items?itemName=TakumiI.markdowntable)\n* Obsidian: [Advanced Tables](https://github.com/tgrosinger/advanced-tables-obsidian)\n\n\n### HTML\n\n                          --{{0}}--\nYou can also use plain HTML in your Markdown, if you miss something. It will\nmostly work pretty good, but it should be used with caution, since some\ninterpreters apply different rules. Some interpret everything within an HTML tag\nas HTML, while others allow mixing. Thus, HTML can contain Markdown, which\ncontains HTML, which contains... By the way, LiaScript allows mixing. Thus, keep\nin mind that newlines and indentation are still relevant.\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` html\n\u003cdiv style=\"color: green\"\u003e\n\nTest \u003cq\u003e**bold**\u003c/q\u003e and \u003cb\u003eHTML bold\u003c/b\u003e works also inline\n\n![Beautiful Lenna](img/lenna.jpg \"Image of Lenna with a hat\")\n\n\u003c/div\u003e\n```\n\n                          --{{1}}--\nThe result shows how the inline-CSS is applied to all nested Markdown elements.\nHowever, if you want to apply some styling to your document, LiaScript supports\nanother minimal invasive way of doing that. We will describe this in detail in\nsection [Styling](#styling).\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003cdiv style=\"color: green\"\u003e\n\nTest \u003cq\u003e**bold**\u003c/q\u003e and \u003cb\u003eHTML bold\u003c/b\u003e works also inline\n\n![Beautiful Lenna](img/lenna.jpg \"Image of Lenna with a hat\")\n\n\u003c/div\u003e\n\n\u003e See the following list for an complete overview onto all HTML elements:\n\u003e\n\u003e [HTML Element Reference](https://www.w3schools.com/tags/default.asp)\n\n********************************************************************************\n\n\n\n                          --{{2}}--\nIf you use custom HTML instead of Markdown, then no styling will be applied. You\ncan of course create more complex content or tables, this way you can apply your\nown styling to all elements.\n\n                            {{2}}\n[CSS-Reference](https://www.w3schools.com/CSSref/default.asp)\n\n                          --{{3}}--\nIf you want to, you can also copy the generated LiaScript structure and use our\nclasses. Most Browsers include an inspector, which can be used to interactively\ninspect the entire DOM-tree.\n\n                            {{3}}\nOpen Inspector: \u003ckdb\u003eCtrl+Shift+i\u003c/kdb\u003e or \u003ckdb\u003eCtrl+Shift+k\u003c/kdb\u003e\n\n                            {{3}}\n!?[Inspecting the DOM](https://www.youtube.com/watch?v=Gk6BljF60RI)\n\n                          --{{4}}--\nBut, you can also import your own styles within the main document comment by\nusing the `link` definition. We will explain this in more details within the\nmacro section [link](#link).\n\n                            {{4}}\n``` md\n\u003c!--\n...\nlink: file.css\n...\n--\u003e\n\n# Main Title\n```\n\n#### Details \u0026 Summary\n\n                          --{{0}}--\nThe `details` and `summary` tags are standard HTML tags and GitHub also supports\ntheir usage with Markdown. These tags offer a neat way to define something what\nis nowadays called accordion. Thus, your user can click on the summary text to\nmake the body of the `details`-tag appear.\n\n**Syntax:**\n\n\u003c!-- class=\"notranslate\"--\u003e\n``` md\n\u003cdetails\u003e\n\n\u003csummary\u003e**Honest Textbook ads (click to enlarge)**\u003c/summary\u003e\n\n!?[If High School and College Textbooks Were Honest - Honest Ads](https://www.youtube.com/watch?v=lhSjYT7pWkw)\n\n\u003c/details\u003e\n```\n\n**Result:**\n\n\u003cdetails\u003e\n\n\u003csummary\u003e**Honest Textbook ads (click to enlarge)**\u003c/summary\u003e\n\n!?[If High School and College Textbooks Were Honest - Honest Ads](https://www.youtube.com/watch?v=lhSjYT7pWkw)\n\n\u003c/details\u003e\n\n#### `\u003clia-keep\u003e` 💫\n\n                          --{{0}}--\nIf you want to embed more complex HTML, and only HTML, without taking care about\nindentation and formatting, then should use the `lia-keep` tag to surround your\ncode.\n\n``` html\n\u003clia-keep\u003e\n  \u003cstyle\u003e\n    table, th, td {\n      border: 1px solid black;\n      width: 250px; height: 40px;\n      text-align: center;\n    }\n  \u003c/style\u003e\n\n  \u003ctable style=\"margin: 1em\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003e**Header 1**\u003c/th\u003e\n      \u003cth\u003e**Header 2**\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 1\u003c/td\u003e\n      \u003ctd rowspan=\"2\"\u003eCell 2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 3\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/lia-keep\u003e\n```\n\n                          --{{1}}--\nAs it is demonstrated in the result, everything within this tag will be treated\nas HTML only, no Markdown parsing will be applied and indentation will be\nchecked.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n\u003clia-keep\u003e\n  \u003cstyle\u003e\n    table, th, td {\n      border: 1px solid black;\n      width: 250px;\n      height: 40px;\n      text-align: center;\n    }\n  \u003c/style\u003e\n\n  \u003ctable style=\"margin: 1em\"\u003e\n    \u003ctr\u003e\n      \u003cth\u003e**Header 1**\u003c/th\u003e\n      \u003cth\u003e**Header 2**\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 1\u003c/td\u003e\n      \u003ctd rowspan=\"2\"\u003eCell 2\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eCell 3\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\n\u003c/lia-keep\u003e\n\n\n********************************************************************************\n\n                          --{{2}}--\n\nThis way, you could for example also import even more complex HTML-tables,\npictures with multiple sources for different screen-sizes, and more.\n_With great power comes great responsibility._  Thus, you will also be\nresponsible for your styling.\n\n\n### Code\n\n                          --{{0}}--\nIn Markdown, you can use a sequence of at least three subsequent backticks `\\``\nto indicate a code-block that should not be treated as Markdown, but instead\ncontains some kind of code for which syntax-highlighting should be used, if\npossible. The first word after the backticks is used as an indicator, for which\nkind of syntax-highlighting should be applied.\n\n```` md\n``` python\nimport time\n# Quick, count to ten!\nfor i in range(10):\n    # (but not *too* quick)\n    time.sleep(0.5)\n    print(i)\n```\n````\n\n                          --{{1}}--\nIn case you are wondering, how to embed a code-block into a code-block with\nbackticks? Three backticks are the minimum, thus you can surround your Markdown\ncode-block example with a sequence of 4 or more backticks. If you start with\nfour backticks, LiaScript will parse everything as code until it reaches a\nmatching number of backticks.\n\n        {{1}}\n``` python\nimport time\n# Quick, count to ten!\nfor i in range(10):\n  # (but not *too* quick)\n  time.sleep(0.5)\n  print(i)\n```\n\n                          --{{2}}--\nHowever, we are still in the Markdown world with static code visualization.\nLiaScript has also support for interactive programming, thus all of your\ncode-snippet can be made executable and editable. This will be described in more\ndetail in section [Interactive Coding](#interactive-coding).\n\n#### Differences to Markdown 💫\n\n                          --{{0}}--\nMarkdown also supports adding code by using tilde `~` characters instead of\nbackticks. This is at the moment not supported by LiaScript, but might be added\nin the future.\n\n``` md\n~~~ javascript\nvar a = \"b\"\n~~~\n```\n\n                          --{{1}}--\nAdditionally, it is also possible in standard Markdown to use indentation with\nat least 4 spaces to mark a block or a line as code. In LiaScript this is\ntreated differently. You can use indentation to keep your document readable. The\ntwo indicators for text-to-speech in the example are treated equally by\nLiaScript, but another Markdown interpreter will interpret the second example as\na single paragraph, while the indicator in the first example will be treated as\ncode, and thus be easier to read with any other Markdown interpreter (including\nthe representation on GitHub).\n\n\n                            {{1}}\n\u003c!-- class=\"translate\"--\u003e\n``` md\nThis is not code ...\n\n    Any kind of text with a 4 space\n    indentation will be treated as code\n    in Markdown ...\n\n                --{{1}}--\nThis text will be spoken out loud in LiaScript.\n\n--{{2}}--\nThis text will be spoken out loud too.\n```\n\n\n#### Projects 💫\n\n                          --{{0}}--\nIf you want to bundle a couple of code-blocks into something that mirrors a\nproject, you can achieve this with the following syntax. All code-blocks are\nsimply attached to each other, in order to indicate a grouping. If you separate\nthem at least by one newline, they will be treated separately. This will be\npretty neat, if we introduce the concept of interactive code-blocks.\n\n\n```` md\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````\n\n                          --{{1}}--\nYou can define optional names within the head of your code-block. The starting\nplus `+` and minus `-` symbols are used to indicate, if the resulting\ncode-blocks should be visible or hidden. However, you can change this, by\nclicking onto the resulting title-bar to either maximize or minimize the\ncode-block.\n\n                            {{1}}\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\n                          --{{2}}--\nIf you do not add a plus or a minus as a prefix to your file, the plus is used\nas default.\n\n\n#### Supported Languages 💫\n\n                          --{{0}}--\nIn most cases you can simply add the name of the language or the common filename\nending into the head of a code snippet. Most Markdown interpreters will use\n[highlight.js](https://highlightjs.org) for language rendering, since we require\nalso an editor with syntax highlighting capabilities, we use\n[ace](https://ace.c9.io). Thus, the language support might differ to other\nsystems. We therefore apply a mapping, so that you can still use all\n[highlight.js](https://highlightjs.org) short-codes but also those of\n[ace](https://ace.c9.io).\n\nOverview: https://github.com/LiaScript/docs/blob/master/Code.md\n\n\n### JavaScript 💫\n\n                                 --{{0}}--\nIn contrast to common Markdown parsers or viewers, LiaScript allows you to include and execute JavaScript code.\nWhen combined with HTML elements, you are free to integrate whatever functionality you desire.\n\n                                 --{{1}}--\nThe last statement of your script also defines the result that will be shown, but only if it is not `undefined`.\nYou can also use `console.log` to log the script activities.\nAs the examples below show, you can combine your scripts with LiaScript animations, so they will only be executed in the right fragment/context.\nHowever, you can do much more with scripts.\n\n                                  {{1}}\n\u003e Checkout Section [JavaScript](#JavaScript-or-JS-Components) for more information!\n\n``` html\nDo some internal calculation \u003cscript\u003e 99 * 88  \u003c/script\u003e, the next script\ncontains an error \u003cscript\u003e 99 * a \u003c/script\u003e.\n\n                                  {{2}}\n\u003cscript\u003e\n    // Initialize a Line chart in the container with the ID chart\n    new Chartist.Line('#chart', {\n        labels: [1, 2, 3, 4],\n        series: [[100, 120, 180, 200]]\n    });\n\n    console.debug(\"loaded #chart\") // or undefined\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart\"\u003e\u003c/div\u003e\n```\n\nDo some internal calculation \u003cscript\u003e 99 * 88  \u003c/script\u003e, the next script\ncontains an error: \u003cscript\u003e 99 * a \u003c/script\u003e.\n\n                                {{2-3}}\n\u003cscript\u003e\n// Initialize a Line chart in the container with the ID chart1\nnew Chartist.Line('#chart1', {\n  labels: [1, 2, 3, 4],\n  series: [[100, 120, 180, 200]]\n});\n\nconsole.debug(\"loaded #chart1\")\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart1\"\u003e\u003c/div\u003e\n\n\n                                {{3}}\n\u003cscript\u003e\n// Initialize a Line chart in the container with the ID chart2\nnew Chartist.Line('#chart2', {\n  labels: [1, 2, 3, 4],\n  series: [[-100, 120, 180, 20]]\n});\n\nconsole.debug(\"loaded #chart2\")\n\u003c/script\u003e\n\u003cdiv class=\"ct-chart ct-golden-section\" id=\"chart2\"\u003e\u003c/div\u003e\n\n\n    --{{4}}--\nWhen discussing events, whether past, present, or future, your course may quickly become outdated.\nThis is where scripts, as an initial building block, can shine. Using basic datetime calculations ensures precise determination of when events have occurred or will occur.\nRather than relying solely on your calculations, users have the opportunity to inspect and validate your code by double-clicking on the highlighted script result.\nEven more, it is possible to modify the code, enabling them to double-check your findings and experiment with the results.\n\n\n      {{4}}\n``` markdown\nRussia started its invasion of Ukraine\n\u003cscript format=\"relativetime\" unit=\"day\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n```\n\n      {{4}}\nRussia started its invasion of Ukraine\n\u003cscript format=\"relativetime\" unit=\"day\" run-once\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n\n     --{{5}}--\nWe combined scripts with the [Internationalization API](#Internationalization-API), which enables appropriate formatting of outputs.\nThe days output is not hardcoded in our code.\nIf we change the locale to another language, such as in the following example, the result will be optimized for the Russian language.\nFurthermore, by using the embedded Google Translator functions, the locale will be automatically set according to the selected language.\n\n\n     {{5}}\n\u003csection\u003e\n\n```` markdown\nРоссия начала вторжение в Украину\n\u003cscript format=\"relativetime\" unit=\"day\" locale=\"ru\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n...\n````\n\nРоссия начала вторжение в Украину\n\u003cscript format=\"relativetime\" unit=\"day\" locale=\"ru\"\u003e\n// Define the start date of the invasion\nconst invasionStartDate = new Date('2022-02-24');\n\n// Get the current date\nconst currentDate = new Date();\n\n// Calculate the difference in milliseconds\nconst differenceInMs = currentDate - invasionStartDate;\n\n// Convert milliseconds to days\nconst differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);\n\n// Calculate the number of full days\nconst daysSinceInvasion = Math.floor(differenceInDays);\n\n-daysSinceInvasion\n\u003c/script\u003e.\n\n\u003c/section\u003e\n\n    --{{6}}--\nNow, imagine that instead of performing simple calculations, a script could access any kind of real-world data and output it as either HTML or LiaScript.\nWhat's more, picture scripts being directly combined with input fields, and a change in one script triggering the execution of another.\nAll of this is possible in LiaScript.\nWe have re-imagined the usage of scripts as interactive powerhouses, and we will delve into the details in chapter [JavaScript or JS-Components](#JavaScript-or-JS-Components).\n\n      {{6}}\n\u003csection\u003e\n\n``` markdown\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo Weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"waiting for the weather\"\n\u003c/script\u003e\n```\n\n---\n\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"LIA: wait\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n\n### Horizontal rules 💫\n\n                          --{{0}}--\nAt the moment it is possible to insert horizontal rules by adding lines with at\nleast 3 dashes, longer sequences of dashes are allowed too. Common Markdown also\nallows to define such rules with asterisks `*`, but this is used in LiaScript to\ngroup blocks, as we will described later...\n\n**Markdown-Syntax:**\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nsome paragraph\n\n---\n\nsomething else\n\n----------------\n```\n\n**Result:**\n\nsome paragraph\n\n---\n\nsomething else\n\n----------------\n\n\n## Custom Styling\n\n\n                 \u003c!-- style=\"color: red\" --\u003e\n                          --{{0}}--\nIn order to support a nearly equal experience for all Markdown interpreters you\nshould stick with the basic Markdown notation or use simple HTML-tags as much as\npossible, for example if you want to change the color of a sentence or a word.\n\n                          --{{1}}--\nHowever, LiaScript allows you also to inject attributes into all Markdown blocks\nand inline elements by attaching an HTML-comment to that specific object. If the\ncontent of this HTML-comment can be parsed as HTML-attributes, then these\nsettings will be applied to the element attached.\n\n                           {{1-2}}\n``` markdown\n\u003c!--\nstyle=\"color: red;\" id = \"elementID\" class=\"foo bar\"\n--\u003e\n```\n\n\n\n                            {{2}}\n********************************************************************************\n\n**Further resources:**\n\n                         --{{2}}--\nThe following resources will give you a full overview onto the most common HTML\nattributes and onto styling elements. It might be pretty overwhelming at first\nglance, what is possible, but you will see, that with some basic elements you\ncan already achieve a lot. And when it comes to HTML and styling, you can find\nexamples for pretty much everything on your preferred search-engine, e.g.\n[ecosia](https://www.ecosia.org).\n\n\n* **HTML attributes:**\n\n  \u003e Checkout the following link to get a full overview onto all HTML attributes,\n  \u003e which you can also apply in LiaScript:\n  \u003e [w3schools: HTML Attribute Reference](https://www.w3schools.com/tags/ref_attributes.asp)\n\n* **Styling with CSS:**\n\n  \u003e In most cases inline-styling will be applied, the following website covers\n  \u003e all CSS-Syntax elements, which then can be used simply by attaching comments\n  \u003e in the following way:\n  \u003e\n  \u003e `\u003c!-- style=\"color: red; font-size: 20px;\" --\u003e`\n  \u003e\n  \u003e [w3schools CSS-Tutorial](https://www.w3schools.com/Css/css_syntax.asp)\n  \u003e\n  \u003e !?[Basic Inline Styling - CSS](https://www.youtube.com/watch?v=jH_WY-sQ8Lg)\n\n********************************************************************************\n\n\n### Block-Styling\n\n                            --{{0}}--\nSo what is actually a block in LiaScript or Markdown? Basically it is everything\nthat is separated by a newline, such as a paragraph, a table, a code-block or a\nlist. But it can also be a block of multiple blocks, such as a list, which may\nconsist of different bullet points, where every bullet point can be a list of\nmultiple blocks by itself.\n\n* **Blocks:**\n\n  * [tables](#Tables)\n  * [paragraphs](#content-blocks)\n  * [lists (ordered/unordered)](#lists)\n  * [blockquotes](#blockquotes)\n  * [horizontal rules](#horizontal-rules-💫)\n  * [HTML-blocks](#HTML) (if standing alone)\n\n* **LiaScript-Extensions:**\n\n  * [comments](#narrator)\n  * [citations](#citations-💫)\n  * [effects](#effects)\n  * [quizzes](#quizzes)\n  * [surveys](#surveys)\n  * [tables](#fun-with-tables)\n  * [ASCII-Art](#ascii-art) \u0026 [Charts](#charts)\n  * [executable code-blocks and projects](#Syntax-highlighting)\n\n\n\n                          --{{1}}--\nSettings for entire blocks can be set with a **starting** comment that includes\nall required HTML-attributes and can even contain animation settings. This can\nalso be used to highlight specific elements of your slides.\n\n                            {{1}}\n********************************************************************************\n\n**LiaScript-Syntax:**\n\n``` markdown\n\u003c!-- class = \"animated rollIn\" style = \"animation-delay: 3s; color: purple\" --\u003e\nThe whole text-block should appear in purple color and with a wobbling effect.\nWhich is a **bad** example, please use it with caution ...\n\n```\n\n**Result: (be patient)**\n\n\u003c!-- class = \"animated rollIn\" style = \"animation-delay: 3s; color: purple\" --\u003e\nThe whole text-block should appear in purple color and with a wobbling effect.\nWhich is a **bad** example, please use it with caution ...\n\n********************************************************************************\n\n\n                          --{{2}}--\nAdditionally, this method can be used to overwrite some aspects of all Markdown\nelement. The example shows how you can change the background color for a certain\nelement. This comes quite handy, if you want to emphasize further some parts of\nyour document.\n\n                            {{2}}\n********************************************************************************\n\n``` markdown\n\u003c!-- style=\"background-color: tomato;\"--\u003e\n\u003e **Warning**\n\u003e\n\u003e You have to be aware, that this does not affect the\n\u003e font-color (dark/light mode). Try to use  pastel\n\u003e colors, or overwrite the color manually with:\n\u003e\n\u003e `color: white;`\n```\n\n\u003c!-- style=\"background-color: tomato;\"--\u003e\n\u003e **Warning**\n\u003e\n\u003e You have to be aware, that this does not affect the\n\u003e font-color (dark/light mode). Try to use  pastel\n\u003e colors, or overwrite the color manually with:\n\u003e\n\u003e `color: white;`\n\n********************************************************************************\n\n                          --{{3}}--\nThe following example depicts the interconnection of nested block-elements. For\nthe entire table and also for all other blocks, it is possible to set the\nproperties for width, font-color and font size, which will be applied onto every\ncell. And every cell can overwrite these values simply by adding a style-comment\nas the first element. These settings are even preserved, if you reorder the\ntable.\n\n                            {{3}}\n********************************************************************************\n\n``` markdown\n               \u003c!-- style=\"width: 50%; min-width: 400px; color: red; font-size:20px\" --\u003e\n| \u003c!-- style=\"background: azure\"--\u003e Header 1 | \u003c!-- style=\"background: brown\"--\u003e Header 2        |\n|:------------------------------------------ |:------------------------------------------------- |\n| \u003c!-- style=\"background: coral\"--\u003e Item 1   | \u003c!-- style=\"background: rgb(12,12,111)\"--\u003e Item 2 |\n| \u003c!-- style=\"background: cyan\" --\u003e Item 3   | \u003c!-- style=\"background: #b88608\"--\u003e Item 4        |\n```\n\n**Result**\n\n                \u003c!-- style=\"width: 50%; min-width: 400px; color: red; font-size:20px\" --\u003e\n| \u003c!-- style=\"background: azure\"--\u003e Header 1 | \u003c!-- style=\"background: brown\"--\u003e Header 2        |\n|:------------------------------------------ |:------------------------------------------------- |\n| \u003c!-- style=\"background: coral\"--\u003e Item 1   | \u003c!-- style=\"background: rgb(12,12,111)\"--\u003e Item 2 |\n| \u003c!-- style=\"background: cyan\" --\u003e Item 3   | \u003c!-- style=\"background: #b88608\"--\u003e Item 4        |\n\n********************************************************************************\n\n\n                          --{{4}}--\nThere are some special (internal) formats for changing the appearance of\ncode-blocks and how to deal with tables. These topics will be handled\nseparately.\n\n\n### Inline-Styling\n\n                          --{{0}}--\nSo what are inline elements? These are basically all the tiny parts, such as\nsingle words, bold-text, links, inline-code, but also images and videos. In\ncontrast to blocks where you attach the comment to front, inline elements can be\nmodified by attaching a comment to the end. That's it ...\n\n**LiaScript-Syntax:**\n\n``` markdown\nThis **is an important**\u003c!-- style=\"color: red\" --\u003e part\nof the text\u003c!-- style=\"color: green; font-size: 10rem;\" --\u003e.\n\n\n![image](...Creative-Tail-Animal-lion.svg)\u003c!--\nstyle = \"width: 300px;\n         border: 10px solid;\"\nclass = \"animated infinite bounce\"\n--\u003e\n\nSome blurry and black-and-white video:\n\n!?[movie](https://www.youtube.com/watch?v=8pTEmbeENF4)\u003c!--\nstyle = \"filter: blur(2px); grayscale(80%);\"\n--\u003e\n```\n\n                          --{{1}}--\nAs you can see from the results, the entire bold text is treated as one block,\nwhereby in the second case only the single word \"text\" gets modified.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\nThis **is an important**\u003c!-- style=\"color: red\" --\u003e part\nof the text\u003c!-- style=\"color: green; font-size: 10rem;\" --\u003e.\n\n![image](https://upload.wikimedia.org/wikipedia/commons/d/d0/Creative-Tail-Animal-lion.svg)\u003c!--\nstyle = \"width: 300px;\n         border: 10px solid;\"\nclass = \"animated infinite bounce\"\n--\u003e\n\nSome blurry and black-and-white video:\n\n!?[movie](https://www.youtube.com/watch?v=8pTEmbeENF4)\u003c!--\nstyle = \"filter: blur(2px) grayscale(80%);\"\n--\u003e\n\n********************************************************************************\n\n                          --{{2}}--\nCSS is a pretty powerful tool and by using HTML-comments to tweak your Markdown,\nyou can still read the document with any ordinary Markdown interpreter that\nsimply ignores these comments.\n\n### Images and Styling\n\n                          --{{0}}--\nStyling images might happen quite often. However, you have to be aware of the\nfact, that the modal view functionality is only possible if LiaScript is in\ntotal control of the image. Thus, it will handle the optimal scaling for you and\nadds a click-event to switch to the modal view.\n\n```markdown\n![The Wave](...ave_off_Kanagawa_%28Kanagawa_oki_nami.jpg \"without attribute injection\")\n\n![Workplace](https://www.w3schools.com/htmL/workplace.jpg \"with attribute are added\")\u003c!-- usemap=\"#workmap\" --\u003e\n\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" title=\"Computer\" onclick=\"alert('You clicked the Computer')\" \u003e\n  \u003carea shape=\"rect\" coords=\"290,172,333,250\" title=\"Phone\" href=\"#12\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" title=\"Cup of coffee\" href=\"#Projects\"\u003e\n\u003c/map\u003e\n```\n\n                          --{{1}}--\nThus, if you click onto the first image, you will be able to inspect it in more\ndetail. If you click onto the second image, then a map associated with this\nimage  is in charge of it, which handles click-events differently.\n\n                            {{1}}\n********************************************************************************\n\n**Result**\n\n![Workplace](https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/1952.343_-_Under_the_Wave_off_Kanagawa_%28Kanagawa_oki_nami.jpg/2560px-1952.343_-_Under_the_Wave_off_Kanagawa_%28Kanagawa_oki_nami.jpg \"without attribute injection\")\n\n![Workplace](https://www.w3schools.com/htmL/workplace.jpg \"with attribute are added\")\u003c!-- usemap=\"#workmap\" --\u003e\n\n\u003cmap name=\"workmap\"\u003e\n  \u003carea shape=\"rect\" coords=\"34,44,270,350\" title=\"Computer\" onclick=\"alert('Computer')\" \u003e\n  \u003carea shape=\"rect\" coords=\"290,172,333,250\" title=\"Phone\" href=\"#12\"\u003e\n  \u003carea shape=\"circle\" coords=\"337,300,44\" title=\"Cup of coffee\" href=\"#Projects\"\u003e\n\u003c/map\u003e\n\n\u003e -- The example for the map was taken from\n\u003e [w3schools](https://www.w3schools.com/tags/tag_map.asp).\n\n********************************************************************************\n\n### What else can you do\n\n                         --{{0}}--\nThe following examples present some useful application of combining attribute\ninjection into LiaScript components.\n\n\n#### Hiding Content\n\n                          --{{0}}--\nThere might be use cases where you either want to show some parts only on GitHub\nand provide and alternative view at LiaScript. As it was shortly introduced in\nthe sections before, you can add comments to the start of every block to add\nadditional attributes. These attributes can also be used as a trigger to hide or\nshow content.\n\n``` markdown\n\u003c!-- style=\"display:block\" --\u003e\n\u003cdiv style=\"display:none\"\u003e\n\nVisible only in LiaScript, but not on GitHub.\n\n\u003c/div\u003e\n\n-----------------------------------------------\n\n\u003c!-- style=\"display:none\" --\u003e\n\u003cdiv style=\"display:block\" id=\"fooBar\"\u003e\n\nNot visible in LiaScript, but on GitHub!\n\n\u003c/div\u003e\n```\n\n                          --{{1}}--\nThe attributes within the comment will overwrite the attributes within the\nblock. Thus, if there would be more stuff within style, this will be overwritten\ntoo, but other attributes like `id` that are not contained within the comment\nwon't be affected...\n\n#### Customizing Multimedia\n\n                          --{{0}}--\nAs you have seen previously sizing videos and applying CSS filters is easy.\nHowever, there might also be the case that you want to start a video from some\nspecial point or to play it automatically, when it appears.\n\n\n                          --{{1}}--\nIf the video is yours, then you can use the following attributes `autoplay` and\n`muted` to control the behavior and the additional fragment `#t=4,12` attached\nto the URL of the video, will tell the browser where to start and where to stop\nthe video. The stop-parameter should be optional.\n\n\n                            {{1}}\n``` markdown\n!?[Something about math](vid/math.mp4#t=4,12)\u003c!--\nautoplay=\"true\"\nmuted=\"true\"\n--\u003e\n```\n\n\n                          --{{2}}--\nThe resulting video starts immediately at second 4 and stops at second 10, and\nof course it will be muted.\n\n                 {{2}}\n!?[Something about math](vid/math.mp4#t=4,10)\u003c!--\nautoplay=\"true\"\nmuted=\"true\" --\u003e\n\n\n##### Platform Diversity\n\n                          --{{0}}--\nHowever, if you are referencing other resource on platforms such as\n[YouTube](https://youtube.com), [Vimeo](https://vimeo.com),\n[DailyMotion](https://dailymotion.com), [PeerTube](https://peertube.tv) or\n[TeacherTube](https://teachertube.com) you can achieve something similar, but in\na slightly different way. These settings have to be added to the URL of your\nresource and different platforms might have different capabilities.\n\n\n                          --{{1}}--\nIn most cases, you can use something like `\u0026autoplay=1`, `\u0026muted=true` or\n`\u0026mute=false` as it is depicted below:\n\n                            {{1}}\n`!?[Multimedia](url/...?autoplay=1\u0026mute=1\u0026start=1895\u0026end=1905)`\n\n\n                          --{{2}}--\nBut, different platforms support different functionalities. Here is a link list\nof the different possible settings. For [PeerTube](https://peertube.tv) and\n[TeacherTube](https://teachertube.com) we could not find any settings so far.\n\n\n                            {{2}}\n********************************************************************************\n\n**URL Parameters:**\n\n* [DailyMotion](http://embedcodedailymotion.blogspot.com/2016/05/dailymotion-embed-generator-tdborder.html)\n* [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters)\n* [YouTube](https://developers.google.com/youtube/player_parameters)\n* PeerTube\n* TeacherTube\n\n********************************************************************************\n\n\n## Math \u0026 Formulas\n\n                 --{{0}}--\nThe following will not work on [GitHub](https://github.com), but most\nMarkdown-interpreters do support formulas with a\n[LaTeX](https://en.wikipedia.org/wiki/LaTeX)-like syntax. As it is common in\nmany Markdown dialects, such as in\n[Pandoc-Markdown](https://pandoc.org/MANUAL.html#math), you can apply dollar\nsigns to surround a \"math\"-environment. Everything within the dollar signs\nbelongs to the formula only, there is currently no nesting of other HTML or\nLiaScript/Markdown allowed.\n\n\n              --{{1}}--\nUse single dollar signs to define an inline formula, which will be treated as an\nordinary text element.\n\n                          {{1}}\nInline math-mode `$ \\frac{a}{\\sum{b+i}} $` -\u003e $ \\frac{a}{\\sum{b+i}} $\u003c!-- class=\"notranslate\"--\u003e\n\n\n             --{{2}}--\nUse double dollar signs to indicate a formula-block. This way you can also use\nmultiple lines to define a formula or a set of formulas that will furthermore\nbe displayed larger.\n\n\n                          {{2}}\n\u003csection\u003e\n\nMulti-line math-mode can be applied by double dollars `$$ formula $$`\n\n\u003c!-- class=\"notranslate\" --\u003e\n$$\n  \\frac{a}{\\sum{b+i}}\n$$\n\n\u003c/section\u003e\n\n\n                           --{{3}}--\nCurrently, we apply the [KaTeX](http://katex.org) library for typesetting. If you\nare already familiar with [LaTeX](https://en.wikipedia.org/wiki/LaTeX) or\n[MathJAX](https://www.mathjax.org), as another alternative library, then you can\nstart immediately to define formulas. If not, then check out some of the\nfollowing resources.\n\n         {{3}}\n* via KaTeX: http://katex.org\n\n* Supported functions:\n\n  https://katex.org/docs/supported.html\n\n* Alphabetically sorted features:\n\n  https://katex.org/docs/support_table.html\n\n* Detexify: get the appropriate command by drawing symbols\n\n  http://detexify.kirelabs.org/classify.html\n\n\n                 --{{4}}--\nSometimes it might be tedious to find the right, command for the intended\nsymbol, if you can draw it, then you should give\n[detexify](http://detexify.kirelabs.org/classify.html) a try.\n\n\n\n### Formula Playground\n\u003c!--\n\n@runFormula: \u003cscript\u003econsole.html(`\u003clia-formula formula=\"@'input\" displayMode=\"true\"\u003e\u003c/lia-formula\u003e`);\"LIA: stop\"\u003c/script\u003e\n\n--\u003e\n\n                          --{{0}}--\nAlignment is a typical use case for formulas. The code below, shows how this can\nbe achieved by using ampersands, which are used as an anchor for the center of a\nformula.\n\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\begin{split}\n  a \u0026=b+c \\\\\n    \u0026=e+f \\\\\n    \u0026=g+h+i+j\\\\\na+b+\u0026c+d=12\\\\\n\\end{split}\n```\n@runFormula\n\n\n                          --{{1}}--\nIf you want to number your formulas, we recommend using the `\\tag` command to\nadd or overwrite the reference number. Automatic numbering does not work well at\nthe moment, since the formulas are rendered within a\n[web component](https://en.wikipedia.org/wiki/Web_Components), and it does\nconflict with the LiaScript idea of animation, which we describe in a later part\nof this series.\n\n\n      {{1}}\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\tag{33}\n\\begin{equation}\n a =b+c\n\\end{equation}\n```\n@runFormula\n\n\n                          --{{2}}--\nAnd finally it is possible to add some styling, but with\n[KaTeX](https://katex.org/docs/supported.html#html)-functionalities, this\nincludes some basic styling, with the same inline CSS, as we had described it in\nsection [Custom Styling](#custom-styling). (Can you spot the strange looking\ngerman character [_Eszett_](https://en.wikipedia.org/wiki/%C3%9F).) And you can\nmark elements as links with `\\href` and add images with the command\n`\\includegraphics`.\n\n\n      {{2}}\n\u003c!-- class=\"notranslate\"--\u003e\n```latex\n\\begin{Bmatrix}\n   a \u0026 b \u0026 c \u0026 d \u0026 e \u0026 f \\\\\n   g \u0026 h \u0026 i \u0026 j \u0026 k \u0026 l \\\\\n   m \u0026 n \u0026 o \u0026 p \u0026 q \u0026 r \\\\\n   s \u0026 t \u0026 u \u0026 v \u0026 w \u0026 x \\\\\n   y \u0026 z \u0026 ä \u0026 ö \u0026 ü \u0026\n   \\htmlStyle{color: red; font-size: 26px}{ß}\n\\end{Bmatrix}\n\\\\\n\\href{https://katex.org/docs/supported.html#html}{\\KaTeX HTML support}\n\\\\\n\\includegraphics[height=0.8em, totalheight=0.9em, width=0.9em, alt=KA logo]{https://katex.org/img/khan-academy.png}\n```\n@runFormula\n\n### Formula-Macros\n\u003c!--\nformula:  foo  {x^2}\nformula:  \\bar  {#1^2}\n--\u003e\n\n                 --{{0}}--\nAdditionally, you can define custom macros, as it is supported by [KaTeX](https://katex.org).\nHowever, there are currently two options to define macros, which can be either local or global.\n\n\n       {{1}}\n\u003csection\u003e\n\n#### Local\n\n      --{{1}}--\nLocal macros can be defined directly within the formula environment.\nEven if you use something like `\\gdef`, which stands for global define, these macros will only affect the local formula.\nThe reason for this is, that in contrast to other Markdown renderers, LiaScript will only parse and display the current slide/section.\nA global definition on slide 100 will not affect the formulas on slide 12.\n\nDocumentation: [KaTeX-Macros](https://katex.org/docs/supported.html#macros)\n\n`$ \\def\\foo{x^2} \\foo + \\foo $` --\u003e $ \\def\\foo{x^2} \\foo + \\foo $\n\n`$ \\gdef\\bar#1{#1^2} \\bar{y} + \\bar{y} $` --\u003e $ \\gdef\\bar#1{#1^2} \\bar{y} + \\bar{y} $\n\n\u003c/section\u003e\n\n\n    {{2}}\n\u003csection\u003e\n\n#### Global\n\n    --{{2}}--\nHowever, if you want to define a custom set of macros and reuse them within all of your formulas, you will have to define them within the main comment of your document.\nUse the `formula` macro, whereby the first word defines the macro name (the starting backslash is optional) and the remainder is used as the body.\nAll of these macros are then passed to every formula while rendering, see therefore the comments at:\n\n[KaTeX rendering options](https://katex.org/docs/options.html)\n\n\n``` markdown\n\u003c!--\nauthor: ...\n\nformula:  foo   {x^2}\nformula:  \\bar  {#1^2}\n\n--\u003e\n\n# Main\n\n$ \\foo + \\foo $\n\n$ \\bar{y} + \\bar{y} $\n```\n\n`$ \\foo + \\foo $` --\u003e $ \\foo + \\foo $\n\n`$ \\bar{y} + \\bar{y} $` --\u003e $ \\bar{y} + \\bar{y} $\n\n\u003c/section\u003e\n\n\n    {{3}}\n\u003csection\u003e\n\n#### Changing\n\n    --{{3}}--\nAdditionally, it is possible to overwrite global formulas or define new ones per slide.\nIn the example below, the new formula definition for `foo` will be used, while `bar` remains as it is.\nHowever, if you switch to another slide, the previously global definition of `foo` is used again.\n\n\n``` markdown\n...\n\n## Subsection\n\u003c!--\nformula: \\foo  {y^3}\n--\u003e\n\n$ \\bar{\\foo} + \\bar{\\foo} $\n\n```\n\n\u003c/section\u003e\n\n\n    {{4}}\n\u003csection\u003e\n\n#### Mixing global and local\n\n    --{{4}}--\nUnfortunately, it is currently not possible to use both types of macros within one formula.\nIf there are local macro definitions, then no global macros are passed.\nThus, the following formula will result in an error, since the global `\\bar` is not defined.\nPassing macros as rendering options and defining local ones currently result in KaTeX errors.\n\n`$ \\def\\foo{x^2} \\bar{\\foo} + \\bar{\\foo} $` $ --\u003e \\def\\foo{x^2} \\bar{\\foo} + \\bar{\\foo} $\n\n\u003c/section\u003e\n\n\n### Chemical Formulas\n\n    --{{0}}--\nLiaScript now supports rendering chemical formulas using KaTeX!\nWith this update, you can include chemical equations in your slides using the `mhchem` macros.\n\n    --{{1}}--\nTo display chemical equations, simply wrap your formula using the `\\ce{...}` command. For example:\n\n      {{1}}\n``` latex\n$\\ce{CO2 + C -\u003e 2 CO}$\n```\n\n    --{{2}}--\nThis will render as:\n\n      {{2}}\n$\\ce{CO2 + C -\u003e 2 CO}$\n\n      {{3}}\n\u003e For further details on the syntax and additional features provided by `mhchem`, please refer to the [official mhchem documentation](https://mhchem.github.io/MathJax-mhchem/).\n\n\n## Footnotes\n\n                            --{{0}}--\nBefore moving on to the LiaScript specific features, such as quizzes, surveys,\nanimations, ASCII-art, etc., we would like present a last feature that is common\nto many Markdown dialects and these are footnotes. So, what are footnotes in\ngeneral and when to use them.\n\n                            {{0-1}}\n\u003e     {{|\u003e UK English Male}}\n\u003e Footnotes are notes at the foot of the page while endnotes are collected under\n\u003e a separate heading at the end of a chapter, volume, or entire work. Unlike\n\u003e footnotes, endnotes have the advantage of not affecting the layout of the main\n\u003e text, but may cause inconvenience to readers who have to move back and forth\n\u003e between the main text and the endnotes.\n\u003e\n\u003e -- [Wikipedia](https://en.wikipedia.org/wiki/Note_%28typography%29)\n\n\n                          --{{1}}--\nIn LiaScript a \"section\", which is defined by a header and a body, resembles a\npage. Thus, the body might contain a couple of footnote-marks, while the actual\nfootnotes have to be defined at the end of the body. Other Markdown interpreters\nmight define a more \"wide-spread\" usage of footnotes, but in LiaScript this is\nnot possible at the moment. We parse/interpret only one section at a time and\nnot the entire document. So keep this in mind when using footnotes.\n\n\n                            {{1}}\n``` markdown\n### header 3\n\nbody\n\nbody\n\nbody\n\nfootnotes\n\n## ...\n```\n\n### Standard-Footnotes\n\n                          --{{0}}--\nThe standard way of creating footnotes is to attach a marker to important\nelements within your sections. A marker is defined by brackets with a starting\n`^`. Then you can insert numbers, symbols and words.\n\n               \u003c!-- class=\"translate\"--\u003e\n``` markdown\nSomething[^1] important[^2] about[^🦶] notes.\n```\n\n                          --{{1}}--\nAt the end of your body, you simply add a list with all indented remarks you\nwant to add. This list starts with your markers, that are followed by a colon.\nYour notes or footnote-bodies can consist of multiple paragraphs and all other\nblock-elements that you have mentioned so far, but they have to be indented with\nat least 2 spaces.\n\n                            {{1}}\n                \u003c!-- class=\"translate\"--\u003e\n``` markdown\n[^1]: **Something** and **anything** are concepts of existence in ontology,\n  contrasting with the concept of nothing. Both are used to describe the\n  understanding that what exists is not nothing without needing to address the\n  existence of everything. The philosopher, David Lewis, has pointed out that\n  these are necessarily vague terms, asserting that \"ontological ...\n\n  -- [Wikipedia](https://en.wikipedia.org/wiki/Something_%28concept%29)\n\n[^2]:\u003e It is **important** to mention that anything can be added to a footnote\n  \u003e also some piece of code, images, videos, etc.\n  \u003e\n  \u003e ??[How to Use Footnotes](https://www.youtube.com/watch?v=Gg6vXoHO95I)\n\n[^🦶]: Actually you are not forced to use numbers, you can use any kind of\n       symbol or even words too.\n\n       _But, please be concise._\n```\n\n                          --{{2}}--\nBy clicking onto the footnote, all of your comments will be shown in a modal\nview in all view-modes. If you are in \"textbook\" mode, then these footnotes\nare additionally displayed at the very end of the current \"page\".\n\n\n                            {{2}}\n********************************************************************************\n\n**Result:**\n\nSomething[^1] important[^2] about[^🦶] notes.\n\n********************************************************************************\n\n[^1]: **Something** and **anything** are concepts of existence in ontology,\n  contrasting with the concept of nothing. Both are used to describe the\n  understanding that what exists is not nothing without needing to address the\n  existence of everything. The philosopher, David Lewis, has pointed out that\n  these are necessarily vague terms, asserting that \"ontological ...\n\n  -- [Wikipedia](https://en.wikipedia.org/wiki/Something_%28concept%29)\n\n[^2]:\u003e It is **important** to mention that anything can be added to a footnote\n  \u003e also some piece of code, images, videos, etc.\n  \u003e\n  \u003e ??[How to Use Footnotes](https://www.youtube.com/watch?v=Gg6vXoHO95I)\n\n[^🦶]: Actually you are not forced to use numbers, you can use any kind of\n       symbol or even words too.\n\n       _But, please stick to one explicit format._\n\n### Inline-Footnotes\n\n                          --{{0}}--\nThe following idea of defining inline-footnotes was borrowed from LaTeX. If you\nwant to add only some text without further Markdown-syntax then you can add this\nin parentheses to your footnote-mark. In this case it is not necessary to add a\nmore sophisticated explanation to the end of the sections.\n\n\n`Inline Footnote [^x](__explanation__ in one line)` =\u003e Inline Footnote[^x](__explanation__ in one line)\n\n## State\n\n                          --{{0}}--\nSome words about state. The LiaScript runtime-environment preserves the internal\nstate of the following elements, depending on where you execute your courses and\ndepending on the version.\n\n* [Tasks](#tasks)\n* [Quizzes](#quizzes)\n* [Surveys](#surveys)\n* Code\n* `(\u003cscript\u003e)`\n\n\n                          --{{1}}--\nLiaScript currently runs in three different environments. You can either share\nand read courses via the [project website](https://LiaScript.github.io/course/),\ngenerate\n[SCORM-packages](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model),\nwhich can be uploaded to an LMS, or create self-containing websites.\n\n\n                            {{1}}\n1. **LiaScript PWA**\n\n                          --{{2}}--\n   If you share your course via the website, then all the courses and the\n   current course states are preserved within the Browser database\n   [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)\n   locally. **All of the states?** Well ... the internal state of the previous\n   components is only preserved, if your course has a version greater than or\n   equal to `1.0.0`. The default version is `0.0.1`, which means that the course\n   is in _development mode_, and thus the structure of your course might change\n   every time. If a user reloads the course, then all states are cleared.\n\n   - Where: https://LiaScript.github.io/course/\n   - Source: [liascript/src/typescript/connectors/Browser](https://github.com/LiaScript/LiaScript/tree/development/src/typescript/connectors/Browser)\n\n2. **SCORM 1.2**\n\n                          --{{3}}--\n   [SCORM](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model)\n   stands for Sharable Content Object Reference Model and allows you to store\n   the course state directly within every LMS that has support for SCORM 1.2.\n   For this case you have to use our\n   [exporter](https://github.com/LiaScript/LiaScript-Exporter), which translates\n   your course into a \"SCORM-compliant\" zip-file. You can check if your LMS has\n   support for SCORM, by visiting our LMS-overview.\n\n   - Where: https://github.com/LiaScript/LiaScript-Exporter#scorm12\n   - Source: [liascript/src/typescript/connectors/SCORM1.2](https://github.com/LiaScript/LiaScript/tree/development/src/typescript/connectors/SCORM1.2)\n   - Does your LMS support SCORM 1.2:\n     [LMS-Overview](https://github.com/LiaScript/LiaScript-Exporter#lms-support-list)\n\n3. **Base**\n\n                          --{{4}}--\n   You can also use our\n   [exporter-tool](https://github.com/LiaScript/LiaScript-Exporter) to create\n   single websites of your course. But, this \"base\" does only support to store\n   user-settings, such as style, mode, etc. This \"base-connector\" is also used\n   for the live-server and editors. If you are a developer and want to extend\n   the LiaScript support to store state within your backend, then this is the\n   right place to look at. This module provides an abstract class, to which all\n   stateful data is sent. You can simply inherit from this class and implement\n   the access to your system.\n\n   - Where: https://github.com/LiaScript/LiaScript-Exporter#web\n   - Source: [liascript/src/typescript/connectors/Base](https://github.com/LiaScript/LiaScript/tree/development/src/typescript/connectors/Base)\n\n                          --{{5}}--\nFor more information on versioning and how to use it, check out section\n[`version`](#version) within the [macros](#macros) section. But for now, it is\nokay to know, that you can adapt, restructure and share your courses freely, if\nyou are in dev-mode. If your course is ready to be launched, use versioning to\npreserve the state of your users.\n\n## Tasks\n\n                          --{{0}}--\nBefore we show you how to create quizzes, we would like to introduce **tasks**,\nwhich were also a source of inspiration for us, for developing a similar syntax\nfor quizzes and surveys. The GitHub flavored Markdown offers a very intuitive\nway of creating check-lists or task-lists.\n\n\u003c!-- class=\"translate\" --\u003e\n``` markdown\n**Which topics did you master so far?**\n\n- [ ] Biology\n- [ ] Chemistry\n- [ ] Computer Science\n- [X] Something about LiaScript\n```\n\n                          --{{1}}--\nIt is basically a list where the brackets are used to symbolize check-boxes and\nby using an upper- or lowercase x, it is possible to mark a checkbox as checked.\nIn LiaScript however, it is possible for the user to manipulate these states,\nand they will be preserved if your document is in version 1 or greater.\n\n                            {{1}}\n********************************************************************************\n\n**Which topics did you master so far?**\n\n- [ ] Biology\n- [ ] Chemistry\n- [ ] Computer Science\n- [X] Something about LiaScript\n\n********************************************************************************\n\n### Tasks and Scripting\n\n                          --{{0}}--\nIn case you are wondering where the **\"Script\"** in LiaScript comes from? We\nwanted to make documents more interactive, by embedding native support for\nscripting. Coding will become an essential skill in the future so why not using\nit to directly extend the native capabilities of static documents and its\nelements. Scripts can either be executed separately or they can be attached to\ntasks, quizzes, surveys, and code-snippets.\n\n                          --{{1}}--\nThe example might look a bit weird for the moment, but it is only meant as a\ndemonstration. You can use scripting in LiaScript, if you want to, but it is not\nrequired. Thus, whenever you change the state of the task-list, then the script\nbelow gets executed and the `@input`-macro will be substituted by current input.\n`output=\"tasks\"` says, that the result is published under the topic \"tasks\",\nthus, every script that contains an `@input(\\`tasks\\`)` will be executed\nafterwards as well with the changed input. Task-lists simply produces and array\nwith boolean values.\n\n                            {{1}}\n\u003c!-- class=\"translate\" --\u003e\n``` markdown\n**What do you want to learn today?**\n\n- [X] Biology\n- [ ] Chemistry\n\u003cscript output=\"tasks\"\u003e\"@input\"\u003c/script\u003e\n\n\u003cscript style=\"width: 100%\"\u003e\ntry {\n  let task = @input(`tasks`) // interpret the output=\"tasks\"\n\n  if(task[0]) {\n    send.liascript(`## Biology\n\nHey, great, you want to learn something about Biology.\n\n* resource 1\n* resource 2\n\nThe input from the tasks above was: [${task}]`)\n  } else send.clear()\n} catch(e) { }\n\u003c/script\u003e\n```\n\n                          --{{2}}--\nDepending on the input scripts can generate different results, it is even\npossible to return LiaScript code, which will be analyzed and rendered\ndynamically. If an empty string or undefined gets returned, then the script will\nnot be visible to the user. We will describe all Lia-Scripting capabilities and\nfeatures in more detail in a later [chapter](#javaScript-or-js-components).\n\n\n                            {{2}}\n********************************************************************************\n\n**What do you want to learn today?**\n\n- [X] Biology\n- [ ] Chemistry\n\u003cscript output=\"tasks\"\u003e\"@input\"\u003c/script\u003e\n\n\n\u003cscript style=\"width: 100%\"\u003e\ntry {\n  let task = @input(`tasks`)\n\n  if(task[0]) {\n    send.liascript(`## Biology\n\nHey, great, you want to learn something about Biology.\n\n* resource 1\n* resource 2\n\nThe input from the tasks above was: [${task}]`\n    )\n  } else send.clear()\n} catch(e) { }\n\u003c/script\u003e\n\n\n\u003cscript style=\"width: 100%\"\u003e\ntry {\n  let task = @input(`tasks`)\n\n  if(task[1]) {\n    send.liascript(`## Chemistry\n\nHey, great, you want to learn something about Chemistry.\n\nThe input from the tasks above was: [${task}]\n\n...`)\n  } else send.clear()\n} catch(e) { }\n\u003c/script\u003e\n\n********************************************************************************\n\n\n                          --{{3}}--\nIf we are talking about embedding scripts, that perform some kind of\ncalculation, data analysis, etc. Why shouldn't this be visible to the user as\nwell? We all know what can happen when you cannot get access to primary data and\nthe code that was used to analyze it. In LiaScript you can inspect these\nhighlighted elements with rounded corners, which represent the result of a\nscript, simply by double-clicking or double-tabbing. The user can manipulate\nthem and observe the results, simply by changing the code. If the editor is\nclosed, then the code gets reevaluated.\n\n                            {{3}}\n\u003e Europe's entire austerity policy after the debt crisis was based on wrong\n\u003e conclusions drawn from incorrect data and false calculations from a\n\u003e **single Excel spreadsheet**.\n\u003e\n\u003e https://en.wikipedia.org/wiki/Growth_in_a_Time_of_Debt\n\n                          --{{4}}--\nBut, this is enough for the moment, let us continue with quizzes...\n\n## Quizzes\n\n                          --{{0}}--\nQuizzes are an essential element of every online course, which allow students to\nreflect and test their knowledge. As mentioned before, we used the\nGitHub-flavored Markdown notation for tasks as an inspiration for quizzes.\n\n                          --{{1}}--\nLong story short, everything that is related to quizzes is defined as a\ncombination of brackets with brackets or parentheses.\n\n    {{1-2}}\n- `[[   ]]`\n- `[(   )]`\n\n                          --{{2}}--\nLiaScript currently supports 6 different types of quizzes and one, so-called\ngeneric type, which can be used to created custom quizzes of any kind.\n\n\n                            {{2-3}}\n1. Multiple-Choice: `[[X|x| ]] ...`\n2. Single-Choice:   `[(X|x| )] ...`\n3. Matrix: as a combination of multiple- and single-choice quizzes\n3. Text-Quiz: `[[solution]]`\n4. Selection-Quiz: `[[ opt. 1 | opt. 2 | (solution opt.) ]]`\n5. Gap-Text everything: Use selection- and text-quizzes within Markdown-blocks\n0. \"Generic\": `[[!]]`\n\n\n                          --{{3}}--\nAdditionally, it is possible to tweak every quiz with additional features, such\nas hints, a resolution that is presented if the users solves the quiz by their\nown or clicks onto the \"show solution\" button. And finally, as you have seen it\nwith tasks, you can attach scripts to each quiz in order to implement more\nsophisticated quizzes or simply to log the output.\n\n                            {{3}}\n1. Hints: `[[?]]`\n2. Solutions: some arbitrary Markdown content\n3. Associated scripts: to be executed, when the user clicks onto the\n   \"check\"-button\n\n### Quiz Types\n\n                          --{{0}}--\nWithin the following section we will introduce the 6 types of quizzes, which are\ncurrently supported by LiaScript. Additionally, you have to know that users\ncannot fail, by default it is possible to retry a quiz until it is solved, or\nthe user clicks onto the resolve button. The only thing that is counted is the\nnumber of trials.\n\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:68%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/pKEufUXBqsLi8\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/the-simpsons-poochie-pKEufUXBqsLi8\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n\n                          --{{1}}--\nIf testing knowledge becomes something deeply personal, without any limitation\non the number of trials, why should anyone cheat at all. In this sense,\nLiaScript is meant to be a language for learning and education instead of\nassessment. But, if you want to, you can also tweak this by using scripts 😉.\n\n\n#### 1. Multiple-Choice\n\n                           --{{0}}--\nA multiple-choice quiz can also be interpreted as a task list with a predefined\nsolution. Thus, the only thing that has to be done, is to surround your \"ASCII\"\ncheckboxes with additional brackets, which are followed by a line of\nMarkdown/LiaScript.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n- [[ ]] Empty means not checked\n- [[X]] Uppercase `X` means checked ...\n- [[x]] ... and lowercase `x` too ...\n- [[ ]] **as defined in the first line** ...\n```\n\n                          --{{1}}--\nAs you can see from the example it does not matter, whether you use lowercase or\nuppercase `X` to mark a checked element.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n- [[ ]] Empty means not checked\n- [[X]] Uppercase `X` means checked ...\n- [[x]] ... and lowercase `x` too ...\n- [[ ]] **as defined in the first line** ...\n\n********************************************************************************\n\n                          --{{2}}--\nThe starting dashes for quizzes are also optional, you can omit them and GitHub\nand other Markdown renderer will present a single paragraph. Or, you can also\nuse an indentation of at least 4 spaces, which will be presented by other\ninterpreters as code. However, all the following representations will be\ninterpreted by LiaScript as the same quiz.\n\n\n                            {{2}}\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWithout starting dashes (paragraph):\n\n[[ ]] Empty means not checked\n[[X]] Uppercase `X` means checked ...\n[[x]] ... and lowercase `x` too ...\n[[ ]] **as defined in the first line** ...\n\nWith indentation of at least 4 spaces (code):\n\n    [[ ]] Empty means not checked\n    [[X]] Uppercase `X` means checked ...\n    [[x]] ... and lowercase `x` too ...\n    [[ ]] **as defined in the first line** ...\n```\n\n#### 2. Single-Choice\n\n                          --{{0}}--\nIf brackets are used to define checkboxes, why not using parentheses to indicate\nradio-buttons. In contrast to multiple-choice quizzes only one option can be\nselected.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n- [( )] Not selected\n- [(X)] **This one has to be selected**\n- [( )] ~~Do not select this one ...~~\n```\n\n                          --{{1}}--\nYou can also omit the starting dashes and/or use indentation as with\nmultiple-choice quizzes and use upper- or lowercase `X` to indicate the\nsolution.\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\n- [( )] Not selected\n- [(X)] **This one has to be selected**\n- [( )] ~~Do not select this one ...~~\n\n********************************************************************************\n\n                          --{{2}}--\nHowever, you can also define multiple possible solutions a user might select\nonly one option, but multiple might be correct.\n\n                            {{2}}\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWhat is the correct spelling of H(D)D?\n\n    [(X)] hard (**disk**) drive\n    [( )] hard (**desk**) drive\n    [(x)] hard (**disc**) drive\n```\n\n                            {{3}}\n********************************************************************************\n\n**Result:**\n\nWhat is the correct spelling of H(D)D?\n\n    [(X)] hard (**disk**) drive\n    [( )] hard (**desk**) drive\n    [(x)] hard (**disc**) drive\n\n********************************************************************************\n\n                          --{{3}}--\nThus, if the user selects the first or the last option, the quiz will be marked\nas solved, or if the user clicks onto the \"show solution\" button, both options\nwill be presented.\n\n\n\n                            {{4}}\n\u003e ## How to create a true/false quiz?\n\u003e\n\u003e                        --{{4}}--\n\u003e Using single-choice quizzes, it is also possible to define something simple as\n\u003e a True or False quiz.\n\u003e\n\u003e \u003c!-- class=\"translate\"--\u003e\n\u003e ``` markdown\n\u003e Do you know an easier way of creating quizzes?\n\u003e\n\u003e     [( )] Yes\n\u003e     [(X)] No\n\u003e ```\n\u003e\n\u003e **Result:**\n\u003e\n\u003e Do you know an easier way of creating quizzes?\n\u003e\n\u003e     [( )] Yes\n\u003e     [(X)] No\n\n\n#### 3. Matrix-Quiz\n\n                          --{{0}}--\nYou can also combine multiple single- and multiple-choice quizzes into one\nlarger matrix-quiz. The \"vector\" quizzes are now simply defined as rows, whereby\nyou have to define a custom header, which represent the solution options. It\nmakes no real difference if you use parentheses or brackets within the header\nline, use brackets if you want to insert parenthesis and vice versa.\n\n\n                            {{0}}\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n- [[male (der)] (female [die]) [neuter (das)]]\n- [    [X]           [ ]             [ ]     ]  Mann - German for man\n- [    ( )           (X)             ( )     ]  Frau - German for woman\n```\n\n                          --{{1}}--\nHowever, within the quiz-body, which is contains the quiz-vectors as rows, the\nbrackets and parenthesis make a difference. The first row gets presented as\nmultiple-choice with checkboxes, while the second line defines a single-choice\nwith radio buttons.\n\n                            {{1}}\n********************************************************************************\n\nMan or woman is obvious, but you guess the remaining German grammatical genders?\n\n    [[male (der\u003c!-- class=\"notranslate\"--\u003e)]   (female [die\u003c!-- class=\"notranslate\"--\u003e])   [neuter (das\u003c!-- class=\"notranslate\"--\u003e)]]\n    [    [X]           [ ]             [ ]     ]  Mann\u003c!-- class=\"notranslate\"--\u003e - German for man\n    [    ( )           (X)             ( )     ]  Frau\u003c!-- class=\"notranslate\"--\u003e - German for woman\n    [    [X]           [ ]             [ ]     ]  Junge\u003c!-- class=\"notranslate\"--\u003e - German for boy\n    [    ( )           ( )             (X)     ]  Mädchen\u003c!-- class=\"notranslate\"--\u003e - German for girl\n    [    [X]           [X]             [ ]     ]  Paprika\u003c!-- class=\"notranslate\"--\u003e - German for bell pepper\n    [    (X)           (X)             (X)     ]  Joghurt\u003c!-- class=\"notranslate\"--\u003e - German for yogurt\n\n********************************************************************************\n\n                            {{2}}\n\u003e **Fun fact:**\n\u003e\n\u003e                         --{{2}}--\n\u003e The number of elements within a row does not necessarily have to match the\n\u003e number of elements within the head. Although it might be rendered strangely,\n\u003e this does not cause an error. You as a course designer can see, that there\n\u003e might have a mistake occurred, but maybe you use it with a purpose.\n\u003e\n\u003e \u003c!-- class=\"translate\"--\u003e\n\u003e ``` markdown\n\u003e [[option 1] [option 2]]\n\u003e [   [X]                     ] only with option 1\n\u003e [   [ ]        [X]          ] with two options\n\u003e [   [X]        [ ]       [X]] with three options\n\u003e ```\n\u003e\n\u003e [[option 1] [option 2]]\n\u003e [   [X]                     ] only with option 1\n\u003e [   [ ]        [X]          ] with two options\n\u003e [   [X]        [ ]       [X]] with three options\n\n#### 4. Text-Quiz\n\n                          --{{0}}--\nA simple text-input quiz is defined only by two brackets that contain the\nsolution string. For these simple kind of quizzes, it is currently not allowed\nto add a starting dash, but you can use optional indentation. The reason for\nthis is, that in the future we would like to extend the usage of text- and\nselection-quizzes to be used everywhere, within paragraphs or tables to from\nclozes.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWhat did the fish say when he swam into the wall?\n\n    [[dam]]\n```\n\n                            {{1}}\n********************************************************************************\n**Result:**\n\nWhat did the fish say when he swam into the wall?\n\n    [[dam]]\n\n********************************************************************************\n\n                          --{{1}}--\nThe user input will be compared with your solution-string, and if and only if\nthey are equal the quiz will be labelled as solved. For different reasons it\nmight  be necessary to clean up the input, in order to deal with different types\nof spelling, uppercase and lowercase, etc. Fort this purpose scripts can be\nassociated to a quiz, see therefore section\n[Quizzes and Scripting](#Quizzes-and-Scripting).\n\n\n#### 5. Selection-Quiz\n\n                          --{{0}}--\nFinally, a selection-quiz is a collection of LiaScript/Markdown options that are\nseparated by vertical bars `|`. The solution is defined by the option or options\nthat are surrounded by parenthesis. An option can be any kind of LiaScript\ninline element and since vertical bars `|` are used as separators, you can\nsimplify the readability by using newlines.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWhat is the derivative function of $f(x) = x^6$?\n\n[[ $f'(x) = 6$ | ( $f'(x) = 6x^5$ ) | $f'(x) = 5x^6$ ]]\n\nCan be also written as:\n\n    [[  $f'(x) = 6$\n    | ( $f'(x) = 6x^5$ )\n    |   $f'(x) = 5x^6$\n    | ( **This will be counted as correct too...** )\n    ]]\n```\n\n                          --{{1}}--\nThis type of quiz allows you to have multiple correct options and starting\ndashes are not supported yet, due to their future usage as native input elements\nfor clozes. And you can use indentation, such as it is possible for all quizzes.\n\n\n                            {{1}}\n********************************************************************************\n\n**Result:**\n\nWhat is the derivative function of $f(x) = x^6$?\n\n[[ $f'(x) = 6$\u003c!-- class=\"notranslate\"--\u003e\n| ( $f'(x) = 6x^5$\u003c!-- class=\"notranslate\"--\u003e )\n| $f'(x) = 5x^6$\u003c!-- class=\"notranslate\"--\u003e ]]\n\n\nCan be also written as:\n\n    [[  $f'(x) = 6$\u003c!-- class=\"notranslate\"--\u003e\n    | ( $f'(x) = 6x^5$\u003c!-- class=\"notranslate\"--\u003e  )\n    |   $f'(x) = 5x^6$\u003c!-- class=\"notranslate\"--\u003e\n    | ( **This will be counted as correct too...** )\n    ]]\n\n********************************************************************************\n\n\n#### 6. Gap-Text Extreme\n\n                     --{{0}}--\nInternally we call this type a multi-quiz, it allows to freely use text- and selection quizzes within all other kinds of Markdown-blocks to generate more complex test situations.\n\n     {{1}}\n\u003csection\u003e\n\n                    --{{1}}--\nLets have a look at the following example, it shows a simple gap text for english learners.\nThe first thing thing to mention here, is that the text-input pattern is a fully featured LiaScript-Markdown element, thus it can be styled with the Markdown syntax.\nThus, if type in some words or if you click on the resolve button, you will see that the input is styled accordingly.\nAdditionally, you can see, that the length of an input filed is defined by the length of the text-pattern, this can be used as an secondary styling element, if you want to make all fields to have the same length or make some even longer.\n\n\n``` markdown\n__I (learn) [[  have been learning  ]] English for seven years now.__\nBut last year I (not / work) [[ was not working ]] hard enough for English,\nthat's why my marks (not / be) _[[ were not ]]_ really that good then.\nAs I (pass / want) [[ want to pass ]] my English exam successfully next year,\nI (study) ~[[ am going to study ]]~ harder this term.\n```\n\n---\n\n__I (learn) [[  have been learning  ]] English for seven years now.__\nBut last year I (not / work) [[ was not working ]] hard enough for English, that's why my marks (not / be) _[[ were not ]]_ really that good then.\nAs I (pass / want) [[ want to pass ]] my English exam successfully next year, I (study) ~[[ am going to study ]]~ harder this term.\n\n\u003c/section\u003e\n\n\n     {{2}}\n\u003csection\u003e\n\n                    --{{2}}--\nEven more than this, you can also embed selections.\nInsert the quiz pattern, separate different options with vertical bars and put the correct answer into parentheses.\nAs you can in the in the example below, selections can contain valid Markdown and also be styled by surrounding them with Markdown syntax.\n\n\n``` markdown\nWladimir [[ Putin ]] is the richest (still living) dictator\nwith an estimated fortune of over\n__4,500,000,000 [[ (US Dollar 💵) | Euro 💶 | _Rubel 💸_ | Pound 💷 ]]__!\n```\n\n---\n\nWladimir [[ Putin ]] is the richest (still living) dictator\nwith an estimated fortune of over\n__4,500,000,000 [[ (US Dollar 💵) | Euro 💶 | _Rubel 💸_ | Pound 💷 ]]__!\n****************************************************\n\n\u003e {{Russian Female |\u003e}}\n\u003e 😱 боже мой, боже мой, боже мой ..., for this money an ordinary soldier has to fight in combat for **138.889 years**.\n\u003e\n\u003e Source: [The Guardian](https://www.theguardian.com/world/2022/jun/20/russian-emails-vladimir-putin-llcinvest)\n\n****************************************************\n\n\n\u003c/section\u003e\n\n##### More!!!\n\n     --{{0}}--\nSince text inputs and selections are now a so-called first class member within LiaScript, you can think of creating other kinds of quizzes, by not only using simple paragraphs.\nThis section shows only some inspirational examples that you can use and extend for your own purpose.\n\n       {{1}}\n\u003csection\u003e\n\n###### Base Math\n\n               --{{1}}--\nOf course, basic arithmetic is quite simple now ...\n\n\n```` markdown\n``` ascii\n.----------.      .----------.\n| ⭐       |      |  ⭐ ⭐   |\n|      ⭐  |      | ⭐ ⭐ ⭐ |\n'----------'      '----------'\n```\n\n[[ 2 ]] + [[ 5 ]] = [[ 7 ]]\n````\n\n---\n\n\u003c!-- style=\"max-width: 300px\" --\u003e\n``` ascii\n.----------.      .----------.\n| ⭐       |      |  ⭐ ⭐   |\n|      ⭐  |      | ⭐ ⭐ ⭐ |\n'----------'      '----------'\n```\n\n[[ 2 ]] + [[ 5 ]] = [[ 7 ]]\n\n\u003c/section\u003e\n\n\n       {{2}}\n\u003csection\u003e\n\n###### Who said this?\n\n      --{{2}}--\nBut, you can also, like in this example, use a simple selection within a quote to create a quiz?\n\n``` markdown\n\u003e “How is education supposed to make me feel smarter?\n\u003e Besides, every time I learn something new, it pushes some old stuff out of my brain.\n\u003e Remember when I took that home winemaking course, and I forgot how to drive?”\n\u003e\n\u003e -- By [[ Dieter Nuhr | Nida Mohammad Nadim | (Homer Simpson)]]\n```\n\n---\n\n\u003e “How is education supposed to make me feel smarter?\n\u003e Besides, every time I learn something new, it pushes some old stuff out of my brain.\n\u003e Remember when I took that home winemaking course, and I forgot how to drive?”\n\u003e\n\u003e -- By [[ Dieter Nuhr: _German comedian_ | Nida Mohammad Nadim: _Afghan minister for higher education_ | (Homer Simpson: _A cartoon character too_)]]\n\n\u003c/section\u003e\n\n\n       {{3}}\n\u003csection\u003e\n\n###### Read it aloud\n\n                         --{{3}}--\nLater in section [Effects](#effects), you will learn about animations and text to speech output.\nEffects in LiaScript are always associated with curly braces.\nAdding two curly braces on top of a Markdown block will add a play-button that will read aloud loud the entire block.\nAdditionally, you can also change the voice, depending on the language you teach.\n\n\n``` markdown\n                    {{English Male |\u003e}}\nThe film that I saw [[(that)|those|these|then]] night wasn’t very good.\nIt was all [[ about ]] a man [[ who ]] built a\ntime machine so he [[ could ]] travel back in time.\nIt took him ages and ages [[ to ]] build the machine.\n```\n\n---\n\n                    {{English Male |\u003e}}\nThe film that I saw [[ (that)|those|these|then ]] night wasn’t very good.\nIt was all [[ about ]] a man [[ who ]] built a\ntime machine so he [[ could ]] travel back in time.\nIt took him ages and ages [[ to ]] build the machine.\n\n\u003c/section\u003e\n\n\n    {{4}}\n\u003csection\u003e\n\n###### Tables\n\n                       --{{4}}--\nOf course, you can use a table and add some inputs and create a structured quiz...\n\n\n``` markdown\nGerman grammar test:\n\n| Verb    |   Person      | Präsens von \"werden\" | Partizip II    | Infinitiv von haben/sein |\n|---------|:-------------:|:--------------------:|:--------------:|:------------------------:|\n| gehen   | Ich           |     [[ werde  ]]     | [[ gegangen ]] | [[ sein ]].              |\n| sage    | Du            |     [[ wirst  ]]     | [[ gesagt ]]   | [[ haben ]].             |\n| machen  | Er / Sie / Es |     [[ wird   ]]     | [[ gemacht ]]  | [[ haben ]].             |\n| laufen  | Wir           |     [[ werden ]]     | [[ gelaufen ]] | [[ sein ]].              |\n| singen  | Ihr           |     [[ werdet ]]     | [[ gesungen ]] | [[ haben ]].             |\n| spielen | Sie           |     [[ werden ]]     | [[ gespielt ]] | [[ haben ]].             |\n```\n\n---\n\nGerman grammar test:\n\n| Verb    |   Person      | Präsens von \"werden\" | Partizip II    | Infinitiv von haben/sein |\n|---------|:-------------:|:--------------------:|:--------------:|:------------------------:|\n| gehen   | Ich           |     [[ werde  ]]     | [[ gegangen ]] | [[ sein ]].              |\n| sage    | Du            |     [[ wirst  ]]     | [[ gesagt ]]   | [[ haben ]].             |\n| machen  | Er / Sie / Es |     [[ wird   ]]     | [[ gemacht ]]  | [[ haben ]].             |\n| laufen  | Wir           |     [[ werden ]]     | [[ gelaufen ]] | [[ sein ]].              |\n| singen  | Ihr           |     [[ werdet ]]     | [[ gesungen ]] | [[ haben ]].             |\n| spielen | Sie           |     [[ werden ]]     | [[ gespielt ]] | [[ haben ]].             |\n\n\n      {{5}}\n\u003cdiv\u003e\n\n          --{{5}}--\nBut, since tables are treated as data sets that scream for visualization (for more information checkout section [Fun with Tables](#fun-with-tables)), you can use also this feature to visualize your quiz.\nThe following two examples are called \"know your competitors\" ;-) and they are used only for illustration.\nDepending on the tabular structure you define and the type of data you provide, LiaScript will try to estimate an appropriate visualization.\nFor input fields, the value of the solution is used for classification.\n\n\n``` markdown\n\u003c!-- data-title=\"LMS market share 2022 (North America)\" --\u003e\n| Brightspace    | Canvas          | Classroom      | Moodle          | Others         | Schoology      |\n|:--------------:|:---------------:|:--------------:|:---------------:|:--------------:|:--------------:|\n| [[(3 %)|11 %]] | [[13 %|(28 %)]] | [[8 %|(24 %)]] | [[(11 %)|31 %]] | [[2 %|(12 %)]] | [[7 %|(22 %)]] |\n\n---\n\n| LMS | Average cost per month   |\n|-----|--------------------------|\n| Brightspace | [[13 $|(80 $)]]  |\n| Canvas      | [[(10 $)|99 $]]  |\n| Classroom   | [[(0 free)|3 $]] |\n| Moodle      | [[11 $ |(15 $)]] |\n| Schoology   | [[(4 $)|12 $]]   |\n```\n\n---\n\n\u003c!-- data-title=\"LMS market share 2022 (North America)\" --\u003e\n| Brightspace    | Canvas          | Classroom      | Moodle          | Others         | Schoology      |\n|:--------------:|:---------------:|:--------------:|:---------------:|:--------------:|:--------------:|\n| [[(3 %)|11 %]] | [[13 %|(28 %)]] | [[8 %|(24 %)]] | [[(11 %)|31 %]] | [[2 %|(12 %)]] | [[7 %|(22 %)]] |\n\n---\n\n| LMS | Average cost per month   |\n|-----|--------------------------|\n| Brightspace | [[13 $|(80 $)]]  |\n| Canvas      | [[(10 $)|99 $]]  |\n| Classroom   | [[(0 free)|3 $]] |\n| Moodle      | [[11 $ |(15 $)]] |\n| Schoology   | [[(4 $)|12 $]]   |\n\n\u003c/div\u003e\n\n\u003c/section\u003e\n\n\n        {{6}}\n\u003csection\u003e\n\n##### Galleries\n\n\n              --{{6}}--\nGalleries are just a collection of multimedia links.\nThe text within brackets is used as `alt` or alternative text for an image, if the image cannot be displayed (which is also used by screen readers).\nAnd the additional text within quotes is commonly used for the title attribute, but it LiaScript it is also displayed as a subtitle that can contain valid LiaScript Markdown.\nWell, if this is the case, this can be used to contain also input fields, such that the entire gallery is then interpreted as on quiz.\n\n``` markdown\n![image 1](https://img1 \"Markdown subtitle [[(option 1)|option 2|option 3]]\")\n![image 2](https://img2 \"Another [[subtitle]]\")\n!?[video](https://www.youtube.com/watch?v=... \"Subtitle for [[multi-media]]\")\n```\n\n---\n\n![Self portrait](https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Self-portrait_as_the_Allegory_of_Painting_%28La_Pittura%29_-_Artemisia_Gentileschi.jpg/767px-Self-portrait_as_the_Allegory_of_Painting_%28La_Pittura%29_-_Artemisia_Gentileschi.jpg \"Self-Portrait as the Allegory of Painting: [[(1638 - 1639)|1641|1641-1642]]\")\n![Samson and Delilah](https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Samson_und_delilah.jpg/1221px-Samson_und_delilah.jpg \"Samson and Delilah: [[1628|(1630 - 1638)|1633 - 1637]]\")\n![Virgin with the Child](https://upload.wikimedia.org/wikipedia/commons/e/e0/Artemisia_Gentileschi_-_Madonna_con_Bambino_%281609-1610%29.jpg \"Virgin with the Child: [[(1609–1610)|1618|1622-1623]]\")\n!?[BBC Documentary](https://www.youtube.com/watch?v=WcSRtdg9FyM \"BBC Documentary: Michael Palin's Quest for Artemisia\")\n\n\u003c/section\u003e\n\n{{7}}\n\u003csection\u003e\n\n##### Last but not Least (ASCII-art)\n\n      --{{7}}--\nCheckout what is possible in section [ASCII-Art](#ASCII-Art), but these are basically sketches and drawings based on a few ASCII-characters such as `+`, `|`, `-`, and some more.\nTo indicate such an image use a standard Markdown code-block and use `ascii` as the language prefix\n\n```` markdown\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n                        .----------------------.\n                       /                      /|\n             .--------+----------------------+ +---------.\n            /         |      \" [[  24   ]] \" |/         /|\n  .--------+----------+----------+-----------+---------+ +----------.\n /         |         11          |      \"[[   13   ]] \"|/          /|\n+----------+----------+----------+----------+----------+----------+ +\n|      \" [[   5   ]] \"|          6          |          7          |/\n+---------------------+---------------------+---------------------+\n```\n````\n\n    --{{8}}--\nThe LiaScript elements have to be placed into quotations, to separate them from the ASCII-art image, which is turned into an SVG image.\nTo trick the interpreter from applying a single line text-input, we need to add a space before the actual input.\n\n      {{8}}\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n                        .----------------------.\n                       /                      /|\n             .--------+----------------------+ +---------.\n            /         |      \" [[  24   ]] \" |/         /|\n  .--------+----------+----------+-----------+---------+ +----------.\n /         |         11          |      \"[[   13   ]] \"|/          /|\n+----------+----------+----------+----------+----------+----------+ +\n|      \" [[   5   ]] \"|          6          |          7          |/\n+---------------------+---------------------+---------------------+\n```\n\n\n\u003c/section\u003e\n\n\n#### 0. Generic Quizzes\n\n                          --{{0}}--\nGeneric quizzes can be used to define any kind of quiz. The course-developer can\ndefine own types of quizzes, whereby the following combination of brackets with\nan additional exclamation mark has to be associated with a script.\n\n``` markdown\n[[!]]\n\u003cscript\u003e\n  const random = Math.random()\n\n  alert(\"random value: \"+ random)\n\n  random \u003c 0.2\n\u003c/script\u003e\n```\n\n                          --{{1}}--\nThis script does only generate a random number, outputs the result in an `alert`\nand checks if the random value is less than 0.2. And if so, the quiz will be\nmarked as solved otherwise not. Thus, the last statement has to be `true` in\norder to mark a quiz as solved, any other value will be accounted as `false`.\n\n                            {{1}}\n    [[!]]\n    \u003cscript\u003e\n      const random = Math.random()\n\n      alert(\"random value:\"+ random)\n\n      random \u003c 0.2\n    \u003c/script\u003e\n\n                          --{{2}}--\nThe usage of associated scripts for quizzes will be described in detail in\nsection [Quizzes and Scripting](#Quizzes-and-Scripting).\n\n#### Notes about Questions\n\n                          --{{0}}--\nNot all of the previous examples we have shown were perfect in the sense of\naccessibility. Although these quizzes look good \"for us\", they might not be\nperfectly for people that require a screen-reader to go through a course.\nHowever, you can improve your quizzes by asking your question as a paragraph,\nwhich is followed by your quiz. This way LiaScript will associate or label the\nquiz with your question.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nAsk a question as an ordinary Markdown paragraph,\nwhich is followed by what?\n\n    [[quiz]]\n```\n\n                          --{{1}}--\nIf your question requires more elements, then it is also possible to group it\nwith supplemental elements by putting it into a single HTML-element such as a\n`div`. The `div` will get a unique ID and the question will be labeled with this\nID by using the\n[aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) attribute.\n\n                            {{1}}\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n\u003cdiv\u003e\n\nAsk a question as an ordinary Markdown paragraph,\nwhich is followed by what?\n\n1. important\n2. also relevant ...\n3. [an image](http://...)\n\n\u003c/div\u003e\n\n    [[quiz]]\n```\n\n### Tweaks\n\n                          --{{0}}--\nAll of the following elements can be added to any type of quiz that you have\nseen before. This includes and arbitrary number of hints, a more detailed\nsolution or a custom script that handles the user input.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:63%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/qUDenOaWmXImQ\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/scott-pilgrim-michael-cera-level-up-qUDenOaWmXImQ\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n#### Hints\n\n                          --{{0}}--\nTo any type of quiz you can add as many hints as you want, the pattern is simply\ntwo brackets with an additional question mark. If you want to, you can also add\nstarting dashes to the hints.\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWhat is $37 + 15$?\n\n    [[52]]\n    [[?]] the solution is larger than 50\n    [[?]] it is less than 55\n    [[?]] it should be an even number\n\nThis is also a valid quiz ...\n\n[[52]]\n- [[?]] the solution is larger than 50\n- [[?]] it is less than 55\n- [[?]] it should be an even number\n```\n\n                          --{{1}}--\nThe user can reveal these hints, step by step by clicking onto the light bulb or\n\"show hint\" button.\n\n                            {{1}}\n********************************************************************************\n\nWhat is $37 + 15$?\n\n    [[52]]\n    [[?]] the solution is larger than 50\n    [[?]] it is less than 55\n    [[?]] it should be an even number\n\n********************************************************************************\n\n\n#### Solution\n\n\n                                   --{{0}}--\nAnd finally, some quizzes might require some more explanations, if they are\nsolved or not. Therefore, simply use two \"lines\" that are defined by at least\nthree asterisks to group your solution. The solution explanation can contain\nan arbitrary number of LiaScript elements.\n\n\u003c!-- class=\"translate\"--\u003e\n```` markdown\nWhat is $37 + 15$?\n\n[[52]]\n[[?]] the solution is larger than 50\n[[?]] it is less than 55\n[[?]] it should be an even number\n***********************************************************************\n\n52 is the correct solution, you get this by adding:\n\n``` ascii\n                        .------.\n                        |      |\n                        |      v\n                        |\n                        |     (1)\n  37           3(7)     |     (3)x          37\n+ 15         + 1(5)     |   + (1)x        + 15\n---- --\u003e     ------ --\u003e |   ------ --\u003e    ----\n  ??           (12)     |     (5)2          52\n                |       |                 ====\n                '-------'\n                  carry\n```\n\n??[MS-DOS Math Game](https://archive.org/embed/msdos_Super_Solvers_Teasure_MathStorm_1992)\n\n***********************************************************************\n````\n\n                          --{{1}}--\nIn this case the solution contains an ASCII-art drawing, but it can be anything,\nsuch as a an image, a video, or even something like a small game\n\n                            {{1}}\n********************************************************************************\nWhat is $37 + 15$?\n\n[[52]]\n[[?]] the solution is larger than 50\n[[?]] it is less than 55\n[[?]] it should be an even number\n******************************************************\n\n52 is the correct solution, you get this by adding:\n\n``` ascii\n                        .------.\n                        |      |\n                        |      v\n                        |\n                        |     (1)\n  37           3(7)     |     (3)x          37\n+ 15         + 1(5)     |   + (1)x        + 15\n---- --\u003e     ------ --\u003e |   ------ --\u003e    ----\n  ??           (12)     |     (5)2          52\n                |       |                 ====\n                '-------'\n                  carry\n```\n\n??[MS-DOS Math Game](https://archive.org/embed/msdos_Super_Solvers_Teasure_MathStorm_1992)\n\n*******************************************************\n\n********************************************************************************\n\n\n#### Randomization\n\n                       --{{0}}--\nCurrently it is only possible to randomize vector and matrix quizzes, that means that the order of rows can be shuffled.\nThis happens only ones, when the slide is loaded for the first time, this includes also page reloads.\nJust by adding the option `data-randomize` to the comment attached to the head of the quiz.\nOther options might be added in the future.\n\n``` markdown\nAre the options of the quiz in order?\n\n\u003c!-- data-randomize --\u003e\n- [(X)] option 1 (yes)\n- [( )] option 2 (no)\n- [(X)] option 3 (maybe)\n- [( )] option 4 (I don't care)\n```\n\n                       --{{1}}--\nIf you reload the page, the order of the options will change, but not when you go to another slide and come back.\n\n\n        {{1}}\n\u003cdiv\u003e\n\nAre the options of the quiz in order?\n\n\u003c!-- data-randomize --\u003e\n- [(X)] option 1 (yes)\n- [( )] option 2 (no)\n- [(X)] option 3 (maybe)\n- [( )] option 4 (I don't care)\n\n\u003c/div\u003e\n\n#### Further Settings\n\n              --{{0}}--\nNext to randomization you can also use the following configuration options and also combine them:\n\n                {{1}}\n- ##### Maximum Trials `data-max-trials`\n\n              --{{1}}--\n  Pass an integer to `data-max-trials` and the quiz will be automatically solved after x wrong trials.\n\n  ``` markdown\n  What happens if you check 3 times the wrong answer?\n\n  \u003c!-- data-max-trials=\"3\"--\u003e\n  [( )] Absolutely nothing?\n  [(X)] The quiz will be solved!\n  ```\n\n  ---\n\n  What happens if you check 3 times the wrong answer?\n\n  \u003c!-- data-max-trials=\"3\"--\u003e\n  [( )] Absolutely nothing?\n  [(X)] The quiz will be solved!\n\n                {{2}}\n- ##### Hide and reveal the solve button `data-solution-button`\n\n              --{{2}}--\n  You can either use values such as `on|off`, `true|false`, `disable|enable` to show or hide the solution button.\n  By default it is always `on`, but it is also possible to pass an integer value to reveal this button at a certain user trial.\n  In this case `0` is not interpreted as false, but that it should be immediately visible and `1` only after the first wrong trial.\n\n  ``` markdown\n  Can you reveal the solution button?\n\n  \u003c!-- data-solution-button=\"off\" --\u003e\n  [( )] YES\n  [(X)] NO\n\n  ---\n\n  How many trials are necessary to show the solution button?\n\n  \u003c!-- data-solution-button=\"3\" --\u003e\n  [[3]]\n  ```\n\n  ---\n\n  Can you reveal the solution button?\n\n  \u003c!-- data-solution-button=\"off\" --\u003e\n  [( )] YES\n  [(X)] NO\n\n  ---\n\n  How many trials are necessary to show the solution button?\n\n  \u003c!-- data-solution-button=\"3\" --\u003e\n  [[3]]\n\n                {{3}}\n- ##### Hide and reveal the hint button `data-hint-button`\n\n              --{{3}}--\n  This configuration options can be used similarly as the previous one, although there won't be many occasions to disable or enable the hint button when no hints were defined.\n  However, you can use the numerical value to show hints only after a certain amount of wrong trials, thus `1` will reveal the button only after the first wrong trial.\n\n  ``` markdown\n  How many trials are necessary to show the hints?\n\n  \u003c!-- data-hint-button=\"2\" --\u003e\n  [[2]]\n  [[?]] The solution is smaller than 3\n  [[?]] Try an even number\n  ```\n\n  ---\n\n  How many trials are necessary to show the hints?\n\n  \u003c!-- data-hint-button=\"2\" --\u003e\n  [[2]]\n  [[?]] The solution is smaller than 3\n  [[?]] Try an even number\n\n                 {{4}}\n- ##### Revealing Partial Solutions `data-show-partial-solution`\n\n               --{{4}}--\n  If a quiz might have to many input options and you require a way to separate partially correct answers from wrong ones, then you need to use this attribute.\n  It can be applied onto [gap-texts](#6.-gap-text-extreme) and [matrix-quizzes](#3.-matrix-quiz).\n  In contrast to a gap-text, which can also contain single selections, in a matrix the entire row will be highlighted as correct or wrong.\n\n  ```` md\n  \u003c!-- data-show-partial-solution --\u003e\n  ``` ascii\n                          .----------------------.\n                         /                      /|\n               .--------+----------------------+ +---------.\n              /         |      \" [[  24   ]] \" |/         /|\n    .--------+----------+----------+-----------+---------+ +----------.\n   /         |         11          |      \"[[   13   ]] \"|/          /|\n  +----------+----------+----------+----------+----------+----------+ +\n  |      \" [[   5   ]] \"|          6          |          7          |/\n  +---------------------+---------------------+---------------------+\n  ```\n  ````\n\n  ---\n\n  \u003c!-- data-show-partial-solution --\u003e\n  ``` ascii\n                          .----------------------.\n                         /                      /|\n               .--------+----------------------+ +---------.\n              /         |      \" [[  24   ]] \" |/         /|\n    .--------+----------+----------+-----------+---------+ +----------.\n   /         |         11          |      \"[[   13   ]] \"|/          /|\n  +----------+----------+----------+----------+----------+----------+ +\n  |      \" [[   5   ]] \"|          6          |          7          |/\n  +---------------------+---------------------+---------------------+\n  ```\n\n                {{5}}\n- ##### Scoring a quiz `data-score`\n\n              --{{5}}--\n  The result of this setting will not be visible at all, instead it is used to score a quiz, if the course is exported into a SCORM package and uploaded to an LMS.\n  Within an export every quiz is rated equally with a value of 1.\n  It is possible to pass an integer or float value, e.g. `2`, `2.0`, `2.12345`.\n\n                {{6}}\n- ##### Combinations\n\n              --{{6}}--\n  And as mentioned earlier, you can freely combine all of these configurations.\n\n  ``` markdown\n  You have only two trials, without a solution button ;-)\n\n  \u003c!--\n    data-max-trials=\"2\"\n    data-solution-button=\"off\"\n    data-randomize\n  --\u003e\n  [( )] Wrong\n  [(X)] Right\n  ```\n\n  ---\n\n  You have only two trials, without a solution button ;-)\n\n  \u003c!--\n    data-max-trials=\"2\"\n    data-solution-button=\"off\"\n    data-randomize\n  --\u003e\n  [( )] Wrong\n  [(X)] Right\n\n#### Associated Scripts\n\n                          --{{0}}--\nThe following section contains a list of use-cases and ideas how to use quizzes\nand scripts in association to generate a more complex user experience.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:100%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/4GaHBQh3f4jBEpbQvP\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/shecodesio-swipe-up-computer-congratulations-4GaHBQh3f4jBEpbQvP\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n##### Cleaning up\n\n                          --{{0}}--\nIf you are using for example the text-quiz, and you want to react to different\nways of spelling or to clean starting and trailing white-spaces. Then you can\nattach a script to your quiz. The `@input` is marker that will be substituted by\nthe current user input. `trim` and `toLowerCase` are  JavaScript\nfunctions/methods that are used to clean the input string. The last statement of\nyour quiz-script defines if the quiz is marked as solved or not. Only if the\nlast statement evaluates to `true` it is marked as solved, for any other value\nit is simply a failed trial.\n\n\n``` markdown\nWhat did the fish say when he swam into the wall?\n\n[[dam]]\n\u003cscript\u003e\nlet input = \"@input\".trim().toLowerCase()\n\ninput == \"dam\" || input == \"damn\"\n\u003c/script\u003e\n```\n\n                          --{{1}}--\nTry out the following quiz. You can now enter \"damn\" or \"dam\" in different ways,\nsurrounded by spaces.\n\n                            {{1}}\n********************************************************************************\n\n\u003c!-- class=\"notranslate\"--\u003e\nWhat did the fish say when he swam into the wall?\n\n[[dam]]\n\u003cscript\u003e\nlet input = \"@input\".trim().toLowerCase()\n\ninput == \"dam\" || input == \"damn\"\n\u003c/script\u003e\n\n********************************************************************************\n\n\n##### Quiz `@input`s\n\n                          --{{0}}--\n`@input` will be replaced by the current state of the quiz that should be\nchecked. If you are not sure, how the input might look like, you can always\nexperiment with a simple `alert` that shows the current input.\n\n                            {{1}}\n********************************************************************************\n\n---\n\n**Text-quiz:**\n\n                          --{{1}}--\nThe output or in LiaScript terms the `@input` gets substituted by a string,\nwithout apostrophes. This might look strange since you have to add apostrophes\nwithin the code, but all inputs are substituted without any additional type\nformatting, this way they can be used in different ways and even contain peaces\nof code.\n\n``` markdown\n[[text]]\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n```\n\n**Result:**\n\n[[text]]\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n\n********************************************************************************\n\n\n\n                            {{2}}\n********************************************************************************\n\n---\n\n**Selection-quiz:**\n\n                          --{{2}}--\nA selection quiz is defined by a number that represents the current input,\nstarting from `0`. The initial state is marked with `-1` to indicate that\nnothing has been selected so far. In this example `A` would be represented by\n`0`, `B` by `1`, `C` by `2` and so on.\n\n\n``` markdown\n[[A|B|C|(D)]]\n\u003cscript\u003e alert(@input) \u003c/script\u003e\n```\n\n**Result:**\n\n[[A|B|C|(D)]]\n\u003cscript\u003e alert(@input) \u003c/script\u003e\n\n********************************************************************************\n\n\n\n                            {{3}}\n********************************************************************************\n\n---\n\n**Multiple-choice:**\n\n                          --{{3}}--\nA multiple-choice quiz is represented by an array of ones and zeros, whereby a\n`1` means checked and `0` the opposite.\n\n``` markdown\n[[X]] A\n[[ ]] B\n[[X]] C\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n```\n\n**Result:**\n\n[[X]] A\n[[ ]] B\n[[X]] C\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n\n********************************************************************************\n\n\n\n                            {{4}}\n********************************************************************************\n\n---\n\n**Single-choice:**\n\n                          --{{4}}--\nA single-choice quizzes behave similar as selections, the state is represented\nby a number, starting from `0`, which represents the first option. A quiz that\nhas been not touched by the user will return `-1` as input value.\n\n``` markdown\n[(X)] 0\n[( )] 1\n[(X)] 2\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n```\n\n**Result:**\n\n[(X)] 0\n[( )] 1\n[(X)] 2\n\u003cscript\u003e alert(\"@input\") \u003c/script\u003e\n\n********************************************************************************\n\n\n\n                            {{5}}\n********************************************************************************\n\n---\n\n**Matrix:**\n\n                          --{{5}}--\nAs matrices are arrays of \"vector\" quizzes, their input state is represented as\nan array of multiple-choice and single-choice states. Thus, a list of lists with\nzeros and ones as well as numbers.\n\n``` markdown\nWeird, isn't it ;-)\n\n[[male (der)]   (female [die])   [neuter (das)]]\n[    [X]           [ ]             [ ]     ]  Mann - German for man\n[    ( )           (X)             ( )     ]  Frau - German for woman\n[    [X]           [ ]             [ ]     ]  Junge - German for boy\n[    ( )           ( )             (X)     ]  Mädchen - German for girl\n[    [X]           [X]             [ ]     ]  Paprika - German for bell pepper\n[    (X)           (X)             (X)     ]  Joghurt - German for yogurt\n\u003cscript\u003ealert(\"@input\")\u003c/script\u003e\n```\n\n\n**Result:**\n\n[[male (der\u003c!-- class=\"notranslate\"--\u003e)]   (female [die\u003c!-- class=\"notranslate\"--\u003e])   [neuter (das\u003c!-- class=\"notranslate\"--\u003e)]]\n[    [X]           [ ]             [ ]     ]  Mann\u003c!-- class=\"notranslate\"--\u003e - German for man\n[    ( )           (X)             ( )     ]  Frau\u003c!-- class=\"notranslate\"--\u003e - German for woman\n[    [X]           [ ]             [ ]     ]  Junge\u003c!-- class=\"notranslate\"--\u003e - German for boy\n[    ( )           ( )             (X)     ]  Mädchen\u003c!-- class=\"notranslate\"--\u003e - German for girl\n[    [X]           [X]             [ ]     ]  Paprika\u003c!-- class=\"notranslate\"--\u003e - German for bell pepper\n[    (X)           (X)             (X)     ]  Joghurt\u003c!-- class=\"notranslate\"--\u003e - German for yogurt\n\u003cscript\u003ealert(\"@input\")\u003c/script\u003e\n\n********************************************************************************\n\n\n\n                            {{6}}\n********************************************************************************\n\n---\n\n**Generic:**\n\n                          --{{6}}--\nIn case of a generic quiz, the developer is responsible for defining and storing\nstate. Thus, there will be no input. The only case where `@input` gets\nsubstituted by a value, is when the user clicks onto the resolve button. This is\nindicated by the input `true`.\n\n``` markdown\n[[!]]\n\u003cscript\u003ealert(\"@input\")\u003c/script\u003e\n```\n\n\n[[!]]\n\u003cscript\u003ealert(\"@input\")\u003c/script\u003e\n\n********************************************************************************\n\n##### Async \u0026 Errors\n\n                          --{{0}}--\nThere might be the rare case, where you have to send the user input to an\nexternal service to check them. Scripts in LiaScript can also define\nasynchronous code, as it is displayed within the example.\n\n``` markdown\nWhat is $37 + 15$?\n\n[[52]]\n\u003cscript\u003e\nsetTimeout(function(){\n  alert(\"your input was: '@input'\")\n  send.lia(\"true\")\n}, 1000)\n\n\"LIA: wait\"\n\u003c/script\u003e\n```\n\n                          --{{1}}--\nIn LiaScript, we can use some command strings that trigger a certain behavior,\nthese are global to all scripts and will be described in more detail in section\n[Communication](#communication).\n\n\n                            {{1}}\n- `\"LIA: wait\"`: mark the script as still running\n- `\"LIA: stop\"`: halt the execution of the script\n\n\n                          --{{2}}--\nAdditionally, you can see a function-call within the example. `setTimeout`\ntriggers the execution of the internally defined function, which performs an\n`alert` with the  user input and then sends \"true\" back to the internal\nquiz-event handler. Every script is executed with an additional `send` object\nand `send.lia` means send this back to LiaScript. Thus, the result could also be\nevaluated by an external service, and this result will then be used to control\nthe quiz.\n\n                            {{2}}\n- `send`: general object to for communicating with the LiaScript internal\n  event-handler for a specific entity, for more information see section\n  [Communication](#communication)\n\n\n                          --{{3}}--\nLet us extend this example a little bit further. The `send` to `lia` can have\ntwo meanings, one if everything was ok while the second might be the result of\nan error. `send.lia` can have three values, the first is the message, the second\none contains more detailed information about the result, which is not required\nat the moment, while the last value tells LiaScript if everything was ok or by\nusing `false` that an error has occurred. The default value is always ok.\n\n\n                            {{3}}\n``` markdown\nWhat is $37 + 15$?\n\n[[52]]\n\u003cscript\u003e\nsetTimeout(function(){\n  alert(\"your input was: '@input'\")\n\n  if (\"@input\" === \"\") {\n    // generic error message\n    send.lia(\"You have to fill in something into the input field\", [], false)\n  } else {\n    // this is equal to send.lia(\"some message\", [], true)\n    send.lia(\"true\")\n  }\n}, 1000)\n\n\"LIA: wait\"\n\u003c/script\u003e\n```\n\n                          --{{4}}--\nThus, if you try out the following example, you will have to wait one second\nuntil the result is evaluated, which in this case always results in a solved\nquiz. But, if you do not add any input, then an error message will be displayed.\n\n                            {{4}}\n********************************************************************************\n\n**Result:**\n\nWhat is $37 + 15$?\n\n[[52]]\n\u003cscript\u003e\nsetTimeout(function(){\n  alert(\"your input was: '@input'\")\n\n  if (\"@input\" === \"\") {\n    // generic error message\n    send.lia(\"You have to fill in something into the input field\", [], false)\n  } else {\n    // this is equal to send.lia(\"some message\", [], true)\n    send.lia(\"true\")\n  }\n}, 1000)\n\n\"LIA: wait\"\n\u003c/script\u003e\n\n********************************************************************************\n\n\n##### Obfuscate Quizzes\n\n                          --{{0}}--\nWe would like to note, that this is only one method to obfuscate a quiz, by\nusing JavaScript, in this case by using the function `btoa`.\n\n``` markdown\n[[...]]\n\u003cscript\u003e\n// btoa(\"solution\") == \"c29sdXRpb24=\"\n\"c29sdXRpb24=\" == btoa( \"@input\".trim().toLowerCase() )\n\u003c/script\u003e\n```\n\n                          --{{1}}--\n[`btoa`](https://developer.mozilla.org/en-US/docs/Web/API/btoa) creates a\n[Base64](https://developer.mozilla.org/en-US/docs/Glossary/Base64)-encoded ASCII\nstring, while [`atob`](https://developer.mozilla.org/en-US/docs/Web/API/atob)\ndoes the opposite. You can try out to the following two scripts to encode and\ndecode different strings.\n\n                            {{1}}\n* `btoa`: \u003cscript input=\"text\" value=\"solution\" input-always-active modify=\"false\"\u003ebtoa(`@input`)\u003c/script\u003e\n\n  (Beautiful TO Awful)\n\n* `atob`: \u003cscript input=\"text\" value=\"c29sdXRpb24=\" input-always-active modify=\"false\"\u003eatob(`@input`)\u003c/script\u003e\n\n  (Awful TO Beautiful)\n\n\n                            {{2}}\n********************************************************************************\n\n                          --{{2}}--\nThe result is a quiz, where it is not possible to see the solution immediately,\nsimply by getting a glimpse onto the raw course document.\n\n**Result:**\n\n[[...]]\n\u003cscript\u003e\n// btoa(\"solution\") == \"c29sdXRpb24=\"\n\"c29sdXRpb24=\" == btoa( \"@input\".trim().toLowerCase() )\n\u003c/script\u003e\n\n********************************************************************************\n\n##### Quizzes \u0026 Macros\n\u003c!--\n@customQuiz\n[[...]]\n\u003cscript\u003e\n\"@0\" == btoa( \"@input\".trim().toLowerCase() )\n\u003c/script\u003e\n@end\n--\u003e\n\n                          --{{0}}--\nIt might look tedious to create these trailing scripts and to add them again and\nagain to your document, which makes a course harder to maintain and to develop.\nHowever, in LiaScript you can define macros, that can be used to solve\nrepetitive tasks.\n\n                          --{{1}}--\nAs depicted in the example, you can define custom macros within an HTML-comment\nof a section or within the main comment at the head of every document. Wherever\nyou write the macro `@customQuiz` within your document, this macro will be\nsubstituted by the content defined in the HTML-comment, which comes between\n`@customQuiz` and `@end`. For more information see section [Macros](#macros).\n\n                            {{1}}\n``` markdown\n##### Quizzes \u0026 Macros\n\u003c!--\n\n@customQuiz\n[[...]]\n\u003cscript\u003e\n\"@0\" == btoa( \"@input\".trim().toLowerCase() )\n\u003c/script\u003e\n@end\n\n--\u003e\n\n...\n\n@customQuiz(c29sdXRpb24=)\n\n\n@customQuiz(NTI=)\n```\n\n                          --{{2}}--\nYou can further parameterize your macros, as you can see in the code, there is\nan `@0`, which can be interpreted as a placeholder that shall be substituted by\nthe first parameter of your macro call.\n\n                          --{{3}}--\nThat's it, you can add as much as `@customQuiz`-macros and if you do some\nchanges, you do not have to go through all scripts, but instead you only have to\nchange one single macro.\n\n\n                            {{3}}\n********************************************************************************\n\nThe solution should be \"solution\":\n\n@customQuiz(c29sdXRpb24=)\n\nWhat is $37 + 15$?\n\n@customQuiz(NTI=)\n\n********************************************************************************\n\n\n                           --{{4}}--\nBy defining macros it is furthermore possible to create LiaScript libraries that\ncan imported into other courses, see therefore also section [Macros](#macros).\n\n\n##### Final thoughts on wrong solution\n\n                          --{{0}}--\nThe quiz for adding two numbers was actually taken from the presentation of Greg\nWilson, and it gives a good example for what scripts can be used for. Instead of\nlogging and checking if an answer is correct or not, we should use it to assist\nstudents while they are learning and try to identify patterns in wrong answers.\n\n                           {{0-1}}\n!?[What Everyone in Tech Should Know About Teaching and Learning](https://www.youtube.com/watch?v=ewXvFQByRqY\u0026start=717s)\n\n                          --{{1}}--\nAs you have seen it for [tasks](#tasks-and-scripting), the result of a script\ncan also be published, in this case the topic is defined by the `output`\nattribute.\n\n\n                            {{1}}\n``` markdown\nWhat is $37 + 15$?\n\n[[52]]\n\u003cscript output=\"quiz:37+15\"\u003e\n  if (\"@input\" == \"52\") {\n    true\n  } else {\n    \"@input\"\n  }\n\u003c/script\u003e\n```\n\n                          --{{2}}--\nOther scripts can be defined, that are subscribed to the output of the quiz, see\nthe different `@input` macro. These scripts are executed when the output of the\nprevious script changes. Every script can be used to identify another pattern,\nsince students can be wrong for different reasons. We need to identify such\npatterns and react properly instead of measuring only fail and success.\n\n\n                            {{2}}\n``` markdown\n\u003cscript style=\"display: block\"\u003e\n//   3(7)       (3)7\n// + 1(5)     + (1)5       The first and second steps were correct,\n// ------ -\u003e  ------  -\u003e   but the student forgot to carry the 1\n//   (12)       (4)2       in the 10 digit column.\n\nif (\"@input(`quiz:37+15`)\" == \"42\") {\n  send.liascript(`## Maybe you forgot to carry...\n\nCheckout the follow video to recap carrying.\n\n!?[Carrying for larger digits](https://www.youtube.com/watch?v=VPsYRPdlIpU)\n`)\n} else \"\"\n\u003c/script\u003e\n\n\u003cscript style=\"display: block\"\u003e\n//   3(7)       (3)7       The first and second steps were also\n// + 1(5)     + (1)5       correct, but carrying was not provided\n// ------ -\u003e  ------  -\u003e   properly, maybe there is a problem with\n//   (12)      (4)12       understanding digit columns...\n\n\nif (\"@input(`quiz:37+15`)\" == \"412\") {\n  send.lia(`You are nearly there, there might be a problem with the 10 digit columns...`)\n} else \"\"\n\u003c/script\u003e\n```\n\n                          --{{3}}--\nWith LiaScript you do not have to come up immediately with a perfect online\ncourse, you can adapt it in little steps and let it increasingly grow.\n\n\n                            {{3}}\n********************************************************************************\n\nWhat is $37 + 15$? This time you should make the mistakes 42 and 412.\n\n[[52]]\n\u003cscript output=\"quiz:37+15\"\u003e\n  if (\"@input\" == \"52\") {\n    true\n  } else {\n    \"@input\"\n  }\n\u003c/script\u003e\n\n\n\u003cscript style=\"display: block\"\u003e\n//   3(7)       (3)7\n// + 1(5)     + (1)5       The first and second steps were correct,\n// ------ -\u003e  ------  -\u003e   but the student forgot to carry the 1\n//   (12)       (4)2       in the 10 digit column.\n\nif (\"@input(`quiz:37+15`)\" == \"42\") {\n  send.liascript(`## Maybe you forgot to carry...\n\nCheckout the follow video to recap carrying.\n\n!?[Carrying for larger digits](https://www.youtube.com/watch?v=VPsYRPdlIpU)\n`)\n} else \"\"\n\u003c/script\u003e\n\n\u003cscript style=\"display: block\"\u003e\n//   3(7)       (3)7       The first and second steps were also\n// + 1(5)     + (1)5       correct, but carrying was not provided\n// ------ -\u003e  ------  -\u003e   properly, maybe there is a problem with\n//   (12)      (4)12       understanding digit columns...\n\n\nif (\"@input(`quiz:37+15`)\" == \"412\") {\n  send.lia(`You are nearly there, there might be a problem with the 10 digit columns...`)\n} else \"\"\n\u003c/script\u003e\n\n********************************************************************************\n\n\n##### Generic++\n\u003c!--\n@article: \u003cscript output=\"@0\" value=\"select\" input=\"select\" options=\"der|die|das|dem|den|des\"\u003e\n            if(\"@input(`articles`)\" == \"true\") {\n              \"@1\"\n            } else {\n              \"@input\"\n            }\n          \u003c/script\u003e\n--\u003e\n\n                          --{{0}}--\nOk, German articles behave strangely. This is a more complex example of a\ngeneric quiz that is connected to multiple scripts with an input, which are\nimplemented with a single LiaScript macro.\n\nDo you know which German articles belong to which gender in which case?\n\n[[!]]\n\u003cscript output=\"articles\"\u003e\nif (\"@input\" !== \"true\") {\n  \"@input(`11`)\"==\"der\"  \u0026\u0026  \"@input(`21`)\"==\"die\"  \u0026\u0026  \"@input(`31`)\"==\"das\"  \u0026\u0026  \"@input(`41`)\"==\"die\" \u0026\u0026\n  \"@input(`12`)\"==\"des\"  \u0026\u0026  \"@input(`22`)\"==\"der\"  \u0026\u0026  \"@input(`32`)\"==\"des\"  \u0026\u0026  \"@input(`42`)\"==\"der\" \u0026\u0026\n  \"@input(`13`)\"==\"dem\"  \u0026\u0026  \"@input(`23`)\"==\"der\"  \u0026\u0026  \"@input(`33`)\"==\"dem\"  \u0026\u0026  \"@input(`43`)\"==\"den\" \u0026\u0026\n  \"@input(`14`)\"==\"den\"  \u0026\u0026  \"@input(`24`)\"==\"die\"  \u0026\u0026  \"@input(`34`)\"==\"das\"  \u0026\u0026  \"@input(`44`)\"==\"die\"\n}\n\u003c/script\u003e\n\n| Case      | Masculine        | Feminine         | Neuter           | Plural           |\n| --------- | ---------------- | ---------------- | ---------------- | ---------------- |\n| Nominativ | @article(11,der) | @article(21,die) | @article(31,das) | @article(41,die) |\n| Genitiv   | @article(12,des) | @article(22,der) | @article(32,des) | @article(42,der) |\n| Dativ     | @article(13,dem) | @article(23,der) | @article(33,dem) | @article(43,den) |\n| Accusativ | @article(14,den) | @article(24,die) | @article(34,das) | @article(44,die) |\n\n\n                          --{{1}}--\nThe following code-block shows how this quiz was actually implemented.\n\n                            {{1}}\n``` markdown\n##### Generic++\n\u003c!--\n@article: \u003cscript output=\"@0\" value=\"select\" input=\"select\" options=\"der|die|das|dem|den|des\"\u003e\n            if(\"@input(`articles`)\" == \"true\") {\n              \"@1\"\n            } else {\n              \"@input\"\n            }\n          \u003c/script\u003e\n--\u003e\n\n                          --{{0}}--\nOk, German articles behave strangely. This is a more complex example of a\ngeneric quiz that is connected to multiple scripts with an input, which are\nimplemented with a single LiaScript macro.\n\nDo you know which German articles belong to which gender in which case?\n\n[[!]]\n\u003cscript output=\"articles\"\u003e\nif (\"@input\" !== \"true\") {\n  \"@input(`11`)\"==\"der\"  \u0026\u0026  \"@input(`21`)\"==\"die\"  \u0026\u0026  \"@input(`31`)\"==\"das\"  \u0026\u0026  \"@input(`41`)\"==\"die\" \u0026\u0026\n  \"@input(`12`)\"==\"des\"  \u0026\u0026  \"@input(`22`)\"==\"der\"  \u0026\u0026  \"@input(`32`)\"==\"des\"  \u0026\u0026  \"@input(`42`)\"==\"der\" \u0026\u0026\n  \"@input(`13`)\"==\"dem\"  \u0026\u0026  \"@input(`23`)\"==\"der\"  \u0026\u0026  \"@input(`33`)\"==\"dem\"  \u0026\u0026  \"@input(`43`)\"==\"den\" \u0026\u0026\n  \"@input(`14`)\"==\"den\"  \u0026\u0026  \"@input(`24`)\"==\"die\"  \u0026\u0026  \"@input(`34`)\"==\"das\"  \u0026\u0026  \"@input(`44`)\"==\"die\"\n}\n\u003c/script\u003e\n\n| Case      | Masculine        | Feminine         | Neuter           | Plural           |\n| --------- | ---------------- | ---------------- | ---------------- | ---------------- |\n| Nominativ | @article(11,der) | @article(21,die) | @article(31,das) | @article(41,die) |\n| Genitiv   | @article(12,des) | @article(22,der) | @article(32,des) | @article(42,der) |\n| Dativ     | @article(13,dem) | @article(23,der) | @article(33,dem) | @article(43,den) |\n| Accusativ | @article(14,den) | @article(24,die) | @article(34,das) | @article(44,die) |\n```\n\n\n## Surveys \u0026 Classrooms\n\n                               --{{0}}--\nA survey or questionnaire from our perspective is a quiz without a predefined solution.\nThus, the syntax is the same to quizzes, but instead of a solution you have to provide options.\nIf you use the [LiaScript-Exporter](https://www.npmjs.com/package/@liascript/exporter) to generate [SCORM-packages](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model) of a course, then the state of the quizzes, surveys, and tasks will be stored within the LMS-backend.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:43%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/C6JQPEUsZUyVq\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/james-franco-same-but-different-C6JQPEUsZUyVq\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n                               --{{1}}--\nBut, if you are also using [LiaScript](https://LiaScript.github.io) for your live presentations, you can also open a classroom directly from your Browser and create a shared experience, where all the connected peers will get the same and anonymous view.\nWe will explain the classroom-idea in more detail at the end of this section.\n\n### Text-Inputs\n\n                               --{{0}}--\nAs already mentioned, the difference to quizzes is, that you have to provide options or placeholders.\nIn case of a text-input, you have to provide a placeholder, which consists of at least 3 underscores that are separated spaces.\n\n\nYou can have a single text-input by using the following pattern:\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\n**This is a one liner, you can use commas `,` to separate your inputs:**\n\n    [[___]]\n```\n\n                                 {{1}}\n*******************************************************************************\n\n---\n\n**This is a one-liner, you can use `commas` to separate your inputs:**\n\n    [[___]]\n\n*******************************************************************************\n\n\n                               --{{1}}--\nIn this type of survey, you can use commas to separate different phrases or keyword/topics.\nApply this for short comments or reactions only.\n\n\n                               --{{2}}--\nSimilar to text-quizzes, use the following syntax to define a text-survey, where\nthe number of underlines defines the presented line numbers:\n\n\n                                 {{2}}\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nPlease describe your opinion in a few sentences:\n\n    [[___ ___ ___ ___]]\n\n    [[______   ___   ___   ______]]\n```\n\n                               --{{3}}--\nThereby, it does not matter how many spaces you add or how long the underscore lines are, both definitions will result in the same `textarea` input.\n\n                                 {{3}}\n*******************************************************************************\n\n---\n\nPlease describe your opinion in a few sentences:\n\n    [[___   ___   ___   ___]]\n\n*******************************************************************************\n\n\n### Single-Choice Vector\n\n                               --{{0}}--\nAnd also this kind of survey is similar to a single choice quiz, but in this case, numbers within parenthesis are used to define some kind of variable\nidentifier.\nThat is why they do not have to be in order.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nSelect one option:\n\n    [(1)] option 1\n    [(2)] option 2\n    [(3)] option 3\n    [(0)] option 0\n```\n\n                               --{{1}}--\nThe result will look like the one presented below:\n\n                                 {{1}}\n*******************************************************************************\n\nSelect one option:\n\n    [(1)] option 1\n    [(2)] option 2\n    [(3)] option 3\n    [(0)] option 0\n\n*******************************************************************************\n\n\nBut, instead of numbers, you can also define more complex option names.\n__There is only one difference, the options that start with numbers, will be plotted in the classroom presentation as distributions, whereby not numbers will be presented as categorical values.__\n\n             {{2}}\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nSelect one option:\n\n- [(very good)]       I like it very much\n- [(good)]            It is ok\n- [(bad)]             I don't like it\n- [(something else)]  I am not sure\n```\n\nAs you can see from the example, you can apply different styles for encoding surveys too.\nEither you use indentation, so that other Markdown interpreter will show it as code, or you use lists.\n\n\n                                 {{2}}\n*******************************************************************************\n\nSelect one option:\n\n- [(very good)]       I like it very much\n- [(good)]            It is ok\n- [(bad)]             I don't like it\n- [(something else)]  I am not sure\n\n*******************************************************************************\n\n\n### Multi-Choice Vector\n\n                               --{{0}}--\nSimilar to multi-choice quizzes, you can define multi-choice survey vectors with a number in double square brackets.\nBut, and this is also possible for all other kinds of surveys, you can define some kind of variable name with a starting colon.\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nWhat are your favorite colors?\n\n[[red]]         is it red\n[[green]]       green\n[[blue]]        or blue\n[[dark purple]] last chance ;-)\n```\n\n                               --{{1}}--\nWithin a LiaScript classroom, this represents categorical values.\n\n                                 {{1}}\n*******************************************************************************\n\nWhat are your favorite colors?\n\n    [[red]]         is it red\n    [[green]]       green\n    [[blue]]        or blue\n    [[dark purple]] no one likes purple ( last chance ;-) )\n\n*******************************************************************************\n\n                                 --{{2}}--\nIf you want to turn this into a continuous representation, you have to work with starting numbers.\n\n                                  {{2}}\n*******************************************************************************\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nWhat are your favorite colors?\n\n- [[1 red]]         is it red\n- [[2 green]]       green\n- [[3 blue]]        or blue\n- [[4 dark purple]] last chance ;-)\n```\n\n---\n\nWhat are your favorite colors?\n\n- [[1 red]]         is it red\n- [[2 green]]       green\n- [[3 blue]]        or blue\n- [[4 dark purple]] last chance ;-)\n\n*******************************************************************************\n\n### Single-Choice Matrix\n\n                              --{{0}}--\nFor defining survey blocks, you only have to have a header row, whose definition is also used by the trailing rows.\n\n__Markdown-format:__\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nWhat is your opinion about LiaScript?\n\n    [(totally)(agree)(unsure)(maybe not)(disagree)]\n    [                                             ] LiaScript is great?\n    [                                             ] I would use it to make online **courses**?\n    [                                             ] I would use it for online **surveys**?\n```\n\n---\n\n__Result:__\n\nWhat is your opinion about LiaScript?\n\n    [(totally)(agree)(unsure)(maybe not)(disagree)]\n    [                                             ] LiaScript is great?\n    [                                             ] I would use it to make online **courses**?\n    [                                             ] I would use it for online **surveys**?\n\n\n                               --{{1}}--\nAnd also in this case, again, you can use numbers to display the summary as categorical.\n\n                               --{{2}}--\nAs depicted below, the brackets `[   ]` do not have to match with the first line.\n\n                                 {{1}}\n*******************************************************************************\n\n__Markdown-format:__\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\nWhat is your opinion about LiaScript?\n\n- [(1 totally)(2 agree)(3 unsure)(4 maybe not)(5 disagree)]\n- [                ] LiaScript is great?\n- [                ] I would use it to make online **courses**?\n- [                ] I would use it for online **surveys**?\n```\n\n---\n\n__Result:__\n\nWhat is your opinion about LiaScript?\n\n- [(1 totally)(2 agree)(3 unsure)(4 maybe not)(5 disagree)]\n- [                ] LiaScript is great?\n- [                ] I would use it to make online **courses**?\n- [                ] I would use it for online **surveys**?\n\n*******************************************************************************\n\n### Multi-Choice Matrix\n\n                               --{{0}}--\nThe multi-choice blocks are self-explanatory and behave exactly as the single-choice blocks from the previous section.\n\n__Markdown-format:__\n\n\u003c!-- class=\"translate\"--\u003e\n```markdown\n[[1][2][3][4][5][6][7]]\n[                     ] question 1 ?\n[                     ] question 2 ?\n[                     ] question 3 ?\n```\n---\n\n__Result:__\n\n    [[1][2][3][4][5][6][7]]\n    [                     ] question 1 ?\n    [                     ] question 2 ?\n    [                     ] question 3 ?\n\n\n### Surveys and Scripting\n\n                               --{{0}}--\nAs it was done with tasks and quizzes, you can also associate a script to every survey to change its behavior or to send the result to an external service.\nBy default, you have to provide some input in order to submit the data.\nWithin the following example, both cases are treated as errors, whether the user just hits the submit button or if only spaces and tabs will be entered.\nThe script returns `true`, if the input matches your experience.\nOtherwise, an error message will be presented to the user, depending on the input length.\nIf you just return `false`, then no information will be presented to the user.\n\n\n``` markdown\nPlease enter some spaces at first:\n\n[[___]]\n\u003cscript\u003e\n  let input = `@input`.trim()\n\n  if (input.length \u003e 4) {\n    true\n  } else if (input.length == 0) {\n    send.lia(\"Please enter some text\", [], false)\n  } else {\n    send.lia(\"Please provide some meaningful input\", [], false)\n  }\n\u003c/script\u003e\n```\n\n---\n\n__Result:__\n\n[[___]]\n\u003cscript\u003e\n  let input = `@input`.trim()\n\n  if (input.length \u003e 4) {\n    true\n  } else if (input.length == 0) {\n    send.lia(\"Please enter some text\", [], false)\n  } else {\n    send.lia(\"Please provide some meaningful input\", [], false)\n  }\n\u003c/script\u003e\n\n                               --{{1}}--\nThe input-data for different types of summaries is the same as for quizzes, but you can check the input always manually via [`alert`](https://www.w3schools.com/jsref/met_win_alert.asp) function.\n__Note that `console.log` will not work in this case at the moment.__\n\n\n                                 {{1}}\n*******************************************************************************\n\n\u003c!-- class=\"translate\"--\u003e\n``` markdown\nWhat are your favorite colors?\n\n[[1 red]]         is it red\n[[2 green]]       green\n[[3 blue]]        or blue\n[[4 dark purple]] last chance ;-)\n\u003cscript\u003e\n  alert(`@input`)\n\u003c/script\u003e\n```\n\nWhat are your favorite colors?\n\n[[1 red]]         is it red\n[[2 green]]       green\n[[3 blue]]        or blue\n[[4 dark purple]] last chance ;-)\n\u003cscript\u003e\n  alert(`@input`)\n\u003c/script\u003e\n\n*******************************************************************************\n\n### Classroom Experience\n\nWe try to develop a simple classroom experience, light without any centralized authority or server.\nTherefore, we currently apply distributed [Web3.0](https://en.wikipedia.org/wiki/Web3) technologies, which synchronize the state of a classroom across multiple connected users/browsers.\nAt the moment, we can synchronize and visualize quizzes and surveys and display an anonymous overview onto the results.\nAdditionally every executable code can also be edited in collaborative mode.\nLast but not least, the current implementation of a LiaScript classroom offers a chat, that interprets the inputs as LiaScript.\nThus, it is possible to add quizzes, surveys and even code into the chat.\n\n\u003e # What is Synced?\n\u003e\n\u003e * Quizzes\n\u003e * Surveys\n\u003e * Executable code\n\nThe basic idea is, if you join a room, you bring your data with you, if you leave the room then all of your data will be removed from the global state.\nThus, nothing is stored nothing is logged, and you have the control over your data.\nAll associated servers run only as relays.\nBut, chat messages and collaborative changes to a code snippet will remain within the classroom as long as on user is within the room.\nIf all leave the room, the chat and the collaborative changes are lost...\n\n#### I don't want Classrooms\n\n                               --{{0}}--\nYou can also disable this feature for your course, simply by adding the command `classroom: disable` or `classroom: false` to your main definition.\n\n``` markdown\n\u003c!--\nauthor: ...\n\nclassroom: disable\n--\u003e\n\n# Title\n\n```\n\n#### Working with Classrooms\n\n                               --{{0}}--\nIf you are on the LiaScript website and if you have a course started, you can directly switch to the classroom settings by clicking onto the share button.\n\n          {{0-1}}\n![Open Classroom](img/classroom1.png)\n\n\n                               --{{1}}--\nWhen you click onto the classroom button, you should be presented with the classroom settings, where you have to choose one backend service.\nWe would prefer to use [GunDB](https://gun.eco).\nSome services like [Beaker](https://beakerbrowser.com) require you to run your course from another browser, or you will have different settings.\n\n          {{1-2}}\n![Classroom Settings](img/classroom2.png)\n\n\n                               --{{2}}--\nWe provide different information for the different services that can be applied.\nHowever, what is similar to all is that you have to define a room name that must be unique.\nTo help you, you can click onto the circle arrow symbol and a name will be generated randomly for you.\nThe passwords are optional.\n\n          {{2-3}}\n![Classroom with GunDB](img/classroom3.png)\n\n\n                               --{{3}}--\nIf you then click onto connect and a connection could be established, the classroom settings will be closed automatically.\nOtherwise, an error message should be provided.\nIf everything worked fine, you will see, at least one user within the classroom and the URL of your course will have changed.\nYou can now either share the new URL, which contains all required configurations, or you can send the room name and the password and the course-URL separately to your peers.\nIn this case, they will have to repeat these steps.\n\n          {{3-4}}\n![Open Classroom](img/classroom4.png)\n\n\n                               --{{4}}--\nIn order to disconnect, you will have to go to the classroom settings again and click onto the disconnect button.\nAgain, the URL of the course will change back to the original representation.\n\n           {{4}}\n![Open Classroom](img/classroom5.png)\n\n                                 {{3}}\n\u003e __Note:__\n\u003e You can try this out, if you open LiaScript on different browsers and go back to the quizzes and surveys sections.\n\u003e You should experiment a bit with the resulting presentations.\n\u003e Additionally, try to disconnect and observe the effect on the connected instances.\n\n#### Classroom Experience\n\n                               --{{0}}--\nThe following video shows how to open, share, and close a LiaScript classroom.\n\n!?[LiaScript classroom demo](https://www.youtube.com/watch?v=Kjk6OblugXI\u0026autoplay=true)\n\n\n#### Enabling the Classrooms in any LMS\n\n                               --{{0}}--\nIf you have exported your course to a [SCORM](https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model) or [IMS](https://www.imsglobal.org/activity/learning-tools-interoperability) package with the [LiaScript-Exporter](https://www.npmjs.com/package/@liascript/exporter) you can also establish classrooms between different users of the same course within a single [LMS](https://en.wikipedia.org/wiki/Learning_management_system) or between different ones, such as [Moodle](https://en.wikipedia.org/wiki/Moodle) or [ILIAS](https://en.wikipedia.org/wiki/ILIAS).\n\n                               --{{1}}--\nBy default, the classroom-feature is disabled within any exports, but as you can disable it for your course, it is also possible to enable it.\nThus, at first, you have to enable this feature within your course, before you export it.\n\n                                 {{1}}\n``` markdown\n\u003c!--\n...\n\nclassroom: enable\n\n--\u003e\n\n# Your Course\n```\n\n                               --{{2}}--\nSecondly, the classroom name has to be truly unique and surrounded by quotations.\nBy default, the URL of your Markdown file and the room-name are used to generate a unique ID for the classroom, which prevents collisions between different courses, which accidentally use the same room name.\nHowever, by surrounding the room-name with single or double quotation marks, you instruct [LiaScript](https://liascript.github.io) to use this specific room name and to ignore the course URL.\n__All the roommates have to enter exactly the same name for the classroom.__\nThat's it!\n\n                                 {{2}}\n**Room name:** `\"This has to be a truly unique name 129281715#123\"`\n\n\n#### Future Classrooms\n\n                               --{{0}}--\nAs already mentioned, we currently only synchronize quizzes and surveys.\nOther elements will be added in the future, such as distributed pair-programming, user roles, asking questions, etc.\n\n                                {{0-1}}\n\u003cdiv style=\"width:100%;height:0;padding-bottom:62%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/3otO6zntMrmhpvaYX6\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/online-education-learning-3otO6zntMrmhpvaYX6\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n\n                               --{{1}}--\nIf you are interested in the implementation stuff, we build classrooms with the help of [CRDTs](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) and try to make LiaScript as backend-agnostic as possible.\nYou can add support for your own systems [here](https://github.com/LiaScript/LiaScript/tree/development/src/typescript/sync).\n\n                                 {{1}}\n__Implementation:__\nhttps://github.com/LiaScript/LiaScript/tree/development/src/typescript/sync\n\n\n## Effects\n\n                               --{{0}}--\nThere are currently three types of effects that we call:\n\n\u003c!-- --{{0}}--\nanimations, comments, and playback functions\n--\u003e\n\n1. Animations\n2. Comments via Text-to-Speech\n3. and Playback functions\n\n                               --{{1}}--\nAll of these elements can be used inline and as block-level elements.\nEvery effect is defined by two braces:\n\n                                 {{1}}\n``` markdown\n    --{{1}}--\nSpoken comments.\n\n     {{1-2}}\nBlocks that appear at animation\nstep 1 and disappear on step 2.\n\n     {{|\u003e}}\nTo be read aloud when user clicks\nthe on the play button...\n```\n\n                               --{{2}}--\nAnimations are only visible, and comments are read aloud in \"Presentation\" or \"Slides\" mode.\nIf you set the mode to \"Textbook\", then all animations and comments will be displayed on one slide where you have placed them within the document.\nIn the other two modes, they are revealed step by step with each click.\n\n                                {{3 |\u003e}}\n\u003e __You need to balance these features properly so that your course can be read in Textbook mode and used for presentations and more.__\n\n\n### Animations\n\n                                   --{{0}}--\nAnimations are defined by two curly braces: one starting and one optional ending number.\nThey can be associated with single blocks, multiple blocks, and also inline elements.\n\n`{{start-stop?}} | {start-stop?}{inline}`\n\n#### Block Animations\n\n\n                                   --{{0}}--\nAnimations can be associated with blocks by adding two curly braces above the block.\nWe recommend indenting the animation definition by at least 4 spaces.\nOther Markdown renderers will highlight this as code, making it easier to read.\n\n\u003c!--  --\u003e\n``` markdown\n     {{1}}\nThis is an example for a *single* block animations.\n\n     {{2-3}}\nThis one will appear on animation step 2 and disappear on 3.\n\n{{4}} This is also ok, but it will look be harder to spot on GitHub.\n```\n\n                               --{{2}}--\nUse a starting and an ending number, if you want the element to disappear at a certain point.\n\n__Result:__\n\n\n     {{1}}\nThis is an example for a *single* block animations.\n\n     {{2-3}}\nThis one will appear on animation step 2 and disappear on 3.\n\n\n{{4}} This is also ok, but it will look be harder to spot on GitHub.\n\n\n#### Multi-Block Animations\n\n                               --{{0}}--\nSimilarly to quizzes, as described in section [Quiz-Solution](#solution), you can group multiple markdown blocks by lines of asterisks.\nSimply add the curly braces with the animation definition above the upper line.\n\n\u003c!-- class=\"translate\" translate=\"yes\" --\u003e\n``` markdown\n            {{1-2}}\n************************************\n\nThis is an example...\n\n| that     | contains |\n|----------|----------|\n| multiple | blocks.  |\n\n************************************\n\n\n             {{2}}\n\u003csection\u003e\n\nAs an alternative, you can also use\nHTML-tags ...\n\n\n... to surround multiple blocks.\n\n\u003c/section\u003e\n```\n\n                               --{{1}}--\nBlocks can also have a starting and disappearing number.\n\n                               --{{2}}--\nDepending on your preferred style, you can also use HTML tags to group blocks.\nThese will then be displayed slightly differently on [GitHub](https://github.com).\n\n__Result:__\n\n            {{1-2}}\n************************************\n\nThis is an example...\n\n| that     | contains |\n|----------|----------|\n| multiple | blocks.  |\n\n************************************\n\n\n             {{2}}\n\u003csection\u003e\n\nAs an alternative, you can also use\nHTML-tags ...\n\n\n... to surround multiple blocks.\n\n\u003c/section\u003e\n\n\n#### Inline Animations\n\n                                   --{{0}}--\nInline effects can be used in nearly all LiaScript elements.\nIn this case, you will have to unpack the curly braces:\nthe first pair surrounds the animation definition,\nwhile the second pair contains all inline elements that should appear and/or disappear.\n\n\n``` markdown\n* no effect here\n* but in this line {2}{show ***second***}\n* as well as this one {1-2}{show ***first*** remove on __second__}\n```\n\n* no effect here\n* but in this line {2}{show ***second***}\n* as well as this one {1-2}{show ***first*** remove on __second__}\n\n\u003c!-- --{{1}}--\nGoto animation step 1.\n--\u003e\n\n\u003c!-- --{{2}}--\nGoto animation step 2.\n--\u003e\n\n\n#### Combinations \u0026 Styling\n\n                               --{{0}}--\nAnimations can also be grouped freely, allowing one multi-block animation to contain multiple block animations, and one block can also contain further inline animations:\n\n``` markdown\n\u003c!--\nclass=\"animate__animated animate__backInUp\"\nstyle=\"background:#CCC; padding:3rem; min-height: 40vh; border-radius: 3rem\"\n--\u003e\n                 {{1}}\n*******************************************\n\nThis block contains {2}{multiple} inline animations.\nWith some\n{2-3}{styled}\u003c!-- class=\"animate__animated animate__flash\" --\u003e\nelements as well.\n\n\u003c!-- class=\"animate__animated animate__backInDown\" --\u003e\n                  {{3}}\n!?[Animated paintings](https://www.youtube.com/watch?v=-DDphfCnFQc\u0026autoplay=true)\n\n*******************************************\n```\n\n\n\u003c!--\nclass=\"animate__animated animate__backInUp\"\nstyle=\"background:#CCC; padding:3rem; min-height: 40vh; border-radius: 3rem\"\n--\u003e\n                 {{1}}\n*******************************************\n\nThis block contains {2}{multiple} inline animations.\nWith some\n{2-3}{styled}\u003c!-- class=\"animate__animated animate__flash\" --\u003e\nelements as well.\n\n\u003c!-- class=\"animate__animated animate__backInDown\" --\u003e\n                  {{3}}\n!?[Animated paintings](https://www.youtube.com/watch?v=-DDphfCnFQc\u0026autoplay=true)\n\n*******************************************\n\n\n                               --{{4}}--\nAny kind of CSS can also be added to an animation, as described in the section on [Custom Styling](#custom-styling).\nAdditionally, we have included an additional CSS stylesheet in the main HTML comment of this document.\nThis will load [Animate CSS](https://animate.style/#documentation), but you can use any other CSS library or custom styling as well.\n\n                                 {{4}}\n*******************************************************************************\n\n__Animate.css documentation:__ https://animate.style\n\n\n``` markdown\n\u003c!--\nauthor: ...\n\nlink:   https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css\n--\u003e\n\n# LiaScript\n```\n*******************************************************************************\n\n### Comments: Text 2 Speech\n\n                               --{{0}}--\nThe idea of a comment is that they should be associated with animations.\nWhen animation $x$ is revealed, then the comment $x$ is read aloud.\nSimilar to a PowerPoint presentation, when one element appears and the presenter says something, then clicks and the next element appears and is also commented.\nThus, a comment is a paragraph that is marked by two sets of curly braces, which contain a number, and two dashes around the braces.\nIf multiple comments have the same number, then they will be replayed in the order of appearance.\n\n\n``` markdown\n          --{{1}}--\nThis will be spoken out loud.\n\n          --{{2}}--\nThis will be spoken out loud too,\nbut at animation step 2.\n\n          --{{2}}--\nDon't forget me.\n\n            {{1}}\n__I am animation 1 {2}{and 2 too}.__\n```\n\n          --{{1}}--\nThis will be spoken out loud.\n\n          --{{2}}--\nThis will be spoken out loud too,\nbut at animation step 2.\n\n          --{{2}}--\nDon' forget me.\n\n            {{1}}\n__I am animation 1 {2}{and 2 too}.__\n\n\n                               --{{3}}--\nIf you change the presentation mode, you will notice that these comments will be displayed in place in \"Textbook\" mode.\nIn \"Slides\" mode, they will also be presented to the user, while they will be hidden in \"Presentation\" mode.\nIf you switch off the sound, then this is the mode that can be used for presenting content, while the others can be used for self-studying.\n\n#### Voices \u0026 Language\n\u003c!--\nnarrator: UK English Male\n@Tanja:   Russian Female\n--\u003e\n\n                               --{{0}}--\n__But where does the voice come from?__\nIn LiaScript, within the initial comment, you can use the `language` macro to define the document translation and `narrator` to define the default voice.\nCurrently, we are using [responsivevoice](https://responsivevoice.org) as a backup solution if your browser does not support text-to-speech.\nOtherwise, your default browser and operating system text-to-speech is utilized, which can vary across browsers and systems.\nWithin the settings, it is possible to switch between the browser and backup TTS.\nIt is possible to change the `narrator` on different layers: globally within the main comment tag, per slide, and also per comment, by inserting the voice into the comment definition.\n\n\n1. Backup Speech-Engine: https://responsivevoice.org\n2. Default `narrator` must be defined within the initial comment, otherwise `US English Male` is used\n3. You can overwrite the default `narrator` per slide, by attaching a comment to the title tag\n4. Use `--{{number}}--` to indicate what is spoken and when\n5. Use `--{{number voice}}--` to change the voice for this particular comment\n6. It is also possible to define custom macros for language definitions\n7. You can have multiple comments with the same number, those will be combined, but only the voice of the first one is used\n8. See a complete list of all supported voices in section [`narrator`](#narrator)\n\n---\n\n``` markdown\n\u003c!--\nauthor:   ...\nlanguage: en\nnarrator: US English Male\n--\u003e\n\n# Title\n\n...\n\n#### Voices \u0026 Language\n\u003c!--\nnarrator: UK English Female\n@Tanja:   Russian Female\n--\u003e\n\n                    --{{1}}--\nThe entire ***Markdown*** paragraph right below the effect definition in double\nminus notation is sent to responsivevoice to speak the text out loud in\n`Presentation` or `Slides` mode.\n\n                    --{{3 Deutsch Female}}--\nMarkdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber und\nAaron Swartz entworfen und im Dezember 2004 mit Version 1.0.1 spezifiziert ...\n\n                    --{{4 @Tanja}}--\n«Для торжества зла достаточно бездействия хороших людей».\n```\n\n---\n\n                    --{{1}}--\nThe entire ***Markdown*** paragraph right below the effect definition in double\nminus notation is sent to responsivevoice to speak the text out loud in\n`Presentation` or `Slides` mode.\n\n                    --{{3 Deutsch Female}}--\nMarkdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber und\nAaron Swartz entworfen und im Dezember 2004 mit Version 1.0.1 spezifiziert ...\n\n                    --{{4 @Tanja}}--\n«Для торжества зла достаточно бездействия хороших людей».\n\n\n#### Hidden Comments\n\n                               --{{0}}--\nSometimes, it might be necessary to add a comment or to read a part aloud to underline a certain point, which might be necessary in the narrated mode but not in the Textbook.\nTherefore, it is possible to put your TTS output into simple HTML comments.\nThis won't be shown to anyone and also not visible on most other Markdown parsers and renderers.\n\n```html\n\u003c!-- --{{1}}--\nSpeak this out, but do not show it to anyone.\n--\u003e\n```\n\n\u003c!-- --{{1}}--\nSpeak this out, but do not show it to anyone.\n--\u003e\n\n\n                                 {{1}}\nThe associated hidden comment to this point will not be visible in Textbook mode!\n\n\n#### Translations\n\n                               --{{0}}--\nIf you click on the language settings, you can either click on the element \"Translate with Google (experimental)\" and select another language.\nIn this case, a JavaScript library will be injected that implements the translation feature.\nAs you can see from the example, not all parts will be translated.\nCode blocks will not be translated by default, as well as comments that have been marked with another voice than the default.\nThese comments remain as they are, while LiaScript tries to find an appropriate voice for the new language and gender.\n\n![translations](img/translation.png \"Screenshot of a translation to Hebrew with Google-translate.\")\n\n                               --{{1}}--\nYou can attach specific parameters to the comment that prohibit or enforce translation.\nBy default, Google will search for the `class` definition `translate` or `notranslate`, but other external browser plugins might also take into account the HTML5 attribute [`translate`](https://www.w3schools.com/tags/att_translate.asp).\nSo it is always good to use both definitions.\n\n\n                                 {{1}}\n``` markdown\n\u003c!-- class=\"notranslate\" translate=\"no\" style=\"color: red\" --\u003e\n                    --{{2}}--\nI will not be translated!\n\n                    --{{3 Russian Female}}--\n«Для торжества зла достаточно бездействия хороших людей».\n```\n\n\u003c!-- class=\"notranslate\" translate=\"no\" style=\"color: red\" --\u003e\n                    --{{2}}--\nI will not be translated!\n\n                    --{{3 Russian Female}}--\n«Для торжества зла достаточно бездействия хороших людей».\n\n\n                               --{{4}}--\nYou can attach these language attributes to any kind of Markdown block or inline element to control the translation.\nNote that code environments and foreign language comments will be tagged automatically with no-translate.\n\n\n### Comments: Multimedia\n\n    {{|\u003e}}\n\u003e At the recent [eLearning Africa Conference 2024 in Kigali, Rwanda](https://liascript.github.io/blog/elearning-africa-2024/), we recognized that relying solely on browser-based text-to-speech output is insufficient for supporting all spoken languages and dialects.\n\u003e To enhance personalization and diversify language and content, we have introduced two highly requested types of comments, which complement the existing format. Since LiaScript version 0.15.7, you can now add audio or video recordings to your comments.\n\n#### Audio\n\n    --{{0}}--\nTo play an audio file during your animation step,\nsimply attach the multimedia link at the end of\nyour comment.\n?[⏯](recording/audio_1.mp3)\n\n``` markdown\n    --{{0}}--\nTo play an audio file during your animation step,\nsimply attach the multimedia link at the end of\nyour comment.\n?[⏯](recording/audio_1.mp3)\n```\n\n    --{{1}}--\n?[⏯](recording/audio_2.mp3)\nOr, add it to the front.\n\n      {{1}}\n``` markdown\n    --{{1}}--\n?[⏯](recording/audio_2.mp3)\nOr, add it to the front.\n\n    --{{1}}--\n?[⏯](recording/audio_3.mp3)\nOf course, you can also combine multiple comments.\nThe playback will occur in the order they appear\nin the document.\n```\n\n    --{{1}}--\n?[⏯](recording/audio_3.mp3)\nOf course, you can also combine multiple comments.\nThe playback will occur in the order they appear\nin the document.\n\n\n#### Video\n\n    --{{0}}--\n!?[⏯](recording/video1.webm)\nWe had a lengthy discussion and brainstorming session on where to add video content so it remains visible without affecting the user experience.\nOur solution: let the user decide.\nThe user can choose where to place the overlaid video and adjust its size based on their screen size, orientation, and resolution.\n\n    --{{1}}--\n!?[⏯](recording/video2.webm)\nTo add short video content, simply include a video link at the beginning or the end of your comment.\n\n      {{1}}\n``` markdown\n    --{{1}}--\n!?[⏯](recording/video2.webm)\nTo add short video content, simply include a video\nlink at the beginning or the end of your comment.\n\n    --{{1}}--\nAs before, you can combine multiple comments, which\nwill be replayed in sequence.\n!?[⏯](recording/video3.webm)\n```\n\n    --{{1}}--\nAs before, you can combine multiple comments, which will be replayed in sequence.\n!?[⏯](recording/video3.webm)\n\n### Playback\n\n                               --{{0}}--\nSince Text2Speech output is integrated into the LiaScript notation, it can be intentionally used for language learners.\nSimply add a stylized play button to the effect definition to indicate what should be spoken out loud.\nYou can also use different voices.\n\n```Markdown\n    {{|\u003e}}\nThis entire paragraph will be spoken out __LOUD__.\n\n    {{!\u003e Australian Female}}\n* But in this case, this can also be combined\n* with a couple of\n* - different\n  - Markdown elements\n  - whether it makes sense or not.\n```\n\n    {{|\u003e}}\nThis entire paragraph will be spoken out __LOUD__.\n\n    {{!\u003e Australian Female}}\n* But in this case, this can also be combined\n* with a couple of\n* - different\n  - Markdown elements\n  - whether it makes sense or not.\n\n\n#### Playback-Blocks\n\n                               --{{0}}--\nAnd, as introduced for animations, you can also group multiple blocks together.\nSimply add as many Markdown blocks between two lines of asterisks, and they will be interpreted as one larger block.\n\n\n```markdown\n\u003c!--style=\"background: #EEE; padding:2rem\"--\u003e\n                  {{|\u003e}}\n**************************************************\nThis entire paragraph will be spoken out __LOUD__.\n\n* But in this case, this can also be combined\n* with a couple of\n* - different\n  - Markdown elements\n  - whether it makes sense or not.\n\n**************************************************\n```\n\n\u003c!--style=\"background: #EEE; padding:2rem\"--\u003e\n                  {{|\u003e}}\n**************************************************\nThis entire paragraph will be spoken out __LOUD__.\n\n* But in this case, this can also be combined\n* with a couple of\n* - different\n  - Markdown elements\n  - whether it makes sense or not.\n**************************************************\n\n                               --{{1}}--\nAs an __alternative__, you can also use an HTML tag like __`\u003csection\u003e`__ or __`\u003cdiv\u003e`__ to group blocks.\nThe LiaScript result will remain the same, but it will be rendered differently on other Markdown interpreters.\n\n#### Playback-Inlines\n\n                               --{{0}}--\nLike in the presented example, the exclamation will not interfere with the table definition.\nAnd as presented before, you can also use inlining for Playback elements, as it was used for animations, by simply using two pairs of braces.\nDepending on your preferences and the current context, it is also possible to define the stylized play-button with a vertical line or an exclamation mark.\nLike in the presented example, the exclamation will not interfere with the table definition.\n\n\n```Markdown\n| English              | German                            | Russian                                 | Arabic male               | Arabic female               |\n| -------------------- |:--------------------------------- |:--------------------------------------- |:------------------------- | --------------------------- |\n| {!\u003e}{I go}           | {!\u003e Deutsch Male}{ich gehe}       | {!\u003e Russian Male}{я хожу}               | {!\u003e Arabic Male}{أذْهبُ}  |                             |\n| {!\u003e}{you go}         | {!\u003e Deutsch Male}{du gehst}       | {!\u003e Russian Male}{ты ходишь}            | {!\u003e Arabic Male}{تذْهبُ}  | {!\u003e Arabic Female}{تذْهبين} |\n| {!\u003e}{he/she/it goes} | {!\u003e Deutsch Male}{er/sie/es geht} | {!\u003e Russian Male}{он / она / оно ходит} | {!\u003e Arabic Male}{يذْهبُ}  | {!\u003e Arabic Female}{تذْهبُ}  |\n| {!\u003e}{we go}          | {!\u003e Deutsch Male}{wir gehen}      | {!\u003e Russian Male}{мы ходим}             | {!\u003e Arabic Male}{نذْهبُ}  |                             |\n| {!\u003e}{you go}         | {!\u003e Deutsch Male}{ihr geht}       | {!\u003e Russian Male}{вы ходите}            | {!\u003e Arabic Male}{تذْهبون} | {!\u003e Arabic Female}{تذْهبْن} |\n| {!\u003e}{they go}        | {!\u003e Deutsch Male}{sie gehen}      | {!\u003e Russian Male}{они ходят}            | {!\u003e Arabic Male}{يذْهبون} | {!\u003e Arabic Female}{يذْهبْن} |\n```\n\n                               --{{1}}--\nThe result is displayed within the table; all elements can be played on demand.\n\n                                 {{1}}\n| English              | German                            | Russian                                 | Arabic male               | Arabic female               |\n| -------------------- |:--------------------------------- |:--------------------------------------- |:------------------------- | --------------------------- |\n| {!\u003e}{I go}           | {!\u003e Deutsch Male}{ich gehe}       | {!\u003e Russian Male}{я хожу}               | {!\u003e Arabic Male}{أذْهبُ}  |                             |\n| {!\u003e}{you go}         | {!\u003e Deutsch Male}{du gehst}       | {!\u003e Russian Male}{ты ходишь}            | {!\u003e Arabic Male}{تذْهبُ}  | {!\u003e Arabic Female}{تذْهبين} |\n| {!\u003e}{he/she/it goes} | {!\u003e Deutsch Male}{er/sie/es geht} | {!\u003e Russian Male}{он / она / оно ходит} | {!\u003e Arabic Male}{يذْهبُ}  | {!\u003e Arabic Female}{تذْهبُ}  |\n| {!\u003e}{we go}          | {!\u003e Deutsch Male}{wir gehen}      | {!\u003e Russian Male}{мы ходим}             | {!\u003e Arabic Male}{نذْهبُ}  |                             |\n| {!\u003e}{you go}         | {!\u003e Deutsch Male}{ihr geht}       | {!\u003e Russian Male}{вы ходите}            | {!\u003e Arabic Male}{تذْهبون} | {!\u003e Arabic Female}{تذْهبْن} |\n| {!\u003e}{they go}        | {!\u003e Deutsch Male}{sie gehen}      | {!\u003e Russian Male}{они ходят}            | {!\u003e Arabic Male}{يذْهبون} | {!\u003e Arabic Female}{يذْهبْن} |\n\n\n#### Hiding Text\n\u003c!--\n@play: {!\u003e @0}{\u003cspan style=\"display: inline-block; text-indent: -10000px\"\u003e@1\u003c/span\u003e}\n@en: @play(UK English Male,@0)\n@de: @play(Deutsch Male,@0)\n@ru: @play(Russian Female,@0)\n@ar: @play(Arabic @0,@1)\n--\u003e\n\n                               --{{0}}--\nIf you only want to show the play buttons but not the text, it is possible to use some HTML tricks.\nThe easiest way is to put your text into an HTML element and to remove it from the screen by using a `span` whose content is shifted off the screen.\nSimply styling the element with `display: none` will not work, since the TTS function requires the text to be rendered within the DOM, and the translation via Google will not work if the element is not visible.\n\n\n                               --{{1}}--\nBut, since it is possible to define custom [Macros](#macros), we can also apply a more elegant way.\nWe define a set of local macros directly within a comment attached to the current heading.\nThe `@play` macro has two parameters, one for the voice and the other for the text; the other macros are simply shortcuts for the voice that pass the text as the second parameter to the `@play` macro.\nWithin the Arabic macro, it is also possible to define the gender of the narrator.\n\n                                 {{1}}\n``` Markdown\n#### Hiding Text\n\u003c!--\n@play: {!\u003e @0}{\u003cspan style=\"display: inline-block; text-indent: -10000px\"\u003e@1\u003c/span\u003e}\n@en: @play(UK English Male,@0)\n@de: @play(Deutsch Male,@0)\n@ru: @play(Russian Female,@0)\n@ar: @play(Arabic @0,@1)\n--\u003e\n\n| go        |         EN          |         DE          |            RU             |      AR male      |      AR female      |\n| --------- |:-------------------:|:-------------------:|:-------------------------:|:-----------------:|:-------------------:|\n| I         |      @en(I go)      |    @de(ich gehe)    |        @ru(я хожу)        | @ar(Male,أذْهبُ)   |                     |\n| you       |     @en(you go)     |    @de(du gehst)    |      @ru(ты ходишь)       | @ar(Male,تذْهبُ)   | @ar(Female,تذْهبين) |\n| he/she/it | @en(he/she/it goes) | @de(er/sie/es geht) | @ru(он / она / оно ходит) | @ar(Male,يذْهبُ)   | @ar(Female,تذْهبُ)   |\n| we        |     @en(we go)      |   @de(wir gehen)    |       @ru(мы ходим)       | @ar(Male,نذْهبُ)   |                     |\n| you       |     @en(you go)     |    @de(ihr geht)    |      @ru(вы ходите)       | @ar(Male,تذْهبون) | @ar(Female,تذْهبْن)  |\n| they      |    @en(they go)     |   @de(sie gehen)    |      @ru(они ходят)       | @ar(Male,يذْهبون) | @ar(Female,يذْهبْن)  |\n\n```\n\n                               --{{3}}--\nThe outcome is a table with playback buttons only, where the text is concealed, and the primary language will be translated while the other languages remain unchanged.\n\n\n                                 {{3}}\n| go        |         EN          |         DE          |            RU             |      AR male      |      AR female      |\n| --------- |:-------------------:|:-------------------:|:-------------------------:|:-----------------:|:-------------------:|\n| I         |      @en(I go)      |    @de(ich gehe)    |        @ru(я хожу)        | @ar(Male,أذْهبُ)  |                     |\n| you       |     @en(you go)     |    @de(du gehst)    |      @ru(ты ходишь)       | @ar(Male,تذْهبُ)  | @ar(Female,تذْهبين) |\n| he/she/it | @en(he/she/it goes) | @de(er/sie/es geht) | @ru(он / она / оно ходит) | @ar(Male,يذْهبُ)  | @ar(Female,تذْهبُ)  |\n| we        |     @en(we go)      |   @de(wir gehen)    |       @ru(мы ходим)       | @ar(Male,نذْهبُ)  |                     |\n| you       |     @en(you go)     |    @de(ihr geht)    |      @ru(вы ходите)       | @ar(Male,تذْهبون) | @ar(Female,تذْهبْن) |\n| they      |    @en(they go)     |   @de(sie gehen)    |      @ru(они ходят)       | @ar(Male,يذْهبون) | @ar(Female,يذْهبْن) |\n\n#### Animations to Playback\n\n                               --{{0}}--\nSince we are utilizing the double braces notation for playback elements, this can also be combined with animations by adding appearance and disappearance numbers.\nDepending on the current state of the animation, this will result in different sentences.\n\n\n\n```Markdown\n    {{1 |\u003e}}\nThis is an example where {|\u003e 1-2}{I go} _{|\u003e 2}{I am going}_ to work.\n```\n\n                               --{{1}}--\nYou need to keep in mind that this will function as intended only if the user is not in Textbook mode.\nOtherwise, all elements will be read out loud, and nothing will be hidden.\n\n    {{1 |\u003e}}\nThis is an example where {|\u003e 1-2}{I go} _{|\u003e 2}{I am going}_ to work.\n\n\n\n\n## Fun with Tables\n\n    --{{0}}--\nAs previously noted, tables serve not only as structural elements within a Markdown document but also as datasets.\nIn essence, there's minimal distinction between a diagram and a collection of values.\n\n\n      9 |                                       (* dots)\n        |\n      y |                              *\n      - |\n      a |                    *\n      x |\n      i |          *\n      s |\n        |*\n      0 +------------------------------------\n        0            x-axis                 36\n\n    --{{1}}--\nThe same values can be collected within a list.\nBy clicking on the small icon above this list, you will obtain the same plot as depicted previously.\n\n      {{1}}\n|   x | dots |\n| ---:| ----:|\n|   0 |    0 |\n|  10 |    2 |\n|  20 |    4 |\n|  30 |    6 |\n\n    --{{2}}--\nOne of the most significant challenges in science is the scarcity of primary data.\nInitiatives like the Open Science Framework (http://osf.io) aim to address this issue by providing a platform where scientists can store and document extensive datasets.\nHowever, rather than relying on external tools to create visualizations, why not directly incorporate and visualize the data?\nThis would enable others to utilize and examine the data more readily.\n\n    --{{3}}--\nEveryone who creates or utilizes data and incorporates it into Markdown is already engaging in some form of configuration.\nLeveraging the structural settings of tables or data, we can __automatically visualize data__.\nIt's rather surprising that Markdown tables have not been treated as datasets before.\nThe following sections aim to provide a brief overview of various visualization options and how the system determines which one to apply.\nAdditionally, you have the flexibility to enforce your preferred visualization style.\n\n\n### `LinePlot`\n\n    --{{0}}--\nThe following dataset, sourced from https://ourworldindata.org, illustrates government expenditure on education as a percentage of GDP.\nThe first column represents the x-values, while the subsequent columns denote different categories.\n\n    --{{1}}--\nIf you click on the image icon again, you'll encounter a more elaborate representation complete with a title and labels.\n\n\u003c!--\ndata-title=\"Government expenditure on education\"\ndata-xlabel=\"year\"\ndata-ylabel=\"% of GDP\"\n--\u003e\n| Year | Finland |     USA | Germany |   China |\n| ---- | -------:| -------:| -------:| -------:|\n| 1995 | 6.80942 |         | 4.42079 | 1.84192 |\n| 1996 | 6.86052 |         | 4.48319 | 1.85338 |\n| 1997 |         |         |         |         |\n| 1998 |         |         | 4.45345 | 1.84432 |\n| 1999 | 5.86960 |         |         | 1.88803 |\n| 2000 | 5.71687 |         |         |         |\n| 2001 | 5.84797 |         |         |         |\n| 2002 | 6.02477 |         |         |         |\n| 2003 | 6.17476 |         |         |         |\n| 2004 | 6.16849 |         |         |         |\n| 2005 | 6.03605 |         |         |         |\n| 2006 | 5.93809 |         | 4.27930 |         |\n| 2007 | 5.68608 |         | 4.34302 |         |\n| 2008 | 5.84676 |         | 4.40954 |         |\n| 2009 | 6.48517 |         | 4.88047 |         |\n| 2010 | 6.54070 | 5.42001 | 4.91368 |         |\n| 2011 | 6.48200 | 5.22389 | 4.80779 |         |\n| 2012 | 7.19254 | 5.19485 | 4.93331 |         |\n| 2013 | 7.15848 | 4.94378 | 4.93496 |         |\n| 2014 | 7.15155 | 4.98948 | 4.93112 |         |\n\nhttps://ourworldindata.org/financing-education#all-charts-preview\n\n\n    --{{2}}--\nThe rationale behind this functionality is that you can incorporate additional settings, similar to how different Markdown elements are styled, by simply attaching an HTML comment to the beginning of the table.\nThe type of representation is still automatically determined based on the table structure.\nHowever, you can still add attributes like `data-title`, `data-xlabel`, and `data-ylabel` to adjust the graphical representation. Refer to the section [Attributes](#attributes) for more detailed information.\n\n      {{2}}\n``` markdown\n\u003c!--\ndata-title=\"Government expenditure on education\"\ndata-xlabel=\"year\"\ndata-ylabel=\"% of GDP\"\n--\u003e\n| Year | Finland | USA | Germany |   China |\n| ---- | -------:| ---:| -------:| -------:|\n| 1995 | 6.80942 |     | 4.42079 | 1.84192 |\n| 1996 | 6.86052 |     | 4.48319 | 1.85338 |\n| ...  |     ... | ... |     ... |     ... |\n```\n\n    --{{3}}--\nCertainly, you can visualize any type of table that doesn't adhere to the classification of a line or ScatterPlot.\nLet's define another type of presentation, such as a bar chart.\nIf not all values within the first column can be parsed as numbers, they are interpreted as categories.\nAdditionally, if you change the order of the table, the order of categories in the visualization will also change accordingly.\n\n      {{3}}\n``` md\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n```\n\n      {{3}}\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n\n\n### `ScatterPlot`\n\n    --{{0}}--\nIf your table resembles that of a LinePlot, but the first column contains numbers that appear twice or more times, then this data cannot be interpreted as a \"function\" in a mathematical sense.\nIn this case, the data is simply visualized as a ScatterPlot, displaying only the dots without connecting lines.\n\n```\n| Random |    I |  II |\n| ------:| ----:| ---:|\n|    5.0 |  1.0 |   5 |\n|    ... |      |     |\n|    5.0 | 10.0 |   7 |\n|    ... |      |     |\n```\n\n| Random |    I |  II |\n| ------:| ----:| ---:|\n|    5.0 |  1.0 |   5 |\n|    6.0 |  1.0 |   4 |\n|    7.0 |  1.0 |   5 |\n|    8.0 |  1.0 |   5 |\n|    9.0 |  1.0 |   4 |\n|   10.0 |  1.0 |   5 |\n|    5.0 | 10.0 |   7 |\n|    6.0 | 10.0 |   8 |\n|    7.0 | 10.0 |   7 |\n|    8.0 | 10.0 |   7 |\n|    9.0 | 10.0 |   8 |\n|   10.0 | 10.0 |   7 |\n\n\n### `BoxPlot`\n\n    --{{0}}--\nIf you have a dataset presented in a ScatterPlot-like format but wish to utilize this data as primary data for a BoxPlot, you can manually change the type of visualization to a BoxPlot.\nThis can be achieved by adding the following attribute to the beginning of your table, as demonstrated in the snippet below.\nEach column is then treated as a dataset and visualized accordingly.\n\n``` Markdown\n\u003c!-- data-type=\"boxplot\" --\u003e\n| Random |    I |  II |\n| ------:| ----:| ---:|\n|    5.0 |  1.0 |   5 |\n|    ... |  ... |  .. |\n```\n\n\u003c!-- data-type=\"boxplot\" --\u003e\n| Random |    I |  II |\n| ------:| ----:| ---:|\n|    5.0 |  1.0 |   5 |\n|    6.0 |  1.0 |   4 |\n|    7.0 |  1.0 |   5 |\n|    8.0 |  1.0 |   5 |\n|    9.0 |  1.0 |   4 |\n|   10.0 |  1.0 |   5 |\n|    5.0 | 10.0 |   7 |\n|    6.0 | 10.0 |   8 |\n|    7.0 | 10.0 |   7 |\n|    8.0 | 10.0 |   7 |\n|    9.0 | 10.0 |   8 |\n|   10.0 | 10.0 |   7 |\n|        |      |   1 |\n\n### `BarChart`\n\n    --{{0}}--\nIn contrast to a Line or ScatterPlot, if the first column contains at least one entry that cannot be parsed as a number, it might be represented as a BarChart.\nThis concept works well with the following example.\nIf the maximum values of the columns do not differ too much, then the dataset is represented as a BarChart.\nHowever, if the maximum values vary significantly, you might end up seeing only one huge bar, making the other bars indistinguishable from each other.\nIn such cases, alternative visualizations are chosen.\n\n``` markdown\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n```\n\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |\n\n\n### `Radar`\n\n    --{{0}}--\nIf, for example, humans and sheep are removed from the dataset, then weight in kilograms would not be visible in a BarChart at all. In such a case, a RadarChart is selected.\nThis type of visualization allows for the analysis of data visually with different \"y\"-axes, accommodating for the diverse nature of the dataset.\n\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |             02 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n\n\n### `PieChart`\n\n    --{{0}}--\nIf you have a table with only one row filled with numbers, it will be automatically presented as a pie chart.\nIn this representation, the header represents the categories, while the body denotes the quantities associated with each category.\n\n\n| Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n| -------:| -------:| ------:| -------:| ---------:| -----:|\n|      50 |      50 |    100 |     200 |       350 |   250 |\n\n\n    --{{1}}--\nYou can utilize the first column to provide additional information about your data.\nIf the first element of the list body contains text that cannot be directly interpreted as a number, then these two text snippets are used to define the main title and the subtitle of your chart.\n\n      {{1}}\n| Music-Style 1994 | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n|:---------------- | -------:| -------:| ------:| -------:| ---------:| -----:|\n| Student rating   |      50 |      50 |    100 |     200 |       350 |   250 |\n\n\n#### `PieChart`(s)\n\n    --{{0}}--\nThe default behavior for the table below would be to represent it as a barchart.\nHowever, you can enforce the usage of pie charts simply by adding the attribute `piechart` into the HTML comment directly above the table:\n\n\n```markdown\n\u003c!-- data-type=\"PieChart\" --\u003e\n| Music-Style | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n|:----------- | -------:| -------:| ------:| -------:| ---------:| -----:|\n| 1994        |      50 |      50 |    100 |     200 |       350 |   250 |\n| ...         |     ... |     ... |    ... |     ... |       ... |   ... |\n```\n\n    --{{1}}--\nThis instruction overrides the default behavior and ensures that the data is visualized as a piechart.\nThe result looks as follows:\n\n      {{1}}\n\u003c!-- data-type=\"PieChart\" --\u003e\n| Music-Style | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n|:----------- | -------:| -------:| ------:| -------:| ---------:| -----:|\n| 1994        |      50 |      50 |    100 |     200 |       350 |   250 |\n| 2014        |      20 |      30 |    100 |     220 |       400 |   230 |\n| demo 2034   |       5 |      12 |     98 |     293 |       345 |    32 |\n\n##### Animating Charts\n\n    --{{0}}--\nSince data is parsed at runtime, you can also incorporate animations to dynamically change the values of the chart as you progress through your slides or navigate backward.\nHowever, it's important to consider that this approach may not be suitable for all audiences, especially those who prefer a more traditional textbook-style presentation.\n\n       {{1}}\n| Music-Style {1-2}{1994} {2}{2014} |           Classic |           Country | Reggae |             Hip-Hop |           Hard-Rock |               Samba |\n|:--------------------------------- | -----------------:| -----------------:| ------:| -------------------:| -------------------:| -------------------:|\n| Student rating                    | {1-2}{50} {2}{20} | {1-2}{50} {2}{30} |    100 | {1-2}{200} {2}{220} | {1-2}{350} {2}{400} | {1-2}{250} {2}{230} |\n\n##### Transposing Data\n\n    --{{0}}--\nIf the previous table was too long and you prefer to condense it into two columns and grow your data vertically, you can use the attribute `data-transpose`, which mirrors your data along an imaginary vertical axis.\nThis allows you to present your data in a more compact format.\n\n\n```markdown\n\u003c!-- data-transpose --\u003e\n| Music-Style {1-2}{1994} {2}{2014} |    Student rating |\n|:--------------------------------- | -----------------:|\n| Classic                           | {1-2}{50} {2}{20} |\n| Country                           | {1-2}{50} {2}{30} |\n| ...                               |               ... |\n```\n\n    --{{1}}--\nThe result remains the same as above, but organizing your data in this transposed format might make it easier to handle and interpret.\n\n      {{1}}\n\u003c!-- data-transpose --\u003e\n| Music-Style {1-2}{1994} {2}{2014} |      Student rating |\n|:--------------------------------- | -------------------:|\n| Classic                           |   {1-2}{50} {2}{20} |\n| Country                           |   {1-2}{50} {2}{30} |\n| Reggae                            |                 100 |\n| Hip-Hop                           | {1-2}{200} {2}{220} |\n| Hard-Rock                         | {1-2}{350} {2}{400} |\n| Samba                             | {1-2}{250} {2}{230} |\n\n### `Funnel`\n\n    --{{0}}--\nThe Funnel is a similar representation to the PieChart, but it is not selected automatically.\nIf you wish to use the funnel visualization, you'll need to set the `data-type` parameter to \"funnel\".\n\n``` markdown\n\u003c!-- data-type=\"funnel\" --\u003e\n| Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n| -------:| -------:| ------:| -------:| ---------:| -----:|\n|      50 |      50 |    100 |     200 |       350 |   250 |\n```\n\n\u003c!-- data-type=\"funnel\" --\u003e\n| Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n| -------:| -------:| ------:| -------:| ---------:| -----:|\n|      50 |      50 |    100 |     200 |       350 |   250 |\n\n     --{{1}}--\nThe process for using effects to generate animated diagrams remains the same as for pie charts.\n\n       {{1}}\n\u003c!-- data-type=\"funnel\" data-transpose --\u003e\n| Music-Style {1-2}{1994} {2}{2014} |      Student rating |\n|:--------------------------------- | -------------------:|\n| Classic                           |   {1-2}{50} {2}{20} |\n| Country                           |   {1-2}{50} {2}{30} |\n| Reggae                            |                 100 |\n| Hip-Hop                           | {1-2}{200} {2}{220} |\n| Hard-Rock                         | {1-2}{350} {2}{400} |\n| Samba                             | {1-2}{250} {2}{230} |\n\n\n### `Map`\n\n    --{{0}}--\nA map visualization is akin to a BarChart in terms of the table structure.\nHowever, if you intend to depict your data on an actual map, you'll need to include a GeoJSON file containing all relevant geographic information about the shapes of your countries, states, cities, etc.\nThe first column of your table must match the names of the objects in your GeoJSON data, which is attached to your table as follows:\n\n``` markdown\n\u003c!-- data-type=\"map\" data-src=\"https://code.highcharts.com/mapdata/custom/europe.geo.json\" --\u003e\n| Country                | percent |\n| ---------------------- | ------- |\n| Albania                | 73.5    |\n| Andorra                | 98.9    |\n```\n\n\n\u003c!-- style=\"height: 600px\" data-type=\"map\" data-src=\"https://code.highcharts.com/mapdata/custom/europe.geo.json\" --\u003e\n| Country                | percent |\n| ---------------------- | ------- |\n| Albania                | 73.5    |\n| Andorra                | 98.9    |\n| Armenia                | 72.4    |\n| Austria                | 87.9    |\n| Azerbaijan             | 79.8    |\n| Belarus                | 79.7    |\n| Belgium                | 93.9    |\n| Bosnia and Herzegovina | 80.8    |\n| Bulgaria               | 66.7    |\n| Croatia                | 91.5    |\n| Cyprus                 | 84.4    |\n| Czech Republic         | 87.7    |\n| Denmark                | 97.8    |\n| Estonia                | 97.9    |\n| Finland                | 94.0    |\n| France                 | 92.3    |\n| Georgia                | 68.1    |\n| Germany                | 96.0    |\n| Greece                 | 72.9    |\n| Hungary                | 89.0    |\n| Iceland                | 99.0    |\n| Ireland                | 91.9    |\n| Italy                  | 92.5    |\n| Latvia                 | 87.1    |\n| Liechtenstein          | 98.1    |\n| Lithuania              | 90.9    |\n| Luxembourg             | 97.8    |\n| Macedonia              | 79.2    |\n| Malta                  | 83.1    |\n| Moldova                | 76.1    |\n| Monaco                 | 97.5    |\n| Montenegro             | 71.5    |\n| Netherlands            | 95.6    |\n| Norway                 | 98.4    |\n| Poland                 | 78.2    |\n| Portugal               | 78.2    |\n| Republic of Serbia     | 73.4    |\n| Romania                | 73.8    |\n| Russia                 | 80.9    |\n| San Marino             | 60.2    |\n| Slovakia               | 84.9    |\n| Slovenia               | 79.9    |\n| Spain                  | 92.5    |\n| Sweden                 | 96.4    |\n| Switzerland            | 93.7    |\n| Turkey                 | 83.3    |\n| Ukraine                | 93.4    |\n| United Kingdom         | 94.9    |\n| Vatican City           | 60.1    |\n\n\u003e Currently, there is only support for visualizing one column, but this limitation will be addressed in future updates, allowing for more comprehensive visualizations of multi-column data.\n\n\n\n### `HeatMap`\n\n    --{{0}}--\nAnother type of visualization is a HeatMap, which is utilized when the table header and the first column exclusively contain numerical values, essentially representing coordinates.\nHowever, if you prefer to use categories instead of numerical coordinates, you can enforce the usage of a HeatMap by adding the following comment:\n\n``` markdown\n\u003c!--\ndata-type=\"heatmap\"\ndata-title=\"Seattle mean temperature in Fahrenheit\"\ndata-show\n--\u003e\n| Seattle |  Jan |  Feb |  Mar |  Apr |  May |  ... |\n| -------:| ----:| ----:| ----:| ----:| ----:| ----:|\n|       0 | 40.7 | 41.5 | 43.6 | 46.6 | 51.4 |  ... |\n|       2 |  ... |  ... |  ... |  ... |  ... |  ... |\n\n```\n\n    --{{1}}--\nThe attribute `data-show` simply displays the diagram by default, rather than using the table as the primary representation.\n\n      {{1}}\n\u003c!--\ndata-type=\"heatmap\"\ndata-title=\"Seattle mean temperature in Fahrenheit\"\ndata-show\n--\u003e\n| Seattle |  Jan |  Feb |  Mar |  Apr |  May |  Jun |  Jul |   Aug |  Sep |  Oct |  Nov |  Dec |\n| -------:| ----:| ----:| ----:| ----:| ----:| ----:| ----:| -----:| ----:| ----:| ----:| ----:|\n|       0 | 40.7 | 41.5 | 43.6 | 46.6 | 51.4 | 56.0 | 60.5 |  61.2 | 57.0 | 50.1 | 44.1 | 39.6 |\n|       2 | 40.2 | 40.7 | 42.7 | 45.3 | 50.0 | 54.4 | 58.5 |  59.2 | 55.4 | 49.2 | 43.5 | 39.3 |\n|       4 | 39.7 | 40.0 | 41.9 | 44.4 | 48.9 | 53.2 | 57.0 |  57.7 | 54.2 | 48.6 | 43.1 | 38.9 |\n|       6 | 39.6 | 39.5 | 41.3 | 44.2 | 49.5 | 54.2 | 57.8 |  57.4 | 53.6 | 48.2 | 42.8 | 38.7 |\n|       8 | 39.6 | 39.9 | 42.9 | 47.1 | 52.7 | 57.3 | 61.3 |  61.1 | 56.7 | 49.5 | 43.1 | 38.7 |\n|      10 | 41.3 | 42.7 | 46.4 | 50.7 | 56.4 | 60.9 | 65.2 |  65.4 | 60.9 | 52.8 | 45.5 | 40.4 |\n|      12 | 43.8 | 46.0 | 49.5 | 53.8 | 59.6 | 64.3 | 69.4 |  69.8 | 65.1 | 56.0 | 47.8 | 42.6 |\n|      14 | 45.1 | 47.7 | 51.3 | 55.9 | 61.9 | 66.9 | 72.6 |  73.2 | 67.7 | 57.8 | 48.8 | 43.6 |\n|      16 | 44.5 | 47.5 | 51.4 | 55.9 | 62.3 | 67.5 | 73.9 |  74.3 | 68.2 | 57.4 | 47.8 | 42.6 |\n|      18 | 42.6 | 44.7 | 48.7 | 53.8 | 60.3 | 65.9 | 72.3 |  72.2 | 64.6 | 53.9 | 46.0 | 41.2 |\n|      20 | 42.0 | 43.3 | 46.4 | 50.2 | 56.0 | 61.4 | 66.9 |  66.6 | 60.7 | 52.3 | 45.2 | 40.7 |\n|      22 | 41.4 | 42.5 | 45.0 | 48.3 | 53.5 | 58.2 | 63.2 |  63.5 | 58.7 | 51.1 | 44.5 | 40.1 |\n\n    {{1}}\nhttps://datavizpyr.com/heatmaps-with-seaborn-in-python/\n\n### `Parallel`\n\n    --{{0}}--\nA Parallel representation is employed when there are simply too many categories, making a BarChart impractical due to the resulting thin lines.\n\n\u003c!-- data-show --\u003e\n| Country                |    GDP growth (%) | Births per woman | Life expectancy at birth (years) | Population ages \u003e= 65 (%) | Pop. ages 15-64 (%) | Pop ages 0-14 (%) | Pop (total) |\n| ---------------------- | -----------------:| ----------------:| --------------------------------:| --------------------------:| -------------------:| -----------------:| -----------:|\n| Albania                |               7.5 |            1.858 |                 76.6337073170732 |            9.3330694913874 |    66.4522208535245 |  24.2147096550882 |     3143291 |\n| Andorra                |  3.57073718591123 |            1.260 |                              NaN |                        NaN |                 NaN |               NaN |     83810.5 |\n| Austria                |  2.17880778069679 |            1.414 |                 80.4475609756098 |           17.0078802490015 |    67.7942859199021 |  15.1978338310964 |     8336926 |\n| Belarus               | 11.29603925282670 |            1.420 |                 70.6328780487805 |           13.8161084682917 |    71.3440867491758 |  14.8398047825325 |     9680850 |\n| Belgium                |  1.00416891576425 |            1.820 |                 80.1095609756098 |           17.2425951179457 |    65.9073170003941 |  16.8500878816601 |    10708433 |\n| Bosnia and Herzegovina |  5.41999999999929 |            1.209 |                 75.1063170731708 |           13.7875788575916 |    70.5586044787057 |  15.6538166637027 |     3773100 |\n| Bulgaria               |  6.21712220063873 |            1.478 |                 73.3165853658537 |           17.3328904412356 |    69.2610054713067 |  13.4061040874577 |     7623395 |\n| Channel Islands        |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Croatia                |  2.35925308110710 |            1.470 |                 75.9121951219512 |           17.1754953634927 |    67.5174504975681 |  15.3070541389392 |     4434000 |\n| Czech Republic         |  2.46366103329814 |            1.497 |                 77.2112195121951 |           14.6644147081870 |    71.1889763214880 |  14.1466089703250 |    10424336 |\n| Denmark                | -0.86969912719333 |            1.892 |                 78.7004878048781 |           15.9364325701275 |    65.6692750948847 |  18.3942923349878 |     5493621 |\n| Estonia                | -5.12891873578752 |            1.661 |                 73.9731707317073 |           16.9573479430650 |    68.0747344729978 |  14.9679175839372 |     1340675 |\n| Faroe Islands          |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |       48511 |\n| Finland                |  0.92209645431238 |            1.846 |                 79.7919512195122 |           16.5283868561977 |    66.6427434111131 |  16.8288697326892 |     5313399 |\n| France                 |  0.21695181782435 |            1.998 |                 81.5204878048781 |           16.6134150592142 |    64.9880225189894 |  18.3985624217964 |    62277432 |\n| Germany                |  0.98801573506542 |            1.376 |                 80.0885365853659 |           19.9652972040776 |    66.3351760329956 |  13.6995267629268 |    82110097 |\n| Greece                 |  2.01498162894308 |            1.506 |                 79.9631707317073 |           18.1870521529388 |    67.5883962990861 |  14.2245515479751 |    11237094 |\n| Hungary                |  0.59999999999994 |            1.352 |                 74.0090243902439 |           16.0592099507043 |    68.9813743902960 |  14.9594156589996 |    10038188 |\n| Iceland                |  0.95512219949856 |            2.140 |                 81.5751219512195 |           11.6851788453979 |    67.3938402627208 |  20.9209808918813 |      317414 |\n| Ireland                | -3.03575424255612 |            2.100 |                 79.8568292682927 |           11.1093456408398 |    68.3358023622894 |  20.5548519968708 |     4425675 |\n| Isle of Man            |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Italy                  | -1.31844836660481 |            1.414 |                 81.9452097560976 |           20.0909973618083 |    65.7289363852644 |  14.1800662529273 |    59832179 |\n| Kosovo                 |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Latvia                 | -4.55213597961080 |            1.453 |                 72.2382926829268 |           17.1863911389844 |    69.0425815911418 |  13.7710272698738 |     2266094 |\n| Liechtenstein          |  1.79808929851180 |            1.400 |                 82.6341463414634 |                        NaN |                 NaN |               NaN |       35629 |\n| Lithuania              |  2.76144078921502 |            1.470 |                 71.8217073170732 |           15.9677094440150 |    68.7509466357882 |  15.2813439201968 |     3358115 |\n| Luxembourg             |  0.03220273485962 |            1.605 |                 80.5246341463415 |           14.0365040657173 |    67.9773784654310 |  17.9861174688517 |      488650 |\n| Macedonia              |  4.80000000000011 |            1.438 |                 74.2113170731707 |           11.5845850425847 |    69.9825898844976 |  18.4328250729177 |     2041342 |\n| Malta                  |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Moldova                |  7.76484641287229 |            1.495 |                 68.4371463414634 |           11.1369548727738 |    71.6754849214449 |  17.1875602057813 |     3633369 |\n| Monaco                 |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Republic of Montenegro |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Netherlands            |  1.99580842581707 |            1.775 |                 80.4007317073171 |           14.7235949405444 |    67.3305328508120 |  17.9458722086436 |    16445593 |\n| Norway                 |  1.81507058553292 |            1.960 |                 80.7414634146342 |           14.6455888097593 |    66.2064766744808 |  19.1479345157599 |     4768212 |\n| Poland                 |  5.00408460108383 |            1.390 |                 75.5331707317073 |           13.3256480555872 |    71.4634305149354 |  15.2109214294774 |    38125759 |\n| Portugal               | -0.03467455605676 |            1.374 |                 79.2497560975610 |           17.5012814880078 |    67.1365409199047 |  15.3621775920875 |    10622413 |\n| San Marino             |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |         NaN |\n| Serbia                 |  5.51795169957776 |            1.400 |                 73.6365853658537 |           14.5167655385706 |    67.6335858157006 |  17.8496486457288 |     7350221 |\n| Slovakia               |  6.17046824289093 |            1.320 |                 74.8107317073171 |           11.9677699353106 |    72.3868259638361 |  15.6454041008533 |     5406626 |\n| Slovenia               |  3.49251997044142 |            1.528 |                 78.9739024390244 |           16.0267556735963 |    70.1117152095851 |  13.8615291168186 |     2021316 |\n| Spain                  |  0.85776978982683 |            1.461 |                 81.0880487804878 |           16.9394050582152 |    68.3398363315641 |  14.7207586102207 |    45555716 |\n| Sweden                 | -0.40879886604371 |            1.910 |                 81.2371707317073 |           17.7223651519496 |    65.5617228818501 |  16.7159119662004 |     9219637 |\n| Switzerland            |  1.89715399119828 |            1.480 |                 82.1617073170732 |           16.6721873799941 |    67.8197089730996 |  15.5081036469063 |     7647675 |\n| Ukraine                |  2.09999999999999 |            1.390 |                 68.2514634146342 |           15.9037623084261 |    70.1546462864768 |  13.9415914050970 |    46258200 |\n| United Kingdom         |  0.54791121956627 |            1.940 |                 79.9033658536585 |           16.3019124620612 |    66.1561282590033 |  17.5419592789355 |    61406928 |\n| Montenegro             |  6.89999999999999 |            1.642 |                 74.0975365853659 |           12.8497239486590 |    67.5957824239814 |  19.5544936273596 |      622344 |\n| Isle of Man            |               NaN |              NaN |                              NaN |                        NaN |                 NaN |               NaN |       80543 |\n| Romania                |  9.42580218461200 |            1.350 |                 73.3734146341464 |           14.8579664297396 |    69.8993946432444 |  15.2426389270160 |    21513622 |\n\n\n### `Graph`\n\n    --{{0}}--\nIf the values in the first column and the header of the table are equal, then the interpreter attempts to interpret the content of the table as an adjacency matrix, which defines a graph.\nIf these values are symmetrical across the diagonal, then the matrix defines an __undirected graph__.\n\n\u003c!-- data-title=\"Undirected Graph\" --\u003e\n| Graph |  A  |  B  |  C  |  D  |  E  |\n|:----- |:---:|:---:|:---:|:---:|:---:|\n| A     |  0  |  1  |  0  |  1  |  0  |\n| B     |  1  |  0  |  0  |  1  |  0  |\n| C     |  0  |  0  |  0  |  0  |  0  |\n| D     |  1  |  1  |  0  |  0  |  1  |\n| E     |  0  |  0  |  0  |  1  |  0  |\n\n    --{{1}}--\nIn contrast to this, if those values differ, then the result is simply a __directed graph__, where the values define the strength of the connections between nodes.\n\n      {{1}}\n\u003c!-- data-title=\"Directed Graph\" --\u003e\n| Graph |  A  |  B  |  C  |  D  |  E  |\n|:----- |:---:|:---:|:---:|:---:|:---:|\n| A     |  0  | 12  |  0  |  1  |  0  |\n| B     | -22 |  0  |  0  | 0.4 |  0  |\n| C     |  0  |  0  |  0  |  0  |  0  |\n| D     |  2  | 12  |  0  |  0  |  1  |\n| E     |  0  |  0  |  0  |  2  |  0  |\n\n      {{1}}\n\u003e Unfortunately, self-referencing or multigraphs are currently not supported.\n\n\n#### `Sankey`\n\n    --{{0}}--\nA Sankey diagram is a special type of directed graph that is used to visualize the flow of something, such as energy, money, or other resources, typically represented as streams or flows between nodes.\n\n\u003c!-- data-type=\"sankey\" --\u003e\n| Sankey |  A  |  B  |  C  |  D  |  E  |\n|:------ |:---:|:---:|:---:|:---:|:---:|\n| A      |     |  2  |     |     |     |\n| B      |  3  |     |     |     |     |\n| C      |  1  |  1  |     |     |     |\n| D      |     |  1  |  1  |     |     |\n| E      |  2  |  1  |  1  |  1  |     |\n\nhttps://en.wikipedia.org/wiki/Sankey_diagram\n\n### `None`\n\n    --{{0}}--\nSimply set `data-type=\"none\"` to prevent any kind of visualization for the corresponding table.\n\n``` markdown\n\u003c!-- data-type=\"none\" --\u003e\n| Sankey |  A  |  B  |  C  |  D  |  E  |\n|:------ |:---:|:---:|:---:|:---:|:---:|\n| A      |     |  2  |     |     |     |\n| B      |  3  |     |     |     |     |\n...\n```\n\n\u003c!-- data-type=\"none\" --\u003e\n| Sankey |  A  |  B  |  C  |  D  |  E  |\n|:------ |:---:|:---:|:---:|:---:|:---:|\n| A      |     |  2  |     |     |     |\n| B      |  3  |     |     |     |     |\n| C      |  1  |  1  |     |     |     |\n| D      |     |  1  |  1  |     |     |\n| E      |  2  |  1  |  1  |  1  |     |\n\n\n### Attributes\n\n* __`data-type`__\n\n      --{{0}}--\n  You can use the attribute `data-type` to overwrite the automatically identified representation with your desired one.\n  The names can be taken from the presented list, and it is not relevant whether you use lower or upper case.\n  This approach also enables the use of types that cannot be automatically inferred at the moment, such as Sankey or BoxPlot.\n  If you do not want to show tables as diagrams, you can also use `none`, and only the table will be visible.\n\n  * `data-type=\"bar|barchart\"`\n  * `data-type=\"boxplot\"`\n  * `data-type=\"funnel\"`\n  * `data-type=\"graph\"`\n  * `data-type=\"heatmap\"`\n  * `data-type=\"line|lineplot\"`\n  * `data-type=\"map\"`\n  * __`data-type=\"none\"`__\n  * `data-type=\"parallel\"`\n  * `data-type=\"pie|piechart\"`\n  * `data-type=\"radar\"`\n  * `data-type=\"sankey\"`\n  * `data-type=\"scatter|scatterplot\"`\n\n  \u003e __Note:__ The `none` datasets will turn of the first fixed column.\n  \u003e For the other cases the table is treated as a dataset and the header and the first column will be fixed while scrolling.\n\n        {{1}}\n* __`data-show`__\n\n      --{{1}}--\n  Simply add this attribute or set it to true, if you want to visualize your data immediately, without the need to click on the switch button. However, users still retain the ability to switch to the table representation if desired.\n\n  `\u003c!-- data-show --\u003e` or `\u003c!-- data-show=\"true\" --\u003e`\n\n        {{2}}\n* __`data-transpose`__:\n\n      --{{2}}--\n  Similar to the mathematical sense, set this attribute or set it to true if you want to transpose rows and columns.\n  One benefit is that you can, for example, use a PieChart and let your table grow vertically instead of using a horizontal layout.\n\n  `\u003c!-- data-transpose --\u003e` or `\u003c!-- data-transpose=\"true\" --\u003e`\n\n        {{3}}\n* __`data-title`__:\n\n      --{{3}}--\n  By default, the first cell defines the title of your diagram.\n  However, if you prefer larger titles and want to avoid writing gigantic table headers, you can apply this attribute.\n\n  `\u003c!-- data-title=\"Use whatever title you want to ...\" --\u003e`\n\n        {{4}}\n* __`data-xlabel`__:\n\n      --{{4}}--\n  Similarly, as described above, you can also define the strings for the labels, in this case, for the label for the x-axis.\n\n  `\u003c!-- data-xlabel=\"Time in minutes\" --\u003e`\n\n        {{5}}\n* __`data-ylabel`__:\n\n      --{{5}}--\n  Or, in this case label for the y-axis.\n\n  `\u003c!-- data-ylabel=\"Distance in meters\" --\u003e`\n\n        {{6}}\n* __`data-xlim`__ \u0026 __`data-ylim`__:\n\n      --{{6}}--\n  The limits are automatically determined, but you can also overwrite them with the following command.\n\n  `\u003c!-- data-xlim=\"0,12.3\" --\u003e`\n\n      --{{6}}--\n  The first value is used as the minimum, the second as the maximum value.\n  If you skip a number, then the automatically determined value is used.\n\n  `\u003c!-- data-ylim=\",12\" --\u003e`\n\n        {{7}}\n* __`data-src`__:\n\n      --{{7}}--\n  Currently, this attribute is used to refer to your GeoJSON data if you use the map representation.\n  However, this functionality might change in the future to allow for the loading and visualization of data directly, such as CSV files.\n  See sections [Fun with Tables - Map](#map)\n\n  `\u003c!-- data-type=\"map\" data-src=\"https://...\" --\u003e`\n\n      --{{8}}--\n  Be careful when utilizing GeoJSON files from external websites, as this may result in CORS (Cross-Origin Resource Sharing) problems.\n  It's better to store these files in your own projects and refer to them directly to avoid such issues.\n\n        {{8}}\n  https://code.highcharts.com/mapdata/\n\n        {{9}}\n* __`data-sortable`__:\n\n  By default a table is sortable by each column.\n  This behavior can be turned off or on by using the `data-sortable` parameter.\n  Use it as a global parameter per table by placing it into the main comment or turn it on or of within every column.\n  The local column parameter will overwrite the global one.\n\n  ```markdown\n  \u003c!-- data-sortable=\"false\" --\u003e\n  | Header 1 | \u003c!-- data-sortable=\"true\" --\u003e Header 2 |\n  | :------- | :------------------------------------- |\n  | Item 1   | Item 2                                 |\n  | Item 5   | Item 6                                 |\n  | Item 9   | Item 10                                |\n  | Item 13  | Item 14                                |\n  ```\n\n        {{10}}\n* __`data-orientation`__:\n\n  Depending on the default setting for a diagram it is possible to switch between `vertical` and `horizontal` orientation.\n\n  ```markdown\n  \u003c!-- data-orientation=\"horizontal\" --\u003e\n  | Animal          | weight in kg | Lifespan years | Mitogen |\n  | --------------- | ------------:| --------------:| -------:|\n  | Mouse           |        0.028 |              2 |      95 |\n  | Flying squirrel |        0.085 |             15 |      50 |\n  | Brown bat       |        0.020 |             30 |      10 |\n  | Sheep           |           90 |             12 |      95 |\n  | Human           |           68 |             70 |      10 |\n  ```\n\n  \u003c!-- data-orientation=\"horizontal\" --\u003e\n  | Animal          | weight in kg | Lifespan years | Mitogen |\n  | --------------- | ------------:| --------------:| -------:|\n  | Mouse           |        0.028 |              2 |      95 |\n  | Flying squirrel |        0.085 |             15 |      50 |\n  | Brown bat       |        0.020 |             30 |      10 |\n  | Sheep           |           90 |             12 |      95 |\n  | Human           |           68 |             70 |      10 |\n\n### Custom Diagrams with ECharts\n\n    --{{0}}--\nLiaScript utilizes [ECharts](https://echarts.apache.org) for the diagrams and therefore uses a custom HTML tag or web component called `lia-chart`.\nYou can check out examples at the following site:\n\nhttps://echarts.apache.org/examples/en/index.html\n\n\n    --{{1}}--\nUsing this tag, you can pass your diagram configuration directly as an option in JSON format or as a simple dictionary, which will be evaluated automatically.\n\n\n      {{1}}\n``` html\n\u003clia-chart option=\"{\n  title: { text: 'Two Value-Axes in Polar' },\n  polar: { center: ['50%', '54%'] },\n  tooltip: { trigger: 'axis',\n    axisPointer: { type: 'cross' }\n  },\n  angleAxis: { type: 'value', startAngle: 0 },\n  radiusAxis: { min: 0 },\n  series: [{ coordinateSystem: 'polar',\n    name: 'line',\n    type: 'line',\n    showSymbol: false,\n    data: (function() {\n      const data = [];\n      for (let i = 0; i \u003c= 360; i++) {\n        let t = (i / 180) * Math.PI;\n        let r = Math.sin(2 * t) * Math.cos(2 * t);\n        data.push([r, i]);\n      }\n      return data\n    })()\n  }],\n  animationDuration: 2000\n}\"\u003e\u003c/lia-chart\u003e\n```\n\n    --{{2}}--\nThis approach allows you to rebuild nearly every example directly, providing flexibility and ease of customization.\n\n      {{2}}\n\u003clia-chart option=\"{\n  title: { text: 'Two Value-Axes in Polar' },\n  polar: { center: ['50%', '54%'] },\n  tooltip: { trigger: 'axis',\n    axisPointer: { type: 'cross' }\n  },\n  angleAxis: { type: 'value', startAngle: 0 },\n  radiusAxis: { min: 0 },\n  series: [{ coordinateSystem: 'polar',\n    name: 'line',\n    type: 'line',\n    showSymbol: false,\n    data: (function() {\n      const data = [];\n      for (let i = 0; i \u003c= 360; i++) {\n        let t = (i / 180) * Math.PI;\n        let r = Math.sin(2 * t) * Math.cos(2 * t);\n        data.push([r, i]);\n      }\n      return data\n    })()\n  }],\n  animationDuration: 2000\n}\"\u003e\u003c/lia-chart\u003e\n\n\n      {{3}}\n\u003csection\u003e\n\n    --{{3}}--\nIf you require the execution of JavaScript or need more interaction with the diagram, you can also apply `script` tags. For more information on this, refer to section [JavaScript or JS-Components](#JavaScript-or-JS-Components).\n\n\n$a =$ \u003cscript input=\"range\" step=\"1\" min=\"-1\" max=\"6\" value=\"2\"  output=\"a\"\u003e@input\u003c/script\u003e,\n$b =$ \u003cscript input=\"range\" step=\"0.1\" min=\"-10\" max=\"10\" value=\"0\"  output=\"b\"\u003e@input\u003c/script\u003e,\n$c =$ \u003cscript modify=\"false\" input=\"range\" step=\"0.1\" min=\"-10\" max=\"10\" value=\"0\"  output=\"c\"\u003e@input\u003c/script\u003e\n\n\u003cscript modify=\"false\" run-once style=\"display: inline-block; width: 100%\"\u003e\n\"LIASCRIPT: ### $$f(x) = x^{@input(`a`)} + x * @input(`b`) + @input(`c`)$$\"\n\u003c/script\u003e\n\n\u003cscript run-once style=\"display: inline-block; width: 100%\"\u003e\nfunction func(x) {\n    return Math.pow(x,  @input(`a`)) + @input(`b`) * x + @input(`c`);\n}\n\nfunction generateData() {\n    let data = [];\n    for (let i = -15; i \u003c= 15; i += 0.01) {\n        data.push([i, func(i)]);\n    }\n    return data;\n}\n\nlet option = {\n    animation: false,\n    grid: { top: 40, left: 50, right: 40, bottom: 50 },\n    xAxis: {\n        name: 'x',\n        minorTick: {\n            show: true\n        },\n        splitLine: {\n            lineStyle: {\n                color: '#999'\n            }\n        },\n        minorSplitLine: {\n            show: true,\n            lineStyle: {\n                color: '#ddd'\n            }\n        }\n    },\n    yAxis: {\n        name: 'y', min: -10, max: 10,\n        minorTick: {\n            show: true\n        },\n        splitLine: {\n            lineStyle: {\n                color: '#999'\n            }\n        },\n        minorSplitLine: {\n            show: true,\n            lineStyle: {\n                color: '#ddd'\n            }\n        }\n    },\n    dataZoom: [{\n        show: true,\n        type: 'inside',\n        filterMode: 'none',\n        xAxisIndex: [0],\n        startValue: -20,\n        endValue: 20\n    }, {\n        show: true,\n        type: 'inside',\n        filterMode: 'none',\n        yAxisIndex: [0],\n        startValue: -20,\n        endValue: 20\n    }],\n    series: [\n        {\n            type: 'line',\n            showSymbol: false,\n            clip: true,\n            data: generateData()\n        }\n    ]\n}\n\"HTML: \u003clia-chart option='\" + JSON.stringify(option) + \"'\u003e\u003c/lia-chart\u003e\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n## ASCII-Art\n\n    --{{0}}--\nBased on the [SvgBob project](https://github.com/ivanceras/svgbob) by Ivan Ceras, LiaScript also has support for basic ASCII art drawings.\n\n    --{{1}}--\nWe had to rebuild the library in Elm.\nThe project can be found here:\n\n      {{1}}\nhttps://github.com/andre-dietrich/elm-svgbob/\n\n    --{{2}}--\nIf you want to use it, simply create a new Markdown code block with at least 10 backticks, or use `ascii` as the language indicator.\n\n      {{2}}\n```` markdown\n``` ascii\n+------+   +-----+   +-----+   +-----+\n|      |   |     |   |     |   |     |\n| Foo  +--\u003e| Bar +---+ Baz |\u003c--+ Moo |\n|      |   |     |   |     |   |     |\n+------+   +-----+   +--+--+   +-----+\n              ^         |\n              |         V\n.-------------+-----------------------.\n| Hello here and there and everywhere |\n'-------------------------------------'\n```\n````\n\n    --{{3}}--\nThe result will be an SVG image that is scaled according to the full width of the available screen.\n\n      {{3}}\n``` ascii\n+------+   +-----+   +-----+   +-----+\n|      |   |     |   |     |   |     |\n| Foo  +--\u003e| Bar +---+ Baz |\u003c--+ Moo |\n|      |   |     |   |     |   |     |\n+------+   +-----+   +--+--+   +-----+\n              ^         |\n              |         V\n.-------------+-----------------------.\n| Hello here and there and everywhere |\n'-------------------------------------'\n```\n\n### How to Draw things ...\n\n    --{{0}}--\nRemember, all you require is a keyboard, so you can use basic characters to draw different shapes.\nUnicode is fully supported in LiaScript, which means you can use emojis within your drawings.\nAdditionally, you can embed LiaScript elements for integrating anything LiaScript related.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:53%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/PhN868ip5kXLNhTLC1\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/running-horse-run-cycle-PhN868ip5kXLNhTLC1\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n#### 1. Boxes\n\n    --{{0}}--\nDepending on the type of characters, you can define different kinds of boxes, triangles, or rectangular shapes. Supported characters for borders include:\n\n__borders:__\n\n* straight: `-`, `_`, `|`\n* rounded: `(`, `)`\n* diagonal: \\, /\n\n      {{1}}\n\u003csection\u003e\n\n    --{{1}}--\nAdditionally, it is possible to define different shapes for the corners. These range from normal, rounded corners to special ones that can be used to represent relations. These shapes are not limited to corners only:\n\n__corners:__\n\n* normal: `+`\n* rounded: all of them are actually treated equally, when creating the svg corner. Different representations do only affect the ASCII drawing.\n\n  `.`, `,`, `´`, `'`\n\n* special: filled dot `*`, filled square `#`, empty dot (`o`, `O`)\n\n\u003c/section\u003e\n\n    --{{2}}--\nHere are some examples for different shapes:\n\n      {{2}}\n```` md\n``` ascii\n+-----+      _____      +-----+      _____       _____\n|  0  |     |  1  |     |  2  |     |  3  |     |_ 4 _|\n+-----+     |_____|     |_____|     +-----+\n\n.-----.     ._____.     ,-----,     -------     '-----'\n|  5  |     |  6  |     |  7  |     |  8  |     |  9  |\n'-----'     ,_____,     |_____|     -------     '_____'\n\no------o    *------*    #------#    O------O    .-----+\n|  10  |    |  11  |    |  12  |    |  13  |    |  14 |\no------o    *------*    #------#    O------O    +-----'\n\n .----+     +----.      .-----.     /\\       .------.\n(  15 |     | 16  )    (  17   )   /18\\     /  19  /\n `----+     +----´      `-----´   /____\\   /______/\n```\n````\n\n    --{{3}}--\nAnd here is their representation as an ASCII art image:\n\n      {{3}}\n``` ascii\n+-----+      _____      +-----+      _____       _____\n|  0  |     |  1  |     |  2  |     |  3  |     |_ 4 _|\n+-----+     |_____|     |_____|     +-----+\n\n.-----.     ._____.     ,-----,     -------     '-----'\n|  5  |     |  6  |     |  7  |     |  8  |     |  9  |\n'-----'     ,_____,     |_____|     -------     '_____'\n\no------o    *------*    #------#    O------O    .-----+\n|  10  |    |  11  |    |  12  |    |  13  |    |  14 |\no------o    *------*    #------#    O------O    +-----'\n\n .----+     +----.      .-----.     /\\       .------.\n(  15 |     | 16  )    (  17   )   /18\\     /  19  /\n `----+     +----´      `-----´   /____\\   /______/\n```\n\n#### 2. Arrows \u0026 Connectors\n\n    --{{0}}--\nDepending on the direction of your arrow, you can use `\u003c` or `\u003e` for left and right, `v` or `V` for down, and `^` or `A` for up.\nThe other endings (`*`, `#`, `o`, `O`) are direction independent.\n\n\n```` md\n``` ascii\n----\u003e   ----\u003e\u003e   ----o   ----O   ----*   ----#\n\n\u003c---\u003e   \u003c\u003c--\u003e\u003e   o---o   O---O   *---*   #---#\n_______________________________________\n |     |     |     |     |     |     |\n v     V     #     o     O     *\n\n ^     A     #     o     O     *\n |     |     |     |     |     |     |\n-+-----+-----+-----+-----+-----+-----+-\n\n^     A     #        o     O     *\n \\     \\     \\      /     /     /\n  \\     \\     \\    /     /     /\n   v     V     #  o     O     *\n```\n````\n\n    --{{1}}--\nThe result looks quite nice indeed.\nThis approach enables you to draw some fancy images and to change them quite easily.\nSimilar to \"toki pona,\" sometimes a reduced set of features allows you to get directly to the point.\n\n      {{1}}\n``` ascii\n ----\u003e   ----\u003e\u003e   ----o   ----O   ----*   ----#\n\n \u003c---\u003e   \u003c\u003c--\u003e\u003e   o---o   O---O   *---*   #---#\n _______________________________________\n  |     |     |     |     |     |     |\n  v     V     #     o     O     *\n\n  ^     A     #     o     O     *\n  |     |     |     |     |     |     |\n -+-----+-----+-----+-----+-----+-----+-\n\n ^     A     #        o     O     *\n  \\     \\     \\      /     /     /\n   \\     \\     \\    /     /     /\n    v     V     #  o     O     *\n```\n\n    --{{2}}--\nYou can also use arrows to connect your other drawings, but keep in mind that in some cases, you will have to use the `+` sign to fully attach your lines to another edge.\n\n\n      {{2}}\n```` md\n``` ascii\n+-----+     +-----+     +-----+     +-----+\n|  0  |----\u003e|  1  |     |  2  +----\u003e|  3  |\n+-----+     +-----+     +-----+     +-----+\n\n+-----+     +-----+     +-----+     +-----+\n|     |     |     |     |     |     |     |\n|  4  *-----#  5  |-----+  6  o-----\u003e  7  |\n|     |     |     |     |     |     |     |\n+-----+     +-----+     +-----+     +-----+\n\n      +---#--o---*---\u003c---\u003e---O---.\n      |  .-\u003c\u003c---,      .---.      \\\n      A /      /      /     \\      \\\n      |/      (      V       o      #\n      *        \\    /         \\    /\n                `--+           `--*\n```\n````\n    --{{3}}--\nThe result looks as follows:\n\n      {{3}}\n``` ascii\n+-----+     +-----+     +-----+     +-----+\n|  0  |----\u003e|  1  |     |  2  +----\u003e|  3  |\n+-----+     +-----+     +-----+     +-----+\n\n+-----+     +-----+     +-----+     +-----+\n|     |     |     |     |     |     |     |\n|  4  *-----#  5  |-----+  6  o-----\u003e  7  |\n|     |     |     |     |     |     |     |\n+-----+     +-----+     +-----+     +-----+\n\n      +---#--o---*---\u003c---\u003e---O---.\n      |  .-\u003c\u003c---,      .---.      \\\n      A /      /      /     \\      \\\n      |/      (      V       o      #\n      *        \\    /         \\    /\n                `--+           `--*\n```\n\n#### 3. More Shapes\n\n    --{{0}}--\nHere are some more examples of rounded shapes that can be used in simple drawings:\n\n```` md\n``` ascii\n                                   /\\\n+-----+   .-----.    .-----.      /  \\\n|  1  |   |  2  |   (   3   )    /    \\\n+-----+   '-----'    '-----'    '------'\n\n  _______            ________      .-------.\n /       \\      /\\   \\       \\    /         \\\n/    5    \\    /  \\   )   7   )  (     8     )\n\\         /    \\  /  /_______/    \\         /\n \\_______/      \\/                 '-------'\n\n  +----------+\n /            \\\n+      9       +\n \\            /\n  +----------+\n\n   .-----------.       .  \u003c-.      .-\u003e  .\n  (     10      )     (  11  )    (  12  )\n   '-----+ ,---'       `-\u003e  '      `  \u003c-'\n         |/\n         '\n   _   __   .-.   .--.   .--.--.    .---.\n  (_) (__) ( X ) ( 16 ) ( 1( )7 )  ( 1 8 )\n            '-'   `--'   `--'--'    `---´\n\n.-----.  .----.   +----+  *----*\n \\   /    \\    \\   \\    \\  \\    \\\n  \\ /      \\    \\   \\    \\  \\    \\\n   '        '----'   +----+  O----O\n```\n````\n\n    --{{1}}--\nAs you can see, by using parentheses, different rounded shapes can be generated too.\n\n      {{1}}\n``` ascii\n                                   /\\\n+-----+   .-----.    .-----.      /  \\\n|  1  |   |  2  |   (   3   )    /    \\\n+-----+   '-----'    '-----'    '------'\n\n  _______            ________      .-------.\n /       \\      /\\   \\       \\    /         \\\n/    5    \\    /  \\   )   7   )  (     8     )\n\\         /    \\  /  /_______/    \\         /\n \\_______/      \\/                 '-------'\n\n  +----------+\n /            \\\n+      9       +\n \\            /\n  +----------+\n\n   .-----------.       .  \u003c-.      .-\u003e  .\n  (     10      )     (  11  )    (  12  )\n   '-----+ ,---'       `-\u003e  '      `  \u003c-'\n         |/\n         '\n   _   __   .-.   .--.   .--.--.    .---.\n  (_) (__) ( X ) ( 16 ) ( 1( )7 )  ( 1 8 )\n            '-'   `--'   `--'--'    `---´\n\n.-----.  .----.   +----+  *----*\n \\   /    \\    \\   \\    \\  \\    \\\n  \\ /      \\    \\   \\    \\  \\    \\\n   '        '----'   +----+  O----O\n```\n\n\n#### 4. Box Drawing\n\n    --{{0}}--\nThe Unicode standard defines a set of characters/symbols that were used in the past for drawing user interfaces and menus within the console.\nYou can use these symbols individually or in combination with the symbols and shapes mentioned above.\n\n\n```` md\n``` ascii\n╔════════════════════════════════════[×]═╗       ╭─────╮\n║ Fenstertitel                           ║       │     │     ╳\n╟──────────────────────────────────────┬─╢       ╵     ╷    ╱ ╲\n║ Fensterinhalt                        │▲║       ╰─────╯\n║                                      │░║\n║                                      │░║       ┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕\n║                                      │░║       │ ││  ║ ║║  ║ ║║  │ ││\n║                                      │░║       ├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡\n║                                      │█║       └─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛\n║                                      │░║\n║                                      │░║       ┌───────────────────┐\n║                                      │░║       │  ╔═══╗ Some Text  │▒\n║                                      │░║       │  ╚═╦═╝ in the box │▒\n║                                      │░║       ╞═╤══╩══╤═══════════╡▒\n║                                      │░║       │ ├──┬──┤           │▒\n║                                      │░║       │ └──┴──┘           │▒\n║                                      │▼║       └───────────────────┘▒\n╚══════════════════════════════════════╧═╝        ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n```\n````\n\n    --{{1}}--\nThese Unicode images can also be combined with the previous ASCII art examples, or you can use these box drawing elements to add shadows and more detail to your drawings.\n\n      {{1}}\n``` ascii\n╔════════════════════════════════════[×]═╗       ╭─────╮\n║ Fenstertitel                           ║       │     │     ╳\n╟──────────────────────────────────────┬─╢       ╵     ╷    ╱ ╲\n║ Fensterinhalt                        │▲║       ╰─────╯\n║                                      │░║\n║                                      │░║       ┌─┬┐  ╔═╦╗  ╓─╥╖  ╒═╤╕\n║                                      │░║       │ ││  ║ ║║  ║ ║║  │ ││\n║                                      │░║       ├─┼┤  ╠═╬╣  ╟─╫╢  ╞═╪╡\n║                                      │█║       └─┴┘  ╚═╩╝  ╙─╨╜  ╘═╧╛\n║                                      │░║\n║                                      │░║       ┌───────────────────┐\n║                                      │░║       │  ╔═══╗ Some Text  │▒\n║                                      │░║       │  ╚═╦═╝ in the box │▒\n║                                      │░║       ╞═╤══╩══╤═══════════╡▒\n║                                      │░║       │ ├──┬──┤           │▒\n║                                      │░║       │ └──┴──┘           │▒\n║                                      │▼║       └───────────────────┘▒\n╚══════════════════════════════════════╧═╝        ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n```\n\n    --{{2}}--\nThe following table contains a set of characters that can be used via copy and paste to draw various types of boxes:\n\n      {{2}}\n|        |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------ |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+250x |  ─  |  ━  |  │  |  ┃  |  ┄  |  ┅  |  ┆  |  ┇  |  ┈  |  ┉  |  ┊  |  ┋  |  ┌  |  ┍  |  ┎  |  ┏  |\n| U+251x |  ┐  |  ┑  |  ┒  |  ┓  |  └  |  ┕  |  ┖  |  ┗  |  ┘  |  ┙  |  ┚  |  ┛  |  ├  |  ┝  |  ┞  |  ┟  |\n| U+252x |  ┠  |  ┡  |  ┢  |  ┣  |  ┤  |  ┥  |  ┦  |  ┧  |  ┨  |  ┩  |  ┪  |  ┫  |  ┬  |  ┭  |  ┮  |  ┯  |\n| U+253x |  ┰  |  ┱  |  ┲  |  ┳  |  ┴  |  ┵  |  ┶  |  ┷  |  ┸  |  ┹  |  ┺  |  ┻  |  ┼  |  ┽  |  ┾  |  ┿  |\n| U+254x |  ╀  |  ╁  |  ╂  |  ╃  |  ╄  |  ╅  |  ╆  |  ╇  |  ╈  |  ╉  |  ╊  |  ╋  |  ╌  |  ╍  |  ╎  |  ╏  |\n| U+255x |  ═  |  ║  |  ╒  |  ╓  |  ╔  |  ╕  |  ╖  |  ╗  |  ╘  |  ╙  |  ╚  |  ╛  |  ╜  |  ╝  |  ╞  |  ╟  |\n| U+256x |  ╠  |  ╡  |  ╢  |  ╣  |  ╤  |  ╥  |  ╦  |  ╧  |  ╨  |  ╩  |  ╪  |  ╫  |  ╬  |  ╭  |  ╮  |  ╯  |\n| U+257x |  ╰  |  ╱  |  ╲  |  ╳  |  ╴  |  ╵  |  ╶  |  ╷  |  ╸  |  ╹  |  ╺  |  ╻  |  ╼  |  ╽  |  ╾  |  ╿  |\n\n\n    --{{3}}--\nIf you need shadows or different kinds of shadings, you can use some of the following elements:\n\n\n      {{3}}\n|        |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------ |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+258x |  ▀  |  ▁  |  ▂  |  ▃  |  ▄  |  ▅  |  ▆  |  ▇  |  █  |  ▉  |  ▊  |  ▋  |  ▌  |  ▍  |  ▎  |  ▏  |\n| U+259x |  ▐  |  ░  |  ▒  |  ▓  |  ▔  |  ▕  |  ▖  |  ▗  |  ▘  |  ▙  |  ▚  |  ▛  |  ▜  |  ▝  |  ▞  |  ▟  |\n\n\n#### 5. Emojis\n\n    --{{0}}--\nEmojis are defined in the Unicode standard as well, which is why you can use any kind of symbols that you use in your day-to-day chat messages.\n\n\n```` md\n``` ascii\n😎             👩\n\nBob            Alice\n|    hello      |\n+--------------\u003e|\n|               |\n|  Is it ok?    |\n|\u003c- - - - - - - |\nBob            Alice\n\n😎             👩\n```\n````\n\n---\n\n``` ascii\n😎             👩\n\nBob            Alice\n|    hello      |\n+--------------\u003e|\n|               |\n|  Is it ok?    |\n|\u003c- - - - - - - |\nBob            Alice\n\n😎             👩\n```\n\n\n\n    --{{1}}--\nYou can either install a plugin to your editor for emojis or you can search the net for emojis.\nCheck out the following links or see section [Unicode Symbols](#Unicode-Symbols) in the [Appendix](#Appendix).\n\n      {{1}}\n\u003csection\u003e\n\n* __Sites__\n\n  * Search emojis on: https://emojipedia.org\n  * Complete list on Unicode symbols: https://symbl.cc/en/unicode/table/\n\n* __Plugins__\n\n  * VSCode - Ultimate Emoji: https://marketplace.visualstudio.com/items?itemName=rohit-chouhan.ultimate-emoji\n  * Atom - autocomplete-emojis: https://liascript.github.io/blog/setting-up-atom/\n\n  * LiaScript-LiveEditor: start typing a colon \u003ckbd\u003e:\u003c/kbd\u003e to open the emoji search\n\n    https://LiaScript.github.io/LiveEditor\n\n* __OS Extensions__\n\n  * Ubuntu/Gnome - Emoji Selector: https://extensions.gnome.org/extension/1162/emoji-selector/\n  * Windows, use the keyword shortcut \u003ckbd\u003e⊞ Win\u003c/kbd\u003e + \u003ckbd\u003e.\u003c/kbd\u003e to open the emoji keyboard:\n\n    https://support.microsoft.com/en-us/windows/windows-keyboard-tips-and-tricks-588e0b72-0fff-6d3f-aeee-6e5116097942\n\n  * MacOS, use the shortcut \u003ckbd\u003eCommand\u003c/kbd\u003e + \u003ckbd\u003eControl\u003c/kbd\u003e + \u003ckbd\u003eSpacebar\u003c/kbd\u003e to open up the emoji picker:\n\n    https://support.apple.com/guide/mac-help/use-emoji-and-symbols-on-mac-mchlp1560/mac\n\u003c/section\u003e\n\n### Styling ASCII\n\n    --{{0}}--\nAs explained in section [Custom Styling](#custom-styling), it is also possible to add custom styles here by attaching an HTML comment to the beginning of an ASCII art image.\nThis enables you, for example, to center the image, define a maximum width, or change the color of some base SVG elements.\n\n```` md\n\u003c!--\nstyle=\"\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 315px;\n  fill: red;\n  stroke: green;\" --\u003e\n``` ascii\n                           .---\u003e  F\n  A       B     C   D     /\n  *-------*-----*---*----*-----\u003e  E\n           \\            ^ \\\n            v          /   '---\u003e  G\n             B --\u003e C -'\n```\n````\n\n---\n\n\u003c!--\nstyle=\"\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 315px;\n  fill: red;\n  stroke: green;\" --\u003e\n``` ascii\n                           .---\u003e  F\n  A       B     C   D     /\n  *-------*-----*---*----*-----\u003e  E\n           \\            ^ \\\n            v          /   '---\u003e  G\n             B --\u003e C -'\n```\n\n### Adding Titles\n\n\n    --{{0}}--\nAs shown in section [Code - Projects 💫](#Projects-💫), you can add a title after the language indicator.\nThis \"title\" can be a one-liner of Markdown-LiaScript and is displayed directly below the ASCII art image, similar to how it is done for images.\n\n```` markdown\n\u003c!--\nstyle=\"\n  display: block;\n  max-width: 450px;\" --\u003e\n``` ascii  Fig.: Working with branches in git checkout the __[git-Workflow](https://about.gitlab.com/topics/version-control/what-is-git-workflow/)__\n\nnew feature      .---#---.\n                 |       |\ndevelopment    .-o---o---o----o----o-.\n               |                     |\nmain   *---*-+-*---*---*-------------*----\n```\n````\n\n\u003c!--\nstyle=\"\n  display: block;\n  max-width: 450px;\" --\u003e\n``` ascii  Fig.: Working with branches in git checkout the __[git-Workflow](https://about.gitlab.com/topics/version-control/what-is-git-workflow/)__\n\nnew feature      .---#---.\n                 |       |\ndevelopment    .-o---o---o----o----o-.\n               |                     |\nmain   *---*-+-*---*---*-------------*----\n```\n\n### Embedding LiaScripts\n\n    --{{0}}--\nAnd of course, it is also possible to add LiaScript elements into your ASCII art drawing.\nThis is accomplished by using double quotes `\"`, which define something like a verbatim environment.\nThere are currently two different types of environments: simple one-liner and blocks.\n\n    --{{1}}--\nThe code example demonstrates three applications for such verbatim LiaScript elements.\nFirstly, you can integrate and style a simple one-liner, which is not possible for text otherwise.\nSecondly, you can add entire blocks with a subsequent number of quotations that start at the same horizontal x-position.\nLastly, this can also contain executable elements, animations, other inputs, and more.\n\n      {{1}}\n````` markdown\n```` ascii\n .---------------------------------------.          ╔════════════════════════════════════[×]═╗\n |     https://LiaScript.github.io       |          ║ (3) Interactive JavaScript Console     ║▒\n +---------------------------------------+          ╟──────────────────────────────────────┬─╢▒\n | (1) \"_ https://LiaScript.github.io _\" |          ║\"``` js                              \"│▲║▒\n '---------------------------------------'          ║\"console.log('hello world')          \"│░║▒\n                                                    ║\"```                                 \"│░║▒\n                    (2)                             ║\"\u003cscript\u003e@input\u003c/script\u003e             \"│░║▒\n\"* Verbatim blocks start with quotes at the \"       ║                                      │░║▒\n\"  same x position                          \"       ║                                      │█║▒\n\"* The quote with the maximum length defines \"      ║                                      │░║▒\n\"  the width of the block \"                         ║                                      │░║▒\n\"* The number of subsequent quotes gets ignored,\"   ║                                      │░║▒\n\"  LiaScript elements are placed above the      \"   ║                                      │▼║▒\n\"  SVG-image \"                                      ╚══════════════════════════════════════╧═╝▒\n                                                     ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n\n````\n`````\n\n    --{{2}}--\nAs visible in the generated image, the verbatim elements are not as precisely placed as the normal text.\nThis might require some adjustment of the positions of the quotations to achieve the desired result.\nYou can observe that the verbatim elements are overlaid as `foreignObjects` above the SVG images by executing the code example.\n\n      {{2}}\n```` ascii\n .---------------------------------------.          ╔════════════════════════════════════[×]═╗\n |     https://LiaScript.github.io       |          ║ (3) Interactive JavaScript Console     ║▒\n +---------------------------------------+          ╟──────────────────────────────────────┬─╢▒\n | (1) \"_ https://LiaScript.github.io _\" |          ║\"``` js                              \"│▲║▒\n '---------------------------------------'          ║\"console.log('hello world')          \"│░║▒\n                                                    ║\"```                                 \"│░║▒\n                    (2)                             ║\"\u003cscript\u003e@input\u003c/script\u003e             \"│░║▒\n\"* Verbatim blocks start with quotes at the \"       ║                                      │░║▒\n\"  same x position                          \"       ║                                      │█║▒\n\"* The quote with the maximum length defines \"      ║                                      │░║▒\n\"  the width of the block \"                         ║                                      │░║▒\n\"* The number of subsequent quotes gets ignored,\"   ║                                      │░║▒\n\"  LiaScript elements are placed above the      \"   ║                                      │▼║▒\n\"  SVG-image \"                                      ╚══════════════════════════════════════╧═╝▒\n                                                     ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n\n````\n\n#### 1. Animations\n\n    --{{0}}--\nSuch integration of LiaScript into ASCII art can shine when you want to use animations to highlight a certain point.\nFor example, in the following example, different usages of animations are demonstrated.\nThe first three are inline animations, where the number is bound to the text. The last example is a block animation where the number is hidden.\n\n\n```` markdown\n``` ascii\n\n 😀                                           😐\n  |             \"{1}{_How are you?_}\"         |\n  +------------------------------------------\u003e|\n  |           \"{2}{**Need to do math**}\"      |\n  |\u003c------------------------------------------+\n  |          \"{3}{How difficult can it be?}\"  |\n  +------------------------------------------\u003e|\n  | \"                {{4}}                  \" |\n  | \"$$                                     \" |\n  | \" x = \\sqrt[3]{ y                       \" |\n  | \"   + \\sqrt {y^2 + \\bigg( \\dfrac{c}{3a} \" |\n  | \"   - \\dfrac{b^2}{9a^2} \\bigg)^3}}      \" |\n  | \"$$                                     \" |\n  +\u003c------------------------------------------+\n  |                                           |\n```\n````\n\n---\n\n``` ascii\n\n 😀                                           😐\n  |             \"{1}{_How are you?_}\"         |\n  +------------------------------------------\u003e|\n  |           \"{2}{**Need to do math**}\"      |\n  |\u003c------------------------------------------+\n  |          \"{3}{How difficult can it be?}\"  |\n  +------------------------------------------\u003e|\n  | \"                {{4}}                  \" |\n  | \"$$                                     \" |\n  | \" x = \\sqrt[3]{ y                       \" |\n  | \"   + \\sqrt {y^2 + \\bigg( \\dfrac{c}{3a} \" |\n  | \"   - \\dfrac{b^2}{9a^2} \\bigg)^3}}      \" |\n  | \"$$                                     \" |\n  +\u003c------------------------------------------+\n  |                                           |\n```\n\n#### 2. Animations with TTS\n\n    --{{0}}--\nThe same animation can also be combined with text-to-speech output by using [comments](#Comments:-Text-2-Speech) or [hidden comments](#Hidden-comments) as shown in the example.\nHidden comments are simply comments that are not shown to the public as normal comments.\nThey are placed into an HTML comment, and different voices can be added too.\n\n\n```` markdown\n``` ascii\n\n 😀                                           😐\n  |             \"{1}{_How are you?_}\"         |\n  +------------------------------------------\u003e|\n  |           \"{2}{**Need to do math**}\"      |\n  |\u003c------------------------------------------+\n  .                 ...                       .\n```\n\n\u003c!-- --{{1}}-- How are you? --\u003e\n\u003c!-- --{{2 UK English Female}}-- Need to do some math.--\u003e\n\u003c!-- --{{3}}-- How difficult can it be?--\u003e\n\u003c!-- --{{4}}-- What the hell! --\u003e\n````\n\n``` ascii\n|             \"{1}{_How are you?_}\"         |\n+------------------------------------------\u003e|\n|           \"{2}{**Need to do math**}\"      |\n|\u003c------------------------------------------+\n|          \"{3}{How difficult can it be?}\"  |\n+------------------------------------------\u003e|\n| \"                {{4}}                  \" |\n| \"$$                                     \" |\n| \" x = \\sqrt[3]{ y                       \" |\n| \"   + \\sqrt {y^2 + \\bigg( \\dfrac{c}{3a} \" |\n| \"   - \\dfrac{b^2}{9a^2} \\bigg)^3}}      \" |\n| \"$$                                     \" |\n+\u003c------------------------------------------+\n|                                           |\n```\n\n\u003c!-- --{{1}}-- How are you? --\u003e\n\u003c!-- --{{2 UK English Female}}-- Need to do some math.--\u003e\n\u003c!-- --{{3}}-- How difficult can it be?--\u003e\n\u003c!-- --{{4}}-- What the hell! --\u003e\n\n#### 3. Quizzes\n\n    --{{0}}--\nOf course, you can use this in combination with quiz text inputs or selections.\nSince every quotation in this example is a separated Markdown block, we need to trick the interpreter from trying to embed a single line text quiz into a gap text element by adding a space before the input.\nTogether with the `data-show-partial-solution` command, this is an easy way of creating more complex quizzes.\n\n```` md\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n                        .----------------------.\n                       /                      /|\n             .--------+----------------------+ +---------.\n            /         |      \" [[  24   ]] \" |/         /|\n  .--------+----------+----------+-----------+---------+ +----------.\n /         |         11          |      \"[[   13   ]] \"|/          /|\n+----------+----------+----------+----------+----------+----------+ +\n|      \" [[   5   ]] \"|          6          |          7          |/\n+---------------------+---------------------+---------------------+\n```\n````\n\n    --{{1}}--\nIf you try out the following example, correct and incorrect inputs will be highlighted.\n\n      {{1}}\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n                        .----------------------.\n                       /                      /|\n             .--------+----------------------+ +---------.\n            /         |      \" [[  24   ]] \" |/         /|\n  .--------+----------+----------+-----------+---------+ +----------.\n /         |         11          |      \"[[   13   ]] \"|/          /|\n+----------+----------+----------+----------+----------+----------+ +\n|      \" [[   5   ]] \"|          6          |          7          |/\n+---------------------+---------------------+---------------------+\n```\n\n\n#### 4. Working with Macros\n\u003c!--\n@image: ![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Human_Eye_Transverse_Cut_Unlabeled.jpg/1024px-Human_Eye_Transverse_Cut_Unlabeled.jpg)\n--\u003e\n\n    --{{0}}--\nSince the size of a LiaScript element is defined based on the width of the quotation, too long LiaScript definitions, such as an external image URL, might cause some problems.\nTo solve this, you can define a local macro, in this case `@image`, which is basically only a substitution for the larger image.\nThis macro can then be used as a placeholder within the verbatim.\nFor more information on this topic, check out the section [Macros](#macros).\n\n\n```` markdown\n#### 4. Working with Macros\n\u003c!--\n@image: ![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Human_Eye_Transverse_Cut_Unlabeled.jpg/1024px-Human_Eye_Transverse_Cut_Unlabeled.jpg)\n--\u003e\n\nName the elements in the following image:\n\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n        \"                  @image                      \"\n\n\n\" [[ (lens) | optic disc ]] \"\n        *----------------------\u003e\n\n\n                                               \u003c------\"[[  sclera  ]] \"\n\n\n\n\n\n\" [[ (retina) | chorid ]] \"\n        *-----------\u003e\n\n\n\n\n                        \u003c----*\" [[   optic nerve   ]] \"\n```\n````\n\n    --{{1}}--\nThe result looks as follows, where the lower quotations are placed above the image.\nThe size of the image was defined by the space between the quotes and required some manual moving till it fits.\nCan you solve it?\n\n    {{1}}\n\u003csection\u003e\n\nName the elements in the following image:\n\n\u003c!-- data-show-partial-solution --\u003e\n``` ascii\n        \"                  @image                      \"\n\n\n\" [[ (lens) | optic disc ]] \"\n        *----------------------\u003e\n\n\n                                               \u003c------\"[[  sclera  ]] \"\n\n\n\n\n\n\" [[ (retina) | chorid ]] \"\n        *-----------\u003e\n\n\n\n\n                        \u003c----*\" [[   optic nerve   ]] \"\n```\n\u003c/section\u003e\n\n\n## Charts\n\n    --{{0}}--\nIn many cases, a diagram is only used to present some kind of signal paths, primitive functions, clusters, or point clouds.\nWhile you can still generate images for these tasks, why not apply some basic ASCII art to solve the most common tasks?\nUsing ASCII art can be a lightweight and versatile way to represent such simple structures, saving time and effort compared to creating and embedding images.\n\n\n                  Dunning-Krueger-Effect\n    100 |   *\n        |                                               *\n      C |    *                                     *\n      o |\n      n |  *  *                                 *\n      f |\n      i |      *\n      d |                                   *\n      e | *     *\n      n |\n      c |         *                  *\n      e |           *            *\n        |*               *\n      0 +-----------------------------------------------\n         0              Competence                   100\n\n\n### Line-Plot Basics\n\n    --{{0}}--\nAs with the previous ASCII art examples, LiaScript has a special notation for simple line plots.\nThese do not have to be surrounded by a code block; the LiaScript interpreter will detect them automatically based on their shape.\nHowever, it is recommended to add 4 spaces before such an image.\nThis has the effect that any other Markdown viewer will interpret this as a code block, preserving the spaces and tabs.\n\nMarkdown-format:\n\n```text\n                                      diagram title\n    1.5 |           *\n        |                                 (* stars)\n      y |        *      *\n      - |      *          *\n      a |     *             *       *\n      x |    *                 *\n      i |   *\n      s |  *\n        | *                              *        *\n      0 +------------------------------------------\n        2.0              x-axis                100\n```\n\n    --{{1}}--\nAs you can see from the rendered image below, you can add axis names and values, a diagram title, and a legend, which is originally surrounded by parenthesis.\nThe positions of points are automatically calculated based on the given length of the two axes.\n\n\n                  {{1}}\n                            diagram title\n    1.5 |           *                     (* stars)\n        |\n      y |        *      *\n      - |      *          *\n      a |     *             *       *\n      x |    *                 *\n      i |   *\n      s |  *\n        | *                              *        *\n      0 +------------------------------------------\n         2.0              x-axis                100\n\n\n                                --{{2}}--\nAll diagram titles, labels, and limits are optional. If you do not define limits, then the minimum and maximum values 0 and 1 are used by default.\n\n    {{2}}\n\u003csection\u003e\n\n```text\n     1 |                   *                       *\n       |               *       *               *       *\n       |*             *         *             *         *\ny-axis | *           *           *           *           *\n       |  *         *             *         *             *\n       |   *       *               *       *               *\n       |       *                       *                      *\n    -1 +--------------------------------------------------------\n```\n\n---\n\n         1 |                   *                       *\n           |               *       *               *       *\n           |*             *         *             *         *\n    y-axis | *           *           *           *           *\n           |  *         *             *         *             *\n           |   *       *               *       *               *\n           |       *                       *                      *\n        -1 +--------------------------------------------------------\n\n\u003c/section\u003e\n\n### Multi-Line-Plots\n\n                             --{{0}}--\nNext to stars, you can also use any kind of character to define another line, where the character defines the color.\nFor example, an `r` marks the color red, and an `A` represents the color amber.\n\nLiaScript-format:\n\n```markdown\n\n    | r          *                                    (* stars)\n    |    r                     A   A   A   A   A      (r imaginary course)\n    |       r *      *       A   A   A   A   A   A    (A big triangles)\n    |        * r       *\n    |       *      r      *       *\n    |      *            r    *\n    |     *                 r\n    |   *                          r\n    | *                              *    r    *\n    +-------------------------------------------\n```\n\n    --{{1}}--\nAs you can see in the result, the characters do not only contain color information.\nUpper and lowercase characters also define the size of the dots plotted, and even more than this, they define the shape.\nFor example, with `r` you can think of small round and red dots, while `A` looks like a large triangle.\nThat is why some lines are rather smoothly interpolated, and the `A`, for example, defines sharp lines.\nMore on this can be found in section [Shape](#shape).\n\n               {{1}}\n    | r          *                                    (* stars)\n    |    r                     A   A   A   A   A      (r imaginary course)\n    |       r *      *       A   A   A   A   A   A    (A big triangles)\n    |        * r       *\n    |       *      r      *       *\n    |      *            r    *\n    |     *                 r\n    |   *                          r\n    | *                              *    r    *\n    +-------------------------------------------\n\n\n### Dot-Plots\n\n                                 --{{0}}--\nIf there are more points with the same character for one x-value, then only dots are plotted.\nBy using upper and lower case characters, you can also define the size and the shape of the dots.\n\nLiaScript-format:\n\n```markdown\n    10 |        rrrrrrrrrrrr    x\n       |    rrrrrrrrrrrrrrrr\n       |  rrrrrrrrrrrrrrrrr  BBBBB\n       | rrrrrrrrrrrrrrrr  BBBBBBBB\n       |rrrrrrrrrrrrrrr  BBBBBBBBBBB\n       |rrrrrrrrrrrrr  BBBBBBBBBBBBB\n       |rrrrrrrrrrr  BBBBBBBBBBBBBBB\n       | rrrrrrrr  BBBBBBBBBBBBBBBB\n       |  rrrrr  BBBBBBBBBBBBBBBBB\n       |        BBBBBBBBBBBBBBBB\n       |   x    BBBBBBBBBBBBB\n       +-----------------------------\n         0                           2\n```\n\n\n    10 |        rrrrrrrrrrrr    x\n       |    rrrrrrrrrrrrrrrr\n       |  rrrrrrrrrrrrrrrrr  BBBBB\n       | rrrrrrrrrrrrrrrr  BBBBBBBB\n       |rrrrrrrrrrrrrrr  BBBBBBBBBBB\n       |rrrrrrrrrrrrr  BBBBBBBBBBBBB\n       |rrrrrrrrrrr  BBBBBBBBBBBBBBB\n       | rrrrrrrr  BBBBBBBBBBBBBBBB\n       |  rrrrr  BBBBBBBBBBBBBBBBB\n       |        BBBBBBBBBBBBBBBB\n       |   x    BBBBBBBBBBBBB\n       +-----------------------------\n         0                           2\n\n### Colors\n\n    --{{0}}--\nThe color codes are somehow defined by the character itself, as seen in the list.\nThe commonly used `x`, `+`, `*`, `#` stand for black, while `g` indicates green, and we had to use `e` for ebony (brown) since `b` has to be blue.\nWe hope the color codes mostly make sense.\n\n| char               | color        | hex        |                                 example                                 |\n| ------------------ | ------------ | ---------- |:-----------------------------------------------------------------------:|\n| `x`, `+`, `*`, `#` | black        | `#1000000` | \u003cdiv style=\"background-color:#000000; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `a`                | Amber        | `#FFBF00`  | \u003cdiv style=\"background-color:#FFBF00; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `b`                | Blue         | `#0000FF`  | \u003cdiv style=\"background-color:#0000FF; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `c`                | Cyan         | `#00FFFF`  | \u003cdiv style=\"background-color:#00FFFF; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `d`                | Dark red     | `#8B0000`  | \u003cdiv style=\"background-color:#8B0000; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `e`                | Ebony        | `#555D50`  | \u003cdiv style=\"background-color:#555D50; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `f`                | Forest green | `#014421`  | \u003cdiv style=\"background-color:#014421; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `g`                | Green        | `#008000`  | \u003cdiv style=\"background-color:#008000; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `h`                | Heliotrope   | `#DF73FF`  | \u003cdiv style=\"background-color:#DF73FF; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `i`                | Indigo       | `#4B0082`  | \u003cdiv style=\"background-color:#4B0082; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `j`                | Jade         | `#00A86B`  | \u003cdiv style=\"background-color:#00A86B; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `k`                | Kaki         | `#C3B091`  | \u003cdiv style=\"background-color:#C3B091; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `l`                | Lime         | `#00FF00`  | \u003cdiv style=\"background-color:#00FF00; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `m`                | Mint         | `#3EB489`  | \u003cdiv style=\"background-color:#3EB489; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `n`                | browN        | `#88540B`  | \u003cdiv style=\"background-color:#88540B; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `o`                | Orange       | `#FF7F00`  | \u003cdiv style=\"background-color:#FF7F00; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `p`                | Pink         | `#FFC0CB`  | \u003cdiv style=\"background-color:#FFC0CB; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `q`                | Queen blue   | `#436B95`  | \u003cdiv style=\"background-color:#436B95; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `r`                | Red          | `#FF0000`  | \u003cdiv style=\"background-color:#FF0000; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `s`                | Silver       | `#C0C0C0`  | \u003cdiv style=\"background-color:#C0C0C0; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `t`                | Teal         | `#008080`  | \u003cdiv style=\"background-color:#008080; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `u`                | Ultramarine  | `#3F00FF`  | \u003cdiv style=\"background-color:#3F00FF; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `v`                | Violet       | `#EE82EE`  | \u003cdiv style=\"background-color:#EE82EE; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `y`                | Yellow       | `#FFFF00`  | \u003cdiv style=\"background-color:#FFFF00; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `w`                | White        | `#FFFFFF`  | \u003cdiv style=\"background-color:#FFFFFF; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n| `z`                | Zomp         | `#39A78E`  | \u003cdiv style=\"background-color:#39A78E; width: 100%; height: 2rem\"\u003e\u003c/div\u003e |\n\n\n### Shapes\n\n    --{{0}}--\nThe shape of the dot is also defined by the character, as seen in the example below.\n`T` stands for triangle, as well as `A`, which also makes a triangular shape.\nFor the other characters, we had to make some decisions that hopefully make sense.\n\n```text\n6 | + * #           A a B b\n  | C c D d E e F f G g H h\n  | I i J j K k L l M m N n\n  | o O P p Q q R r S s T t\n  | U u V v W w X x Y y Z z\n1 +------------------------\n  0                      24\n```\n\n    6 | + * #           A a B b\n      | C c D d E e F f G g H h\n      | I i J j K k L l M m N n\n      | o O P p Q q R r S s T t\n      | U u V v W w X x Y y Z z\n    1 +------------------------\n       0                     24\n\n\n### Line types \u0026 Style\n\n    --{{0}}--\nAs depicted in the line diagrams below, in addition to different colors, lines and dots can have different shapes, whether they are dashed, dotted, smoothed or not.\nAnd as for all other previous elements, you can apply custom styles, classes and modifiers too, by putting them into an HTML comment at the top of the diagram.\n\n\n```text\n    \u003c!-- style=\"height: 700px\" --\u003e\n    |   A     A     A     B     B     B     C     C     C\n    |A  D  A  D  A  D  B  E  B  E  B  E  C  F  C  F  C  F\n    |D  G  D  G  D  G  E  H  E  H  E  H  F  I  F  I  F  I\n    |G  J  G  J  G  J  H  K  H  K  H  K  I  L  I  L  I  L\n    |J  M  J  M  J  M  K  N  K  N  K  N  L  O  L  O  L  O\n    |M  P  M  P  M  P  N  Q  N  Q  N  Q  O  R  O  R  O  R\n    |P  S  P  S  P  S  Q  T  Q  T  Q  T  R  U  R  U  R  U\n    |S  V  S  V  S  V  T  W  T  W  T  W  U  X  U  X  U  X\n    |V  Y  V  Y  V  Y  W  Z  W  Z  W  Z  X  #  X  *  X  *\n    |Y     Y     Y     Z     Z     Z     #     #     *\n    +----------------------------------------------------\n```\n\n    \u003c!-- style=\"height: 700px\" --\u003e\n    |   A     A     A     B     B     B     C     C     C\n    |A  D  A  D  A  D  B  E  B  E  B  E  C  F  C  F  C  F\n    |D  G  D  G  D  G  E  H  E  H  E  H  F  I  F  I  F  I\n    |G  J  G  J  G  J  H  K  H  K  H  K  I  L  I  L  I  L\n    |J  M  J  M  J  M  K  N  K  N  K  N  L  O  L  O  L  O\n    |M  P  M  P  M  P  N  Q  N  Q  N  Q  O  R  O  R  O  R\n    |P  S  P  S  P  S  Q  T  Q  T  Q  T  R  U  R  U  R  U\n    |S  V  S  V  S  V  T  W  T  W  T  W  U  X  U  X  U  X\n    |V  Y  V  Y  V  Y  W  Z  W  Z  W  Z  X  #  X  *  X  *\n    |Y     Y     Y     Z     Z     Z     #     #     *\n    +----------------------------------------------------\n\n\n      {{1}}\n\u003csection\u003e\n\n---\n\n    --{{1}}--\nAnd here is the same diagram, only for the lower case characters.\n\n\n```\n    \u003c!-- style=\"height: 700px\" --\u003e\n    |   a     a     a     b     b     b     c     c     c\n    |a  d  a  d  a  d  b  e  b  e  b  e  c  f  c  f  c  f\n    |d  g  d  g  d  g  e  h  e  h  e  h  f  i  f  i  f  i\n    |g  j  g  j  g  j  h  k  h  k  h  k  i  l  i  l  i  l\n    |j  m  j  m  j  m  k  n  k  n  k  n  l  o  l  o  l  o\n    |m  p  m  p  m  p  n  q  n  q  n  q  o  r  o  r  o  r\n    |p  s  p  s  p  s  q  t  q  t  q  t  r  u  r  u  r  u\n    |s  v  s  v  s  v  t  w  t  w  t  w  u  x  u  x  u  x\n    |v  y  v  y  v  y  w  z  w  z  w  z  x     x     X\n    |y     y     y     z     z     z\n    +----------------------------------------------------\n```\n\n    \u003c!-- style=\"height: 700px\" --\u003e\n    |   a     a     a     b     b     b     c     c     c\n    |a  d  a  d  a  d  b  e  b  e  b  e  c  f  c  f  c  f\n    |d  g  d  g  d  g  e  h  e  h  e  h  f  i  f  i  f  i\n    |g  j  g  j  g  j  h  k  h  k  h  k  i  l  i  l  i  l\n    |j  m  j  m  j  m  k  n  k  n  k  n  l  o  l  o  l  o\n    |m  p  m  p  m  p  n  q  n  q  n  q  o  r  o  r  o  r\n    |p  s  p  s  p  s  q  t  q  t  q  t  r  u  r  u  r  u\n    |s  v  s  v  s  v  t  w  t  w  t  w  u  x  u  x  u  x\n    |v  y  v  y  v  y  w  z  w  z  w  z  x     x     X\n    |y     y     y     z     z     z\n    +----------------------------------------------------\n\n\u003c/section\u003e\n\n## Interactive Code-Blocks\n\n                               --{{0}}--\nIn section [Code](#code), we had already introduced how code snippets can be defined in Markdown and LiaScript.\nIn this part, we will introduce how such code can be made executable and editable.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:56%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/zOvBKUUEERdNm\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/coding-zOvBKUUEERdNm\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n\n### Starting simple\n\n    --{{0}}--\nAny code snippet can be made interactive by attaching a script tag to the end. The idea is the same as for tasks, quizzes, and surveys.\nThe `@input` is simply a placeholder that gets replaced by the current user input.\n\n\u003c!--\ndata-marker=\"\n14 0 14 200 debug;\n14 8 14 14 rgba(55,255,100,0.5) text;\"\n--\u003e\n```` markdown\n``` javascript\nvar i=0;\nvar j=0;\nvar result = 0;\n\nfor(i = 0; i\u003c10; i++) {\n    for(j = 0; j\u003ci; j++) {\n        result += j;\n        console.log(\"(\", i, \",\", j, \") result\", result)\n    }\n}\n// the last statement defines the return statement\nresult;\n```\n\u003cscript\u003e@input\u003c/script\u003e\n````\n\n                               --{{1}}--\nIf the code is in JavaScript and provides a full and executable example, not only pseudo-code, then it can be directly executed.\nJust click on the run button directly below the editor.\nThe console output will be piped into the local shell that appears below the code snippet.\n\n                                 {{1}}\n``` javascript\nvar i=0;\nvar j=0;\nvar result = 0;\n\nfor(i = 0; i\u003c10; i++) {\n    for(j = 0; j\u003ci; j++) {\n        result += j;\n        console.log(\"(\", i, \",\", j, \") result\", result)\n    }\n}\n// the last statement defines the return statement\nresult;\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n                               --{{2}}--\nIt is possible to rerun the example, but you can also make changes, such as the number of loops.\nWhen you execute your modified example, a new version will be added to the end of the list.\nIt is possible to go back and forth between versions, and if a previous version gets modified, this will also append a new version.\n\n\n### Projects\n\n                --{{0}}--\nMultiple different code snippets can be combined to form larger projects too.\nIt requires writing them in sequence, without empty lines in between.\nYou can give them names by adding a second parameter after the highlighting definition.\nAdd a `+` or `-` to the front of your filename to indicate whether it should be visible by default or not.\n\n                --{{1}}--\nAs previously mentioned, the `@input` macro gets substituted by the input of the editor, but you can also pass a number to indicate which macro should be substituted by which code block (`@input(0)` is equivalent to `@input`).\n\n\u003c!--\ndata-marker=\"\n0 0 0 200 debug;\n0 11 0 33 log text;\n8 0 8 200 debug;\n8 11 8 33 log text;\n17 13 17 22 rgba(55,255,100,0.5) text;\n22 8 22 17 rgba(55,255,100,0.5) text;\"\n--\u003e\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, but just\n  // inserting the @input, which already contains JS code\n  // would be also fine ...\n  eval(`@input(0)`);\n\u003c/script\u003e\n````\n\n                               --{{2}}--\nThe result is a project consisting of two files.\nEach file can be edited separately, while the script tag provides only some basic glue code that tells LiaScript what to do with the input.\n\n                                 {{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  @input\n\u003c/script\u003e\n\n### Default `@output`\n\n    --{{0}}--\nThe idea of `@output` is similar to `@input`, and you can use this predefined marker only within the header of the last code block.\n\n\u003c!--\ndata-marker=\"\n15 0 17 200 debug;\n15 9 15 16 rgba(55,255,100,0.5) text\" --\u003e\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``` text @output\nIs Sammy Shark is really online?\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  @input\n\u003c/script\u003e\n````\n\n    --{{1}}--\nThis code block, marked with `@output`, defines the default output and will be shown directly after loading, even if it is not the result of the script evaluation.\n\n\n      {{1}}\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``` text @output\nIs Sammy Shark is really online?\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  @input\n\u003c/script\u003e\n\n    --{{2}}--\nThis is especially handy if you are using an external service for executing code, and your students are running your course offline at the moment.\nIt's also useful if you want to see this output on other Markdown viewers or on GitHub and refer to the result.\n\n\n### Loading external Resources\n\u003c!--\nscript:   https://cdn.rawgit.com/davidedc/Algebrite/master/dist/algebrite.bundle-for-browser.js\n--\u003e\n\n                               --{{0}}--\nIf you want to make use of some external functionality, you can also load additional JavaScript modules into LiaScript.\nSimply add the `script` command to the main definition of your LiaScript header. For more information on this, take a look at section [`script`](#script) in the [Macros](#macros) chapter.\n\n\u003c!--\ndata-marker=\"\n3 0 3 200 debug;\n3 8 3 93 rgba(55,255,100,0.5) text;\"\n--\u003e\n``` markdown\n\u003c!--\nauthor: ...\n\nscript: https://cdn.rawgit.com/davidedc/Algebrite/master/dist/algebrite.bundle-for-browser.js\n--\u003e\n\n# Title\n\n...\n```\n\n                               --{{1}}--\nIf this library has been loaded, it can be used also directly within the script-tag.\nIn this case we made use of the Computer-Algebra-System ([Algebrite](http://algebrite.org)), which is used to solve some algebraic equations.\n\n                                 {{1}}\n\u003c!--\ndata-marker=\"\n7 0 7 200 debug;\n7 9 7 22 rgba(55,255,100,0.5) text;\"\n--\u003e\n```` markdown\n``` matlab\nf=sin(t)^4-2*cos(t/2)^3*sin(t)\n\nf=circexp(f)\n\ndefint(f,t,0,2*pi)\n```\n\u003cscript\u003e Algebrite.run(`@input`) \u003c/script\u003e\n````\n\n                               --{{2}}--\nThe result is a fully functional computer algebra editor where you can experiment and modify equations.\n\n\n                                 {{2}}\n```matlab\nf=sin(t)^4-2*cos(t/2)^3*sin(t)\n\nf=circexp(f)\n\ndefint(f,t,0,2*pi)\n```\n\u003cscript\u003e Algebrite.run(`@input`) \u003c/script\u003e\n\n\n### Code API\n\n                               --{{0}}--\nThe easiest way to execute some code, is simply to add a script-tag to the end of your code-block.\nBut, sometimes an execution takes longer or requires to execute some asynchronous code.\nFor this purpose, LiaScript offers a simple API and event system that will be explained in more detail.\nFor simplicity all of the following examples will only contain JavaScript code that gets interpreted just by executing `@input`.\n\n#### `send` - Object\n\n                               --{{0}}--\nTo every executed piece of code a `send` object is associated, which handles all required communication with that specific code-block or project and the outer world.\nThus, every `send` module does only exists in this particular scope and it offers different methods for different problems.\n\n- __`send.log`__ : output logging information\n- __`send.lia`__ : send messages and control commands\n- __`send.handle`__ : handler terminal inputs\n- __`send.register`__ : register to a global event\n- __`send.dispatch`__ : dispatch a global event\n\n                               --{{1}}--\nTo start with, there is a `log` method, which can be used to send different types of outputs directly to the console.\n\n                                 {{1}}\n``` js\n/* send.log(type, sep, content)\n*\n* params:\n*  - type: one of the follow strings \"debug\", \"info\", \"warn\", \"error\", \"html\", \"stream\"\n*  - sep: a string like separator, mostly for newlines \"\\n\"...\n*  - content : represents a list of list\n*/\n\nsend.log(\"debug\", \"\", [\"This is a debug information\"])\nsend.log(\"warn\", \"\", [\"This is a warning\", 12, [1,2,3]])\n\"fin\"\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n                               --{{2}}--\nBut we provide shortcuts for this, via the internal `console`, which does actually the same.\nNevertheless, `send.log` gives you a little more power when you start to create your own LiaScript libraries and you have to handle multiple outputs.\nAnd as you can see, you can also pass HTML content directly.\n\n\n                                 {{2}}\n``` js\nconsole.debug(\"these are short hands for send.log('debug' ... \")\nconsole.warn(\"warn\")\nconsole.log(\"info\")\nconsole.error(\"and red for errors\")\n\nconsole.html(\"\u003cb\u003eSome more fancy stuff:\u003c/b\u003e \u003cimg width='40px' src='https://www.math.uni-bielefeld.de/~jsauter/Octahedron.gif'/\u003e\")\n\n\"fin\"\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n#### Return types\n\n    --{{0}}--\nAs you may have noticed, the last statement of an executed code block also defines the `return` statement.\nThe output is always interpreted as a string and handled in this way.\n\n``` js\n33*33\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n    --{{1}}--\nHowever, there are some results that are treated differently. These are strings that start with `\"LIA: \"`.\nFor example, the string `\"LIA: stop\"` is used to tell the system to simply stop the execution; there will be no further output.\nIn this case, you can use `console.log` to print the result to the terminal.\n\n      {{1}}\n``` js\n33*33\n\n\"LIA: stop\" // if you remove this string the result of the\n            // calculation will be visible in the shell\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n    --{{2}}--\nIf you want to directly send control messages at various stages of the script, you can use `send.lia`, which will also directly output the result in the console.\n\n    --{{3}}--\nIf the execution of your code may take longer, includes some asynchronous calls, or you need to call an external service, you can indicate this by finishing with the statement `\"LIA: wait\"`.\nThis will show arrows that loop forever or until they receive a `\"LIA: stop\"` signal.\n\n      {{3}}\n``` js\nsetTimeout(function(){\n  console.warn(\"end of execution\")\n\n  send.lia(\"some other output\")\n\n  send.lia(\"LIA: stop\") // this stops the execution\n}, 3000)\n\n\n\"LIA: wait\" // wait until you you send a stop\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n    --{{4}}--\nYou might wonder why there is a need for `send.lia` if you could also pipe output to the console using `send.log` or the shorthand `console.log`.\nAs described in the section about error handling, `send.lia` gives you more control not only over the shell but also over the editor.\nSee section [Error Handling](#Error-Handling) for more details.\n\n    --{{5}}--\nThe code example below demonstrates how the terminal can be enabled.\nFollowing the previous logic, we only have to define `\"LIA: terminal\"` as the last statement in order to activate the terminal mode.\nThis mode will remain active until the user clicks on the stop button (formerly known as the execute button), or a `\"LIA: stop\"` signal is sent from the script, or the browser is refreshed.\n\n    --{{5}}--\nTo handle the `input` and the `stop` events from the terminal in the JavaScript world, we have to define handlers, as shown in the code below.\nSimply add a function that evaluates or sends your terminal inputs to a foreign server or a websocket, or whatever you want.\nUse the stop handler to close a connection or perform other actions if the user clicks on the stop button.\n\n     {{5}}\n``` js\nsend.handle(\"input\", input =\u003e {\n  try{\n    console.log(eval(input))\n  } catch (e) {\n    console.error(e.message);\n  }\n})\n\nsend.handle(\"stop\", e =\u003e { alert(\"execution stopped\") })\n\nfunction close(){\n  send.lia(\"LIA: stop\")\n}\n\n\"LIA: terminal\" // execute the code and\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n    --{{6}}--\nA little side note: there is also a function called `console.clear` that clears the console, but it is not triggered by `send.log`.\nInstead, this is a shortcut for `send.lia(\"LIA: clear\")`.\nThese were all the `\"LIA: ...\"` commands.\nIn the next section, you will learn how to use the custom-built event system to accomplish even more tasks.\n\n      {{6}}\n* `LIA: clear` -\u003e clear the terminal\n* `LIA: terminal` -\u003e start the terminal (awaits stop-event)\n* `LIA: stop` -\u003e manual stop event\n* `LIA: wait` -\u003e waiting for an asynchronous code execution to finish\n\n#### Ping Pong: `register` \u0026 `dispatch`\n\n    --{{0}}--\nAll previous functions were executed only within the scope of a single code block, but sometimes it is necessary to connect with other external events.\nFor this purpose, the `send` object also contains two further generic functions: `register` and `dispatch`.\nSimply use a unique identifier to name an event, followed by a callback function that does whatever you want.\nBoth callbacks are defined in local scope, but by using `register` and `dispatch`, you can send messages to any code block.\nThe example below demonstrates how messages are successfully delivered, even if both code blocks are defined on different slides:\n\n\n``` js\nsend.register(\"ping\", function(e){\n  console.warn(\"ping\", e)\n})\n\nsend.handle(\"input\", input =\u003e {\n  send.dispatch(\"pong\", input)\n})\n\n\"LIA: terminal\" // execute the code and\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n\n``` js\nsend.register(\"pong\", function(e){\n  console.warn(\"pong\", e)\n})\n\nsend.handle(\"input\", input =\u003e {\n  send.dispatch(\"ping\", input)\n})\n\n\"LIA: terminal\" // execute the code and\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\n    --{{1}}--\nAdding script tags to the end of every code block can indeed be tedious and cumbersome, resulting in unnecessary copy and paste in your Markdown.\nTo alleviate this, LiaScript offers the possibility to define custom macros.\nEven more conveniently, you can directly import macros from other courses.\nThe [Macros](#macros) section describes this issue in more detail.\nThis feature enables you to streamline your code and make your Markdown files more concise and manageable.\n\n\n#### Error Handling\n\n    --{{0}}--\nAs mentioned earlier, `send.lia` can do more than just passing messages to the terminal output.\nThe editor currently used by LiaScript is [Ace](https://ace.c9.io), which allows marking lines with warnings and errors.\nSince there is no name associated with a file (like with the `@input(0)` macro), you have to use a list of lists containing all the necessary information that you want to pass to the editor.\nEach list element is associated with a code block, starting from top to bottom.\nThis method allows you to provide line-specific warnings or errors, enhancing the interactivity and functionality of your code blocks within LiaScript.\n\n\n``` js\nsend.lia( \"ups, something went wrong\",\n  [[{ row : 1,\n      column : 1,\n      text : \"insert your error info here\",\n      type : \"error\"\n    },\n    {\n      row : 2,\n      column : 1,\n      text : \"some general warnings about this line\",\n      type : \"warning\"\n    }\n  ]],\n  false); // use true if the output should appear in \"info\" mode\n\n\"LIA: stop\";\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n    --{{1}}--\nIf this seems too complicated, you can also throw an error by using `LiaError`.\nThe second parameter is used to define the number of code blocks you are using.\nThen, all you need to do is provide detailed information, similar to the previous example, to specify the line numbers and error messages.\nThis simplifies the process of adding errors to your code blocks in LiaScript.\n\n      {{1}}\n``` js\n// create a new error with an error message that is\n// connected to only one code-block, if you have more,\n// increase the number ...\nvar error = new LiaError(\"ups something went wrong\", 1);\n\nerror.add_detail(0, // \u003c- associated code-block\n  \"insert your error info here\",\n  \"error\", 1, 1);\n\nerror.add_detail(0, // \u003c- associated code-block\n  \"some general warnings about this line\",\n  \"warning\", 2, 1);\n\n\nthrow(error);\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n### Example: CPP in JavaScript\n\n    --{{0}}--\nTeaching other language-basics is also possible, for this example we applied [JSCPP](https://github.com/felixhao28/JSCPP)\nto run simple C++ programs:\n\n```cpp\n#include \u003ciostream\u003e\nusing namespace std;\n\nint main() {\n    int a = 120;\n    int rslt = 0;\n    for(int i=1; i\u003ca; ++i) {\n        rslt += i;\n        cout \u003c\u003c \"rslt: \" \u003c\u003c rslt \u003c\u003c endl;\n    }\n    cout \u003c\u003c \"final result = \" \u003c\u003c rslt \u003c\u003c endl;\n    return 0;\n}\n```\n\u003cscript\u003e\n  var output = \"\";\n  JSCPP.run(`@input`, \"\", {stdio: {write: s =\u003e { output += s }}});\n  output;\n\u003c/script\u003e\n\n\n### Styling\n\n    --{{0}}--\nAs for all previous elements, it is also possible to apply some basic styling attributes to the editor.\nBy default, code snippets that are not executable will not show line numbers, allowing them to be used for pseudo-code.\nHowever, executable blocks will show line numbers, indicating that they can be edited.\nYou can apply the following attributes to make these definitions explicit.\nWe have tried to use the common ACE notation for these attributes.\nThese attributes need to be applied per code block, as demonstrated in the example below:\n\n\n````` markdown\n\u003c!-- data-showGutter=\"false\" --\u003e\n```cpp\n// some C++ code without line numbers\n...\n```\n\u003c!-- data-readOnly=\"true\" --\u003e\n```hpp\n// some header-file with lineNumbers,\n// that cannot be edited\n```\n\u003cscript\u003e\n...// your execution code\n\u003c/script\u003e\n`````\n\n\n      {{1}}\n```` markdown\n\u003c!-- data-marker=\"\n0 0 0 100 error screenline;\n2 0 4 200 log;\n6 12 6 33 rgba(55,255,100,0.5) text\"\ndata-showGutter=\"true\"\ndata-theme=\"chaos\"\ndata-readOnly=\"false\" --\u003e\n```\nthis will be red\n\nthis is blue ...\nuntil the next\nline\n\nand this is rgba(55,255,100,0.5)\n```\n````\n\n      {{1}}\n\u003c!-- data-marker=\"\n0 0 0 100 error screenline;\n2 0 4 200 log;\n6 12 6 33 rgba(55,255,100,0.5) text\"\ndata-showGutter=\"true\"\ndata-theme=\"chaos\"\ndata-readOnly=\"false\" --\u003e\n```\nthis will be red\n\nthis is blue ...\nuntil the next\nline\n\nand this is rgba(55,255,100,0.5)\n```\n\n\n\n    {{1}}\n__Attributes:__\n\n        {{1}}\n* __`data-firstLineNumber`__\n\n      --{{1}}--\n  Change the initial line number to any number you prefer.\n\n  default: `data-firstLineNumber=\"0\"`\n\n        {{2}}\n* __`data-fontSize`__\n\n      --{{2}}--\n  Change the default font-size, which has to be defined with `pt`.\n\n  default: `data-fontSize=\"12pt\"`\n\n        {{3}}\n* __`data-readOnly`__\n\n      --{{3}}--\n  Whether it is an executable snippet or not, there are different default values, you can either set only `data-readOnly` to make it read-only or pass it a boolean value.\n\n  `data-readOnly=\"false\"`\n\n        {{4}}\n* __`data-showGutter`__\n\n      --{{4}}--\n  Similar to read-only.\n\n        {{5}}\n* __`data-tabSize`__\n\n      --{{5}}--\n  This takes an integer to represent the default tab-size replacement.\n\n  default: `data-tabSize=\"2\"`\n\n        {{6}}\n* __`data-theme`__\n\n      --{{6}}--\n  Your default theme as in your settings is applied, but you can change this to any of the ace-themes:\n\n  e.g.: `Chaos`, `Eclipse`, `Soliarized Light`, ...\n\n       {{7}}\n* __`data-marker`__\n\n       --{{7}}--\n  Use this to highlight aspects of your code, you have to apply\n  the following pattern.\n\n  `data-marker=\"y1 x1 y2 x2 color type;\"`\n\n      --{{8}}--\n  You start with a row and column and end with a row and a column.\n  Then you can apply one of the predefined colors:\n\n        {{8}}\n  `error`, `log`, `warn`, `debug` or `info`\n\n      --{{8}}--\n  you can set your own color with the CSS `rgba` function,\n  __but do not use spaces in this function__!\n\n      --{{9}}--\n  The type is optional, but you can choose between one of the following types.\n  If you want more than one marker, then simply separate different marker definitions with a colon.\n\n        {{9}}\n  ace-marker types: `text`, (default `fullLine`), `screenLine`\n\n\n\n\n\n### More Examples\n\n    --{{0}}--\nCheckout the following collection on LiaScript templates.\nMost of them provide a functionality that is implemented on the basis of editable code-snippets and macros.\n\nhttps://github.com/topics/liascript-template\n\n\n\n\n## Macros\n\n    --{{0}}--\nMacros in LiaScript serve as a means to streamline repetitive or complex tasks by defining text substitutions that can be parameterized.\nAnything starting with an `@` symbol can be replaced with a corresponding definition specified in the main header or sub-header of your LiaScript document.\nCommonly used macros such as `author`, `logo`, or `comment` provide basic functionality, but there are more possibilities to explore.\n\n``` markdown\n\u003c!--\nauthor: someone who wants to create something new\n\nemail: your contact-information\n--\u003e\n\n# Main Title\n```\n\n    --{{1}}--\nExactly, macros serve as placeholders that can be customized with parameters, allowing you to avoid repetitive copy-and-paste actions.\nLiaScript automatically recognizes these patterns and replaces them with the defined content.\n\n      {{1}}\n`@author` --\u003e @author\n\n### 1. Macro Basics\n\n#### Single Line\n\n    --{{0}}--\nThere are two types of macros: single-line macros and block macros.\nSingle-line macros consist of a macro name followed by a colon, with the name starting with a word character.\nWhile the `@` symbol at the beginning is optional, it's recommended for custom macros to enhance readability. These macros return only a single line of output.\n\n``` markdown\n\u003c!--\nauthor: someone who wants to create something new\n\n@Single.line: you can add as much content as you\n  want to your single-line macro!\n\n  The only thing that is important, is to use\n     indentation.\n\n     Not __matter__ how [much](#12) it is.\n\n--\u003e\n\n# Main Title\n\n@Single.line  \u003c-- this will be replaced at compile-time by the text below:\n\nyou can add as much content as you want to your single-line macro! The only\nthing that is important, is to use indentation. Not __matter__ how [much](#12)\nit is.\n\n@author \u003c-- by: someone who wants to create something new\n```\n\n    --{{1}}--\nBy the way, macros are case-sensitive, thus there is a difference between the following ones:\n\n`@author` is not equal to `@Author`.\n\n#### Multi-Line Blocks\n\n    --{{0}}--\nBlock macros don't have a colon after the macro name and continue parsing until they encounter the `@end` symbol.\nThey can contain Markdown content, HTML, CSS, or JavaScript, providing greater flexibility in defining custom elements or functionalities.\nBlock macros also preserve whitespaces and newlines, allowing you to format and structure content more precisely within the macro block.\n\n``` md\n\u003c!--\n@smile: ;-)\n\n@block\nthis type of macro preserves the structure.\n\n\u003ch1\u003e\n@smile and you can also use macros, that\ndefine other macros\n\u003c/h2\u003e\n\n| Header 1   | Header 2   | Header 3   |\n| :--------- | :--------- | :--------- |\n| Item 1     | Item 2     | Item 3     |\n\n\u003cscript\u003ealert(\"hello world\")\u003c/script\u003e\n@end\n--\u003e\n\n# Main Title\n\n@block\n```\n\n    --{{1}}--\nAs you can see for `@smile`, macros can also call other macros.\n\n#### Commenting\n\n    --{{0}}--\nTo comment out single-line macros, you can use `@@` followed by the macro name.\nFor block macros, you can use `@@@` followed by the macro name.\nThis is useful for temporarily disabling macros or adding personal notes to your document without affecting its functionality.\n\n\n``` md\n\u003c!--\n@@comment: this is a single line macro\n  that has been commented out\n\n@@ if you prefer it, comment blocks can\n@@ be defined like this\n@@ ...\n\n@@@block-comments\n\nstart with three @s and go until the\nparser reaches ...\n\n@end\n--\u003e\n```\n\n#### Overwriting Macros\n\n    --{{0}}--\nYou can define macros within individual sections, which will override any macros with the same name defined in the main header.\nThis allows for flexibility in customizing macros for specific sections of your document, such as changing the narrator's voice, adjusting authorship details, or any other customizations you may need.\n\n``` markdown\n\u003c!--\n...\nnarrator: US English Female\n\n--\u003e\n\n# Main Title\n\n....\n\n#### Some other section\n\u003c!--\nauthor: another author for this section\n...\nnarrator: Australian Male\n\n--\u003e\n\n\n```\n\n\n#### Passing Parameters\n\n    --{{0}}--\nIt is also possible to pass parameters to macros, which resembles calling a function in most common programming languages.\nSimply invoke a macro with parentheses and place everything you want to pass into the macro within them.\nThe placement of each parameter within the macro is defined by an `@` followed by a number, such as `@0`, `@1`, up to `@n`.\nJust like in most programming languages where counting starts at `0`, in LiaScript, `@0` represents the first parameter.\n\n\n``` markdown\n\u003c!--\n@highlight: \u003cb style=\"color: red\"\u003e@0\u003c/b\u003e\n--\u003e\n\n# Main Title\n\n@highlight(I want this text to be read and bold)\n\n```\n\n    --{{1}}--\nThe following example illustrates how multiple parameters can be passed to a macro: they are simply separated by commas.\nHowever, a challenge arises when attempting to pass a string that contains commas; in such cases, the string must be enclosed in backticks.\nAdditionally, as depicted, a macro can call or substitute another macro, which can be extremely useful for managing complexity.\nYou can define simpler macros that call the complex one by setting default values, as described in the [uid](#uid) section.\n\n\n      {{1}}\n``` markdown\n\u003c!--\n@highlight: \u003cb style=\"color: @0\"\u003e@1\u003c/b\u003e\n\n@highlight_green: @highlight(green,@0)\n--\u003e\n\n@highlight_green(`simply, simply, green`)\n```\n\n    --{{2}}--\nLast but not least, to continue with basic Markdown syntax, it is also possible to pass multi-line parameters.\nThis can be achieved by enclosing the multi-line content within a common Markdown code block delimited by three backticks.\n\n      {{2}}\n````` markdown\n@highlight_green(```please to not use\nthis in production...\n\n* it is better to write Markdown\n* directly\n```)\n`````\n\n##### Code-Blocks as Parameters\n\n    --{{0}}--\nAs mentioned previously, it is advised to avoid the approach of passing multi-line parameters into single-line macros, as it can result in unattractive Markdown code on platforms like GitHub or other Markdown interpreters/editors.\nHowever, you can utilize a code block that includes information about syntax highlighting along with a macro defining the title.\nThe content within the code block is then passed to the macro as the __last__ multi-line parameter.\n\n\n````` markdown\n\u003c!--\nlink:   https://pannellum.org/css/style.css\n        https://cdn.pannellum.org/2.4/pannellum.css\n\nscript: https://cdn.pannellum.org/2.4/pannellum.js\n\n@panorama\n\u003cdiv id=\"panorama_@0\" style=\"width: 100%; height: 400px;\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  pannellum.viewer('panorama_@0', {\n    \"type\": \"equirectangular\",\n    \"panorama\": \"@1\",\n    \"autoLoad\": false,\n    \"hotSpots\": [@2]\n});\n\u003c/script\u003e\n@end\n--\u003e\n\n# Main title\n\n```json @panorama(\"0\",https://pannellum.org/images/cerro-toco-0.jpg)\n{\n  \"pitch\": 14.1,\n  \"yaw\": 1.5,\n  \"type\": \"info\",\n  \"text\": \"Baltimore Museum of Art\",\n  \"URL\": \"https://artbma.org/\"\n},\n{\n  \"pitch\": -0.9,\n  \"yaw\": 144.4,\n  \"type\": \"info\",\n  \"text\": \"North Charles Street\"\n}\n```\n`````\n\n##### Links as Parameters\n\u003c!--\n@load.java: @load(java,@0)\n\n@load\n\u003cscript style=\"display: block\" modify=\"false\" run-once=\"true\"\u003e\n    fetch(\"@1\")\n    .then((response) =\u003e {\n        if (response.ok) {\n            response.text()\n            .then((text) =\u003e {\n                send.lia(\"LIASCRIPT:\\n``` @0\\n\" + text + \"\\n```\")\n            })\n        } else {\n            send.lia(\"HTML: \u003cspan style='color: red'\u003eSomething went wrong, could not load \u003ca href='@1'\u003e@1\u003c/a\u003e\u003c/span\u003e\")\n        }\n    })\n    \"loading: @1\"\n\u003c/script\u003e\n@end\n--\u003e\n\n    --{{0}}--\nThere is a third option, which was added to support links.\nThis means that when LiaScript is executed and you refer to a local reference, this reference needs to be translated into a global one, starting with `https://something.something`.\nAnother benefit of applying such link parameters is that what you are referencing is still treated as a link by other Markdown interpreters.\n\n`@[macro-call(with,parameters)](AndURLs \"ignored\")`\n\n    --{{1}}--\nAs with code-block parameters, the URL is passed as the last parameter, and if this is a relative one, the required protocol and origin are added automatically.\n\n    --{{2}}--\nThe following example implements a `load` macro that fetches some code examples from the internet and dynamically integrates them into the LiaScript document.\nFor more information on how to integrate scripts into your document, see section [JavaScript or JS-Components](#JavaScript-or-JS-Components).\n\n      {{2}}\n```` md\n\u003c!--\n@load.java: @load(java,@0)\n\n@load\n\u003cscript style=\"display: block\" modify=\"false\" run-once=\"true\"\u003e\n    fetch(\"@1\")\n    .then((response) =\u003e {\n        if (response.ok) {\n            response.text()\n            .then((text) =\u003e {\n                send.lia(\"LIASCRIPT:\\n``` @0\\n\" + text + \"\\n```\")\n            })\n        } else {\n            send.lia(\"HTML: \u003cspan style='color: red'\u003eSomething went wrong, could not load \u003ca href='@1'\u003e@1\u003c/a\u003e\u003c/span\u003e\")\n        }\n    })\n    \"loading: @1\"\n\u003c/script\u003e\n@end\n--\u003e\n\n# Loading\n\n@load.java(App.java) --\u003e might not work\n\n@[load.java](App.java)\n\n@[load(java)](App.java)\n\nwill return an error message\n\n@[load.java](DoesNotExist.java)\n````\n\n    --{{3}}--\nThe result looks as follows.\nThe link-parameters shall be loaded as expected, the first one probably not and the last one will fail definitely.\n\n      {{3}}\n\u003csection\u003e\n\n@load.java(example/App.java) --\u003e might not work\n\n@[load.java](example/App.java)\n\n@[load(java)](example/App.java)\n\nwill return an error message\n\n@[load.java](example/DoesNotExist.java)\n\n\u003c/section\u003e\n\n\n    --{{4}}--\nYou can find this example with more explanation at the following URL:\n\n      {{4}}\nhttps://github.com/LiaPlayground/Custom-code-imports\n\n#### Escaping\n\n    --{{0}}--\nIn some cases, such as when you need to pass content to a JavaScript string and escape the content of the LiaScript content, which could be a multiline string, you can add a `'` to your macro, for example:\n\n* `@'input` will result in an escaped version of the input string\n* `@'input(1)` is the same as above\n* `@'1` as a parameter will also get escaped\n* similarly to any other `@'macro(with, some, params)`\n\n\u003e But be careful to apply it only once in your macro chain, as multiple escape sequences might result in multiple backslashes (`\\\\\\\"`) for special characters.\n\n#### Debugging\n\u003c!--\n@highlight: \u003cb style=\"color: red\"\u003e@0\u003c/b\u003e\n\n@red_and_green:\n  @highlight(@0) \u003ci style=\"color: green\"\u003e@1\u003c/i\u003e\n--\u003e\n\n    --{{0}}--\nCreating macros can be quite difficult, especially when it involves creating and calling nested macros with various parameters.\nDefining macros in Atom is somewhat akin to navigating in the dark, as it is not possible to inspect the DOM.\nHowever, you can escape a macro by adding an additional `@`, which outputs a gray and escaped HTML `pre` `code` block.\n\n``` markdown\n\u003c!--\n@highlight: \u003cb style=\"color: red\"\u003e@0\u003c/b\u003e\n\n@red_and_green:\n  @highlight(@0) \u003ci style=\"color: green\"\u003e@1\u003c/i\u003e\n--\u003e\n\n@@red_and_green(red,`simply, simply, green`)\n```\n\n\u003clia-keep\u003e\n\u003cpre style=\"background:#CCCCCC\"\u003e\u003ccode\u003e\u003cb style=\"color: red\"\u003ered\u003c/b\u003e \u003ci style=\"color: green\"\u003esimply, simply, green\u003c/i\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/lia-keep\u003e\n\n\n### 2. Basic Macros\n\n    --{{0}}--\nThe following macros are special ones that are used by the LiaScript to deal with a couple of convenience functions.\n\n\n#### __Base settings__\n\n##### `author`\n\n    --{{0}}--\nThe author information is visible within the information panel as well as on the course-card on the home-screen.\n__Use a semicolon to separate multiple authors.__\n\n\n```md\n\u003c!--\nauthor: Your name; Another Author\n--\u003e\n```\n\n![Author information](img/author.png)\n\n##### `comment`\n\n    --{{0}}--\nThis information is shown on the course card at the home screen.\nIt should contain a short and precise description of your course.\nThis macro will only display one paragraph, even if you define more content.\n\n```md\n\u003c!--\ncomment: Learn something about ...\n  even if you insert multiple paragraphs\n\n  there will only be one paragraph\n--\u003e\n```\n\n![Comment information](img/comment.png)\n\n##### `date`\n\n    --{{0}}--\nA convenience function that can be used to show the latest update time to the user.\nThis is also displayed in the information panel.\n\n```md\n\u003c!--\ndate: 08/03/2020\n--\u003e\n```\n\n![Date information](img/date.png)\n\n##### `email`\n\n    --{{0}}--\nTo add contact information that will be displayed in the information panel, you can include it in your LiaScript document.\nThis contact information can also be overridden for specific sections if needed.\n\n```md\n\u003c!--\nemail: contact@web.de\n--\u003e\n```\n\n![Email information](img/email.png)\n\n##### `logo`\n\n    --{{0}}--\nThe logo definition requires a URL of an image, whether absolute or relative.\nIt is used to define a background image for the course-card at the home-screen.\nAdditionally, all base information is passed to this visualization too.\n\n```md\n\u003c!--\nlogo: ./pics/logo.png\n--\u003e\n```\n\n![Home-Screen](img/home-screen.png)\n\n\n##### `icon`\n\u003c!--\nicon: https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Logo_TU_Freiberg.svg/487px-Logo_TU_Freiberg.svg.png\n--\u003e\n\n    --{{0}}--\nIf you want to get rid of our humming-bird icon and insert your own, use this to refer to a relative or absolute image URL.\nThis can also be used for styling purposes to add to every slide its own icon.\n\n```md\n\u003c!--\nicon: ./pics/icon.png\n--\u003e\n```\n\n---\n\n![Changed icon](img/icon.png)\n\n##### `attribute`\n\n    --{{0}}--\nAttribution is an important issue.\nBy using the `attribute` command, you can define the attribution that is shown within the info field within the navigation panel.\nTherefore, this macro is the appropriate way to say thank you or to add license information.\nThese elements also get imported if you import the functionality from another course.\nA good attribution might look like the following examples:\n\n\n```md\n\u003c!--\nattribute: [AlaSQL](https://alasql.org)\n  by [Andrey Gershun](agershun@gmail.com)\n  \u0026 [Mathias Rangel Wulff](m@rawu.dk)\n  is licensed under [MIT](https://opensource.org/licenses/MIT)\n\nattribute: [PapaParse](https://www.papaparse.com)\n  by [Matthew Holt](https://twitter.com/mholt6)\n  is licensed under [MIT](https://opensource.org/licenses/MIT)\n--\u003e\n```\n\n![Attribution](img/attribute.png)\n\n##### `repository`\n\n    --{{0}}--\nWhen you package your course into a SCORM project and upload it to an LMS, the information about the original repository is lost.\nHowever, if you want to attract contributors, you can preserve this source information by adding it to your document's head.\nAdditionally, LiaScript will automatically attempt to infer the base project from resources on GitHub, GitLab, and previously Dropbox.\n\n```md\n\u003c!--\nrepository: https://github.com/LiaScript/docs\n--\u003e\n```\n\n![Repository information](img/repository.png)\n\n#### __Internationalization__\n\n\n\n\n##### `language`\n\n    --{{0}}--\nSet the internationalization of the course.\nThis will configure basic button information, titles, hints, etc.\nThis information is also utilized if a user changes the language with the [Google Translator](#Translations).\nThe currently available languages are defined here:\n\nhttps://github.com/liaScript/lia-localization\n\n``` md\n\u003c!--\n@@english\nlanguage: en\n\n@@dutch\nlanguage: nl\n\n@@french\nlanguage: fr\n\n@@german\nlanguage: de\n\n...\n--\u003e\n```\n\n    --{{1}}--\nWe use language codes for internationalization, similar to top-level domains.\n\n      {{1}}\n| language   | code |                                                                              translation |\n| ---------- |:----:| ----------------------------------------------------------------------------------------:|\n| Amharic    |  am  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.am.yaml) |\n| Arabic     |  ar  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.ar.yaml) |\n| Armenian   |  hy  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.hy.yaml) |\n| Bengali    |  bn  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.bn.yaml) |\n| Bulgarian  |  bg  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.bg.yaml) |\n| Chinese    |  zh  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.zh.yaml) |\n| English    |  en  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.en.yaml) |\n| Dutch      |  nl  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.nl.yaml) |\n| French     |  fr  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.fr.yaml) |\n| German     |  de  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.de.yaml) |\n| Hindi      |  hi  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.hi.yaml) |\n| Italian    |  it  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.it.yaml) |\n| Japanese   |  ja  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.ja.yaml) |\n| Korean     |  ko  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.ko.yaml) |\n| Panjabi    |  pa  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.pa.yaml) |\n| Persian    |  fa  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.fa.yaml) |\n| Portuguese |  pt  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.pt.yaml) |\n| Russian    |  ru  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.ru.yaml) |\n| Spanish    |  es  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.es.yaml) |\n| Suaheli    |  sw  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.sw.yaml) |\n| Taiwanese  |  tw  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.tw.yaml) |\n| Ukrainian  |  ua  | [url](https://github.com/LiaScript/lia-localization/blob/master/locale/commands.ua.yaml) |\n\n##### `narrator`\n\n    --{{0}}--\nSet the narrator voice for your course speaker.\nThe voice is provided by[responsivevoice.org](https://responsivevoice.org), which is free for non-commercial educational content, or directly by your browser.\nThe list below shows all currently available voices and languages.\nAs defined in section [Comments: Text to Speech](#Comments:-Text-to-Speech), this value can be set globally, defaults to English, and can be changed per slide and text-to-speech output as well.\n\n```md\n\u003c!--\nnarrator: Afrikaans Male\n--\u003e\n```\n\n| Female                        | Male                        |\n| ----------------------------- | --------------------------- |\n| UK English Female             | UK English Male             |\n| US English Female             | US English Male             |\n|                               | Afrikaans Male              |\n|                               | Albanian Male               |\n| Arabic Female                 | Arabic Male                 |\n|                               | Armenian Male               |\n| Australian Female             | Australian Male             |\n| Bangla Bangladesh Female      | Bangla Bangladesh Male      |\n| Bangla India Female           | Bangla India Male           |\n|                               | Bosnian Male                |\n| Brazilian Portuguese Female   | Brazilian Portuguese Male   |\n|                               | Catalan Male                |\n| Chinese Female                | Chinese Male                |\n| Chinese (Hong Kong) Female    | Chinese (Hong Kong) Male    |\n| Chinese Taiwan Female         | Chinese Taiwan Male         |\n|                               | Croatian Male               |\n| Czech Female                  | Czech Male                  |\n| Danish Female                 | Danish Male                 |\n| Deutsch Female                | Deutsch Male                |\n| Dutch Female                  | Dutch Male                  |\n|                               | Esperanto Male              |\n|                               | Estonian Male               |\n| Filipino Female               |                             |\n| Finnish Female                | Finnish Male                |\n| French Canadian Female        | French Canadian Male        |\n| French Female                 | French Male                 |\n| Greek Female                  | Greek Male                  |\n| Hindi Female                  | Hindi Male                  |\n| Hungarian Female              | Hungarian Male              |\n|                               | Icelandic Male              |\n| Indonesian Female             | Indonesian Male             |\n| Italian Female                | Italian Male                |\n| Japanese Female               | Japanese Male               |\n| Korean Female                 | Korean Male                 |\n| Latin Female                  | Latin Male                  |\n|                               | Latvian Male                |\n|                               | Macedonian Male             |\n| Moldavian Female              | Moldavian Male              |\n|                               | Montenegrin Male            |\n| Nepali                        | Nepali                      |\n| Norwegian Female              | Norwegian Male              |\n| Polish Female                 | Polish Male                 |\n| Portuguese Female             | Portuguese Male             |\n| Romanian Female               | Romanian Male               |\n| Russian Female                | Russian Male                |\n|                               | Serbian Male                |\n|                               | Serbo-Croatian Male         |\n| Sinhala                       | Sinhala                     |\n| Slovak Female                 | Slovak Male                 |\n| Spanish Female                | Spanish Male                |\n| Spanish Latin American Female | Spanish Latin American Male |\n|                               | Swahili Male                |\n| Swedish Female                | Swedish Male                |\n| Tamil Female                  | Tamil Male                  |\n| Thai Female                   | Thai Male                   |\n| Turkish Female                | Turkish Male                |\n| Ukrainian Female              |                             |\n| Vietnamese Female             | Vietnamese Male             |\n|                               | Welsh Male                  |\n\n\n    --{{1}}--\nLiaScript will attempt to utilize the default browser text-to-speech support, and if your browser does not support it, it will switch to [responsivevoice.org](https://responsivevoice.org).\nYou can manually switch between these two variants.\n__Note that not all voices are supported equally, and the quality may vary between different operating systems and browsers.__\n\n    {{1}}\n![Browser TTS](img/tts.png)\n\n##### `translation`\n\n    --{{0}}--\nIf you already have translated versions of your course or know where they can be found, use this macro. Simply add the name and the URL.\nThese links will also be visible within the information panel of your course.\n\n``` md\n\u003c!--\ntranslation: Deutsch  translations/German.md\ntranslation: Français translations/French.md\ntranslation: Русский  translations/Russian.md\n--\u003e\n```\n\n---\n\n![Show Translations](img/translate.png)\n\n\n##### `font`\n\n    --{{0}}--\nThe `font` macro allows you to integrate various fonts for any kind of language, whether dead or alive.\nTo do this, you need to load the CSS font with the [`link`](#link) command and then insert the font by separating all font names with commas.\n\n\n\n```` markdown\n\u003c!--\nlink:     https://fonts.googleapis.com/css2?family=Noto+Sans+Egyptian+Hieroglyphs\n          https://fonts.googleapis.com/css2?family=Noto+Sans+Ogham\n\nfont:     Noto Sans Egyptian Hieroglyphs, Noto Sans Ogham\n--\u003e\n\n# Hieroglyphs\n\n\u003e url: https://fonts.google.com/noto/specimen/Noto+Sans+Egyptian+Hieroglyphs\n\n𓁷 𓏤 𓎟 𓀀 𓁐 𓏥 𓃀 𓈖 𓌱 𓅓 𓎛 𓅱 𓀔 𓈖 𓌱 𓅓 𓎛 𓇋 𓇋 𓏏 𓁐 𓐍 𓂋 𓋴 𓂝 𓎛 𓋩 𓉔 𓊪 𓏛\n𓋴 𓐠 𓄿 𓂋 𓏏 𓌗 𓀁 𓌷 𓂝 𓏏 𓏭 𓏛 𓇾 𓏏 𓅓 𓅱 𓀀 𓁐 𓏪 𓃀 𓌢 𓌢 𓈖 𓈖 𓁷 𓏤 𓎟 𓀀 𓁐 𓏥\n...\n\n# Ogham\n\n\u003e url: https://fonts.google.com/noto/specimen/Noto+Sans+Ogham\n\n\u003c!-- style=\"writing-mode: vertical-lr; height: 40vh\" --\u003e\n᚛ᚌᚔᚚ ᚓ ᚈᚔᚄᚓᚇ ᚔᚅ ᚃᚐᚔᚇᚉᚆᚓ᚜\n᚛ᚇᚘᚐ ᚋᚁᚐ ᚌᚐᚄᚉᚓᚇᚐᚉᚆ᚜\n...\n````\n\n    --{{1}}--\nEven if the font is not installed on your system, the browser will correctly load and display it.\n\n      {{1}}\n\u003csection\u003e\n\n# Hieroglyphs\n\n𓁷 𓏤 𓎟 𓀀 𓁐 𓏥 𓃀 𓈖 𓌱 𓅓 𓎛 𓅱 𓀔 𓈖 𓌱 𓅓 𓎛 𓇋 𓇋 𓏏 𓁐 𓐍 𓂋 𓋴 𓂝 𓎛 𓋩 𓉔 𓊪 𓏛\n𓋴 𓐠 𓄿 𓂋 𓏏 𓌗 𓀁 𓌷 𓂝 𓏏 𓏭 𓏛 𓇾 𓏏 𓅓 𓅱 𓀀 𓁐 𓏪 𓃀 𓌢 𓌢 𓈖 𓈖 𓁷 𓏤 𓎟 𓀀 𓁐 𓏥\n\n# Ogham\n\n\u003c!-- style=\"writing-mode: vertical-lr; height: 40vh\" --\u003e\n᚛ᚌᚔᚚ ᚓ ᚈᚔᚄᚓᚇ ᚔᚅ ᚃᚐᚔᚇᚉᚆᚓ᚜\n᚛ᚇᚘᚐ ᚋᚁᚐ ᚌᚐᚄᚉᚓᚇᚐᚉᚆ᚜\n᚛ᚌᚓᚔᚄ ᚃᚐᚔᚏ ᚐᚏ ᚈᚆᚓᚉᚆᚈ ᚇᚔᚅᚇ ᚃᚐᚔᚇᚉᚆᚔ᚜\n᚛ᚉᚓᚅ ᚉᚆᚑᚋᚏᚐᚉ ᚅᚑᚓᚅᚃᚆᚔᚏ ᚇᚑ ᚃᚆᚒᚐᚉᚏᚐ᚜\n᚛ᚌᚔᚚ ᚓ ᚈᚔᚄᚓᚇ ᚔᚅ ᚃᚐᚔᚇᚉᚆᚓ᚜\n᚛ᚇᚘᚐ ᚋᚁᚐ ᚌᚐᚄᚉᚓᚇᚐᚉᚆ᚜\n᚛ᚌᚓᚔᚄ ᚃᚐᚔᚏ ᚐᚏ ᚈᚆᚓᚉᚆᚈ ᚇᚔᚅᚇ ᚃᚐᚔᚇᚉᚆᚔ᚜\n᚛ᚉᚓᚅ ᚉᚆᚑᚋᚏᚐᚉ ᚅᚑᚓᚅᚃᚆᚔᚏ ᚇᚑ ᚃᚆᚒᚐᚉᚏᚐ᚜\n᚛ᚌᚔᚚ ᚓ ᚈᚔᚄᚓᚇ ᚔᚅ ᚃᚐᚔᚇᚉᚆᚓ᚜\n᚛ᚇᚘᚐ ᚋᚁᚐ ᚌᚐᚄᚉᚓᚇᚐᚉᚆ᚜\n᚛ᚌᚓᚔᚄ ᚃᚐᚔᚏ ᚐᚏ ᚈᚆᚓᚉᚆᚈ ᚇᚔᚅᚇ ᚃᚐᚔᚇᚉᚆᚔ᚜\n᚛ᚉᚓᚅ ᚉᚆᚑᚋᚏᚐᚉ ᚅᚑᚓᚅᚃᚆᚔᚏ ᚇᚑ ᚃᚆᚒᚐᚉᚏᚐ᚜\n\n\u003c/section\u003e\n\n    --{{2}}--\nHere is a complete guide on loading and experimenting with external fonts in the browser:\n\n\n      {{2}}\nhttps://liascript.github.io/LiveEditor/?/show/file/https://raw.githubusercontent.com/LiaPlayground/Fonts/main/README.md\n\n#### __`version`__\n\n    --{{0}}--\nA very important piece of information is the `version`.\nIt follows the major.minor.patch notion.\nIf you are just starting to develop a course, you can leave this out, and you will be in some kind of development version.\nAs long as you are in major version 0, the course should be parsed every time it is loaded, or if your user is offline, the content will be loaded from the cache.\n\n\n__Debug Version:__\n\n``` markdown\n\u003c!--\nversion: 0.0.1\n...\n--\u003e\n\n# Main Title\n```\n\n---\n\n![Version information](img/version.png)\n\n    --{{1}}--\nThis setup is suitable for small courses without persistent content.\nHowever, if you include executable code or quizzes and want to store this state within the browser's IndexedDB, you will need to switch to a major version of 1.\nTherefore, if your course is ready or very large, it might make sense to define a major version, such as `1.0.12`.\nThe benefit of this is that every time the user loads the course, the app tries to download the raw Markdown file and then checks the version information.\nIf the version is the same as the one currently stored within IndexedDB, then it does not require preprocessing the entire document again.\nInstead, it directly loads the preprocessed version. This is especially useful for smartphones.\n\n      {{1}}\n\u003csection\u003e\nRelease:\n\n\n``` markdown\n\u003c!--\nversion: 1.0.12\n...\n--\u003e\n\n# Main Title\n```\n\n\u003c/section\u003e\n\n    --{{2}}--\n__So how to change the version information?__\n\n\n\n        {{3}}\n* __patch:__ from `1.0.14` to `1.0.15`\n\n      --{{3}}--\n  If you're making minor adjustments like fixing typos or updating static content, simply increase the patch element.\n\n        {{4}}\n* __minor:__ going from `1.0.15` to `1.1.0`\n\n      --{{4}}--\n  If you're adding slides to the end of your document, you can increase the minor version number.\n\n        {{5}}\n* __major:__ from `1.1.0` to `2.0.0`\n\n      --{{5}}--\n  Major version changes are necessary if you alter the structure of your document, especially by moving quizzes or code.\n  Persistent state information is stored within IndexedDB, so moving code or quizzes from one slide to another could potentially disrupt previous states.\n  In such cases, major version changes are required, which will result in a new version being stored in IndexedDB, while the old code/state remains available and can be restored.\n\n\n#### __Loading External Resources__\n\n##### `link`\n\n    --{{0}}--\nIf you need to load additional CSS files, use the `link` command followed by the URL of your stylesheet.\nSome JavaScript imports might also require additional CSS definitions.\nSimilar to [`import`](#import) or [`script`](#script), you can load multiple files. If you are creating a template and need to pass this information to all other courses that import yours, use `link`.\nIf you only want to change the appearance of some of your elements, use [`style`](#style).\n\n\n```md\n\u003c!--\nlink: https://some.css\n      ./another.css\n--\u003e\n```\n\n    --{{1}}--\nFor more information on how to define custom styles, checkout the following link:\n\n      {{1}}\nhttps://github.com/liaScript/custom-style\n\n##### `script`\n\n    --{{0}}--\nScript tags cannot load external JavaScript resources. Instead, use the `script` command in the main header to load external resources.\nThis works for relative references too.\n\n``` md\n\u003c!--\nscript: https://some.js\n  https://another.js\n  ...\n--\u003e\n\n# Main title\n\n\u003cscript\u003ealert(\"Hello Mom\")\u003c/script\u003e\n```\n\n    --{{1}}--\nThe execution of [`@onload`](#onload) and all script tags is delayed until all external references have been loaded.\n\n##### `import`\n\n    --{{0}}--\nYou can import the main macros of other courses simply by using the `import` command, followed by the raw URL of the foreign course.\nYou can import various different courses, and every URL will be loaded before the course is finally rendered.\nOnly the definitions in the main header are loaded, including `script`, `link`, macros, `attribute`, and `onload`.\n\n```` md\n\u003c!--\nimport: https://raw.githubusercontent.com/liaTemplates/ABCjs/main/README.md\n\nimport: this will import a third url\n--\u003e\n\n# Music course\n\n``` abc  @ABCJS.render\nX: 1\nT: Shche ne Vmerla Ukrayiny ni Slava, ni volya\nT: Ukrainian National Anthem\nC: trad.\nR: march\nS: https://www.8notes.com/scores/34640.asp\nZ: 2022 John Chambers \u003cjc:trillian.mit.edu\u003e\nM: C\nL: 1/8\nK: F\n[|\\\n\"F\"[A3F3][AF] ([AF][GE][AF])[BG] | [c3A3][BG] \"A7\"[A2F2][G2E2^C2] | \"Dm\"[F2D2][A2F2] \"A\"[E2^C2][A2C2] | \"Dm\"[D3D3][E^C] [F2D2]\"C\"[G2E2] |\n...\n```\n````\n\n---\n\n``` abc  @ABCJS.render\nX: 1\nT: Shche ne Vmerla Ukrayiny ni Slava, ni volya\nT: Ukrainian National Anthem\nC: trad.\nR: march\nS: https://www.8notes.com/scores/34640.asp\nZ: 2022 John Chambers \u003cjc:trillian.mit.edu\u003e\nM: C\nL: 1/8\nK: F\n[|\\\n\"F\"[A3F3][AF] ([AF][GE][AF])[BG] | [c3A3][BG] \"A7\"[A2F2][G2E2^C2] | \"Dm\"[F2D2][A2F2] \"A\"[E2^C2][A2C2] | \"Dm\"[D3D3][E^C] [F2D2]\"C\"[G2E2] |\n\"F\"[A3F3][AF] ([AF][GE][AF])[BG] | [c3A3][BG] \"A7\"[A2F2][G2E2^C2] | \"Dm\"[F2D2][A2F2] \"A\"[E2^C2][A2C2] | \"Dm\"[D4D4] D2z2 |\n\"A\"[E2^C2][E2C2] ([AC][GE][FD])[EC] | (\"Dm\"[DD3-]EF)[DD] \"A\"[E2^C2][E2C2] | \"Dm\"[F2D2][F2D2] \"C\"[G2E2][G2E2] | \"F\"[A4F4] [A2F2]z2 |\n\"A\"[E2^C2][E2C2] ([AC][GE][FD])[EC] | (\"Dm\"[DD3-]EF)[DD] \"A\"[E2^C2][E2C2] | \"Dm\"[F2D2][A2F2] \"A\"[E2^C2][A2C2] | \"Dm\"[D3D3][E^C] ([FD][GE][AF])[BG] |\n|:\\\n\"F\"[c3A3][=B^G] [c2A2][A2F2] | \"C\"[G2E2][G2E2] ([cE][BG]\"^A7/C#\"[AF])[GE] | \"Dm\"[F2D2][F2D2] \"C\"[G2E2][G2C2] | (\"F\"[A3F3][GE][A2F2])\"C7\"[B2G2] |\n\"F\"[c3A3][=B^G] [c2A2][A2F2] | \"C\"[G2E2][G2E2] ([cE][BG]\"^A7/C#\"[AF])[GE] | \"Dm\"[F2D2][A2F2] \"A\"[E2^C2][A2C2] | \"Dm\"[D4D4] [D2D2]z2 :|\n```\n\n---\n\n\n    --{{1}}--\nYou can see an overview of all currently supported templates hosted on GitHub.\nEach course describes its macros and how to apply them.\nCurrently, only the content of the imported course gets loaded, so it's not possible to load a course correctly if it references other courses.\n\n     {{1}}\nhttps://github.com/topics/liascript-template\n\n\n#### __Configuration__\n\n##### `mode`\n\n    --{{0}}--\nYou can change the default style of your document.\nIf you prefer a traditional layout without interactive elements, you can set the mode to `Textbook`.\nAlternatively, you can opt for an interactive `Presentation` or `Slides` with comments included, to engage your audience with animations.\n\n```md\n\u003c!--\nmode: Presentation\n\nmode: Slides\n\nmode: Textbook\n--\u003e\n```\n\n    --{{1}}--\nThe three modes are accessible via the mode selector button located at the upper right corner of the document.\nThe default mode is determined by the user settings.\n\n      {{1}}\n![User modes](img/modes.png)\n\n##### `dark`\n\n    --{{0}}--\nYou can adjust the default appearance of your document, opting for either dark mode or light mode.\nIt's important to note that this customization will not override the user's preferences.\nThe default mode is determined by the user settings.\n\n\n```md\n\u003c!--\ndark: true\n\n@@ or ...\n\ndark: false\n--\u003e\n```\n\n---\n\n![dark and light](img/dark.png)\n\n\n##### `classroom`\n\n    --{{0}}--\nIf you want to disable the classroom functionality for your course or within your SCORM export.\nThen turn the `classroom` feature of, by default it is activated.\nFor more information on how to open classrooms see section [Classroom Experience](#Classroom-Experience).\n\n```md\n\u003c!--\nclassroom: false\n--\u003e\n```\n\n---\n\n![classroom settings](img/classroom.png)\n\n\n##### `sharing`\n\n    --{{0}}--\nTo disable sharing, if your browser supports it and to remove the presented QR code, you can turn off this feature with the following command.\nBy default, it is activated.\n\n```md\n\u003c!--\nsharing: false\n--\u003e\n```\n\n---\n\n![sharing options](img/sharing.png)\n\n##### `translateWithGoogle`\n\n    --{{0}}--\nIf you are giving a language course and want to prevent cheating by disabling the auto-translation function offered by Google, then set `translateWithGoogle` to `false`.\n\n\n```md\n\u003c!--\ntranslateWithGoogle: false\n--\u003e\n```\n\n---\n\n![translate with google](img/translateWithGoogle.png)\n\n\n#### __Functional__\n\n\n\n##### `onload`\n\n    --{{0}}--\nSometimes it might be necessary to preload some JavaScript code that gets executed before the course is loaded, or you want to define some global functions that can be used everywhere afterward.\n`onload` functions similarly to its HTML counterpart and is used to accomplish this task.\n\n``` md\n\u003c!--\n@onload\n// this macro contains some important functions that are loaded\n// only once ...\n\nalert(\"Hello World\")\n@end\n--\u003e\n```\n\n##### `style`\n\n    --{{0}}--\nIn contrast to [`link`](#link) where you refer to external CSS resources, you can also directly insert CSS settings.\nThese are loaded faster, directly during the parsing process, which reduces glitches, and they are not shared if the document gets imported.\nThe example adds an animated transition to every slide.\n\n```\n\u003c!--\n@style\n\n@keyframes zoomIn {\n    from {\n        transform: scale(0);\n        opacity: 0;\n        border: 5px solid black;\n    }\n    to {\n        transform: scale(1);\n        border: 1px solid black;\n        opacity: 1;\n    }\n}\n\n/* Apply the animation to the main element */\nmain {\n    animation: zoomIn 0.75s ease-in-out;\n}\n\n@end\n--\u003e\n\n# Course Main Title\n```\n\n    --{{1}}--\nHeaders, colors, and everything LiaScript-related can be modified as well. Try out this example:\n\n      {{1}}\n[LiveEditor](https://liascript.github.io/LiveEditor/?/show/code/H4sIAAAAAAAAA71XW3PbxhV+x69Y0w8RYQG8OG5dSr7IkpLSsSPXUqbuaDT2EliSawFYBAuIoh1lHHvSyyS9zLSPnelrHxUnqt340r8A/qN+ZxckRbv1pO1MQQ65u+d+9tywesbzHOeqzseRwP++GPczHgvNHigVdxP20GF4+pmKqyU9ecYT3VdZ3GE64JFYatZXZkCV8kDm4w5rzs96KgtF1mEX0kOmVSRD1ot4sG8Rjsxvrt4loFV/m1nrXzFb0KA1FXDkOA2XraVpNGb5UDCeyJjnUiUklidMRCIWSc7chhNzObV6htWZeqPp//iCZoJr4cnEU0W+QqyviiR0PO+y45xl66rItGA3icuOzMmpO0OpGb5jgJjrBgbDdZlMZC55JB9YTXRe9HzHuRURe6aFMJrubqhA7y0N8zzVnUYjklwHmUxzfyDzIQikaliGjStTnIyPKmihRRaoJIdpfqBiot421I0QXBsx17nIGrc31zZubvpxWHfgjb5MQgbL2GjIc1I7VVrLXiSgL9u9MeXwTpXqsKPbJ4PZiMOtYAtVwEDntB2KKCVuxiFrOUKru7G5zFJreT5OBdwEtvARKMkTPIoYP+Ay4qSIHqosD4pcQ8zZs/B1th+qUeI4v4DAANdJwmBvDK/uTqFzhSs1ySE85LGXwhEWxxuKTDRGcl82pmTe+lDwXA+FyOtMj5OcH5JSQYZTYS2w/l9mugiGjOuO47R8dkPqXDttn5lgFXBp5lBQuaxIqiO7VQmSzfdhivMZ+6ngALEWILNNmzaAdbzpwxY3gHVzERsqojObtt2AazfmA0FandmVZjn3RJFGioc+GRyLUHJfZQNjfkq7hnWhbrQb7Wbjw0j1eHR3KxXJ3c2wCEzQ4uC20LA/EPruDTVQvj4Y1B26lrNs8xCBp4GlHZuanvfwYfPoCAXnGuJrXF0Wj7RCNARREQqmEPMZ68O5RQa/VC5lOlX7AskqDnO/Yma4tQy3boI4z5GuY7ZvorfPeBFKiuVIdKb4zKA7V3YNbO6EnhzAgiTs8WTfBMUnt25srW004vR8o9X80UUfCzJpJrRthG4eQKEDGQqlcbcsGPJkYFM2wqqAoykEEdO5iMb+KSXa3nmocebKriGe6zEajXz4BFVAGDVGPA+GVw4u9brr/Y9ujz/aGW3O1DB6nGe3C6QmXPiBiFEkjVrlX8qTyaPyafm6fFUeT35VHpcvJl9j/ZpNvsDhs/I7HL1i5VPWbjbfZ+W3OPxu8oSVfyr/Zohely9Z+cfJo8mT8hvDiw6WiAi4L3x2XQ0T9mEGNbM6K5+z8g+Q82hK6pR/hXAcTH5ZnpQvfVb+2QC+LZ+XJ0CH+BMQTX5fPpt8VX5fHrPyGyxeEKN/GP2OgfRy8sXksTHiKQmefEWUz2DB5MnkN1DKQLH+HXbPJ19a06AdBP8a/F8B+++GnwPNjsH0JYgeQ9wJw99J+b3hcExemPwWZHTyuDIC0sARxM+B9DUojydf2vy090e3t0M1qnagZCBqsxrFIuS8Cb6FajUNB6pWJi+20WtlMnCcVfReFkRca3aJ1Wy3QaXIVBR1kxozPXkOQSJ5oYg4+lpbryC4IoUmmBYZYqzGqP3sIPhGQwUiShSvF6lgn4plEYWMp6ngGVVdS2HpkTMhG6EeQvuR6vVILyb6fREgz34+lMg+dACOctzjIcqxOOQU0rNabap6bjkEvDB9jHz1+eeoa6bX2tZHBXDFqzOc/xujZdKnfijQ3YuEvDqzvjIULFasmVTz14c8Q311PoECa9vr3a63lpk+E6L7MRSvAaYYPc/9dz43iyiXMF0Y7Jb/ExRRPBtbO9sz+s/eonJdt4KO34K69nearIBnpz/uG//2U2HzN7i581WFcbiI4Z5eVygSKNdmH/fUemFXYetTDE9zW+RJTnAJ4W2UKak7w/Za7Jz3A54Z7+Yir0OPHyJwFp+WufufFfLBA6FtMq2xHcT6pzhyELCYWELMg1SFXbcv9RAxq/kYWYFijcMhgpWbGSxBB0e0jZCrrnvFxsnuLsaBvT3L2AQFJcr6kNLcca4XyG4ehtSPYuo1qZJJrmlrBh1I60z53NnbY1tJNWy67h2oQTOGNvtAZRkSzNL7FQUDxWac5mM7EPAMumUqGfinOJoqZCoI0vS/02yJ1S0fu7uD3Sry8Q1dKeejSI1E6L9B5pi+LjB8mdq2rkLIXzNZZ0rHtD5gdmehoOkBo3xOoJwuh5S7jtJoZ0gUzF7Gs7EZA3qmmoTLdh4w9JYphN67d+8+qOyY6TQarDsdnans3kDmUv9FAUB5sx7GnIbTzFYmOupuWJSWk4iRLR+o1j7RLr131oLeWzaDP8q2iHSH7baWWXuZnV9m7+8t4xxDhhR0vttqNpdZq00/F/GDRoqoOcIryv+mW3tRt2s8m6rW/sGqXTCAi4BVKsF3zqr13OWrMkmLfLVRbdGBQnlgi/GlWpB7VlEsBioKReJphClKeo3JEHDjo9rl1QaILv/npO0ZqQ3iW5m6DyQ9H9tjvj8bqTELinmcUZsKRZ+cmVZkHRMW7L6tEd7mAY9sVPn3tYOpizoh2kfIc+73Zabzuwnea9k5VsPnnD2H9vYYNyf7S+YMfQti6sbdxIIIkA/2uLaCl0ncgHgT/PHWzmkUcrrVDg0Rz7kNYk07hwhrc4VqrIP9No/jcY1usjbTqcYsCL7bt6BKgDG4Qy/JhXCOFi4YWIhAaedhCq3r21sfG1u1oAhEgzQTqsJLNTvgmTTeJTgFF1BoCa/ZQDFv3ZalgHsNqRVksxn5qm2LryQAlxCX7lX0zfo9cDgVb1RXVYaS8cHCW+b0VUDQTB0qFisqf5Qen9paj8v+v7wBO/8E5nwnfA8RAAA= \"\")\n\n##### `persistent`\n\n    --{{0}}--\nLiaScript will destroy all elements when a new slide is opened. As a result, videos and sound stop playing, iframes are purged, etc.\nHowever, some external functionality, such as scripts that modify the DOM, create certain elements, and adapt their behavior, will require their content to persist across slides.\nThis is why the preservation macro was introduced: to maintain all DOM elements on a slide, even though they are hidden when another slide is opened.\n\n``` markdown\n\u003c!--\npersistent: true\n--\u003e\n\n# No slide will be deleted\n```\n\n    --{{1}}--\nThis can be set globally, but you can also adjust the global setting on a per-slide basis.\nBy default, this persistence feature is turned off.\n\n\n      {{1}}\n``` markdown\n...\n\n## Only this slide will be persistent\n\u003c!--\npersistent: true\n--\u003e\n\n...\n\n# Not this\n```\n\n    --{{2}}--\nIf your extension behaves oddly when you leave and re-enter a slide, trying out this option might be the right choice.\n\n\n#### __Helper__\n\n\n##### `uid`\n\n    --{{0}}--\nThis macro is limited to use within the document and cannot be used within the header.\nThere are occasions when it becomes necessary to assign unique identifiers for accessing specific HTML nodes without manually naming each one.\nIn such situations, hidden macros utilizing `@uid` can be quite useful.\nWhen invoked, `@uid` generates a unique identifier each time it is called.\n\n\n```md\n\u003c!--\n@eval: @hidden_eval(@uid,@0)\n\n@hidden_eval\n\u003cscript\u003e\ndocument.getElementById(\"id_@0\").innerHTML = \"@1\"\n\u003c/script\u003e\n\n\u003cdiv id=\"id_@0\"\u003e\u003c/div\u003e\n\n@end\n--\u003e\n\n# Main course\n\n@eval(Hello Mom)\n\n@eval(Hello World)\n```\n\n    --{{1}}--\nIn this example, `@eval` invokes another macro and passes the result of `@uid` as the first parameter.\nThe input of `@0` serves as the second parameter.\nConsequently, `@1` in the second macro call will be replaced with this input.\n\n##### `formula`\n\n    --{{0}}--\nThis is a helper function that enables the definition of custom macros for [KaTeX](https://katex.org) formulas on both a global and local scale.\n\n\u003e For a comprehensive overview, refer to the section:\n\u003e\n\u003e [Formula-Macros](#Formula-Macros).\n\n##### `input`\n\n    --{{0}}--\nThis macro should only be used within script-tags, typically associated with executable code blocks, projects, quizzes, surveys, tasks, and standalone scripts.\nIt serves as a placeholder for the current user input and may yield different results based on the context.\n\n\n* __Tasks:__ [Tasks and Scripting](#Tasks-and-Scripting)\n* __Quizzes:__ [Quizzes and Scripting](#Quizzes-and-Scripting)\n* __Surveys:__ [Surveys and Scripting](#Surveys-and-Scripting)\n* __Executable Code:__ [Interactive Code-Blocks](#Starting-simple)\n* __Stand alone Scripts:__ [JavaScript or JS-Components](#JavaScript-or-JS-Components)\n\n\n##### `output`\n\n    --{{0}}--\nThis macro is specifically intended for use in executable code blocks.\nIt should be added to the last code block in a project's head section to designate a textual output as the default output for execution.\n\n\u003e For further details, please refer to the section titled:\n\u003e\n\u003e [Default `@output`](#Default-@output).\n\n\n## JavaScript or JS-Components\n\n      {{|\u003e UK English Male}}\n\u003e As of the time of writing, I strongly believe that the script tag, introduced by Netscape in 1995 (cf. [Wikipedia](https://en.wikipedia.org/wiki/JavaScript#History)), is often misused.\n\u003e It remains somewhat outside of HTML, but if it could be embedded as part of the DOM, we wouldn't have to search the DOM for IDs and attempt to manipulate the content of a specific node.\n\u003e Much of the work we currently put into the development of Web Components could be achieved more easily by using the script tag in a slightly different manner.\n\n    --{{1}}--\nIn LiaScript, we now have the capability to insert scripts anywhere and connect them using a simple publish-subscribe mechanism.\nThis allows us to create even more interactive books and courses. You can add additional calculations throughout your document, and the internal LiaScript event system handles their execution.\nThis can be viewed as an inverse approach to Jupyter or R Notebooks, where content is structured around code for documentation purposes. Instead, we aim to integrate code as a native element within the content itself.\n\n\n### Script-Evaluation\n\n\n    --{{0}}--\nTo clarify some internals and how LiaScript handles the execution of scripts, let's describe the execution order:\n\n\n\u003c!--\nstyle=\"\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: 600px;\n  fill: red;\n  stroke: green;\" --\u003e\n``` ascii\n +-------------------+\n |     README.md     |\n |                   |\n | ...               |\n |  \u003cscript\u003e     +---+\n |    22*22      |  /\n |  \u003c/script\u003e    | /\n | ...           |/\n +---------------+\n          |\n          |\" {1}{(parse)} \"\n          V\n +-------------------+    \"{3}{`22*22`}\"   +------------------+\n |   \"{2}{(ports)}\"  +--------------------\u003e|   \"JavaScript \"  |\n |                   |                     |                  |\n | \" LiaScript/Elm \" |\u003c--------------------+   \"{4}{(eval)}\"  |\n +-------------------+    \"{5}{`484`}\"     +------------------+\n```\n\n\n    --{{1}}--\nAfter parsing the script tag, LiaScript does not execute it directly.\nInstead, it is stored internally along with any possible output and connections to other scripts within an execution graph.\n\n    --{{2}}--\nSince LiaScript is implemented in Elm and Elm cannot directly execute JavaScript code, LiaScript uses a specific port to communicate with the outside world.\n\n    --{{3}}--\nWhen a script is ready, its code is sent as a string to the outside JavaScript world.\nLiaScript controls when and which code gets executed.\n\n    --{{4}}--\nThe code is then evaluated.\n\n    --{{5}}--\nThe result is sent back as a string to LiaScript.\nThis string can be a certain value, HTML code, or even in LiaScript notation, which is then parsed internally again and displayed.\n\n\n#### Simple scripts \u0026 scope\n\n    --{{0}}--\nIn its essence, a script is an inline element of LiaScript, similar to **bold**, _italic_ text, or inline formulas.\nIt performs simple calculations and prints its result exactly where the script is defined:\n\n``` markdown\n$ \\sin(\\frac{\\pi}{2}) = $ \u003cscript\u003eMath.sin(Math.PI / 2)\u003c/script\u003e\n```\n\n$ \\sin(\\frac{\\pi}{2}) = $ \u003cscript\u003eMath.sin(Math.PI / 2)\u003c/script\u003e\n\n\n      {{1}}\n\u003csection\u003e\n\n    --{{1}}--\nThat is the basic idea, nothing more and nothing less.\nThe final \"result\" or expression of a script defines its output.\nThus, the script with the alert gets executed, but it does not appear within the document, since `alert` evaluates to `undefined`.\nIn this case, the script is expected to be hidden, without any visualization within the document.\n\n``` html\n\u003cscript\u003e\nvar a = 22**3\n\nalert(\"Hello Mom\")\n\u003c/script\u003e\n```\n\n\u003cscript\u003e\nvar a = 22**3\n\nalert(\"Hello Mom\")\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n      {{2}}\n\u003csection\u003e\n\n    --{{2}}--\nSuch hidden scripts can be useful to trigger only an execution or to perform a certain action for manipulating the DOM or simply some maintenance work.\n\n``` html\n\u003cscript\u003e\ndocument.getElementById(\"example\").innerHTML = \"Did execute\"\nconsole.log(\"executed script\")\n\u003c/script\u003e\n\n\u003ch1 id=\"example\"\u003eNot executed\u003c/h1\u003e\n```\n\n---\n\n\u003cscript\u003e\ndocument.getElementById(\"example\").innerHTML = \"Did execute\"\nconsole.log(\"executed script\")\n\u003c/script\u003e\n\n\u003ch1 id=\"example\"\u003eNot executed\u003c/h1\u003e\n\n\u003c/section\u003e\n\n      {{3}}\n\u003csection\u003e\n\n    --{{3}}--\nEvery script is executed in its own local scope, which means that the variable `a` defined in the \"Hello Mom\" example cannot be accessed in another script.\nThus, if an error occurs, the error message is shown as a result of the evaluation.\n\n``` html\n\u003cscript\u003e a * 33 \u003c/script\u003e\n```\n\n---\n\n\u003cscript\u003e a * 33 \u003c/script\u003e\n\n\u003c/section\u003e\n\n      {{4}}\n\u003csection\u003e\n\n    --{{4}}--\nIf you wish to exchange information between scripts using variables, you must define them globally.\n\n``` html\n\u003cscript\u003e window.a = 22 ** 3 \u003c/script\u003e\n\n\u003cscript\u003e window.a / 2 \u003c/script\u003e\n```\n\n\u003cscript\u003e window.a = 22 ** 3 \u003c/script\u003e\n\n\u003cscript\u003e window.a / 2 \u003c/script\u003e\n\n\n    --{{5}}--\nIf you were to reverse the order of the two scripts, dividing `a` by two would still result in the same error message, as scripts are executed sequentially and `a` must be defined first.\nOnly after revisiting this slide, when both scripts are executed again, will the result of both scripts be correct.\nHowever, LiaScript sends all scripts to JavaScript in order, and while some scripts may execute faster than others, this can lead to race conditions.\nTherefore, there is a better approach to updating scripts, as described in section [Connecting Scripts with output](#Connecting-Scripts-with-output).\n\n\u003c/section\u003e\n\n\n#### Combination with Animations\n\n    --{{0}}--\nYou can combine scripts with LiaScript animations to trigger their execution.\nIn textbook mode, all scripts will be executed after the slide has been loaded.\nIn other modes, if a script does not belong to an animation, it will be executed immediately when you open the slide or whenever you visit the slide.\n\n``` html\n\u003cscript\u003ealert(\"0\")\u003c/script\u003e\n\n{{1}} \u003cscript\u003ealert(\"1\")\u003c/script\u003e\n\n{{2}} \u003cscript\u003ealert(\"2\")\u003c/script\u003e\n\n{{3}} \u003cscript\u003ealert(\"3\")\u003c/script\u003e\n```\n\n\u003cscript\u003ealert(\"0\")\u003c/script\u003e\n\n{{1}} \u003cscript\u003ealert(\"1\")\u003c/script\u003e\n\n{{2}} \u003cscript\u003ealert(\"2\")\u003c/script\u003e\n\n{{3}} \u003cscript\u003ealert(\"3\")\u003c/script\u003e\n\n\n\n### Asynchronous Execution \u0026 API\n\n    --{{0}}--\nA script gets executed, but you need to make an asynchronous call to an external API.\nHow could you handle this?\nWell, in this case, LiaScript provides a `send` object for every execution, which can be used to directly communicate with the script state in the Elm world.\nBy using `send.lia`, you can directly send strings back from every asynchronous execution path.\n\n\n\n``` markdown\n\u003cscript\u003e\nsetTimeout(function(){\n  send.lia(\"I am ready!\")\n}, 5000)\n\n\"will wait for 5 seconds\"\n\u003c/script\u003e\n```\n\n\u003cscript\u003e\nsetTimeout(function(){\n  send.lia(\"I am ready!\")\n}, 5000)\n\n\"will wait for 5 seconds\"\n\u003c/script\u003e\n\n\n#### Execution State\n\n    --{{0}}--\nEvery script maintains an internal state.\nLiaScript is aware of which scripts have already been executed and which are still in the process of a long calculation.\nIf a script returns a result or if `send.lia` is called, then the internal execution state is marked as inactive, which will trigger a new execution when the slide is revisited.\nHence, a long-running script will not be restarted until it is finished.\nThus, the previous example was not fully correct.\n\n\n    --{{1}}--\nIf you would like to create, for example, a clock or a running counter, every revisit would create a new script that might run forever, and all of these would communicate with the Elm part, resulting in glitches.\nHowever, like in the case of [executable code blocks](#send-object), there are different options that can be used to communicate with the internal representation.\nBy returning `\"LIA: wait\"`, the LiaScript script state is informed that although the execution has finished, the process is still running.\nSince `send.lia` would mark an internal stop, you can use `send.output` to change the output asynchronously.\n\n\n      {{1}}\n``` markdown\n\u003cscript\u003e\nsetInterval(function(){\n  i++\n  send.output(\"counting \" + i)\n}, 1000)\n\nvar i = 0\n\n\"LIA: wait\"\n\u003c/script\u003e\n```\n\n    --{{2}}--\nThat's it.\nThis script will run indefinitely, and it will not trigger a new evaluation because LiaScript keeps its internal state marked as active.\n\n      {{2}}\n\u003cscript\u003e\nsetInterval(function(){\n  i++\n  send.output(\"counting \" + i)\n}, 1000)\n\nvar i = 0\nsend.wait()\n\u003c/script\u003e\n\n      {{3}}\n\u003csection\u003e\n\n    --{{3}}--\nHowever, you can trigger a stop after a long run by either calling `send.lia` again, which will also alter the result of the script representation, or you can send it a stop command, which is equivalent to sending `\"LIA: stop\"`.\nThis stop command does not affect the last representation but only the state.\nThis script will be started again when the user revisits the slide.\n\n``` html\n\u003cscript\u003e\nvar timerId = setInterval(function(){\n  i++\n  send.output(\"counting \" + i)\n\n  if (i \u003e 10) {\n    clearInterval(timerId);\n    send.stop()\n    // shortcut for send.lia(\"LIA: stop\")\n  }\n}, 1000)\n\nvar i = 0\nsend.wait() // equal to send.lia(\"LIA: wait\")\n\u003c/script\u003e\n```\n\n\u003cscript\u003e\nvar timerId = setInterval(function(){\n  i++\n  send.output(\"counting \" + i)\n\n  if (i \u003e 10) {\n    clearInterval(timerId);\n    send.stop()\n    // shortcut for send.lia(\"LIA: stop\")\n  }\n}, 1000)\n\nvar i = 0\nsend.wait() // equal to send.lia(\"LIA: wait\")\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n    --{{4}}--\nIn summary, you have three possibilities to send updates from your script: `send.lia` and `send.output`, while the second is used asynchronously and won't stop the active state.\nThe three additional helper functions are simple shortcuts to inform LiaScript about state changes.\n\n\n      {{4}}\n* `send.lia`\n* `send.output`\n* `send.wait` --\u003e `\"LIA: wait\"`\n* `send.stop` --\u003e `\"LIA: stop\"`\n* `send.clear` --\u003e `LIA: clear`\n\n\n### Different Representations\n\n    --{{0}}--\nBut it is not only possible to send back strings; well, technically it is still the case, but the strings might be represented differently.\nLiaScript allows the display of HTML and LiaScript code as well, which is then re-parsed and thus allows for the recreation of nested structures as well.\n\n\u003cdiv style=\"width:100%;height:0;padding-bottom:71%;position:relative;\"\u003e\u003ciframe src=\"https://giphy.com/embed/fwbZnTftCXVocKzfxR\" width=\"100%\" height=\"100%\" style=\"position:absolute\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen\u003e\u003c/iframe\u003e\u003c/div\u003e\u003cp\u003e\u003ca href=\"https://giphy.com/gifs/PLCnext-plcnext-phoenixcontact-plcnexttechnology-fwbZnTftCXVocKzfxR\"\u003evia GIPHY\u003c/a\u003e\u003c/p\u003e\n\n#### `HTML:`\n\n    --{{0}}--\nThis first approach does obviously not work.\nLiaScript does not parse and interpret the return value on demand, instead, everything is interpreted and displayed as a string:\n\n``` markdown\n\u003cscript\u003e\"\u003cmarquee\u003eThis text will scroll from right to left\u003c/marquee\u003e\"\u003c/script\u003e\n```\n\n\u003cscript\u003e\"\u003cmarquee\u003eThis text will scroll from right to left\u003c/marquee\u003e\"\u003c/script\u003e\n\n    --{{1}}--\nInstead, we have to start the return string with `HTML:`, followed by whatever HTML code there is.\nYes, we can style a script tag in our case, since it is commonly displayed only as an inline parameter.\nThus, we can change its appearance to let the marquee tag use the full line width, and by using `modify`, we can prevent the user from inspecting the code, which also gets rid of the background.\n\n      {{1}}\n\u003csection\u003e\n\n``` markdown\n\u003cscript\n  style=\"display: block\"\n  modify=\"false\"\n\u003e\n\"HTML: \u003cmarquee\u003eThis text will scroll from right to left\u003c/marquee\u003e\"\n\u003c/script\u003e\n```\n\n\u003cscript style=\"display: block\" modify=\"false\"\u003e\"HTML: \u003cmarquee\u003eThis text will scroll from right to left\u003c/marquee\u003e\"\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n    --{{2}}--\nOf course, the following example could be optimized, but it is used to showcase the fact that it is also possible to mark strings as `HTML` by using `send.lia` or `send.output` for asynchronous tasks as well.\nIn this case, not only the time is updated, but also the color is set to a random value.\n\n\n      {{2}}\n\u003csection\u003e\n\n``` html\n\u003cscript\u003e\nfunction randomColor() {\n    return '#' + Math.floor(Math.random() * 16777215).toString(16);\n}\n\nfunction getTime() {\n  const now = new Date();\n  const hours = now.getHours().toString().padStart(2, '0');\n  const minutes = now.getMinutes().toString().padStart(2, '0');\n  const seconds = now.getSeconds().toString().padStart(2, '0');\n\n  send.output(`HTML:\n  \u003cdiv style=\"font-size: 6rem;\n    letter-spacing: 1rem;\n    font-weight: bold;\"\u003e\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${hours}\u003c/span\u003e :\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${minutes}\u003c/span\u003e :\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${seconds}\u003c/span\u003e\n  \u003c/div\u003e`)\n}\n\nsetInterval(getTime, 1000)\n\nsend.wait()\n\u003c/script\u003e\n```\n\n\u003cscript\u003e\nfunction randomColor() {\n    return '#' + Math.floor(Math.random() * 16777215).toString(16);\n}\n\nfunction getTime() {\n  const now = new Date();\n  const hours = now.getHours().toString().padStart(2, '0');\n  const minutes = now.getMinutes().toString().padStart(2, '0');\n  const seconds = now.getSeconds().toString().padStart(2, '0');\n\n  send.output(`HTML:\n  \u003cdiv style=\"font-size: 6rem;\n    letter-spacing: 1rem;\n    font-weight: bold;\"\u003e\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${hours}\u003c/span\u003e :\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${minutes}\u003c/span\u003e :\n    \u003cspan style=\"color: ${randomColor()}; background: white; border-radius: 5px;\"\u003e${seconds}\u003c/span\u003e\n  \u003c/div\u003e`)\n}\n\nsetInterval(getTime, 1000)\n\nsend.wait()\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n#### `LIASCRIPT:`\n\n    --{{0}}--\nSimilar to `HTML`, it is also possible to return LiaScript content as a simple string, which is then parsed and its result gets displayed.\nIn this example, for the formula, the backslash has to be escaped instead of escaping the `\\f`, which does not make sense.\nThe `run-once` option can be set to prevent the script from recalculating and thus re-parsing the result again and again. When this option is set, the execution is done only once, and the result is statically stored within LiaScript.\n\n``` html\n\u003cscript run-once\u003e\"LIASCRIPT: $$\\\\frac{1}{x} = 0$$\"\u003c/script\u003e\n```\n\n\u003cscript run-once\u003e\"LIASCRIPT: $$\\\\frac{1}{x} = 0$$\"\u003c/script\u003e\n\n\n    --{{1}}--\nOn the other hand, this can also contain more complex elements, such as tables, which can be modified and inspected interactively.\n\n      {{1}}\n\u003csection\u003e\n\n``` html\n\u003cscript style=\"display: block\" run-once\u003e\n`LIASCRIPT:\n\u003c!-- data-show --\u003e\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |`\n\u003c/script\u003e\n```\n\n\u003cscript style=\"display: block\" run-once\u003e\n`LIASCRIPT:\n\u003c!-- data-show --\u003e\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |        0.028 |              2 |      95 |\n| Flying squirrel |        0.085 |             15 |      50 |\n| Brown bat       |        0.020 |             30 |      10 |\n| Sheep           |           90 |             12 |      95 |\n| Human           |           68 |             70 |      10 |`\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n    --{{2}}--\nThis way, you could also generate new quizzes randomly, add executable code snippets, and even generate scripts dynamically.\nHowever, in the case of dynamically created LiaScript content, the state of quizzes, code, etc. is not stored permanently within the browser's IndexedDB.\nThis is only possible for elements that are defined explicitly within the markdown document.\n\n      {{2}}\n\u003csection\u003e\n\n``` html\n\u003cscript style=\"display: block\" modify=\"false\"\u003e\n// Generate two random numbers between 0 and 40\nvar a = Math.floor(Math.random() * 41);\nvar b = Math.floor(Math.random() * 41);\n\n// Ensure b is not greater than a\nif (b \u003e a) {\n  const temp = a;\n  a = b;\n  b = temp;\n}\n\n`LIASCRIPT: __What is ${a} - ${b} ?__\n\n[[ ${ a - b } ]]`\n\u003c/script\u003e\n```\n\n\u003cscript style=\"display: block\" modify=\"false\"\u003e\n// Generate two random numbers between 0 and 40\nvar a = Math.floor(Math.random() * 41);\nvar b = Math.floor(Math.random() * 41);\n\n// Ensure b is not greater than a\nif (b \u003e a) {\n  const temp = a;\n  a = b;\n  b = temp;\n}\n\n`LIASCRIPT: __What is ${a} - ${b} ?__\n\n[[ ${ a - b } ]]`\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n    --{{3}}--\nJust think about the possibilities.\nWe can not only create courses using AI, as described in the article, but we could also dynamically generate new quizzes, programming tasks, or discuss topics directly in LiaScript.\n\n      {{3}}\n\u003e __Act as a Learning Designer — Getting ChatGPT to Generate an Online Module__\n\u003e\n\u003e Source: https://aneesha.medium.com/act-as-a-learning-designer-getting-chatgpt-to-generate-an-online-module-8a16a2813bd6\n\u003e\n\u003e -- by Aneesha Bakharia\n\n\n    --{{4}}--\nWhat is missing too is to interconnect scripts and utilize different input methods to generate different interactive scenarios, as it was done in the initial weather API example.\nHere we had also applied the simple `send` object, but the two scripts at the head are connected with an input range and publish their results on a topic defined within the `output` parameter.\nOn every change, the evaluation of the third script is triggered, and the two `@input` markers are replaced accordingly.\n\n      {{4}}\n\u003csection\u003e\n\n``` markdown\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"waiting for the weather\"\n\u003c/script\u003e\n```\n\n---\n\nlongitude: \u003cscript default=\"13.33125\" input=\"range\" output=\"longitude\"\u003e@input\u003c/script\u003e\n\nlatitude: \u003cscript default=\"50.92558\" input=\"range\" output=\"latitude\"\u003e@input\u003c/script\u003e\n\n\u003cscript run-once=\"true\" style=\"display: block\"\u003e\n  fetch(\"https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)\u0026longitude=@input(`longitude`)\u0026hourly=temperature_2m\")\n    .then(response =\u003e response.json())\n    .then(data =\u003e {\n      let table = \"\u003c!-- data-show data-type='line' data-title='Open-Meteo weather API' --\u003e\\n\"\n\n      table += \"| Time | Temperature |\\n\"\n      table += \"| ---- | ----------- |\\n\"\n\n      for (let i=0; i \u003c data.hourly.time.length; i++) {\n        table += \"| \" + data.hourly.time[i] + \" | \" + data.hourly.temperature_2m[i] + \" |\\n\"\n      }\n      send.lia(\"LIASCRIPT: \"+table) }\n    )\n    .catch(e =\u003e {\n      send.lia(\"ups, something went wrong\")\n    })\n  \"LIA: wait\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n    --{{5}}--\nThus, in the next section, we will introduce the combination of scripts and different input types, and afterwards, the \"pub-sub\" mechanism used to trigger a reevaluation.\n\n\n### Input Types\n\n    --{{0}}--\nUsing only static scripts can be boring. We want to interact with the scripts and pass input values.\nIn LiaScript, this is achieved through a combination of script tags with input tags.\nSimply add the parameter `input` with additional type information to the script tag.\n\n``` html\n\u003cscript input value=\"reverse\"\u003e\nlet str = \"@input\"\n// the input string gets reversed\nstr.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n```\n\n\n    --{{1}}--\nScripts that are combined with an input are marked by a thin frame.\nYou can click on them and change the input.\nDifferent inputs produce different outputs and might trigger the execution slightly differently.\n\n      {{1}}\n\u003cscript input value=\"reverse\"\u003e\nlet str = \"@input\"\n// the input string gets reversed\nstr.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n\n    --{{2}}--\nText inputs are evaluated immediately on every change.\nAs you can see, after changing the input, such scripts store two states: the input value and the output of the calculation.\nBoth values might be completely different.\n\n\n        {{3}}\n\u003e     --{{3}}--\n\u003e All possible types defined by the HTML5 standard can be used, along with their specific parameters.\n\u003e These are automatically passed to the generated input:\n\u003e\n\u003e https://www.w3schools.com/tags/tag_input.asp\n\n\n#### `text`\n\n    --{{0}}--\nThis is also the default input.\nIt demonstrates the usage of the `@input` macro, which defines the location where the current input value should be placed.\nSince the input could be interpreted as a string in `\"\"` or used as part of your code, you have to decide how to treat it.\nThe attribute `value` is used as the default initial input for your script during the first execution.\nIf no `value` is defined, then the default input is an empty string.\n\n``` html\n\u003cscript input=\"text\" value=\"reverse\"\u003e\nlet str = \"@input\"\n// the input string gets reversed\nstr.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n```\n\n\u003cscript input=\"text\" value=\"reverse\"\u003e\nlet str = \"@input\"\nstr.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about text inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_text.asp\n\n\n#### `button`\n\n    --{{0}}--\nThe code depicted below will implement a simple clickable button.\nAs for all other script input combinations, except `submit`, the script execution will also be triggered when the script is loaded, to generate an output and afterwards on every click.\n\n\n``` html\n\u003cscript input=\"button\"\u003e\nalert(\"click\")\n\n\"click me\"\n\u003c/script\u003e\n```\n\n---\n\n\u003cscript input=\"button\"\u003e\nalert(\"click\")\n\n\"click me\"\n\u003c/script\u003e\n\n\n      {{1}}\n\u003e For more information about the button input see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_button.asp\n\n#### `submit`\n\n    --{{0}}--\nSimilar to a `button` input, as described in section [button](#button), but with one intentional difference.\nThe script of a `submit` input will not be executed when it initially appears; instead, it will only be executed if the user clicks on the button.\nLike `button`, `submit` does not have an internal value, only an output, and can be used to activate other scripts.\nTherefore, a default value must be defined initially, which also serves as the default output.\nThis default value is used during parsing; for example, if a table is parsed with some scripts within the cells, then this value is used as a hint to identify the appropriate visualization.\n\n\n\n``` html\n\u003cscript input=\"submit\" default=\"click me\"\u003e\nalert(\"click\")\nMath.random()\n\u003c/script\u003e\n```\n\n\u003cscript input=\"submit\" default=\"click me\"\u003e\nalert(\"click\")\nMath.random()\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about the submit input see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_submit.asp\n\n#### `number`\n\n    --{{0}}--\nThe number input is similar to text, but only numbers are allowed as input, and you can set additional parameters such as `min`, `max`, and `step`.\n\n``` markdown\n\u003cscript input=\"number\" value=\"1\" min=\"0\" max=\"1000000\"\u003e\nlet i = @input // direct usage as a number\n\n\"Square of \" + i + \" = \" + i * i\n\u003c/script\u003e\n```\n\n\u003cscript input=\"number\" value=\"1\" min=\"0\" max=\"1000000\"\u003e\nlet i = @input\n\n\"Square of \" + i + \" = \" + i * i\n\u003c/script\u003e\n\n\n      {{1}}\n\u003e For more information about number inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_number.asp\n\n\n#### `range`\n\n    --{{0}}--\nThe range input is actually a slider that generates numbers as input, and you can set additional parameters such as `min`, `max`, and `step`.\n\n``` markdown\n\u003cscript input=\"number\" value=\"1\" min=\"0\" max=\"1000\" step=\"0.1\"\u003e\nlet i = @input // direct usage as a number\n\n\"Square of \" + i + \" = \" + i * i\n\u003c/script\u003e\n```\n\n\u003cscript input=\"range\" value=\"0\" min=\"0\" max=\"360\" step=\"0.1\"\u003e\nlet i = @input\n\n\"Sinus of \" + i + \" = \" + Math.sin(i)\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about range inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_range.asp\n\n\n\n#### `search`\n\n    --{{0}}--\nThe search input is actually a text input, but unlike regular text inputs, the script associated with it is only executed after the input field loses focus.\n\n``` markdown\n\u003cscript input=\"search\" value=\"abcdefg\"\u003e\nlet str = \"@input\"\n\n\"reverse of \\\"\" + str + \"\\\" -\u003e \" + str.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n```\n\n\u003cscript input=\"search\" value=\"abcdefg\"\u003e\nlet str = \"@input\"\n\n\"reverse of \\\"\" + str + \"\\\" -\u003e \" + str.split(\"\").reverse().join(\"\")\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about search inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_search.asp\n\n\n#### `password`\n\n    --{{0}}--\nThe password input is also a text input, but unlike regular text inputs, the input characters are not directly visible.\nSimilar to the search input, the script associated with it is only executed after the input field loses focus.\n\n``` markdown\n\u003cscript input=\"password\"\u003e\nlet password = \"@input\"\n\nif (password == \"LiaScript\") {\n  \"You got it!\"\n} else {\n  \"please enter the correct password\"\n}\n\u003c/script\u003e\n```\n\n\u003cscript input=\"password\"\u003e\nlet password = \"@input\"\n\nif (password == \"LiaScript\") {\n  \"You got it!\"\n} else {\n  \"please enter the correct password\"\n}\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about password inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_password.asp\n\n\n#### `radio`\n\n    --{{0}}--\nIn contrast to the common usage of radio buttons, which requires the definition of multiple radio inputs, LiaScript achieves the same with the `radio` input type and the definition of the `options` parameter.\nAll possible options are separated by `|`.\nThus, the user can only select one of the defined options.\n\n``` html\n\u003cscript\ninput=\"radio\" value=\"1\"\noptions=\"1|2|3|Hello World|true\"\n\u003e\n\"Selected option: @input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"radio\" value=\"1\" options=\"1|2|3|Hello World|true\"\u003e\n\"Selected option: @input\"\n\u003c/script\u003e\n\n      {{1}}\n\u003e `options` is not a standard HTML parameter, for more information on radio\n\u003e inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_radio.asp\n\n#### `select`\n\n\n    --{{0}}--\n`select` is not actually an input type, but we added it since it allows performing the same task as radio buttons, but with a representation as a drop-down list.\nThe usage of `options` and their separation by `|` is similar to radio buttons.\n\n``` html\n\u003cscript\ninput=\"select\" value=\"1\"\noptions=\"1|2|3|Hello World|true\"\n\u003e\n\"Selected option: @input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"select\" value=\"1\" options=\"1|2|3|Hello World|true\"\u003e\n\"Selected option: @input\"\n\u003c/script\u003e\n\n    {{1}}\n\u003e `options` is not a standard HTML parameter, for more information on the select tag see:\n\u003e\n\u003e https://www.w3schools.com/tags/tag_select.asp\n\n\n#### `checkbox`\n\n    --{{0}}--\nCheckboxes, unlike radio buttons or select, allow you to select multiple elements at once or none.\nIf no options are defined, a checkbox is treated as a single input that switches between true and false, depending on whether the checkbox is checked or not.\n\n``` html\n\u003cscript input=\"checkbox\" value=\"true\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"checkbox\" value=\"true\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n\n    --{{1}}--\nIf you define `options`, the current value as well as the result are treated as a list of strings in JSON format.\n\n      {{1}}\n\u003csection\u003e\n\n``` html\n\u003cscript input=\"checkbox\" value='[\"Ben\"]' options=\"Ben|Jerry|Tom|Hardy\" \u003e\n@input\n\u003c/script\u003e\n```\n\n\u003cscript input=\"checkbox\" value='[\"Ben\"]' options=\"Ben|Jerry|Tom|Hardy\" \u003e\n@input\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n\n    --{{2}}--\nThis might not be sufficient or readable; therefore, it is also possible to define formats for outputs (see section [Formatting with Intl](#Internationalization-API)).\nThe `list` format, for example, allows you to add language-specific textual formatting for lists.\nIf you do not specify locale information, the document language is used as a default.\n\n      {{2}}\n\u003csection\u003e\n\n``` html\n\u003cscript\n  input=\"checkbox\"\n  value='[\"Ben\", \"Jerry\", \"Tom\"]'\n  options=\" Ben | Jerry | Tom | Hardy \"\n\n  format=\"list\" locale=\"en\"\n\u003e\n  let list = @input\n\n  if (list.length == 0)\n    [\"no one\"]\n  else\n    list\n\u003c/script\u003e\n```\n\n\u003cscript\n  input=\"checkbox\"\n  value='[\"Ben\", \"Jerry\", \"Tom\"]'\n  options=\" Ben | Jerry | Tom | Hardy \"\n\n  format=\"list\" locale=\"en\"\n\u003e\n  let list = @input\n\n  if (list.length == 0)\n    [\"no one\"]\n  else\n    list\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n    {{3}}\n\u003e For more information about checkbox inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_checkbox.asp\n\n\n#### __Date \u0026 Time__\n\n\n##### `date`\n\n    --{{0}}--\nDate offers a datepicker. The normal return value is a string in the format `YYYY-MM-DD` (Year-Month-Day), but it is also possible to customize this output according to language-specific formats.\n\n``` html\n\u003cscript input=\"date\" value=\"2020-10-10\"\n        format=\"datetime\" locale=\"de\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"date\" value=\"2020-10-10\" format=\"datetime\" locale=\"de\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n\n    --{{1}}--\nWell, this does not look as good as we would expect it in a nicely written text, so let's change it by using the Internationalization API to a nicely formatted French date:\n\n      {{1}}\n\u003csection\u003e\n\n``` html\n\u003cscript input=\"date\" value=\"2020-10-10\"\n        format=\"datetime\" locale=\"fr\"\n        dateStyle=\"full\"  timeZone=\"Australia/Sydney\"\n\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"date\" value=\"2020-10-10\"\n        format=\"datetime\" locale=\"fr\"\n        dateStyle=\"full\"  timeZone=\"Australia/Sydney\"\n\u003e\n\"@input\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n      {{2}}\n\u003e For more information about date inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_date.asp\n\n\n##### `datetime-local`\n\n    --{{0}}--\nDatetime-local includes both the date and time.\nThe standard return format is `YYYY-MM-DDTHH:MM` (Year-Month-DayTHour:Minutes).\nThe execution is triggered on every change.\n\n``` html\n\u003cscript input=\"datetime-local\" value=\"2020-11-20T12:30\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"datetime-local\" value=\"2020-11-20T12:30\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n    --{{1}}--\nAnd, of course, it is also possible to format time and date in various ways:\n\n      {{1}}\n\u003csection\u003e\n\n``` html\n\u003cscript input=\"datetime-local\"\n        value=\"2020-11-20T12:30\"\n        format=\"datetime\"\n        locale=\"en\"\n        dateStyle='full'\n        timeStyle='short'\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"datetime-local\"\n        value=\"2020-11-20T12:30\"\n        format=\"datetime\"\n        dateStyle='full'\n        timeStyle='short'\u003e\n\"@input\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n      {{2}}\n\u003e For more information about datetime-local inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_datetime-local.asp\n\n\n##### `time`\n\n    --{{0}}--\nLast but not least, a time picker, which could also be formatted in various ways, not only as a timestamp, but also as a difference in seconds, minutes, or hours.\nI leave this to the interested reader to try to find a solution.\n\n``` html\n\u003cscript input=\"time\" value=\"11:30\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"time\" value=\"11:30\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about time inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_time.asp\n\n\n##### `month`\n\n``` html\n\u003cscript input=\"month\" value=\"1999-12\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"month\" value=\"1999-12\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n\u003e For more information about month inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_month.asp\n\n##### `week`\n\n\n``` html\n\u003cscript input=\"week\" value=\"2020-W40\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"week\" value=\"2020-W40\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n\u003e For more information about week inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_week.asp\n\n\n\n#### `email`\n\n    --{{0}}--\nIt defines a field for an email address.\nThe input value is checked, and an info message is presented to ensure a properly formatted email address.\n\n``` html\n\u003cscript input=\"email\" placeholder=\"please your Email\"\u003e\nlet email = \"@input\"\n\nif (email) {\n  email\n} else {\n  \"email\"\n}\n\u003c/script\u003e\n```\n\n\u003cscript input=\"email\" placeholder=\"please your Email\"\u003e\nlet email = \"@input\"\n\nif (email) {\n  email\n} else {\n  \"email\"\n}\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about email inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_email.asp\n\n\n#### `url`\n\n    --{{0}}--\nThis input is similar to a search input, as the script execution is triggered only after pressing enter or when the input loses focus.\n\n``` html\n\u003cscript input=\"url\" value=\"url\"\u003e\n\"@input\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"url\" value=\"url\"\u003e\n\"@input\"\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about url inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_url.asp\n\n\n#### `tel`\n\n    --{{0}}--\nAn input field for telephone numbers. The script is also only executed after the input, not on every change.\n\n``` html\n\u003cscript input=\"tel\"\n    pattern=\"[0-9]{3}-[0-9]{2}-[0-9]{3}\"\n    placeholder=\"123-45-678\"\n\u003e\nlet tel = \"@input\"\n\nif (tel) {\n  tel\n} else {\n  \"tel\"\n}\n\u003c/script\u003e\n```\n\n\u003cscript input=\"tel\" pattern=\"[0-9]{3}-[0-9]{2}-[0-9]{3}\" placeholder=\"123-45-678\"\u003e\nlet tel = \"@input\"\n\nif (tel) {\n  tel\n} else {\n  \"tel\"\n}\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about tel inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_tel.asp\n\n\n\n\n\n#### `hidden`\n\n    --{{0}}--\nThis type is special, as it does not produce any visible output.\nHowever, as shown in section [Connecting Scripts with `output`](#Connecting-Scripts-with-output), it can be used to hide complex intermediate calculations that might be used by various different elements as input.\n\n``` html\n\u003cscript input=\"hidden\"\u003e\n{value: 12, height: \"12px\", points: 123.12}\n\u003c/script\u003e\n```\n\n#### `color`\n\n    --{{0}}--\nDefines a color picker.\nThe normal return value has the format `#RRGGBB` (red, green, blue).\nThe numeric values are defined in hexadecimal ranging from `00` to `FF`.\n\n```html\n\u003cscript input=\"color\" value=\"#FF0000\"\u003e\n\"HTML: \u003cb style='color:@input'\u003e@input\u003c/b\u003e\"\n\u003c/script\u003e\n```\n\n\u003cscript input=\"color\" value=\"#FF0000\"\u003e\n\"HTML: \u003cb style='color:@input'\u003e@input\u003c/b\u003e\"\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about color inputs see:\n\u003e\n\u003e https://www.w3schools.com/tags/att_input_type_color.asp\n\n\n\n\n#### `textarea`\n\n    --{{0}}--\nThis is not an input type, but instead the application of the textarea HTML element. This can be used to edit more complex multiline strings.\nThe script is only executed after the element has lost focus.\n\n``` html\n\u003cscript input=\"textarea\" value=\"\u003cspan style='font-size: 32px'\u003ehallo\u003c/span\u003e\" style=\"width:100%\"\u003e\n`HTML: @input`\n\u003c/script\u003e\n```\n\n\u003cscript input=\"textarea\" value=\"\u003cspan style='font-size: 32px'\u003ehallo\u003c/span\u003e\" style=\"width:100%\"\u003e\n`HTML: @input`\n\u003c/script\u003e\n\n      {{1}}\n\u003e For more information about textareas see:\n\u003e\n\u003e https://www.w3schools.com/tags/tag_textarea.asp\n\n\n#### __Not supported__\n\nCurrently not supported input types:\n\n* `file`\n* `image`\n\n\n### Connecting Scripts with `output`\n\n    --{{0}}--\nYou can use the `output=\"channel-name\"` parameter to define a dedicated channel on which the script publishes its changed outputs.\nOther scripts can subscribe to these changes via `input(`channel-name`)`, but the channel name has to be enclosed in Markdown-style backticks, as depicted below.\n\n\n``` html\n\u003cscript input=\"checkbox\" value=\"true\" output=\"P\" default=\"true\"\u003e\n@input\n\u003c/script\u003e\nAND\n\u003cscript input=\"checkbox\" value=\"false\" output=\"Q\" default=\"false\"\u003e\n@input\n\u003c/script\u003e\n--\u003e\n\u003cscript\u003e\n@input(`P`) \u0026\u0026 @input(`Q`)\n\u003c/script\u003e\n```\n\n    --{{1}}--\nWhen a script is executed, `@input` gets replaced by the current value of the script, while input markers with topics are replaced by the actual displayed output from other scripts. Every change in the result of one script causes an update of the script that uses the foreign output.\n\n      {{1}}\n\u003cscript input=\"checkbox\" value=\"true\" output=\"P\" default=\"true\"\u003e\n@input\n\u003c/script\u003e\nAND\n\u003cscript input=\"checkbox\" value=\"false\" output=\"Q\" default=\"false\"\u003e\n@input\n\u003c/script\u003e\n--\u003e\n\u003cscript\u003e\n@input(`P`) \u0026\u0026 @input(`Q`)\n\u003c/script\u003e\n\n    --{{2}}--\nNote that formatting is only performed on the displayed representation and does not affect the actual input and output values.\n\n#### `default` \u0026 Execution-Graphs\n\n    --{{0}}--\nIf you connect scripts, ideally the connections should form a directed graph without cycles. However, if desired, you can create cycles that continue until the results no longer change.\n\n``` html\n\u003cscript input=\"range\" value=\"1\" default=\"1\" output=\"x\"\u003e\nsetTimeout(function(){\n  send.lia( @input * @input(`y`) )\n}, 1000)\n\nsend.wait()\n\u003c/script\u003e\n\u003c--\u003e\n\u003cscript input=\"number\" value=\"1\" default=\"1\" output=\"y\"\u003e\nsetTimeout(function(){\n  send.lia( @input - @input(`x`) )\n}, 1000)\n\nsend.wait()\n\u003c/script\u003e\n```\n\n    --{{1}}--\nThe `default` parameter is used to define the default output of this script. Without it, the initial calculation would result in an error due to the circular dependency, as the scripts require the outputs of each other, which cannot be calculated initially.\n\n      {{1}}\n\u003cscript input=\"range\" value=\"1\" default=\"1\" output=\"x\"\u003e\nsetTimeout(function(){\n  send.lia( @input * @input(`y`) )\n}, 1000)\n\nsend.wait()\n\u003c/script\u003e\n\u003c--\u003e\n\u003cscript input=\"number\" value=\"1\" default=\"1\" output=\"y\"\u003e\nsetTimeout(function(){\n  send.lia( @input - @input(`x`) )\n}, 1000)\n\nsend.wait()\n\u003c/script\u003e\n\n      --{{2}}--\nTo prevent errors, try to define a default output value for your scripts.\n\n#### Simplification with Macros\n\u003c!--\nsin: \u003cscript format=\"number\"\n             localeStyle=\"currency\"\n             currency=\"EUR\"\n             locale=\"de-DE\"\n             modify=\"false\"\n    \u003e Math.sin(@input(`param1`) + @0) + @input(`param2`) \u003c/script\u003e\n--\u003e\n\n    --{{0}}--\nThe following example does not really make sense; it is only used to illustrate some aspects of this approach. There is a recurring and parameterized calculation within the table.\nInstead of using multiple scripts, we only had to define one macro that performs some calculation and formatting.\nThe two other scripts are simple input parameters that have a certain effect on these cells.\n\n\n``` markdown\n#### Simplification with Macros\n\u003c!--\nsin: \u003cscript format=\"number\"\n             localeStyle=\"currency\"\n             currency=\"EUR\"\n             locale=\"de-DE\"\n             modify=\"false\"\n    \u003e Math.sin(@input(`param1`) + @0) + @input(`param2`) \u003c/script\u003e\n--\u003e\n\n\u003cscript run-once default=\"0\"  output=\"param1\"\ninput=\"range\" value=\"2\" min=\"0\" max=\"25\" step=\"0.1\" \u003e\n@input\n\u003c/script\u003e\n\n\u003cscript run-once default=\"0\" output=\"param2\"\ninput=\"range\" value=\"2\" min=\"0\" max=\"25\" step=\"0.1\"\u003e\n@input\n\u003c/script\u003e\n\n\u003c!-- data-type=\"barchart\" --\u003e\n| Header 1 | \u003cscript\u003e@input(`param`)\u003c/script\u003e |\n|:-------- | -------------------------------: |\n| 1        |                         @sin(1)  |\n| 2        |                         @sin(2)  |\n| ...      |                            ....  |\n```\n\n    --{{1}}--\nCombining scripts with macros reduces a lot of boilerplate and allows for handling complexity more efficiently.\nAdditionally, these scripts work seamlessly with all other LiaScript elements previously presented, such that updates even affect the diagram representation of the table.\nSorting of columns also works seamlessly.\n\n      {{1}}\n\u003csection\u003e\n\nParameters: \u003cscript run-once\n        default=\"0\"\n        output=\"param1\"\n        input=\"range\" value=\"2\" min=\"0\" max=\"25\" step=\"0.1\"\n        \u003e\n@input\n\u003c/script\u003e\n/\n\u003cscript run-once\n        default=\"0\"\n        output=\"param2\"\n        input=\"range\" value=\"1\" min=\"0\" max=\"2\" step=\"0.1\"\n        \u003e\n@input\n\u003c/script\u003e\n\n\n\u003c!-- data-type=\"barchart\" --\u003e\n| Header  | Some Calculation \u003cscript\u003e@input(`param1`)\u003c/script\u003e |\n|:-------- |--------: |\n| 1        | @sin(1)  |\n| 2        | @sin(2)  |\n| 3        | @sin(3)  |\n| 4        | @sin(4)  |\n| 5        | @sin(5)  |\n| 6        | @sin(6)  |\n| 7        | @sin(7)  |\n| 8        | @sin(8)  |\n| 9        | @sin(9)  |\n\n\u003c/section\u003e\n\n\n      {{2}}\n\u003csection\u003e\n\nAnd of course, we can also directly create and manipulate diagrams with different parameters a:\n\u003cscript input=\"range\" value=\"2\" output=\"range\"\u003e@input\u003c/script\u003e\n, directly from the document b:\n\u003cscript input=\"range\" value=\"50\" output=\"amplitude\"\u003e@input\u003c/script\u003e.\nYou can double-click on the highlighted elements to inspect and edit its JavaScript code.\n\n\n\u003cscript run-once style=\"display: inline-block; width: 100%\"\u003e\nfunction func(x) {\n    x /= 10;\n    return Math.sin(x) * Math.cos(x * @input(`range`) + 1) * Math.sin(x * 3 + 2) * @input(`amplitude`);\n}\n\nfunction generateData() {\n    let data = [];\n    for (let i = -200; i \u003c= 200; i += 0.1) {\n        data.push([i, func(i)]);\n    }\n    return data;\n}\n\nlet option = {\n    animation: false,\n    grid: {\n        top: 40,\n        left: 50,\n        right: 40,\n        bottom: 50\n    },\n    xAxis: {\n        name: 'x',\n        minorTick: {\n            show: true\n        },\n        splitLine: {\n            lineStyle: {\n                color: '#999'\n            }\n        },\n        minorSplitLine: {\n            show: true,\n            lineStyle: {\n                color: '#ddd'\n            }\n        }\n    },\n    yAxis: {\n        name: 'y',\n        min: -100,\n        max: 100,\n        minorTick: {\n            show: true\n        },\n        splitLine: {\n            lineStyle: {\n                color: '#999'\n            }\n        },\n        minorSplitLine: {\n            show: true,\n            lineStyle: {\n                color: '#ddd'\n            }\n        }\n    },\n    dataZoom: [{\n        show: true,\n        type: 'inside',\n        filterMode: 'none',\n        xAxisIndex: [0],\n        startValue: -20,\n        endValue: 20\n    }, {\n        show: true,\n        type: 'inside',\n        filterMode: 'none',\n        yAxisIndex: [0],\n        startValue: -20,\n        endValue: 20\n    }],\n    series: [\n        {\n            type: 'line',\n            showSymbol: false,\n            clip: true,\n            data: generateData()\n        }\n    ]\n}\n\n\"HTML: \u003clia-chart option='\" + JSON.stringify(option) + \"'\u003e\u003c/lia-chart\u003e\"\n\u003c/script\u003e\n\n\u003c/section\u003e\n\n### Further settings\n\n__`value`__\n\n    --{{0}}--\nSet the default input value, if it is a number or a string or something else,\ndepends on the usage of the `@input` macro within the script.\n\n\n      {{1}}\n__`update-on-change`__\n\n    --{{1}}--\nAs mentioned earlier, every input-field has a specific update handling, `range`,\n`number`, `text`, `radio`, `checkbox`, trigger the execution of the script on\nevery change, while the others are triggered only after the user hits enter or\nif the input field loses the focus. However, by using the parameter\n`update-on-change` you can change this behavior. It can be switched off or on by passing true or false, if you only pass `update-on-change` true is used as the default:\n\n      {{1}}\n* `update-on-change`\n* `update-on-change=\"true\"`\n* `update-on-change=\"false\"`\n\n\n      {{2}}\n__`input-active`__\n\n    --{{2}}--\nInputs are only visible, if the user clicks on the script representation. If you\npass the parameter `input-active`, then the input will be visible on the first\nappearance, but it will be closed if the element loses the focus again.\n\n\n      {{3}}\n__`input-always-active`__\n\n    --{{3}}--\nUsing this parameter, it is possible to switch on the input-field for ever, it\nwill not be closed if the focus is lost.\n\n\n      {{4}}\n__`run-once`__\n\n    --{{4}}--\nA script will be executed multiple times, if the site is rendered, or if it is\nassociated to a certain effect number. If the calculation should be executed\nonly once use this parameter. The result is preserved and displayed on every\nappearance.\n\n\n      {{5}}\n__`modify`__\n\n    --{{5}}--\nBy double-clicking onto a script, you get into edit-mode. The code is displayed\nto the user and can be edited and it is executed again if the code-input field\nloses the context. By setting `modify=\"false\"` to false, this editing function\nis switched of furthermore there is **no gray background** displayed.\n\n      {{5}}\nThis is a script: \u003cscript modify=\"false\"\u003e12\u003c/script\u003e\n\n     --{{6}}--\nAdditionally you can use the `modify` parameter reveal only a certain part of your code.\nBy double-clicking the user can still modify this part, but the rest of the code is hidden.\nThis feat is especially useful when executing another programming language from a string.\n\n      {{5}}\n``` html\n\u003cscript modify=\"// pattern\\n\" type=\"text/python\"\u003e\nconsole.log(\"some hidden functionality\")\nvar a = 12\n\n// pattern\nconsole.log(\"not hidden functionality\", a)\n// pattern\n\nconsole.warn(\"hidden again\")\na\n\u003c/script\u003e\n```\n\n      {{5}}\n\u003cscript modify=\"// pattern\\n\" type=\"text/python\"\u003e\nconsole.log(\"some hidden functionality\")\nvar a = 12\n\n// pattern\nconsole.log(\"not hidden functionality\", a)\n// pattern\n\nconsole.warn(\"hidden again\")\na\n\u003c/script\u003e\n\n      {{6}}\n__`worker`__\n\n    --{{6}}--\nIf your script involves heavy computation that might impact the overall performance of the course, set this attribute to true.\nThis will ensure the script is executed in a worker thread.\n__Note that when using a worker thread, modifying the DOM is not possible.__\n\n      {{7}}\n__`type`__\n\n    --{{7}}--\nThis parameter is used to define the type of the script, which is used to determine the syntax highlighting and the execution environment.\nThe default value is `text/javascript`, but you can also use `text/python` or `text/ruby` to execute code in different languages.\nThereby `text/` is optional and can be omitted.\nThis parameter makes only sense in combination with partial `modify`.\n\n### Internationalization API\n\n    --{{0}}--\nBy using the `format` parameter you can set a specific kind of visual\nformatting. This will be visible to the user, but if you connect different\nscript with input/output then the original result of an execution will be passed\nto the subsequent scripts. The links below show contain all information to the associated formatting all params are directly passed to the formatting function.\n\n    --{{1}}--\nUse `locale` to change the type of language/localization. If you do not pass\nsuch a value, then the default document language setting is used as default.\n\n      {{1}}\n\u003e There is one difference by using the `style` parameter. `style` is used format\n\u003e the output with inline CSS. But some formatting also contain a `style`\n\u003e parameter. In order to don't mess up with styles you have to use `localeStyle`\n\u003e to set the locale language formatting style ;)\n\n* `format=\"datetime\"`:\n\n  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat\n\n* `format=\"number\"`:\n\n  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat\n\n* `format=\"list\"`\n\n  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/ListFormat\n\n* `format=\"relativetime\"`:\n\n  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat\n\n* `format=\"pluralrules\"`:\n\n  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/PluralRules\n\n\n### LIA - global object\n\nTodo\n\n\n#### Publish subscribe API\n\n    --{{0}}--\nSince LiaScript allows for opening Classrooms with a chat that supports LiaScript syntax and synchronizes the states of quizzes and surveys between users, along with support for collaborative editing, we have decided to add a new experimental API.\n\n!?[LiaScript Classroom](https://www.youtube.com/watch?v=Kjk6OblugXI)\n\n\n    --{{1}}--\nThis API allows anyone to create new collaborative LiaScript extensions by combining scripts with anything that might be interesting, such as collaborative painting, marking positions on a map, and more.\n\n\n      {{1}}\n``` js\n// true if connection to a classroom has been established\nLIA.classroom.connected\n\n// creates a callback on a connection\nLIA.classroom.on(\"connect\", () =\u003e {\n    console.log(\"you are now connected\")\n})\n\n// callback for the disconnection\nLIA.classroom.on(\"disconnect\", () =\u003e {\n    console.log(\"you are now disconnected\")\n})\n\n// publish some data on a topic\nLIA.classroom.publish(\"topic\", { data: \"Hello World\" })\n\n// subscribe to all messages of a topic\nconst subID = LIA.classroom.subscribe(\"topic\", (message) =\u003e {\n    console.log(\"received\", message)\n})\n\n// do not receive messages anymore\nLIA.classroom.unsubscribe(subID)\n```\n\n    --{{2}}--\nThe following code creates an entire waving app, where students can send little raining icons to vote, for example, for a topic. This functionality can be easily put into a template that can be imported into different courses.\n\n      {{2}}\n```\n\u003c!--\n@style\n.fall {\n  position: absolute;\n  top: 0;\n  animation: fall 4s linear;\n}\n@keyframes fall {\n  0% { top: 0; }\n  100% { top: 100%; }\n}\n@end\n\n@wave\n\u003cscript input=\"button\" run-once=\"true\" modify=\"false\"\u003e\nif (LIA.classroom.connected){\n    LIA.classroom.publish(\"wave\", \"@0\")\n}\n\"@0\"\n\u003c/\u003e\n@end\n--\u003e\n\n# Waving App\n\nShare your feelings:\n\n\u003cscript run-once=\"true\"\u003e\nLIA.classroom.subscribe(\"wave\", (msg) =\u003e {\n    const icon = document.createElement(\"span\")\n    icon.innerHTML = msg\n    icon.classList.add(\"fall\")\n    icon.style.left=(Math.random() * 100) + \"%\"\n    icon.style.zIndex = 10000\n    document.body.appendChild(icon)\n    icon.addEventListener('animationend', function() {\n        icon.remove();\n    });\n})\nconsole.log(\"subscription\")\n\u003c/script\u003e\n\n\u003cscript input=\"button\" run-once=\"true\" modify=\"false\"\u003e\nif (LIA.classroom.connected){\n    LIA.classroom.publish(\"wave\", \"👋\")\n}\n\n\"👋\"\n\u003c/script\u003e\n@wave(❤️) @wave(👎) @wave(👍) @wave(💀) @wave(❓)\n```\n\n    --{{3}}--\nTry it out by opening a classroom on multiple browsers!\n\n      {{3}}\n[Try it out](https://liascript.github.io/course/?data:text/plain;charset=utf-8;Content-Encoding=gzip;base64,H4sIAAAAAAAAA8VSQW7UMBTd+xQfo6oJdEKQWM1MRlOhSlRqVyCxdpKfGQvHtmxnYKhGYo8oAtYVGw7BeXoBOALfiZqZ9gKs/P39nt/z858/mkzY0oetQpY1Qim4YgDWeBmk0VMQpTeqCzijbjB2CnmshJatGAA954UHJTUKN2M7tnyH28aJFj2MF+ZHcHXHhx01nuf7Vqxjl6ioa8aW78UG2dxXTtoAUtsuFLzsQjCag+v0xOgKCx5chxxaU8tmW3CS8sgXTDaQXJyfZpUS3jtj2qwyWmMVsE6jE4D7p7YrlfTrhEdRfgJ8mfOUrMSVzZ8NJhaDs8lkwdhjeCs2Uq/g1FrGXq+FQ9iazkGDSCGs/JSN3h+YXbD72r4rI7DEUT1p/SqFYgGDVbLuKQFaoIDaVF2LOmSVQxHwTGHcJdxboclyxEdkJum57tWbywvi0HX7g174QvqQibpOYmLqkNcPQaawCUVyKcI6c0LXpk1SeBK/KIWnwI/4Q/zHc13jB5IiSJ73p6PR0tTbTFhL2b1cS1UnkXegSDbONgSMnpBMJ8fjYBHl+ASaTldxRx6GQEaqw9ZsMElnfXtH6y5lMS4T32BWFMsQro18eub+K//bZP39+e1zP1tsKA/HK2KS25tff35/TWHYEeb6oP6yr79/uqtvb36k/wAY2UbHwwMAAA==#1)\n\n    --{{4}}--\nHere is the base code that you can try out and modify.\nAfterwards, share your course via the DAT-URI options, which allows to encode short courses within the URL.\n\n      {{4}}\n[Live Editor Example](https://liascript.github.io/LiveEditor/?/show/code/H4sIAAAAAAAAA8VSQW7UMBTd+xQfo6oJdEKQWM1MRlOhSlRqVyCxdpKfGQvHtmxnYKhGYo8oAtYVGw7BeXoBOALfiZqZ9gKs/P39nt/z858/mkzY0oetQpY1Qim4YgDWeBmk0VMQpTeqCzijbjB2CnmshJatGAA954UHJTUKN2M7tnyH28aJFj2MF+ZHcHXHhx01nuf7Vqxjl6ioa8aW78UG2dxXTtoAUtsuFLzsQjCag+v0xOgKCx5chxxaU8tmW3CS8sgXTDaQXJyfZpUS3jtj2qwyWmMVsE6jE4D7p7YrlfTrhEdRfgJ8mfOUrMSVzZ8NJhaDs8lkwdhjeCs2Uq/g1FrGXq+FQ9iazkGDSCGs/JSN3h+YXbD72r4rI7DEUT1p/SqFYgGDVbLuKQFaoIDaVF2LOmSVQxHwTGHcJdxboclyxEdkJum57tWbywvi0HX7g174QvqQibpOYmLqkNcPQaawCUVyKcI6c0LXpk1SeBK/KIWnwI/4Q/zHc13jB5IiSJ73p6PR0tTbTFhL2b1cS1UnkXegSDbONgSMnpBMJ8fjYBHl+ASaTldxRx6GQEaqw9ZsMElnfXtH6y5lMS4T32BWFMsQro18eub+K//bZP39+e1zP1tsKA/HK2KS25tff35/TWHYEeb6oP6yr79/uqtvb36k/wAY2UbHwwMAAA==)\n\n\n## Contributors and Credit\n\n\n{1}{\u003ch2\u003e \u003ca href=\"https://github.com/andre-dietrich\"\u003eAndré Dietrich\u003c/a\u003e \u003c/h2\u003e} \u003c!-- class = \"animated fadeInUpBig\" --\u003e\n\n--{{1}}--\nProgramming paradigm experimenter and creator of LiaScript and SelectScript...\n\n\n\n{2}{\u003ch2\u003e \u003ca href=\"https://github.com/SebastianZug\"\u003eSebastian Zug\u003c/a\u003e \u003c/h2\u003e} \u003c!-- class = \"animated fadeInUpBig\" --\u003e\n\n--{{2}}--\nThe mind in the dark and the man behind the eLab-project ...\n\n\n{3}{\u003ch2\u003e \u003ca href=\"https://github.com/kfessel\"\u003eKarl Fessel\u003c/a\u003e \u003c/h2\u003e} \u003c!-- class = \"animated fadeInUpBig\" --\u003e\n\n--{{3}}--\nEmbedded systems developer, creator or arduinoview, and Markdown evangelist ...\n\n\n{4}{\u003ch2\u003e \u003ca href=\"https://github.com/stvrhm\"\u003eSteve Rehm\u003c/a\u003e \u003c/h2\u003e} \u003c!-- class = \"animated fadeInUpBig\" --\u003e\n\n    --{{4}}--\nCSS \u0026 SASS crack and friendly face behind new face of LiaScript ...\n\n\n## Appendix\n\n### Supported Protocols for Sharing courses\n\ntodo\n\n#### IPFS\n\n#### Onion Share\n\n#### Dat - URIs\n\n#### QR-Codes\n\n\n### Unicode Symbols\n\n\n|         |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------- |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+1F60x | 😀  | 😁  | 😂  | 😃  | 😄  | 😅  | 😆  | 😇  | 😈  | 😉  | 😊  | 😋  | 😌  | 😍  | 😎  | 😏  |\n| U+1F61x | 😐  | 😑  | 😒  | 😓  | 😔  | 😕  | 😖  | 😗  | 😘  | 😙  | 😚  | 😛  | 😜  | 😝  | 😞  | 😟  |\n| U+1F62x | 😠  | 😡  | 😢  | 😣  | 😤  | 😥  | 😦  | 😧  | 😨  | 😩  | 😪  | 😫  | 😬  | 😭  | 😮  | 😯  |\n| U+1F63x | 😰  | 😱  | 😲  | 😳  | 😴  | 😵  | 😶  | 😷  | 😸  | 😹  | 😺  | 😻  | 😼  | 😽  | 😾  | 😿  |\n| U+1F64x | 🙀  | 🙁  | 🙂  | 🙃  | 🙄  | 🙅  | 🙆  | 🙇  | 🙈  | 🙉  | 🙊  | 🙋  | 🙌  | 🙍  | 🙎  | 🙏  |\n\n---\n\n|         |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------- |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+1F4Dx | 📐  | 📑  | 📒  | 📓  | 📔  | 📕  | 📖  | 📗  | 📘  | 📙  | 📚  | 📛  | 📜  | 📝  | 📞  | 📟  |\n| U+1F4Ex | 📠  | 📡  | 📢  | 📣  | 📤  | 📥  | 📦  | 📧  | 📨  | 📩  | 📪  | 📫  | 📬  | 📭  | 📮  | 📯  |\n| U+1F4Fx | 📰  | 📱  | 📲  | 📳  | 📴  | 📵  | 📶  | 📷  | 📸  | 📹  | 📺  | 📻  | 📼  | 📽️  |     | 📿  |\n| U+1F50x | 🔀  | 🔁  | 🔂  | 🔃  | 🔄  | 🔅  | 🔆  | 🔇  | 🔈  | 🔉  | 🔊  | 🔋  | 🔌  | 🔍  | 🔎  | 🔏  |\n| U+1F51x | 🔐  | 🔑  | 🔒  | 🔓  | 🔔  | 🔕  | 🔖  | 🔗  | 🔘  | 🔙  | 🔚  | 🔛  | 🔜  | 🔝  | 🔞  | 🔟  |\n| U+1F52x | 🔠  | 🔡  | 🔢  | 🔣  | 🔤  | 🔥  | 🔦  | 🔧  | 🔨  | 🔩  | 🔪  | 🔫  | 🔬  | 🔭  | 🔮  | 🔯  |\n| U+1F53x | 🔰  | 🔱  | 🔲  | 🔳  | 🔴  | 🔵  | 🔶  | 🔷  | 🔸  | 🔹  | 🔺  | 🔻  | 🔼  | 🔽  |     |     |\n| U+1F54x |     |     |     |     |     |     |     |     |     | 🕉️  | 🕊️  | 🕋  | 🕌  | 🕍  | 🕎  |     |\n| U+1F55x | 🕐  | 🕑  | 🕒  | 🕓  | 🕔  | 🕕  | 🕖  | 🕗  | 🕘  | 🕙  | 🕚  | 🕛  | 🕜  | 🕝  | 🕞  | 🕟  |\n| U+1F56x | 🕠  | 🕡  | 🕢  | 🕣  | 🕤  | 🕥  | 🕦  | 🕧  |     |     |     |     |     |     |     | 🕯️  |\n| U+1F57x | 🕰️  |     |     | 🕳️  | 🕴️  | 🕵️  | 🕶️  | 🕷️  | 🕸️  | 🕹️  | 🕺  |     |     |     |     |     |\n| U+1F58x |     |     |     |     |     |     |     | 🖇️  |     |     | 🖊️  | 🖋️  | 🖌️  | 🖍️  |     |     |\n| U+1F59x | 🖐️  |     |     |     |     | 🖕  | 🖖  |     |     |     |     |     |     |     |     |     |\n| U+1F5Ax |     |     |     |     | 🖤  | 🖥️  |     |     | 🖨️  |     |     |     |     |     |     |     |\n| U+1F5Bx |     | 🖱️  | 🖲️  |     |     |     |     |     |     |     |     |     | 🖼️  |     |     |     |\n| U+1F5Cx |     |     | 🗂️  | 🗃️  | 🗄️  |     |     |     |     |     |     |     |     |     |     |     |\n| U+1F5Dx |     | 🗑️  | 🗒️  | 🗓️  |     |     |     |     |     |     |     |     | 🗜️  | 🗝️  | 🗞️  |     |\n| U+1F5Ex |     | 🗡️  |     | 🗣️  |     |     |     |     | 🗨️  |     |     |     |     |     |     | 🗯️  |\n| U+1F5Fx |     |     |     | 🗳️  |     |     |     |     |     |     | 🗺️  | 🗻  | 🗼  | 🗽  | 🗾  | 🗿  |\n| U+1F60x | 😀  | 😁  | 😂  | 😃  | 😄  | 😅  | 😆  | 😇  | 😈  | 😉  | 😊  | 😋  | 😌  | 😍  | 😎  | 😏  |\n| U+1F61x | 😐  | 😑  | 😒  | 😓  | 😔  | 😕  | 😖  | 😗  | 😘  | 😙  | 😚  | 😛  | 😜  | 😝  | 😞  | 😟  |\n| U+1F62x | 😠  | 😡  | 😢  | 😣  | 😤  | 😥  | 😦  | 😧  | 😨  | 😩  | 😪  | 😫  | 😬  | 😭  | 😮  | 😯  |\n| U+1F63x | 😰  | 😱  | 😲  | 😳  | 😴  | 😵  | 😶  | 😷  | 😸  | 😹  | 😺  | 😻  | 😼  | 😽  | 😾  | 😿  |\n| U+1F64x | 🙀  | 🙁  | 🙂  | 🙃  | 🙄  | 🙅  | 🙆  | 🙇  | 🙈  | 🙉  | 🙊  | 🙋  | 🙌  | 🙍  | 🙎  | 🙏  |\n| U+1F68x | 🚀  | 🚁  | 🚂  | 🚃  | 🚄  | 🚅  | 🚆  | 🚇  | 🚈  | 🚉  | 🚊  | 🚋  | 🚌  | 🚍  | 🚎  | 🚏  |\n| U+1F69x | 🚐  | 🚑  | 🚒  | 🚓  | 🚔  | 🚕  | 🚖  | 🚗  | 🚘  | 🚙  | 🚚  | 🚛  | 🚜  | 🚝  | 🚞  | 🚟  |\n| U+1F6Ax | 🚠  | 🚡  | 🚢  | 🚣  | 🚤  | 🚥  | 🚦  | 🚧  | 🚨  | 🚩  | 🚪  | 🚫  | 🚬  | 🚭  | 🚮  | 🚯  |\n| U+1F6Bx | 🚰  | 🚱  | 🚲  | 🚳  | 🚴  | 🚵  | 🚶  | 🚷  | 🚸  | 🚹  | 🚺  | 🚻  | 🚼  | 🚽  | 🚾  | 🚿  |\n| U+1F6Cx | 🛀  | 🛁  | 🛂  | 🛃  | 🛄  | 🛅  |     |     |     |     |     | 🛋️  | 🛌  | 🛍️  | 🛎️  | 🛏️  |\n\n---\n\n|         |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------- |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+1F6Dx | 🛐  | 🛑  | 🛒  |     |     | 🛕  | 🛖  | 🛗  |     |     |     |     |     |     |     |     |\n| U+1F6Ex | 🛠️  | 🛡️  | 🛢️  | 🛣️  | 🛤️  | 🛥️  |     |     |     | 🛩️  |     | 🛫  | 🛬  |     |     |     |\n| U+1F6Fx | 🛰️  |     |     | 🛳️  | 🛴  | 🛵  | 🛶  | 🛷  | 🛸  | 🛹  | 🛺  | 🛻  | 🛼  |     |     |     |\n| U+1F7Ex | 🟠  | 🟡  | 🟢  | 🟣  | 🟤  | 🟥  | 🟦  | 🟧  | 🟨  | 🟩  | 🟪  | 🟫  |     |     |     |     |\n| U+1F90x |     |     |     |     |     |     |     |     |     |     |     |     | 🤌  | 🤍  | 🤎  | 🤏  |\n| U+1F91x | 🤐  | 🤑  | 🤒  | 🤓  | 🤔  | 🤕  | 🤖  | 🤗  | 🤘  | 🤙  | 🤚  | 🤛  | 🤜  | 🤝  | 🤞  | 🤟  |\n| U+1F92x | 🤠  | 🤡  | 🤢  | 🤣  | 🤤  | 🤥  | 🤦  | 🤧  | 🤨  | 🤩  | 🤪  | 🤫  | 🤬  | 🤭  | 🤮  | 🤯  |\n| U+1F93x | 🤰  | 🤱  | 🤲  | 🤳  | 🤴  | 🤵  | 🤶  | 🤷  | 🤸  | 🤹  | 🤺  |     | 🤼  | 🤽  | 🤾  | 🤿  |\n| U+1F94x | 🥀  | 🥁  | 🥂  | 🥃  | 🥄  | 🥅  |     | 🥇  | 🥈  | 🥉  | 🥊  | 🥋  | 🥌  | 🥍  | 🥎  | 🥏  |\n| U+1F95x | 🥐  | 🥑  | 🥒  | 🥓  | 🥔  | 🥕  | 🥖  | 🥗  | 🥘  | 🥙  | 🥚  | 🥛  | 🥜  | 🥝  | 🥞  | 🥟  |\n| U+1F96x | 🥠  | 🥡  | 🥢  | 🥣  | 🥤  | 🥥  | 🥦  | 🥧  | 🥨  | 🥩  | 🥪  | 🥫  | 🥬  | 🥭  | 🥮  | 🥯  |\n| U+1F97x | 🥰  | 🥱  | 🥲  | 🥳  | 🥴  | 🥵  | 🥶  |     |     |     | 🥺  | 🥻  | 🥼  | 🥽  | 🥾  | 🥿  |\n| U+1F98x | 🦀  | 🦁  | 🦂  | 🦃  | 🦄  | 🦅  | 🦆  | 🦇  | 🦈  | 🦉  | 🦊  | 🦋  | 🦌  | 🦍  | 🦎  | 🦏  |\n| U+1F99x | 🦐  | 🦑  | 🦒  | 🦓  | 🦔  | 🦕  | 🦖  | 🦗  | 🦘  | 🦙  | 🦚  | 🦛  | 🦜  | 🦝  | 🦞  | 🦟  |\n| U+1F9Ax | 🦠  | 🦡  | 🦢  |     |     | 🦥  | 🦦  | 🦧  | 🦨  | 🦩  | 🦪  |     |     |     | 🦮  | 🦯  |\n| U+1F9Bx | 🦰  | 🦱  | 🦲  | 🦳  | 🦴  | 🦵  | 🦶  | 🦷  | 🦸  | 🦹  | 🦺  | 🦻  | 🦼  | 🦽  | 🦾  | 🦿  |\n| U+1F9Cx | 🧀  | 🧁  | 🧂  | 🧃  | 🧄  | 🧅  | 🧆  | 🧇  | 🧈  | 🧉  | 🧊  | 🧋  |     | 🧍  | 🧎  | 🧏  |\n| U+1F9Dx | 🧐  | 🧑  | 🧒  | 🧓  | 🧔  | 🧕  | 🧖  | 🧗  | 🧘  | 🧙  | 🧚  | 🧛  | 🧜  | 🧝  | 🧞  | 🧟  |\n| U+1F9Ex | 🧠  | 🧡  | 🧢  | 🧣  | 🧤  | 🧥  | 🧦  | 🧧  | 🧨  | 🧩  | 🧪  | 🧫  | 🧬  | 🧭  | 🧮  | 🧯  |\n| U+1F9Fx | 🧰  | 🧱  | 🧲  | 🧳  | 🧴  | 🧵  | 🧶  | 🧷  | 🧸  | 🧹  | 🧺  | 🧻  | 🧼  | 🧽  | 🧾  | 🧿  |\n| U+1FA7x | 🩰  | 🩱  | 🩲  | 🩳  |     |     |     |     | 🩸  | 🩹  | 🩺  |     |     |     |     |     |\n| U+1FA8x | 🪀  | 🪁  | 🪂  |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+1FA9x | 🪐  | 🪑  | 🪒  | 🪓  | 🪔  | 🪕  |     |     |     |     |     |     |     |     |     |     |\n\n---\n\n|         |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------- |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+1F30x | 🌀  | 🌁  | 🌂  | 🌃  | 🌄  | 🌅  | 🌆  | 🌇  | 🌈  | 🌉  | 🌊  | 🌋  | 🌌  | 🌍  | 🌎  | 🌏  |\n| U+1F31x | 🌐  | 🌑  | 🌒  | 🌓  | 🌔  | 🌕  | 🌖  | 🌗  | 🌘  | 🌙  | 🌚  | 🌛  | 🌜  | 🌝  | 🌞  | 🌟  |\n| U+1F32x | 🌠  | 🌡️  |     |     | 🌤️  | 🌥️  | 🌦️  | 🌧️  | 🌨️  | 🌩️  | 🌪️  | 🌫️  | 🌬️  | 🌭  | 🌮  | 🌯  |\n| U+1F33x | 🌰  | 🌱  | 🌲  | 🌳  | 🌴  | 🌵  | 🌶️  | 🌷  | 🌸  | 🌹  | 🌺  | 🌻  | 🌼  | 🌽  | 🌾  | 🌿  |\n| U+1F34x | 🍀  | 🍁  | 🍂  | 🍃  | 🍄  | 🍅  | 🍆  | 🍇  | 🍈  | 🍉  | 🍊  | 🍋  | 🍌  | 🍍  | 🍎  | 🍏  |\n| U+1F35x | 🍐  | 🍑  | 🍒  | 🍓  | 🍔  | 🍕  | 🍖  | 🍗  | 🍘  | 🍙  | 🍚  | 🍛  | 🍜  | 🍝  | 🍞  | 🍟  |\n| U+1F36x | 🍠  | 🍡  | 🍢  | 🍣  | 🍤  | 🍥  | 🍦  | 🍧  | 🍨  | 🍩  | 🍪  | 🍫  | 🍬  | 🍭  | 🍮  | 🍯  |\n| U+1F37x | 🍰  | 🍱  | 🍲  | 🍳  | 🍴  | 🍵  | 🍶  | 🍷  | 🍸  | 🍹  | 🍺  | 🍻  | 🍼  | 🍽️  | 🍾  | 🍿  |\n| U+1F38x | 🎀  | 🎁  | 🎂  | 🎃  | 🎄  | 🎅  | 🎆  | 🎇  | 🎈  | 🎉  | 🎊  | 🎋  | 🎌  | 🎍  | 🎎  | 🎏  |\n| U+1F39x | 🎐  | 🎑  | 🎒  | 🎓  |     |     | 🎖️  | 🎗️  |     | 🎙️  | 🎚️  | 🎛️  |     |     | 🎞️  | 🎟️  |\n| U+1F3Ax | 🎠  | 🎡  | 🎢  | 🎣  | 🎤  | 🎥  | 🎦  | 🎧  | 🎨  | 🎩  | 🎪  | 🎫  | 🎬  | 🎭  | 🎮  | 🎯  |\n| U+1F3Bx | 🎰  | 🎱  | 🎲  | 🎳  | 🎴  | 🎵  | 🎶  | 🎷  | 🎸  | 🎹  | 🎺  | 🎻  | 🎼  | 🎽  | 🎾  | 🎿  |\n| U+1F3Cx | 🏀  | 🏁  | 🏂  | 🏃  | 🏄  | 🏅  | 🏆  | 🏇  | 🏈  | 🏉  | 🏊  | 🏋️  | 🏌️  | 🏍️  | 🏎️  | 🏏  |\n| U+1F3Dx | 🏐  | 🏑  | 🏒  | 🏓  | 🏔️  | 🏕️  | 🏖️  | 🏗️  | 🏘️  | 🏙️  | 🏚️  | 🏛️  | 🏜️  | 🏝️  | 🏞️  | 🏟️  |\n| U+1F3Ex | 🏠  | 🏡  | 🏢  | 🏣  | 🏤  | 🏥  | 🏦  | 🏧  | 🏨  | 🏩  | 🏪  | 🏫  | 🏬  | 🏭  | 🏮  | 🏯  |\n| U+1F3Fx | 🏰  |     |     | 🏳️  | 🏴  | 🏵️  |     | 🏷️  | 🏸  | 🏹  | 🏺  | 🏻  | 🏼  | 🏽  | 🏾  | 🏿  |\n| U+1F40x | 🐀  | 🐁  | 🐂  | 🐃  | 🐄  | 🐅  | 🐆  | 🐇  | 🐈  | 🐉  | 🐊  | 🐋  | 🐌  | 🐍  | 🐎  | 🐏  |\n| U+1F41x | 🐐  | 🐑  | 🐒  | 🐓  | 🐔  | 🐕  | 🐖  | 🐗  | 🐘  | 🐙  | 🐚  | 🐛  | 🐜  | 🐝  | 🐞  | 🐟  |\n| U+1F42x | 🐠  | 🐡  | 🐢  | 🐣  | 🐤  | 🐥  | 🐦  | 🐧  | 🐨  | 🐩  | 🐪  | 🐫  | 🐬  | 🐭  | 🐮  | 🐯  |\n| U+1F43x | 🐰  | 🐱  | 🐲  | 🐳  | 🐴  | 🐵  | 🐶  | 🐷  | 🐸  | 🐹  | 🐺  | 🐻  | 🐼  | 🐽  | 🐾  | 🐿️  |\n| U+1F44x | 👀  | 👁️  | 👂  | 👃  | 👄  | 👅  | 👆  | 👇  | 👈  | 👉  | 👊  | 👋  | 👌  | 👍  | 👎  | 👏  |\n| U+1F45x | 👐  | 👑  | 👒  | 👓  | 👔  | 👕  | 👖  | 👗  | 👘  | 👙  | 👚  | 👛  | 👜  | 👝  | 👞  | 👟  |\n| U+1F46x | 👠  | 👡  | 👢  | 👣  | 👤  | 👥  | 👦  | 👧  | 👨  | 👩  | 👪  | 👫  | 👬  | 👭  | 👮  | 👯  |\n| U+1F47x | 👰  | 👱  | 👲  | 👳  | 👴  | 👵  | 👶  | 👷  | 👸  | 👹  | 👺  | 👻  | 👼  | 👽  | 👾  | 👿  |\n| U+1F48x | 💀  | 💁  | 💂  | 💃  | 💄  | 💅  | 💆  | 💇  | 💈  | 💉  | 💊  | 💋  | 💌  | 💍  | 💎  | 💏  |\n| U+1F4Ax | 💠  | 💡  | 💢  | 💣  | 💤  | 💥  | 💦  | 💧  | 💨  | 💩  | 💪  | 💫  | 💬  | 💭  | 💮  | 💯  |\n| U+1F4Bx | 💰  | 💱  | 💲  | 💳  | 💴  | 💵  | 💶  | 💷  | 💸  | 💹  | 💺  | 💻  | 💼  | 💽  | 💾  | 💿  |\n| U+1F49x | 💐  | 💑  | 💒  | 💓  | 💔  | 💕  | 💖  | 💗  | 💘  | 💙  | 💚  | 💛  | 💜  | 💝  | 💞  | 💟  |\n| U+1F4Cx | 📀  | 📁  | 📂  | 📃  | 📄  | 📅  | 📆  | 📇  | 📈  | 📉  | 📊  | 📋  | 📌  | 📍  | 📎  | 📏  |\n\n---\n\n|         |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------- |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+26Dx  |     | ⛑️  |     | ⛓️  | ⛔️ |     |     |     |     |     |     |     |     |     |     |     |\n| U+26Ex  |     |     |     |     |     |     |     |     |     | ⛩️  | ⛪️ |     |     |     |     |     |\n| U+26Fx  | ⛰️  | ⛱️  | ⛲️ | ⛳️ | ⛴️  | ⛵️ |     | ⛷️  | ⛸️  | ⛹️  | ⛺️ |     |     | ⛽️ |     |     |\n| U+270x  |     |     | ✂️  |     |     | ✅️ |     |     | ✈️  | ✉️  | ✊️ | ✋️ | ✌️  | ✍️  |     | ✏️  |\n| U+271x  |     |     | ✒️  |     | ✔️  |     | ✖️  |     |     |     |     |     |     | ✝️  |     |     |\n| U+272x  |     | ✡️  |     |     |     |     |     |     | ✨️ |     |     |     |     |     |     |     |\n| U+273x  |     |     |     | ✳️  | ✴️  |     |     |     |     |     |     |     |     |     |     |     |\n| U+274x  |     |     |     |     | ❄️  |     |     | ❇️  |     |     |     |     | ❌️ |     | ❎️ |     |\n| U+275x  |     |     |     | ❓️ | ❔️ | ❕️ |     | ❗️ |     |     |     |     |     |     |     |     |\n| U+276x  |     |     |     | ❣️  | ❤️  |     |     |     |     |     |     |     |     |     |     |     |\n| U+279x  |     |     |     |     |     | ➕️ | ➖️ | ➗️ |     |     |     |     |     |     |     |     |\n| U+27Ax  |     | ➡️  |     |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+27Bx  | ➰️ |     |     |     |     |     |     |     |     |     |     |     |     |     |     | ➿️ |\n| U+293x  |     |     |     |     | ⤴️  | ⤵️  |     |     |     |     |     |     |     |     |     |     |\n| U+2B0x  |     |     |     |     |     | ⬅️  | ⬆️  | ⬇️  |     |     |     |     |     |     |     |     |\n| U+2B1x  |     |     |     |     |     |     |     |     |     |     |     | ⬛️ | ⬜️ |     |     |     |\n| U+2B5x  | ⭐️ |     |     |     |     | ⭕️ |     |     |     |     |     |     |     |     |     |     |\n| U+303x  | 〰️ |     |     |     |     |     |     |     |     |     |     |     |     | 〽️ |     |     |\n| U+329x  |     |     |     |     |     |     |     | ㊗️ |     | ㊙️ |     |     |     |     |     |     |\n| U+1F00x |     |     |     |     | 🀄  |     |     |     |     |     |     |     |     |     |     |     |\n| U+1F0Cx |     |     |     |     |     |     |     |     |     |     |     |     |     |     |     | 🃏  |\n| U+1F17x | 🅰️  | 🅱️  |     |     |     |     |     |     |     |     |     |     |     |     | 🅾️  | 🅿️  |\n| U+1F18x |     |     |     |     |     |     |     |     |     |     |     |     |     |     | 🆎  |     |\n| U+1F19x |     | 🆑  | 🆒  | 🆓  | 🆔  | 🆕  | 🆖  | 🆗  | 🆘  | 🆙  | 🆚  |     |     |     |     |     |\n| U+1F20x |     | 🈁  | 🈂️ |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+1F21x |     |     |     |     |     |     |     |     |     |     | 🈚  |     |     |     |     |     |\n| U+1F22x |     |     |     |     |     |     |     |     |     |     |     |     |     |     |     | 🈯  |\n| U+1F23x |     |     | 🈲  | 🈳  | 🈴  | 🈵  | 🈶  | 🈷️ | 🈸  | 🈹  | 🈺  |     |     |     |     |     |\n| U+1F25x | 🉐  | 🉑  |     |     |     |     |     |     |     |     |     |     |     |     |     |     |\n\n---\n\n|        |  0  |  1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  A  |  B  |  C  |  D  |  E  |  F  |\n| ------ |:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| U+00Ax |     |     |     |     |     |     |     |     |     | ©️  |     |     |     |     | ®️  |     |\n| U+203x |     |     |     |     |     |     |     |     |     |     |     |     | ‼️  |     |     |     |\n| U+204x |     |     |     |     |     |     |     |     |     | ⁉️  |     |     |     |     |     |     |\n| U+212x |     |     | ™️  |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+213x |     |     |     |     |     |     |     |     |     | ℹ️  |     |     |     |     |     |     |\n| U+219x |     |     |     |     | ↔️  | ↕️  | ↖️  | ↗️  | ↘️  | ↙️  |     |     |     |     |     |     |\n| U+21Ax |     |     |     |     |     |     |     |     |     | ↩️  | ↪️  |     |     |     |     |     |\n| U+231x |     |     |     |     |     |     |     |     |     |     | ⌚️ | ⌛️ |     |     |     |     |\n| U+232x |     |     |     |     |     |     |     |     | ⌨️  |     |     |     |     |     |     |     |\n| U+23Cx |     |     |     |     |     |     |     |     |     |     |     |     |     |     |     | ⏏️  |\n| U+23Ex |     |     |     |     |     |     |     |     |     | ⏩️ | ⏪️ | ⏫️ | ⏬️ | ⏭️  | ⏮️  | ⏯️  |\n| U+23Fx | ⏰️ | ⏱️  | ⏲️  | ⏳️ |     |     |     |     | ⏸️  | ⏹️  | ⏺️  |     |     |     |     |     |\n| U+24Cx |     |     | Ⓜ️  |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+25Ax |     |     |     |     |     |     |     |     |     |     | ▪️  | ▫️  |     |     |     |     |\n| U+25Bx |     |     |     |     |     |     | ▶️  |     |     |     |     |     |     |     |     |     |\n| U+25Cx | ◀️  |     |     |     |     |     |     |     |     |     |     |     |     |     |     |     |\n| U+25Fx |     |     |     |     |     |     |     |     |     |     |     | ◻️  | ◼️  | ◽️ | ◾️ |     |\n| U+260x |  ☀  |  ☁  |  ☂  |  ☃  |  ☄  |  ★  |  ☆  |  ☇  |  ☈  |  ☉  |  ☊  |  ☋  |  ☌  |  ☍  |  ☎  |  ☏  |\n| U+261x |  ☐  |  ☑  |  ☒  |  ☓  | ☔  | ☕  |  ☖  |  ☗  |  ☘  |  ☙  |  ☚  |  ☛  |  ☜  |  ☝  |  ☞  |  ☟  |\n| U+262x |  ☠  |  ☡  |  ☢  |  ☣  |  ☤  |  ☥  |  ☦  |  ☧  |  ☨  |  ☩  |  ☪  |  ☫  |  ☬  |  ☭  |  ☮  |  ☯  |\n| U+263x |  ☰  |  ☱  |  ☲  |  ☳  |  ☴  |  ☵  |  ☶  |  ☷  |  ☸  |  ☹  |  ☺  |  ☻  |  ☼  |  ☽  |  ☾  |  ☿  |\n| U+264x |  ♀  |  ♁  |  ♂  |  ♃  |  ♄  |  ♅  |  ♆  |  ♇  | ♈  | ♉  | ♊  | ♋  | ♌  | ♍  | ♎  | ♏  |\n| U+265x | ♐  | ♑  | ♒  | ♓  |  ♔  |  ♕  |  ♖  |  ♗  |  ♘  |  ♙  |  ♚  |  ♛  |  ♜  |  ♝  |  ♞  |  ♟  |\n| U+266x |  ♠  |  ♡  |  ♢  |  ♣  |  ♤  |  ♥  |  ♦  |  ♧  |  ♨  |  ♩  |  ♪  |  ♫  |  ♬  |  ♭  |  ♮  |  ♯  |\n| U+267x |  ♰  |  ♱  |  ♲  |  ♳  |  ♴  |  ♵  |  ♶  |  ♷  |  ♸  |  ♹  |  ♺  |  ♻  |  ♼  |  ♽  |  ♾  | ♿  |\n| U+268x |  ⚀  |  ⚁  |  ⚂  |  ⚃  |  ⚄  |  ⚅  |  ⚆  |  ⚇  |  ⚈  |  ⚉  |  ⚊  |  ⚋  |  ⚌  |  ⚍  |  ⚎  |  ⚏  |\n| U+269x |  ⚐  |  ⚑  |  ⚒  | ⚓  |  ⚔  |  ⚕  |  ⚖  |  ⚗  |  ⚘  |  ⚙  |  ⚚  |  ⚛  |  ⚜  |  ⚝  |  ⚞  |  ⚟  |\n| U+26Ax |  ⚠  | ⚡  |  ⚢  |  ⚣  |  ⚤  |  ⚥  |  ⚦  |  ⚧  |  ⚨  |  ⚩  | ⚪  | ⚫  |  ⚬  |  ⚭  |  ⚮  |  ⚯  |\n| U+26Bx |  ⚰  |  ⚱  |  ⚲  |  ⚳  |  ⚴  |  ⚵  |  ⚶  |  ⚷  |  ⚸  |  ⚹  |  ⚺  |  ⚻  |  ⚼  | ⚽  | ⚾  |     |\n| U+26Cx |  ⛀  |  ⛁  |  ⛂  |  ⛃  | ⛄  | ⛅  |     |     |  ⛈  |     |     |     |     |     | ⛎  |  ⛏  |\n| U+26Dx |     |  ⛑  |     |  ⛓  | ⛔  |     |     |     |     |     |     |     |     |     |     |     |\n| U+26Ex |     |     |  ⛢  |     |     |     |     |     |     |  ⛩  | ⛪  |     |     |     |     |     |\n| U+26Fx |  ⛰  |  ⛱  | ⛲  | ⛳  |  ⛴  | ⛵  |     |  ⛷  |  ⛸  |  ⛹  | ⛺  |  ⛻  |  ⛼  | ⛽  |     |     |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fdocs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliascript%2Fdocs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliascript%2Fdocs/lists"}