{"id":23949732,"url":"https://github.com/liaplayground/liascript_tutorial_kigali","last_synced_at":"2025-08-08T04:19:09.623Z","repository":{"id":133197473,"uuid":"490604260","full_name":"LiaPlayground/LiaScript_Tutorial_Kigali","owner":"LiaPlayground","description":"LiaScript Tutorial at eLearning Afrika - Kigali (10.05.2022) ","archived":false,"fork":false,"pushed_at":"2022-05-12T09:12:59.000Z","size":2435,"stargazers_count":2,"open_issues_count":0,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T22:35:18.885Z","etag":null,"topics":["elearning","elearning-africa","liascript","liascript-course","markdown"],"latest_commit_sha":null,"homepage":"https://LiaScript.github.io/course/?https://raw.githubusercontent.com/LiaPlayground/LiaScript_Tutorial_Kigali/main/README.md","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LiaPlayground.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-05-10T08:16:58.000Z","updated_at":"2024-07-04T18:32:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"c373d0f6-1cc0-48c6-9360-019a83ee0730","html_url":"https://github.com/LiaPlayground/LiaScript_Tutorial_Kigali","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LiaPlayground/LiaScript_Tutorial_Kigali","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2FLiaScript_Tutorial_Kigali","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2FLiaScript_Tutorial_Kigali/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2FLiaScript_Tutorial_Kigali/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2FLiaScript_Tutorial_Kigali/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LiaPlayground","download_url":"https://codeload.github.com/LiaPlayground/LiaScript_Tutorial_Kigali/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LiaPlayground%2FLiaScript_Tutorial_Kigali/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269362472,"owners_count":24404559,"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","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elearning","elearning-africa","liascript","liascript-course","markdown"],"created_at":"2025-01-06T11:50:23.434Z","updated_at":"2025-08-08T04:19:09.608Z","avatar_url":"https://github.com/LiaPlayground.png","language":null,"readme":"\u003c!--\nauthor:   André Dietrich \u0026 Sebastian Zug\n\nemail:    LiaScript@web.de\n\nlogo:     https://www.elearning-africa.com/conference2022/ressources/banner/2022/social_1200_630.png\n\nversion:  0.0.2\n\nlanguage: en\n\nnarrator: US English Female\n\ncomment:  Full day workshop at eLearning Africa 2022.\n\n--\u003e\n\nTo see this course in the interactive LiaScript-version, click [here](https://LiaScript.github.io/course/?https://raw.githubusercontent.com/LiaPlayground/LiaScript_Tutorial_Kigali/main/README.md).\n\n# LiaScript Tutorial: eLearning Africa 2022\n\n![LiaScript on Nokia](images/nokia.jpeg)\n\nHello and welcome, this is an updated version of our interactive hands on course on creating interactive OER online/offline courses with LiaScript.\nIt is a distributed way of creating and sharing educational content without the need of a centralized server or backend system.\n\n\u003e This course is hosted freely on [GitHub](https://github.com): https://github.com/LiaPlayground/LiaScript_Tutorial_Kigali\n\u003e\n\u003e ... and can be shared freely, forked, adapted, translated, etc.\n\nThis is a hands on tutorial. You can fork this course from [GitHub](https://github.com/LiaPlayground/LiaScript_Tutorial_Kigali) or simply copy the text file directly from the [README.md](https://github.com/LiaPlayground/LiaScript_Tutorial_Kigali/blob/main/README.md) into your editor and start go through it step by step.\n\n---\n\nWhere can you find additional resources:\n\n* __Project-Website:__ https://LiaScript.github.io\n* __Open-Source:__ https://github.com/liascript\n* __YouTube:__ https://www.youtube.com/channel/UCyiTe2GkW_u05HSdvUblGYg\n* __Additional resources:__\n\n  - Documentation: https://github.com/LiaScript/docs\n  - Free books: https://github.com/LiaBooks\n  - Templates: https://github.com/topics/liascript-template\n  - Courses \u0026 ...: https://github.com/topics/liascript-course\n  - Blog: https://aizac.herokuapp.com\n\n* __Editor:__ https://code.visualstudio.com/Download\n\n  - Liascript-Preview: https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-preview\n  - Liascript-Snippets: https://marketplace.visualstudio.com/items?itemName=LiaScript.liascript-snippets\n\n* __Development-Server:__ https://www.npmjs.com/package/@liascript/devserver\n\n* __Exporter:__ https://www.npmjs.com/package/@liascript/exporter\n\n\n---\n\nHow to contact us:\n\n* by eMail: LiaScript@web.de\n* via Twitter: https://twitter.com/LiaScript\n* or via chat: https://gitter.im/LiaScript/community\n\n## Setup\n\n\u003e If you just want to develop locally, it is enough to download the editor and install the plugins from the Extensions (Marketplace).\n\u003e Create a README.md and copy the content from [here](https://github.com/LiaPlayground/LiaScript_Tutorial_Kigali/blob/main/README.md)\n\n1. Create an account at: https://github.com\n2. Download the Editor at: https://code.visualstudio.com/Download\n3. Open the Marketplace and search for liascript:\n\n   search and \"install\" the following plugins:\n\n   1. liascript-preview\n   2. liascript-snippets\n\n\u003e **important keyboard short-cuts**\n\u003e\n\u003e * Fuzzy Search for commands: \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eP\u003c/kbd\u003e\n\u003e * Open the LiaScript preview: \u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eL\u003c/kbd\u003e\n\u003e * Save: \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eS\u003c/kbd\u003e\n\u003e * Move lines: \u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eᐃ/ᐁ\u003c/kbd\u003e\n\u003e * __LiaScript__ snippets:\n\u003e\n\u003e   - Snippets: \u003ckbd\u003el\u003c/kbd\u003e \u003ckbd\u003ei\u003c/kbd\u003e \u003ckbd\u003ea\u003c/kbd\u003e\n\u003e   - Programming languages: \u003ckbd\u003eh\u003c/kbd\u003e \u003ckbd\u003ei\u003c/kbd\u003e \u003ckbd\u003el\u003c/kbd\u003e \u003ckbd\u003ei\u003c/kbd\u003e\n\u003e   - Voices: \u003ckbd\u003ev\u003c/kbd\u003e \u003ckbd\u003eo\u003c/kbd\u003e \u003ckbd\u003ei\u003c/kbd\u003e \u003ckbd\u003ec\u003c/kbd\u003e \u003ckbd\u003ee\u003c/kbd\u003e\n\n## Share your course via ...\n\n\u003e You can basically use any kind of webspace to share your course with your audience.\n\u003e Simply replace the `YOUR_COURSE_URL` within the example below with your personal URL of your course URL.\n\u003e \n\u003e For this course it is: https://raw.githubusercontent.com/LiaPlayground/LiaScript_Tutorial_Kigali/main/README.md\n\u003e \n\u003e Thus the result looks like this: https://LiaScript.github.io/course/?https://raw.githubusercontent.com/LiaPlayground/LiaScript_Tutorial_Kigali/main/README.md\n\n\n**`https://LiaScript.github.io/course/?YOUR_COURSE_URL`**\n\n\n    {{1}}\n* Open-source platforms:\n\n  - [GitHub](https://github.com)\n  - [GitLab](https://gitlab.com)\n\n    {{2}}\n* Private document stores:\n\n  - [DropBox](https://DropBox.com)\n  - [nextCloud](https://nextCloud.com)\n\n    {{3}}\n* Peer to Peer browsers and protocols.\n\n  - [Brave Browser](https://brave.com) via [IPFS](https://ipfs.io)\n  - [Beaker Browser](https://beakerbrowser.com) via [Hyper](https://hypercore-protocol.org)\n\n    !?[Beaker-Browser demo](https://beakerbrowser.com/beaker-site-demo.mp4)\u003c!-- autoplay=\"true\" --\u003e\n\n    {{4}}\n* Anything else and more to come ...\n\n  - [Onion-Share](https://onionshare.org)\n  - free webspace\n  - online editors like [CodiLia](https://github.com/liaScript/codilia)\n\n\n## Markdown?\n\n\u003e The following parts are created as an interactive tutorial.\n\u003e They will guide you through all details of Markdown at first and then we build on this knowledge and introduce you to LiaScript.\n\u003e Most parts will have a small task for you, please edit and change this document accordingly, experiment with it and make it your own.\n\u003e Maybe this could become a LiaScript tutorial for your people in your language. \n\n### Philosophy\n\n\u003e ~~__Markdown is intended to be as easy-to-read and easy-to-write as is feasible.__~~\n\u003e\n\u003e Readability, however, is emphasized above all else.\n\u003e A Markdown-formatted document ~~__should be publishable as-is__~~, as plain text, without looking like it’s been marked up with tags or formatting instructions.\n\u003e While Markdown’s syntax has been influenced by several existing text-to-HTML filters — including Setext, atx, Textile, reStructuredText, Grutatext, and EtText — the single ~~__biggest source of inspiration__~~ for Markdown’s syntax is the format of ~~__plain text email__~~.\n\u003e\n\u003eTo this end, Markdown’s syntax is comprised entirely of punctuation characters, which ~~__punctuation characters have been carefully chosen so as to look like what they mean__~~.\n\u003e E.g., asterisks around a word actually look like \\*emphasis\\*. Markdown ~~__lists look like, well, lists__~~.\n\u003e Even ~~__blockquotes look like quoted passages of text__~~, assuming you’ve ever used email.\n\u003e\n\u003e -- by [John Gruber](https://daringfireball.net/projects/markdown/syntax#philosophy)\n\n\nHeaders\n\nBy now you should have noticed, that # (hash-tags) are used to structure your content.\nThe number of # defines the header-type and indentation.\n\n------------------------\n\nTask:\n\nTry to add hash-tags in front of the header and experiment with it.\n\n### Paragraphs\n\nA paragraph and other markdown-blocks, that we will get to know, are separated visually from each other by empty lines.\nThese lines are thus interpreted as one single paragraph.\n\n---\n\nTask:\n\nAdd two more paragraphs and try out, if the number of empty lines in between has an effect on the representation of the content.\n\n### Lists\n\nBullet points in an unordered list indicated by starting *, -, or + and require indentation:\n\n* A list always starts with the first bullet point\n* A bullet point can consist of multiple parts.\n\n  The only thing you will have to keep in mind is the correct indentation.\n\n* A list can also contain further lists:\n\n  + These do not necessarily have to start with an asterisks\n  + But it is good practice if you use different symbols for different nesting\n\n------------------------\n\nTask:\n\nAdd some more bullet points the list, where you write down some comments your experiences with indentation.\n\n#### Numbered lists\n\nMarkdown has also support for numbered lists, which can be used in combination with \"unordered\" lists.\n\n\n1. First\n2. Second\n3. ...\n\nTask:\n\nWrite some useful comments on the usage of numbered lists\nand create an example, where you combine numbered and not numbered bullet points.\n\n### Formatting\n\nHighlighting peaces of the text with only a text-editor might seem tricky at first.\nBut, you can use different elements to tag your content.\n\n* `code`: this type is required if you want to highlight elements as code, the markdown interpreter will leave everything as it is (including Markdown syntax)\n\n* italic: surround the word or the text with either `*` or  `_`.\n\n* bold: think of two times as important as italic, thus it is surround by two `**` or `__`.\n\n* bold and italic: how would you now try to define this and try out some nested combinations.\n\n* Task: If you are using WhatsApp, you could write some messages with this formatting.\n  WhatsApp has support for some pieces of markdown-syntax.\n\n* crossed out: if you use `~` similarly to bold and italic, you will get a similar effect.\n\n* underlined: ???\n\n* crossed out and underlined: follow the markdown idea ;-)\n\n* superscript: it is not Markdown but LiaScript, but you can use `^` to surround superscript elements\n\n### Block-quotes\n\n\u003e If you want to highlight an entire text as important, then add a `\u003e ` to the the beginning of every line.\n\u003e Early emails were an inspiration for this notation.\n\u003e\n\u003e **Within the following parts, we will use this syntax to mark tasks**\n\n---\n\nQuestion: Can blockquotes be nested?\n\n### Links \u0026 References\n\nNothing within the Internet works without links. You can use them everywhere within the document, but Markdown has also support for named and internal links.\n\nhttps://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#1\n\nThe syntax for named links is: `[name](url)`\n\n\u003e **Task 1:** Try to write the previous link as a named link.\n\u003e\n\u003e **Task 2:** Try to highlight your new link as bold.\n\n---\n\nInternal links follow a similar pattern, but instead of URLs you will have to reference the section title, starting with a hash-tag and with a title where spaces are replaced by dashes:\n\n`#Title-Without-Spaces`\n\n\u003e **Task:** Create an internal link to the (Numbered lists) section.\n\n#### Images\n\nImages are a special case of links, which you want to embed into your document and not only reference. Thus, these are important links, which are highlighted by a starting `!`.\n\n\u003e **Task:**  Change the link below to an image.\n\u003e\n\u003e What happened to the name of this link?\n\u003e Try to change the image URL and see the result.\n\u003e\n\u003e __Every part is important__\n\n[Markdown logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)\n\n\u003e The name of link can also be an image, try add a link with the markdown-logo that references section \"Markdown?\"\n\n[Name](#markdown?)\n\n### Code and HTML\n\nOf course you can use any kind of HTML that runs natively within your browser with any kind of styling as depicted.\n\n\u003ch2 style=\"color: green;\nfont-size: 40px;\nborder: 4px dotted pink\"\u003e\nLiaScript-ruleZ\n\u003c/h2\u003e\n\n\nBut, if you want to add code with syntax-Highlighting, you have surround it with a block of 3 backticks \\`.\nAfter the first backtick you can specify the language you use.\n\n\u003e **Task:**\n\u003e\n\u003e Surround the code above with 3 backticks and use the HTML syntax-highlighting.\n\n\n##### `\u003cdetails\u003e` \u0026 `\u003csummary\u003e`\n\n\u003cdetails style=\"background: #EEE\"\u003e\n\n\u003csummary\u003e**Honest Textbook ads (click to enlarge)**\u003c/summary\u003e\n\nhttps://www.youtube.com/watch?v=lhSjYT7pWkw\n\n\u003c/details\u003e\n\n##### `\u003clia-keep\u003e`\n\n\u003e This is not standard, but if you surround your content with `\u003clia-keep\u003e`, then everything within is treated as HTML.\n\u003e No additional Markdown/LiaScript parsing is involved.\n\n``` markdown\n\u003clia-keep\u003e\n| Header 1   | Header 2   | Header 3   |\n| :--------- | :--------- | :--------- |\n| Item 1     | Item 2     | Item 3     |\n\u003c/lia-keep\u003e\n```\n\n### Tables\n\nHow would you write down a table with only a typewriter?\nProbably similar to the way as it is done here.\n\n| Head 1 | Head 2 | Head 3 |\n|:------ |:------:| ------:|\n| Item 1 | Item 2 | Item 3 |\n| ...    |  ...   |    ... |\n\n* Cells are separated by horizontal `|`\n* The first line is the table head\n* The \"colons\" define the orientation of the \"column\":\n\n  - left: `:---`\n  - right: `---:`\n  - centered: `:---:`\n\n\u003e **Task:** Add additional lines to the table and change the column orientation\n## LiaScript?\n\nMarkdown is used for creating static content and blogging. With LiaScript we tried to extend the visual metaphors and extend the language in various ways.\nIt allows to embed:\n\n* Animations\n* Text2Speech\n* Quizzes\n* Multimedia\n* ASCII-Art\n* interactive tables\n* online programming\n* and more ...\n\n### Adding Meta-Information\n\nIf you go to the very first line of your course, you will see something like a HTML comment.\nWithin this comment you can provide additional information about you and your course and are visible to the user, if you go to the information field.\n\n\n``` markdown\n\u003c!--\nauthor:   Your Name\n\nemail:    your@mail.org\n\nlogo: https://upload.wikimedia.org/wikipedia/commons/2/2a/Corporate_Woman_Giving_a_PowerPoint_Presentation.svg\n\nversion:  0.0.1\n\nlanguage: de\n\nnarrator: UK English Female\n\ncomment:  Es wird gezeigt, wie typische bekannte Präsentationselemente auch\n          mithilfe von LiaScript genutzt werden können.\n\ntags:     LiaScript, PowerPoint, Tutorial\n\n--\u003e\n```\n\n\u003e **Tasks:** Change meta-information for your course.\n\u003e\n\u003e with the `icon:` command, you can provide your own logo of your institution.\n\nFurther Settings:\n\n* language: You can provide a translation for your course, currently supported are: `ar`, `bg`, `de`, `en`, `es`, `fa`, `hy`, `ko`, `nl`, `ru`, `tw`, `ua`, `zh`\n\n  https://github.com/LiaScript/lia-localization\n\n* narrator: defines the default voice, type \"voice\" to get a preview onto all supported voices.\n\n### Multimedia\n\nFrom links to ! images --\u003e ? audio --\u003e !? video --\u003e ?? anything else:\n\n* Audio: `?[alt-info](url)`\n* Video: `!?[alt-info](url)`\n* Anything else: `??[alt-info](url)`\n\n\u003e Task1: Embed the links below as audio content\n\n[singing birds](https://bigsoundbank.com/UPLOAD/mp3/1068.mp3)\n\n[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)\n\n\u003e Task2: Go to youtube and add some video content\n\n\u003e Task3: Embed the content of the link below into your course\n\n[A circuit simulator](https://www.falstad.com/circuit/circuitjs.html)\n\n[Piggy Bank](https://sketchfab.com/3d-models/198016-piggy-bank-14bfd106baf14d62aebf6eafbe25b3c3 \"Piggy Bank. 14th-15th Century. Java, Majapahit Dynasty. Terracotta. Overall: 24.2 cm (9 1/2 in.). John L. Severance Fund, 1980.16\")\n\n\u003e Task4: experiment with other websites of your choice and try to add some more captions to your elements.\n\n#### Gallery\n\n\u003e **Galleries are simply paragraphs with only multimedia content!**\n\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\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\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\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\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\u003e **Task1:** Make a gallery\n\u003e\n\u003e **Task2:** Add some movies and other elements to the gallery.\n\n### Animations\n\n\u003e Your user can decide, which presentation mode is used.\n\u003e We currently support Textbook, Slides, and Presentation.\n\nYou can use these curly braces to let blocks appear and disappear.\nSimply add these points the the beginning of your block.\n\n* fade-in: `{{2}}`\n* fade-in and out: `{{1-3}}`\n\n\u003e **Task:** Add some animations to the content below.\n\nLet me appear at first.\nAnd disappear at step 2.\n\n| let    | me        |\n| :----- | :-------- |\n| appear | at step 2 |\n\n\u003e As the the last and final quote.\n\u003e I wanted to be displayed at the very end.\n\n#### Micro-Animations\n\nYou can also \"inline\" animations, simply by unpacking the curly braces:\n\n* fade-in: `{2}{TADA}`\n* fade-in and out: `{1-3}{a __small__-note}`\n\n\u003e **Task:** Try to add a table, where the table content will appear step-wise.\n\u003e Check the different presentations in Textbook mode.\n\n**Block and mikro-animations can be combined.**\n\n### Text to speech\n\nThe currently used default language is `UK English Female`.\nLiaScript currently uses responsive voice as the TTS-Api: \n\nhttps://responsivevoice.org \n\nYou can use more voices, simply by typing \"voice\".\n\n\nWith this notation `--{{1}}--` you can add some more explanation that will be spoken out loud to animation-step 1.\nYou can also change the voice for per comment `--{{2 US English Male}}--`.\n\n\u003e **Task:** Add some comment tags to the head of the paragraphs below and change their voices.\n\u003e \n\u003e Try to add some examples of your mother tongue.\n\nThe entire ***Markdown*** paragraph right below the effect definition in double minus notation is sent to responsivevoice to speak the text out loud.\nIf you click on the ear button at the navigation panel, then this paragraph gets rendered at the place where it is defined.\n\nDer Ganze Satz sollte deutsch ausgesprochen werden!\n\n#### Task\n\n\u003e At this point you can try out by your own, to combine animations and comments.\n\u003e\n\u003e Try out, how your content is presented in different modes.\n\n### Quiz\n\nIt is proven that students perform better, when they have the possibility to reflect.\nQuizzes are an ideal way to check the understanding.\nLiaScript currently has support for four different types of quizzes, with the possibility to tweak them.\n\n#### Text-input\n\nA text input is simply a filed that follows after your question.\nThe solution is placed within a stylized input field.\nIn LiaScript quizzes are always associated with double brackets.\n\n    `[[Solution]]`\n\n\u003e **Task:** Remove the backtics, change the solution and add your questions.\n\n#### Single Choice\n\nIf you want to create a single choice quiz, for which commonly radio-buttons are used, would you use a similar syntax?\n\n    [( )] No\n    [(X)] \u003c-- **YES of course**\n    [( )] I would use H5P\n\n\u003e **Task:** Add some more options and try out, what happens, when multiple `X` are used.\n\n#### Multiple Choice\n\nIf we stick to this metaphor, checkboxes can be defined with the following syntax:\n\n    [[X]] \u003c-- right\n    [[ ]] wrong\n    [[ ]] \u003c-- right\n    [[X]] wrong\n\n\u003e **Task:** Adapt the quiz above, such that the solution represents the defined options.\n\u003e Add and remove some Xs, see what happens when no X is defined.\n\n#### Matrix\n\nA matrix is basically a 2D representation multiple horizontal vectors.\nThe first row only defines the head of this quiz type.\n\n    [ [head1] [ ;-) ] [ Option3 ] ]\n    [   ( )     ( )       (X)     ]  \u003c-- Single Choice\n    [   [ ]     [X]       [X]     ]  \u003c-- Multiple Choice\n\n#### Tweaks\n\n\u003e You can use multiple tweaks when dealing with quizzes.\n\u003e\n\u003e 1. Hints\n\u003e 2. Solutions\n\u003e 3. Scripting\n\n##### Hints\n\nWe stuck to the double brackets notation and simply include `?` to mark a hint.\nAdd as much hints to every quiz type.\n\nWhat is the name of the Markdown dialect we are using?\n\n    [[LiaScript]]\n    [[?]] You have to use the correct writing\n    [[?]] The solutions starts with Lia.....\n\n\u003e **Task:** Try to add some hints to other quizzes. \n\n##### Solutions\n\nWith the help of two horizontal lines, based on asterisk you can define a block that may contain a couple of different Markdown-blocks.\nSolutions are only revealed, when the quiz is solved or when the user gives up.\n\n---\n\nWhat is the name of the Markdown dialect we are using?\n\n    [[LiaScript]]\n    [[?]] You have to use the correct writing\n    [[?]] The solutions starts with Lia.....\n    **************************************************\n    \n    LiaScript is an interactive extension to Markdown,\n    which allows to develop free and open online course.\n    More information can be found at:\n\n    https://LiaScript.github.io\n\n                    Just a diagram\n    1.9 |\n        |                 ***\n      y |               *     *\n      - | r r r r r r r*r r r r*r r r r r r r\n      a |             *         *\n      x |            *           *\n      i | B B B B B * B B B B B B * B B B B B\n      s |         *                 *\n        |**  * *                       * *   *\n     -1 +------------------------------------\n        0              x-axis               1\n\n    **************************************************\n\n\n##### Controlling the solutions\n\nYou can associate javascript to your quiz, which controls how to deal with the input and returns either `true` or `false`.\n\n    [[LiaScript]]\n    [[?]] You have to use the correct writing\n    [[?]] The solutions starts with Lia.....\n    \u003cscript\u003e\n      // @input gets replaced by the current quiz input.\n      // In case of a:\n      // * text input -\u003e string, that has to be encapsulated with (\")\n      // * single choice -\u003e int (-1, if nothing is selected)\n      // * multiple choice -\u003e array int (0 unchecked, 1 checked)\n      \"@input\".toLowerCase().trim() == \"liascript\"\n    \u003c/script\u003e\n\n\u003e More information about quizzes and how they can be used in LiaScript can be found at the\n\u003e [LiaScript-documentation](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#60).\n\n\n### Formulas\n\nLiaScript uses [KaTeX](https://katex.org) to generate formulas.\nTo define a formula environment, the Latex formulas have to be surrounded by `$` signs.\nSimply think of currency and math ;-)\n\nSee all usable functions: https://katex.org/docs/supported.html\n\n1. Inline formulas: `$ ... $` --\u003e $ f(a,b,c) = (a^2+b^2+c^2)^3 $\n2. Block formulas: `$$ ... $$`\n\n   $$\n      \\sum_{i=1}^\\infty\\frac{1}{n^2}\n           =\\frac{\\pi^2}{6}\n   $$\n\n#### Interactive formulas\n\u003c!--\n@formula: \u003cscript\u003econsole.html(`\u003clia-formula formula=\"@'input\" displayMode=\"true\"\u003e\u003c/lia-formula\u003e`);\"LIA: stop\"\u003c/script\u003e\n\n--\u003e\n\nCenter by using `=`\n\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@formula\n\nAdd numbering to formulas\n\n``` latex\n\\tag{33}\n\\begin{equation}\n a =b+c\n\\end{equation}\n```\n@formula\n\nDefinition of a matrix and use some HTML.\n\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@formula\n\n### ASCII-Art\n\nIn LiaScript there are two ways of drawing with ASCII-characters.\nThese are either diagrams or simple sketches.\nThe benefit is, that you do not have to switch to another external tool and everyone can add elements and pieces.\n\n**Diagrams**\n\nCharacters represent colors, upper and lowercase defines the size of the line.\n\n\n                 Combining dots and poly-lines\n    1.9 |\n        |     DOTS\n      y |                                    *\n      - |                              \n      a |                        *\n      x |                  *\n      i |            *\n      s |      *\n        |*\n     -1 +------------------------------------\n        0            x-axis                 1\n\n\u003e **Task:** Add a blue line or curve with `B`s or `b`s, what is the difference?\n\n**Real ASCII-ART:**\n\nA markdown code-block which is marked with `ASCII`, is used to define an image:\n\n``` ascii\n         +-------------+       .--------------.\n +------#|    Box 1    |------*|     Box 2    +-------.\n  \\      +-------------+       '-o------------'       |\n   \\                            /                     |\n    ^                          /                ______|______\n     \\                        v                |      v      |\n      +-----------\u003c--- a circle ----O----------|    Box 3    |\n                                               |_____________|\n```\n\nFor more information and inspiration, checkout the following link:\n\nhttps://github.com/andre-dietrich/elm-svgbob\n\n### Formatting\n\n\u003c!-- style=\"color: red; font-size: 4rem; max-width: 400px\" --\u003e\nBlocs\u003c!-- style=\"background: green\" --\u003e and single elements\u003c!-- style=\"border: 3px dashed blue\" --\u003e can be styled differently!\n\n\u003e __Note:__ If a comment is __before__ a block and represents HTML parameters it is used for the entire block.\n\u003e If the comment is __after__ a element, then it is associated with this element only.\n\u003e\n\u003e See also: [W3Schools](https://www.w3schools.com/Css/css_colors.asp)\n\n#### Useful Styles\n\n* Font color:\n  `color: red` or `color: #FF0000` or `color: rgb(1,0,0)`\n* Font size:\n  `font-size: 4rem` or `font-size: 3cm` or `font-size: 20px`\n* Max width and height:\n  `max-height: 300px` `max-width: 300px`\n* Min width and height:\n  `min-height: 300px` `min-width: 300px`\n* Total height and width:\n  `width: 300px` oder `width: 50%` oder `width: 50vw`\n* Borders:\n  `border: 2px solid black` oder `border: 2px dashed black`\n* Spacing:\n  `padding: 3px` oder `padding-top: ..` oder `padding-left`\n  oder `margin: 3px` oder `margin-top: ..` oder `margin-left`\n\n#### Translation Control\n\n\u003e With the help of `class=\"translate\"` or `class=\"notranslate\"` it is possible to force prohibit the translation of blocks or elements via the experimental \"google-translator\" integration or any other browser plugin. The translate attribute is for everyone else ;-)\n\n---\n\n**Example:**\n\n```` markdown\n\u003c!-- class=\"notranslate\" translate=\"no\" --\u003e\nAll code elements are automatically tagged with the attribute class `notranslate`.\n\n\u003c!-- class=\"translate\" translate=\"yes\" --\u003e\n``` javascript\nconsole.log(\"Hello World\")\n```\n````\n\n\u003e **Task:** Copy the content from the code-block into your document and watch the results after translation.\n\n##### Example of a Quiz\n\n\u003e This is just an example of a complex quiz, which remains useful in different translations.\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### Fun with Tables\n\nMarkdown-tables can also be interpreted as data sets and thus be presented as diagrams, if possible.\nLiaScript tries to analyze the structure of your data in order to identify an optimal visualization.\nBesides, you can also define the visualization you want to use.\n\n#### Line-plot\n\nAbove the table is a little button, that switches to the diagram view.\n\n|   x |  y1 |  y2 |  y3 |\n| ---:| ---:| ---:| ---:|\n|   1 |   1 |   1 |  15 |\n|   2 |   2 |   4 |  15 |\n|   3 |   3 |   9 |  15 |\n|   4 |   4 |  16 |  15 |\n|   5 |   5 |  25 |  15 |\n|   6 |   6 |  36 |  15 |\n\n\u003e **Task:** Add a new line with an x value, that is already within the table.\n\n#### Bar-chart\n\nIn most cases the first column represents the x-values or in this case the main categories.\n\n\n| Animal          | weight in kg | Lifespan years | Mitogen |\n| --------------- | ------------:| --------------:| -------:|\n| Mouse           |     0.028 kg |              2 |      95 |\n| Flying squirrel |     0.085 kg |             15 |      50 |\n| Brown bat       |     0.020 kg |             30 |      10 |\n| Sheep           |        90 kg |             12 |      95 |\n| Human           |        68 kg |             70 |      10 |\n\n\u003e **Task:** Sort the columns and inspect the resulting presentation.\n\u003e\n\u003e **Task:** replace the 90 and 68 kg by 0.9 and 0.68, what happens within the diagram and why?\n\n#### Pie-charts\n\nWhat is a table with only one category?\n\n| Music-Style 1994 | Classic | Country | Reggae | Hip-Hop | Hard-Rock | Samba |\n|:---------------- | -------:| -------:| ------:| -------:| ---------:| -----:|\n| Student rating   |      50 |      50 |    100 |     200 |       350 |   250 |\n\nTo simplify the defintion, you can also use the following table and use the block-comment `\u003c!-- data-transpose --\u003e`, which only performs a matrix transpose before analyzing the table.\nYou can also use micro-animations to present different tables.\n\n\u003c!-- data-transpose --\u003e\n| Music-Style {0-1}{1994} {1}{2014} |      Student rating |\n|:--------------------------------- | -------------------:|\n| Classic                           |   {0-1}{50} {1}{20} |\n| Country                           |   {0-1}{50} {1}{30} |\n| Reggae                            |                 100 |\n| Hip-Hop                           | {0-1}{200} {1}{220} |\n| Hard-Rock                         | {0-1}{350} {1}{400} |\n| Samba                             | {0-1}{250} {1}{230} |\n\n\u003e **Aufgabe:** Switch to presentation mode and check try out the different animations in table and diagram view mode.\n\n#### More diagrams\n\nHave a look on all supported diagram types and tweaks.\n\n\u003cpreview-lia\nsrc=\"https://raw.githubusercontent.com/liaScript/docs/master/README.md\"\nlink=\"https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#fun-with-tables\"\u003e\n\u003c/preview-lia\u003e\n\n\n### Coding\n\n\nJavaScript code can be directly made executable and editable by adding a script-tag `\u003cscript\u003e...\u003c/script\u003e`.\nIt tells LiaScript how to deal with the content.\n`@input` is replaced by the code.\n\n``` js\nconsole.warn(\"Hello World\");\n\n33*55;\n```\n\u003cscript\u003e@input\u003c/script\u003e\n\n\u003e **Task:** Edit some of the code, and jump to different versions with the buttons below.\n\u003e Jump to an older version, change the content and look at the versioning number.\n\n#### Project\n\nA project can be seen as a collection of code-blocks and a script, which defines how to deal with the different inputs.\nAdditionally you can add titles to your files.\n\n``` js     -EvalScript.js\nlet who = data.first_name + \" \" + data.last_name;\n\nif(data.online) {\n  who + \" is online\"; }\nelse {\n  who + \" is NOT online\"; }\n```\n``` json    +Data.json\n{\n  \"first_name\" :  \"Sammy\",\n  \"last_name\"  :  \"Shark\",\n  \"online\"     :  true\n}\n```\n\u003cscript\u003e\n  // insert the JSON dataset into the local variable data\n  let data = @input(1);\n\n  // eval the script that uses this dataset\n  eval(`@input(0)`);\n\u003c/script\u003e\n\n### Extensions\n\nLiaScript allows to add external functionality by using macros.\nMacros are defined within the main-comment at the head of your document.\nMacros provide basically only a substitution and have to be called from the course with a starting `@`.\n\n\n* `@author`\n* `@email`\n* `@comment`\n\nA macro can contain Markdown, HTML, CSS or JavaScript.\n\n\u003e **Task:** Remove the backtics within the list and check the result.\n\n#### Where to find extension\n\nA collection of macros can be found here:\n\nhttps://github.com/topics/liascript-template\n\nevery document can be seen as a library, which can be imported into your course via the macro `import: URL`\n\n---\n\nexample from [AVR8js](https://github.com/LiaTemplates/AVR8js):\n\n```` markdown\n\u003c!--\nimport: https://raw.githubusercontent.com/liaTemplates/AVR8js/main/README.md\n--\u003e\n\n\u003cdiv id=\"example\"\u003e\n\u003cwokwi-led color=\"red\"   pin=\"13\" label=\"13\"\u003e\u003c/wokwi-led\u003e\n\u003cwokwi-led color=\"green\" pin=\"12\" label=\"12\"\u003e\u003c/wokwi-led\u003e\n\u003cwokwi-led color=\"blue\"  pin=\"11\" label=\"11\"\u003e\u003c/wokwi-led\u003e\n\u003cwokwi-led color=\"blue\"  pin=\"10\" label=\"10\"\u003e\u003c/wokwi-led\u003e\n\u003cspan id=\"simulation-time\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n\n``` cpp\nbyte leds[] = {13, 12, 11, 10};\nvoid setup() {\n  Serial.begin(115200);\n  for (byte i = 0; i \u003c sizeof(leds); i++) {\n    pinMode(leds[i], OUTPUT);\n  }\n}\n\nint i = 0;\nvoid loop() {\n  Serial.print(\"LED: \");\n  Serial.println(i);\n  digitalWrite(leds[i], HIGH);\n  delay(250);\n  digitalWrite(leds[i], LOW);\n  i = (i + 1) % sizeof(leds);\n}\n```\n@AVR8js.sketch(example)\n````\n\n\u003e **Task:** import the source from the example to your document and remove the outer backtics.\n\n## Classrooms\n\nLiaScript implements some kind of private classrooms for small groups.\nIf you view this course via the LiaScript project website and click onto the share-button at the top, you should see a \"Classroom\" button.\nSelect \"GUN\" as a backend, give your room a name and connect.\nThis new URL can then be shared and everyone who opens it and connects, will become a member of your classroom.\n\nClassrooms synchronize quizzes and surveys.\n\nSurveys are basically quizzes without solutions but with options.\n\n---\n\n\u003e What features do you like about LiaScript?\n\u003e\n\u003e   [[TTS]] The text to speech output\n\u003e   [[Animations]] PowerPoint like animations\n\u003e   [[Multimedia]] Easy integration of multimedia content\n\u003e   [[ASCII]] Drawing with characters\n\u003e   [[Coding]] Inline coding\n\u003e   [[Openness]] The free sharing\n\n---\n\n\u003e Will you use LiaScript to create courses?\n\u003e\n\u003e     [(yes)] Yes of course\n\u003e     [(no)] No absolutely not\n\u003e     [(maybe)] Maybe, don't know atm\n\n---\n\n\u003e Can you give us some reactions, simply add comma separated phrases:\n\u003e\n\u003e     [[___]]\n\n---\n\n\u003e Give us some live feedback.\n\u003e \n\u003e     [[___ ___ ___]]\n\n## Exporting your course to\n\n* SCORM 1.2\n* SCORM 2004\n* PDF\n* IMS\n* standalone website\n* Android APK\n\nDownload and install nodejs and npm:\n\nhttps://nodejs.org/en/download/\n\nInstall the LiaScript exporter via npm in your terminal:\n\n`npm install -g --verbose @liascript/exporter`\n\nMore information about the usage can be found here:\n\nhttps://www.npmjs.com/package/@liascript/exporter","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliaplayground%2Fliascript_tutorial_kigali","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliaplayground%2Fliascript_tutorial_kigali","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliaplayground%2Fliascript_tutorial_kigali/lists"}