To see this document as an interactive LiaScript rendered version, click on the following link/badge:

If you need help, feel free to ask us any questions in the chat:

                        --{{0}}--

With LiaScript, we tried to implement an extended Markdown format that should enable everyone to create, share, adapt, translate or correct online courses without the need of being a web-developer. We believe that a language-based approach, instead of a tooling-centered one, provides more flexibility, freedom of creativity, and sustainability. Therefor we tried to develop a simplistic syntax that extends the static Markdown with quizzes, animations, spoken text, automated visualization ASCII-art and much more. Everything has been woven around Markdown, so that the content can still be read and interpreted with any kind of editor or Markdown-interpreter.

What is LiaScript?

• a Markdown dialect for interactive courses and data-driven publishing,

• everything is implemented in Elm/JavaScript and runs directly within the browser (online),

• the interpreter itself is also a reader, which allows for storing documents as well as the progress,

• courses can also be taken offline, since the interpreter is also a progressive web app (PWA), that allows to store documents and progress directly within the browser (locally),

• everything is private, we do not store any data about the courses nor the users and their progress

                        --{{1}}--
  

There are a couple of problems that we currently see in the creation of Open educational resources (OER). One of them is isolation, that means people, who want to create content, are seldomly connected via the applied technologies, instead, they are separated by platforms, authoring tools and used core technologies (programming languages). Furthermore, it is not possible to simply grab an educational website/project and to adapt its content for another audience. Additionally, it seems to be nearly impossible for people without a technical background to simply set up a small course. Thus, they stuck with Word, PowerPoint, and PDF, since they provide a simple continuation of the static formats people have used before the computer-era. "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."

                          {{1}}

Goals

• Simplicity: with a human-centered markup-language, anyone should be enabled to create and modify content.
• Interactive: the browser is the next operating systems and although content with LiaScript is developed within a "static" markup-language it should not be presented that way.
• Extendability: everything that is not part of LiaScript shall be embeddable and importable.
• Durability: platforms go down, the development of proprietary software/formats is discontinued, but LiaScript is not hosted on one platform (it can be hosted everywhere) and even without the LiaScript interpreter the content is still readable and interpretable with every editor; you could even print or engrave it on stone or clay. Furthermore, if you use some kind of versioning system (e.g. git) you can refer to any previous version of your course.

                       --{{2}}--

Imagine a world where everyone would have the same access to high quality educational content for free. Imagine all kind of schoolbooks, technical or scientific literature could become open-courSe projects and more interactive, with collaborating teachers and students. Everything that is required is a simple text-editor and a web-browser.

                         {{2}}

                       --{{0}}--

As already mentioned all you need to work with LiaScript is an text-editor, but it can be usefull to apply one of the following tools. At least we apply them to see the result of a change within the course document immediately. You will see, that the development of online-courses will speed up, especially if there is no need for memorizing complex point and click sequences.

"Let the editor be your canvas and the keyboard your brush."

                       --{{0}}--

There are currently 2 plugins for the Atom Editor and Visual-Studio-Code available, which are intended to ease and simplify the development of online courses with LiaScript. Additionally you can use the LiveEditor, an entirely browser based application.

0. LiveEditor: Fully functional online editor, that looks like CodiMD, but is entirely browser based. With support for uploading images and videos and collaborative editing.

1. Atom: This is the free and open and official GitHub editor, with lots of plugins for various use cases.

   1. liascript-preview: Is a tiny previewer that, if it was toggled ( Alt+L ), updates the view on your course each time you save your document.
   2. liascript-snippets: If you start typing lia in your Markdown document you switch on a fuzzy search, that contains a lot of LiaScript help, examples, and snippets.

   Detailed installation instructions can be found here.

2. Visual-Studio-Code: This is Microsoft's free popular editor with various plugins and extensions.

   1. liascript-preview: Is a tiny previewer that, if it was toggled ( Alt+L ), updates the view on your course each time you save your document.
   2. liascript-snippets: If you start typing lia in your Markdown document you switch on a fuzzy search, that contains a lot of LiaScript help, examples, and snippets.

   Detailed installation instructions can be found here.

3. Visual-Studio-Web:

   !?GitHub Webbased Editor

   Using the GitHub builtin Web editor, you can install the following extension to preview your course while editing:

   liascript-preview-web

                         {{1}}
   

LiaScript-DevServer:

                       --{{1}}--

If you are used to another editor, you can also start a LiaScript development server locally. It works like the plugin for Atom and updates your course within your browser on every save, but this can also be used to monitor multiple projects. And you can also use it for testing purposes, as if you would deploy your projects.

Get the project from:

• npmjs: https://www.npmjs.com/package/@liascript/devserver
• GitHub: https://github.com/LiaScript/LiaScript-DevServer

                         {{2}}

CodiLIA:

                       --{{2}}--

If you prefer to work with multiple authors simultaneously, then you should give CodiLIA a try. It is a fork of the collaborative editor CodiMD/Hedgehoc, but instead of a Markdown preview, you will have a LiaScript preview, and you can immediately publish your courses.

Project: https://github.com/liascript/codilia

!?CodiLIA deploy to Heroku

                       --{{0}}--

The easiest way of importing a LiaScript into another website or Learning Management System (LMS) such as Moodle, ILIAS, or OPAL, is via importing an external website or if possible via an iframe.

!?LiaScript embed into OPAL

                         {{1}}

LiaScript-Exporter:

                       --{{1}}--

However, there might be cases where you want to store the progress within the LMS. We therefor have developed an experimental exporter, which allows to bundle your entire project as an SCORM compliant zip-file that can be imported into most common LMS. Other formats than SCORM can be added too, simply write us a mail or create an issue, if you require another one.

• npmjs: https://www.npmjs.com/package/@liascript/exporter
• GitHub: https://github.com/liascript/liascript-exporter

                         {{2}}

Preview-Lia:

                       --{{2}}--

If you want to refer to your own courses or to foreign ones on your personal website or blog, you can make use of our "preview web component". This creates preview cards, which are updated at client-side, so that there is no need to manually update all information whenever there is a change in the course. Simply add the script tag as depicted in the code-snippet and link to your courses via the tag preview-lia.

<html>
  <head>
    <script type="text/javascript" src="https://liascript.github.io/course/preview-lia.js"></script>
  </head>
  <body>
    ...
    <preview-lia src="https://raw.githubusercontent.com/liaScript/docs/master/README.md">
    </preview-lia>

    <preview-lia src="https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md">
    </preview-lia>

    ...
  </body>
</html>

For more information visit the blog entry: Markdown just got a new preview tag

However, you can also use this to refer to your personal GitHub projects.

                       --{{3}}--

LiaScript was originally developed for supporting programming courses for embedded systems. You can see an example of the previous eLab remote laboratory installation.

                         {{3}}

!?eLab demonstrator

                       --{{4}}--

Now it is the opposite, our main focus lays in the development of the Markup language, but parts of the old systems can still be used. Especially if you want to teach programming in (Java, C, C++, C#, Mono, Go and Python). The CodeRunner is an open-source project that enables remote compiling and execution of code. We apply it to teach procedural and object-oriented programming. You can either host your own server or use our free herokuapp:

   {{4}}

CodeRunner:

• GitHub: https://github.com/liascript/CodeRunner

• Try the interactive LiaScript version at:

  https://liascript.github.io/course/?https://github.com/liascript/CodeRunner

• Or if you want to import this functionality into your course, then add the following statement into the main header of your LiaScript course:

  import: https://raw.githubusercontent.com/LiaScript/CodeRunner/master/README.md

                       --{{0}}--

By now you should have a basic idea of what you can do with LiaScript, but probably not how you can publish your courses. The best way is actually to use GitHub, this way no prior versions of your course get lost, and you give others (you can even invite them) the opportunity to contribute to your project.

                       --{{1}}--

No further hosting is required, no further compilation step, the JavaScript interpreter of LiaScript does everything else directly within the browser at client-side.

                       --{{2}}--

As you can see from the example, it is also possible to refer to a specific slide. You only have to add a # with the number of the slide, or you can add the name of the specific slide as well.

                       --{{3}}--

You can also add additional tags to your project to make it discoverable. We currently use three distict categories: liascript to mark it to be related to the projects, while the others liascript-course and liascript-template are used to distinguish the projects into courses or extension, which can be added to courses.

                       --{{4}}--

The same way you can also refer to courses that you have put into your DropBox, ownCloud, NextCloud, or if you have access to some old-fashioned webspace then you can also store all of your files there. You only have to make them publically available and to refer to the raw or in other words, the text document. All other sources are loaded relative to this URL.

0. Create a free account at https://github.com

1. Refer to your projects as via a URL parameter:

   https://LiaScript.github.io/course/?YOUR_RAW_COURSE_URL.md

2. Example with reference to a specific slide:

   https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#5

3. Make your document discoverable by adding the tags liascript and or liascript-course, liascript-template to make it appear in one of the following GitHub topics:

   • general: https://github.com/topics/liascript
   • free courses: https://github.com/topics/liascript-course
   • extensions: https://github.com/topics/liascript-template

   More information on tagging projects can be found here.

4. Use other ways of hosting repositories as well (e.g. DropBox, ownCloud, NextCloud).

                       --{{0}}--

However, we have no idea who is using LiaScript elsewhere, so it might be hard to find some resources online. From time to time we translate open-books into LiaScript and make them more interactive. You can see some of our the experiments at the following URL and use them as a source of inspiration:

https://github.com/LiaBooks

Full overview on courses via the topic liascript-course:

https://github.com/topics/liascript-course

                       --{{0}}--

If you tried out CodeRunner, you will have probably noticed that you can reuse functionality from different courses, simply by using the keyword import: within the main definition of your LiaScript document. Such a functionality is defined with the help of macros. We will dive deeper into this feature at the end of this document, but if you are interested you can inspect some of our templates, which shall provide self-explaining courses of how to embed and use the implemented macros.

https://github.com/LiaTemplates

Full overview on extensions via the topic liascript-template:

https://github.com/topics/liascript-template

                      --{{0}}--

This section is intended to give a brief overview on the basic Markdown syntax elements. The only difference to common Markdown at this point is, that you can define meta-information such as author, language, voice, etc. within a HTML-comment at the beginning of every document. We will describe all of these elements in more detail in section: Macros. All of these macros start with a single word, which is followed by a colon. If you require more space, like for comment: or link: you can use multiple lines, but every following line has to start with an indentation.

Initial LIA-comment-tag for basic definitions:

<!--

author:   Andre Dietrich

email:    [email protected]

version:  0.0.1

language: en

narrator: US English Female

comment:  Write a short abstract of your course, that
          might contain multiple lines and sentences.

script:   https://javascript_resourse_url

script:   https://another_javascript_resourse_url

link:     https://some_css_stuff
          https://and_some_more_css
-->

                      --{{1}}--

The meta-information from your document is later shown within the information-section as well as within the home-section.

                        {{1}}

                      --{{2}}--

If you already know Markdown, then you can skip most of the content in this section. However, there are some slight differences that will be marked with a trailing star at the section title.

        {{2}}

Something might be different 💫

                      --{{0}}--

A course is structured as any other Markdown document with starting hash-tags, whereby the number of hash-tags is used to define the hierarchy of your document.

# Main Title

 ...

## Section Title 1

 ...

### Subsection Title

 ...
## Section Title 2

                      --{{1}}--

Every section is presented separately. In contrast to most Markdown-parsers, LiaScript applies a two step-approach. Sections are parsed at first, which means that the parsers searches for patterns as depicted below. Parsing the content of a section is quite time-consuming, that is why the section-content gets only analyzed, if this specific section should be displayed to the user. However, this happens only at the first appearance, afterwards the resulting view is restored from a local cache.

                        {{1}}

Preprocessing pattern: ## foo bar

                      --{{0}}--

As mentioned earlier, the preprocessor searches for patterns ## header at the beginning of a line to identify sections. However, there might be cases where you want to have multiple different sections on one slide, with different headers. Semantic HTML can help us to deal with this, especially the two HTML5 tags section and article.

# Slide-Title

<section>
## Section-Title

...
</section>

<article>
## Article-Title

...
</article>

                      --{{1}}--

LiaScript will identify these HTML-tags and the content, such that the content within cannot be used as a separator. If you use these two semantic tags, your content is grouped in semanic correct way, which improves the readability if screen-readers are used or keyboard navigation is used.

                      --{{2}}--

When to use which tag might be philosophical question. We can say, if you just want to structure your content with different sub-headers, then use <section>. If your content represents a self-contained document, then use <article>. However, the visually presented result will be the same, such that you could also use a <div> to structure your content.

The <article> 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). 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.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

                      --{{0}}--

There might be some cases, where you want to add further headings quickly. We therefor apply the following syntax with underlining "equal signs" or "dashes". In common Markdown, this alternative syntax is applied to define level-1 and level-2 headings. We use it to create headings that are one level = or two levels - below the main heading. However, these subsections will not be part of the table of contents, and since their interpretation is slightly different to common Markdown, you should use the method presented in the previous section.

...

## Section Title

Local Subsection
================

Local Sub-SubSection
--------------------

                      --{{0}}--

How would you separate paragraphs or other content elements from each other, if you only have a type-writer? The easiest way is a spatial separation, and in Markdown this is done via an empty line. Thus, whenever you have blocks such as paragraphs, enumerations, or tables, it is common practice to separate them via a newline. This makes it easier for you to edit and structure your course, and it prevents the interpreter from too much work.

This is a paragraph that consist only of one line.

Here comes another paragraph
with multiple lines.
And multiple sentences.

                        --{{0}}--

How does text-highlighting work in a text file and thus within a paragraph? Well, Markdown defines some basic characters that can be used to surround a word or a collection of words. We tried to use the GitHub flavored Markdown style for simple formatting, thus simply use multiple asterisks or underscores to mark certain parts of a text.

• *italic* -> italic

• **bold** -> bold

• ***bold and italic *** -> ***bold and italic ***

• _also italic_ -> also italic

• __also bold__ -> also bold

• ___also bold and italic___ -> also bold and italic

• ~strike~ -> strike

                      --{{1}}--
  

We define some additions to common Markdown, such as underline and superscript, which can be defined with the following syntax:

                        {{1}}

• ~~underline~~ -> underline
• ~~~strike and underline~~~ -> ~~~strike and underline~~~
• ^superscript^ -> ^superscript^

                      --{{0}}--

As you can see from the examples, you can combine and nest all elements freely.

• **bold _bold italic_** -> bold bold italic
• **~bold strike~ ~~bold underline~~** -> bold strike bold underline
• *~italic strike~ ~~italic underline~~* -> italic strike italic underline

                      --{{0}}--

If you want to use asterisks, hash-tags, or other syntax elements within your document without applying their functionality, then you can escape or in other words indicate them with a starting backslash. If you want to escape a backslash, you will have to write two subsequent backslashes. But you do not have to use it, if there is only one asterisk within a line, this will be interpreted as a single character. So you will have to apply this kind of escaping only to prevent misunderstandings between you and the interpreter.

\*, \~, \_, \#, \{, \}, \[, \], \|, \`, \$, \@, \\, \<, \>

Result: *, ~, _, #, {, }, [, ], |, `, $, @, \, <, >

                      --{{0}}--

One thing that we missed in standard Markdown, was an implementation for arrows. The verbatim text shows, how arrows are defined in our Markdown implementation with their result on the right.

-> ->, ->> ->>, >-> >->, <- <-, <-< <-<, <<- <<-, <-> <->, => =>, <= <=, <=> <=>

--> -->, <-- <--, <--> <-->, ==> ==>, <== <==, <==> <==>

~> >, <~ <

                      --{{1}}--

But you can also use some basic smileys. We will try to extend this partial support in the future.

                        {{1}}

:-) :-), ;-) ;-), :-D :-D, :-O :-O, :-( :-(, :-| :-|, :-/ :-/, :-P :-P, :-* :-*, :') :'), :'( :'(

                      --{{2}}--

However, since LiaScript accepts Unicode, you can also copy and paste any kind of character including emojis.

The next section shows how external resources can be referenced and integrated.

                      --{{0}}--

There are two ways of adding links to a Markdown document, either by inlining the URL directly or you can name it (as shown in listing 2), by applying the typical brackets and parenthesis notation, the optional information is put in double quotes at the end of the URL. This optional information is used as a title attribute, and it is shown, when the user hovers the link with the mouse.

1. Example of an URL-link -> http://goo.gl/fGXNvu

   text-formatting can be applied also *** http://goo.gl/fGXNvu *** -> *** http://goo.gl/fGXNvu ***

2. Naming the link ([title](http://goo.gl/fGXNvu "optional info")) -> title

3. For internal navigation you can refer to the slide number or to title with a starting #

   • [next slide](#18) -> next slide

   • [next slide](#preview-lia-💫) -> next slide

   • If your internal link includes parentheses or other characters, you can also use percent-encoding. An opening parentheses would then be written as %28 and a closing one as %29.

     For more information visit: https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding

                      --{{0}}--

LiaScript has an advanced preview link, that will load the remote course and parse the meta-information such as title, version, comment, logo, email, tags, form your main HTML-comment at the top of your document. To do this, you will have to use [preview-lia] as the title of your link, which is followed by the raw URL of your course document.

[preview-lia](https://raw.githubusercontent.com/LiaScript/docs/master/README.md)

preview-lia

                      --{{1}}--

You can use this technique also to create previews for other courses on your personal website or for other GitHub projects, as it was described in section Projects. For more information follow the link:

{{1}} https://aizac.herokuapp.com/markdown-just-got-a-new-preview-tag/

                      --{{0}}--

Sometimes it might be required to have both, a link and a visual representation of it as an QR-Codes. Similar to previews, you simply name your link qr-code:

• Syntax: [qr-code](https://LiaScript.github.io)

• Example:

  qr-code

                      --{{1}}--
  

You can add further information to your link by adding a title. Markdown is also allowed within the link title. In case of an image or media link, the title will be used as a subtitle and displayed accordingly.

                        {{1}}

• Syntax: [qr-code](https://LiaScript.github.io "Checkout the LiaScript website or the __[blog at heroku](https://aizac.herokuapp.com)__")

• Example:

  qr-code

  --{{0}}--

These are two additional link types that you can also use within the <a> tag, but LiaScript supports them natively.

    {{1}}

• mailto:

  [Write me a Mail](mailto:[email protected]) --> Write me a Mail

  [LiaScript\@web.de](mailto:[email protected]) --> [email protected]

  --{{1}}--
  

  The mailto link type does not need to be explained. 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. Since the @ symbol is used for macro calls, this has to be escaped at the moment.

    {{2}}
  

• tel:

  [Call me](tel:+49-12345-67890) --> Call me

  [+49-12345-67890](tel:+49-12345-67890) --> +49-12345-67890

  --{{2}}--
  

  The tel link type is lesser known and has been introduced for mobile phones. 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.

                      --{{0}}--

Images are defined similar to links, but they are indicated with a starting exclamation mark.

                      --{{1}}--

The name of the link or the alt-text is not wasted, since it is not displayed anymore. Instead, it is displayed, if the image cannot be loaded for some reasons, and it is used by screen readers to give visually impaired people a hint, of what will be visible on the image. So please, don't leave it empty.

                      --{{2}}--

The URL can be either relative to your Markdown document or it can be absolute, which means it is pointing to an external resource.

                      --{{3}}--

The optional title in LiaScript is not only used as a title attribute, instead it is used as a real sub-title for all media links.

Image-notation: ![{1}{alt-text}]({2}{url} {3}{"optional sub-title"})

                        {{2}}

• relative URL: ![Beautiful Lenna](img/lenna.jpg)

  

• absolute URL: ![Annunciation of ...](https://upload.wiki...jpg)

  

                      --{{4}}--
  

Note, that LiaScript is smart enough to scale your images to the optimal size. If your image is smaller than the current maximal applicable width, it is shown in full size. If it is larger, than it is scaled to fit in width and also in height. You can further click on all images to open them as modal and if the image is quite large, such as Leonardo's painting, then you can also zoom and inspect it, by hovering with the mouse or thumb.

                     --{{5}}--

Additionally, if you start a paragraph with an image, LiaScript expects it to be a floating object, which is depicted with a maximal size of 50% of your view-port, if it is not smaller than that.

                       {{5}}

![Beautiful Lenna](img/lenna.jpg "subtitles are allowed too")
Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                      --{{0}}--

How would you interpret a paragraph full of images? We thought that the only reasonable depiction of this could be a gallery.

![img1](url) ![img2](url) ![img3](url)
![img4](url)
![img5](url)

                      --{{1}}--

And we like this idea... You can click on every image and inspect it also with the zooming feature.

                        {{1}}

                      --{{0}}--

If an exclamation mark indicates visual content, why not using a question mark to indicate auditive content. (From our perspective it resembles an ear.) Everything is similar to images and the URLs can be either relative or absolute.

• Syntax: ?[a horse](https://www.w3schools.com/html/horse.mp3 "hear a horse")

• Example:

  ?a horse

                      --{{1}}--
  

Additionally, you can also directly reference music from the SoundCloud website or from Music.YouTube. The associated song will be automatically embedded for you.

                        {{1}}

• Syntax: ?[soundcloud](https://soundcloud.com/glennmorrison/beethoven-moonlight-sonata)

• Example:

  ?soundcloud

                      --{{0}}--

Images are marked with a starting exclamation mark before the link, audio by a starting question mark and movies are made of images and sound, that is why you combine both marks !?. Defining resources this way shows at least the links correctly in other Markdown parsers or on GitHub. There is baked-in support for YouTube, Vimeo, PeerTube, DailyMotion and TeacherTube, which means that you only have to include the link and the resource will be embedded appropriately.

Movie-notation: !?[alt-text](movie-url)

• YouTube: !?[The Future of Programming](https://www.youtube.com/watch?v=8pTEmbeENF4)

  !?The Future of Programming

• relative path: !?[Something about math](vid/math.mp4)

  !?Something about math

• List of supported Video Platforms

  • DailyMotion
  • PeerTube
  • TeacherTube
  • Video TU-Freiberg
  • Vimeo
  • YouTube

                      --{{1}}--
  

If you required more control over your video, such as autoplay, muted, start-time, and probably also size and colors, the you can also apply custom styling rules, then you should take a look at the following section:

                        {{1}}

Customizing-Multimedia

                      --{{0}}--

If it is something else that you want to embed something else from another website, then you should try out the link syntax with two starting question marks. This means, LiaScript will try to use the oEmbed service, which is offered by a couple of websites. If this succeeds, this will embed only a specific part. If it fails, then LiaScript will at least try to embed the website via an iframe.

Examples:

• SketchFab: ??[ear model](https://sketchfab.com/3d-models/ear-anatomy-468e2039bde34a3fabb9e90bff9cd56b)

  ??ear model

• StoryMaps: ??[presentation](https://storymaps.arcgis.com/stories/583f8b48a857442cb8d27411c93a9664)

  ??presentation

• CirquitJS: ??[Simulation: Noninverting Amplifier](https://www.falstad.com/circuit/circuitjs.html?startCircuit=amp-noninvert.txt)

  ??Simulation: Noninverting Amplifier

                      --{{0}}--

What you have seen previously with images is also possible with any kind of multimedia link. Simply put everything into one paragraph and LiaScript will automatically generate a gallery for you:

![img](url) ?[audio](url) !?[movie](url)
??[something else](url)
??[something else](url)

?a horse !?Fun with Tables ??VTK VolumeContour ??Circuit simulation ??Bust of Nefertiti

                      --{{0}}--

So far we had introduced Markdown only on a tiny level, which means, by now you should know how to emphasize words and phrases within a paragraph, how to add images and how you can use references to point to internal or external resources. But, all we did so far is to work with paragraphs. But as pointed out in the quote below, Markdown can do even more.

... Markdown’s syntax is comprised entirely of punctuation characters, which punctuation characters have been carefully chosen so as to look like what they mean. E.g., asterisks around a word actually look like *emphasis*. Markdown lists look like, well, lists. Even blockquotes look like quoted passages of text, assuming you’ve ever used email.

-- Markdown philosophy by John Gruber

                      --{{1}}--

Within the following part we will learn how to deal with Markdown blocks and how to format your content to define the following elements:

   {{1}}

1. Lists
2. Blockquotes
3. Tables
4. HTML
5. Code-Snippets
6. Horizontal rules

                      --{{0}}--

The GitHub-flavored Markdown supports two types of lists, ordered and unordered ones, and so does LiaScript. If you every used a typewriter then the following syntax for lists would look natural to you. The only thing that matters here is the correct indentation.

Use spaces for correct indentation! Tabs are allowed too, but might be confusing, since editors tend to use varying lengths from 2 to 4 spaces to display them...

                      --{{0}}--

To define an unordered list, starting asterisks *, pluses +, and dashes - can be used and mixed. If one point has more than one line, you can also use multiple lines to define paragraphs. All other Markdown elements, you will get to know, can be included in the same way.

Markdown-Syntax:

* alpha
+ **beta**
- gamma
  and delta

  new Paragraph

  - and another
  - important list

- epsilon

                      --{{1}}--

As you can see from the result, you can apply all Markdown styling elements freely. The starting characters will be interpreted equally, thus it makes no difference, if you use asterisks, pluses and dashes. To improve the readability of your document, we would recommend to stick with one format for every level. Starting with asterisks on the first level and dashes within the second level, etc.

                        {{1}}

Result:

• alpha

• beta

• gamma and delta

  new Paragraph

  • and another
  • important list

• epsilon

                       {{2}}

Note: At the moment it is required to separate blocks by at least one empty line. The following example will be interpreted as a single paragraph:

* this is one single
  - paragraph with a dash.

Whereby the following will result in a bullet point with another one nested

* separate paragraph

  - and this is a separate sub listing

                      --{{0}}--

Ordered lists start with a number and a dot. As you can see from the example, the numbering is important. In contrast to the GitHub flavored Markdown or the original Markdown, where the list below would result in two separate lists, and the numbering for every list would start at 1, ignoring your numbering order. With the LiaScript interpretation you can separate your lists, add more explanations in between, or use animations to make certain parts appear or disappear.

Markdown-Syntax:

0. alpha
1. **beta**

Something else ...

3. * gamma
   * delta
   * and epsilon
2. probably zeta

Result:

0. alpha
1. beta

Something else ...

3. • gamma
   • delta
   • and epsilon
4. probably zeta

                      --{{0}}--

If you, from time to time, reply to emails, than the following notation will look quite familiar to you. To make use of quoted text, simply start a line with a > greater than character.

Markdown-Syntax:

> This was said some time ago ...
>
>> This was said even longer ago,
> > I guess ...
>
> * aleph
> * beth

                      --{{1}}--

As you can see from the example, all Markdown elements can be used within a blockquote and vice versa. Everything you have learned so far can be easily combined, it could also be a gallery or an embedded object...

                        {{1}}

Result:

This was said some time ago ...

This was said even longer ago, I guess ...

• aleph
• beth

                      --{{0}}--

Blockquotes are often used for citations, and so do we. You can use the following pattern to mark a blockquote as a citation. Simply use two paragraphs within a blockquote and start the second one with two dashes --.

LiaScript-Syntax:

> “Live as if you were to die tomorrow.
> Learn as if you were to live forever.”
>
> -- Mahatma Gandhi

                      --{{1}}--

The resulting blockquote looks slightly different. Furthermore, the paragraph followed by dashes is put into and HTML cite-tag.

         {{1}}

“Live as if you were to die tomorrow. Learn as if you were to live forever.”

-- Mahatma Gandhi

                      --{{2}}--

You can use this syntax, with starting dashes, everywhere within a LiaScript document and your corresponding paragraph it will be rendered within a cite-tag. But, at this time it will only affect the representation of blockquotes. We are not sure yet, how this can also be applied to images, tables, lists, etc.

         {{2}}

lorem ipsum ....

-- Some more citations

                      --{{0}}--

Tables, as we hope, are easy to interpret and to create. Simply use horizontal rules to separate cells. The header is always defined by the first line, while the second line is used to separate the table header from the body visually and to define the column alignment.

Markdown-format:

| Tables               |      Are      |  Cool |
| -------------------- |:-------------:| -----:|
| *** columns 3 is *** | right-aligned | $1600 |
| ** column 2 is **    |   centered    |   $12 |
| * zebra stripes *    |   are neat    |    $1 |

                      --{{1}}--

As you can see in the result, you can sort tables, by clicking onto the icon that appears on the right of every header cell. A table will then be either sorted ascending, descending, or not sorted, which means your initial row order will be restored.

                        {{1}}

Result:

                      --{{2}}--

The position of the colon defines whether a column should be centered, aligned to the left or to the right. By default, if you do not use colons, all columns are aligned to the left.

      {{2}}

• centered --> :---:
• right --> ---:
• left --> :--- or --- (default)

                      --{{0}}--

But why stopping here? A table, in many cases, is just a representation of a dataset. If so, why not simply visualizing it accordingly and plot a graph, display a chart or a map, or whatever fits the most for your data. At the moment we apply simple rules to identify the nature of your dataset and thus choose a visual representation.

For more details have a look at section Fun With Tables, which provides and extensive overview onto all supported representation schemes.

                      --{{1}}--

The easiest and probably most obvious representation of a simple plot, would be the following. A header with some names and columns that contain numbers. The first column is interpreted as the main column and thus defines the x values, the rest is up to you. A cell is then only associated with a number, if the first "word", sequence of characters separated by a space, can be parsed as a number. The 0km within this example gets ignored. So if you want certain values to be ignored, simply attach something directly to the number, or add a character in front of it.

      {{1}}

| x's |  some y's  |                  dist |
| --- |:----------:| ---------------------:|
| 1   |    1 \$    |                 16 km |
| 2.2 |    2 \$    |                 12 km |
| 3.3 |    5 \$    |                  1 km |
| 4   | -12.333 \$ | 0km _will be ignored_ |

                      --{{2}}--

LiaScript identifies this pattern and automatically adds a button above the table, which allows to switch between the table and the "line chart" representation. You can modify the chart interactively and even download the resulting image.

      {{2}}

                        --{{3}}--

A function cannot possess different y-values for one x-value, thus, if you have two or more equal x-values, the resulting plot will be a scatter plot.

       {{3}}

| x's |  some y's  |  dist |
| --- |:----------:| -----:|
| 1   |    1 \$    | 16 km |
| 2.2 |    2 \$    | 12 km |
| 3.3 |    5 \$    |  1 km |
| 4   | -12.333 \$ | -5 km |
| 4   |            |     1 |

       {{3}}

                               --{{4}}--

Last but not least bar-charts. If the first column contains at least one cell, that cannot be parsed as a number while the others do have, then this table gets interpreted as a bar-chart. The first column thus defines your set of groups. It is now also possible to sort your table according to different columns, and to see this ordering also within the bar-chart representation.

                           {{4}}

| Animal          | weight in kg | Lifespan years | Mitogen |
| --------------- | ------------:| --------------:| -------:|
| Mouse           |        0.028 |             02 |      95 |
| Flying squirrel |        0.085 |             15 |      50 |
| Brown bat       |        0.020 |             30 |      10 |
| Sheep           |           90 |             12 |      95 |
| Human           |           68 |             70 |      10 |

                           {{4}}

                      --{{5}}--

As mentioned earlier, this is only a brief introduction into this topic. So check out section Fun With Tables for a complete overview.

                      --{{0}}--

Editing tables might seem tedious, but actually it is not. There is a huge number of plugins for different editors that you can use, which do the formatting for you. You can use them to quickly navigate through your cells, and some even allow sorting.

Editors: Plugins

• Atom: markdown-table-editor
• VS-Code: Markdown Table
• Obsidion: Advanced Tables

                      --{{0}}--

You can also use plain HTML in your Markdown, if you miss something. It will mostly work pretty good, but it should be used with caution, since some interpreters apply different rules. Some interpret everything within an HTML tag as HTML, while others allow mixing. Thus, HTML can contain Markdown, which contains HTML, which contains... By the way, LiaScript allows mixing. Thus, keep in mind that newlines and indentation are still relevant.

Markdown-Syntax:

<div style="color: green">

Test <q>**bold**</q> and <b>HTML bold</b> works also inline

![Beautiful Lenna](img/lenna.jpg "Image of Lenna with a hat")

</div>

                      --{{1}}--

The result shows how the inline-CSS is applied to all nested Markdown elements. However, if you want to apply some styling to your document, LiaScript supports another minimal invasive way of doing that. We will describe this in detail in section Styling.

                        {{1}}

Result:

See the following list for an complete overview onto all HTML elements:

HTML Element Reference

                      --{{2}}--

If you use custom HTML instead of Markdown, then no styling will be applied. You can of course create more complex content or tables, this way you can apply your own styling to all elements.

                        {{2}}

CSS-Reference

                      --{{3}}--

If you want to, you can also copy the generated LiaScript structure and use our classes. Most Browsers include an inspector, which can be used to interactively inspect the entire DOM-tree.

                        {{3}}

Open Inspector: Ctrl+Shift+i or Ctrl+Shift+k

                        {{3}}

!?Inspecting the DOM

                      --{{4}}--

But, you can also import your own styles within the main document comment by using the link definition. We will explain this in more details within the macro section link.

                        {{4}}

<!--
...
link: file.css
...
-->

# Main Title

                      --{{0}}--

The details and summary tags are standard HTML tags and GitHub also supports their usage with Markdown. These tags offer a neat way to define something what is nowadays called accordion. Thus, your user can click on the summary text to make the body of the details-tag appear.

Syntax:

<details>

<summary>**Honest Textbook ads (click to enlarge)**</summary>

!?[If High School and College Textbooks Were Honest - Honest Ads](https://www.youtube.com/watch?v=lhSjYT7pWkw)

</details>

Result:

                      --{{0}}--

If you want to embed more complex HTML, and only HTML, without taking care about indentation and formatting, then should use the lia-keep tag to surround your code.

<lia-keep>
  <style>
    table, th, td {
      border: 1px solid black;
      width: 250px; height: 40px;
      text-align: center;
    }
  </style>

  <table style="margin: 1em">
    <tr>
      <th>**Header 1**</th>
      <th>**Header 2**</th>
    </tr>
    <tr>
      <td>Cell 1</td>
      <td rowspan="2">Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
    </tr>
  </table>
</lia-keep>

                      --{{1}}--

As it is demonstrated in the result, everything within this tag will be treated as HTML only, no Markdown parsing will be applied and indentation will be checked.

                        {{1}}

Result:

                      --{{2}}--

This way, you could for example also import even more complex HTML-tables, pictures with multiple sources for different screen-sizes, and more. With great power comes great responsibility. Thus, you will also be responsibile for your styling.

                      --{{0}}--

In Markdown, you can use a sequence of at least three subsequent backticks ``` to indicate a code-block that should not be treated as Markdown, but instead contains some kind of code for which syntax-highlighting should be used, if possible. The first word after the backticks is used as an indicator, for which kind of syntax-highlighting should be applied.

``` python
import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print(i)
```

                      --{{1}}--

In case you are wondering, how to embed a code-block into a code-block with backticks? Three backticks are the minimum, thus you can surround your Markdown code-block example with a sequence of 4 or more backticks. If you start with four backticks, LiaScript will parse everything as code until it reaches a matching number of backticks.

    {{1}}

import time
# Quick, count to ten!
for i in range(10):
  # (but not *too* quick)
  time.sleep(0.5)
  print(i)

                      --{{2}}--

However, we are still in the Markdown world with static code visualization. LiaScript has also support for interactive programming, thus all of your code-snippet can be made executable and editable. This will be described in more detail in section Interactive Coding.

                      --{{0}}--

Markdown also supports adding code by using tilde ~ characters instead of backticks. This is at the moment not supported by LiaScript, but might be added in the future.

~~~ javascript
var a = "b"
~~~

                      --{{1}}--

Additionally, it is also possible in standard Markdown to use indentation with at least 4 spaces to mark a block or a line as code. In LiaScript this is treated differently. You can use indentation to keep your document readable. The two indicators for text-to-speech in the example are treated equally by LiaScript, but another Markdown interpreter will interpret the second example as a single paragraph, while the indicator in the first example will be treated as code, and thus be easier to read with any other Markdown interpreter (including the representation on GitHub).

                        {{1}}

This is not code ...

    Any kind of text with a 4 space
    indentation will be treated as code
    in Markdown ...

                --{{1}}--
This text will be spoken out loud in LiaScript.

--{{2}}--
This text will be spoken out loud too.

                      --{{0}}--

If you want to bundle a couple of code-blocks into something that mirrors a project, you can achieve this with the following syntax. All code-blocks are simply attached to each other, in order to indicate a grouping. If you separate them at least by one newline, they will be treated separately. This will be pretty neat, if we introduce the concept of interactive code-blocks.

``` js     -EvalScript.js
let who = data.first_name + " " + data.last_name;

if(data.online) {
  who + " is online"; }
else {
  who + " is NOT online"; }
```
``` json    +Data.json
{
  "first_name" :  "Sammy",
  "last_name"  :  "Shark",
  "online"     :  true
}
```

                      --{{1}}--

You can define optional names within the head of your code-block. The starting plus + and minus - symbols are used to indicate, if the resulting code-blocks should be visible or hidden. However, you can change this, by clicking onto the resulting title-bar to either maximize or minimize the code-block.

                        {{1}}

let who = data.first_name + " " + data.last_name;

if(data.online) {
  who + " is online"; }
else {
  who + " is NOT online"; }

{
  "first_name" :  "Sammy",
  "last_name"  :  "Shark",
  "online"     :  true
}

                      --{{2}}--

If you do not add a plus or a minus as a prefix to your file, the plus is used as default.

                      --{{0}}--

In most cases you can simply add the name of the language or the common filename ending into the head of a code snippet. Most Markdown interpreters will use highlight.js for language rendering, since we require also an editor with syntax highlighting capabilities, we use ace. Thus, the language support might differ to other systems. We therefor apply a mapping, so that you can still use all highlight.js short-codes but also those of ace.

Overview: https://github.com/LiaScript/docs/blob/master/Code.md

                             --{{0}}--

In contrast to common Markdown parsers or viewers, LiaScript allows you to include and execute JavaScript code. When combined with HTML elements, you are free to integrate whatever functionality you desire.

                             --{{1}}--

The last statement of your script also defines the result that will be shown, but only if it is not undefined. You can also use console.log to log the script activities. As the examples below show, you can combine your scripts with LiaScript animations, so they will only be executed in the right fragment/context. However, you can do much more with scripts.

                              {{1}}

Checkout Section JavaScript for more information!

Do some internal calculation <script> 99 * 88  </script>, the next script
contains an error <script> 99 * a </script>.

                                  {{2}}
<script>
    // Initialize a Line chart in the container with the ID chart
    new Chartist.Line('#chart', {
        labels: [1, 2, 3, 4],
        series: [[100, 120, 180, 200]]
    });

    console.debug("loaded #chart") // or undefined
</script>
<div class="ct-chart ct-golden-section" id="chart"></div>

Do some internal calculation <script> 99 * 88 </script>, the next script contains an error: <script> 99 * a </script>.

                            {{2-3}}

                            {{3}}

--{{4}}--

When discussing events, whether past, present, or future, your course may quickly become outdated. This 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. Rather than relying solely on your calculations, users have the opportunity to inspect and validate your code by double-clicking on the highlighted script result. Even more, it is possible to modify the code, enabling them to double-check your findings and experiment with the results.

  {{4}}

Russia started its invasion of Ukraine
<script format="relativetime" unit="day">
// Define the start date of the invasion
const invasionStartDate = new Date('2022-02-24');

// Get the current date
const currentDate = new Date();

// Calculate the difference in milliseconds
const differenceInMs = currentDate - invasionStartDate;

// Convert milliseconds to days
const differenceInDays = differenceInMs / (1000 * 60 * 60 * 24);

// Calculate the number of full days
const daysSinceInvasion = Math.floor(differenceInDays);

-daysSinceInvasion
</script>.

  {{4}}

Russia started its invasion of Ukraine

 --{{5}}--

We combined scripts with the Internationalization API, which enables appropriate formatting of outputs. The days output is not hardcoded in our code. If we change the locale to another language, such as in the following example, the result will be optimized for the Russian language. Furthermore, by using the embedded Google Translator functions, the locale will be automatically set according to the selected language.

 {{5}}

Россия начала вторжение в Украину
<script format="relativetime" unit="day" locale="ru">
// Define the start date of the invasion
const invasionStartDate = new Date('2022-02-24');
...

--{{6}}--

Now, 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. What's more, picture scripts being directly combined with input fields, and a change in one script triggering the execution of another. All of this is possible in LiaScript. We have reimagined the usage of scripts as interactive powerhouses, and we will delve into the details in chapter JavaScript or JS-Components.

  {{6}}

longitude: <script default="13.33125" input="range" output="longitude">@input</script>

latitude: <script default="50.92558" input="range" output="latitude">@input</script>

<script run-once="true" style="display: block">
  fetch("https://api.open-meteo.com/v1/forecast?latitude=@input(`latitude`)&longitude=@input(`longitude`)&hourly=temperature_2m")
    .then(response => response.json())
    .then(data => {
      let table = "<!-- data-show data-type='line' data-title='Open-Meteo Wheather API' -->\n"

      table += "| Time | Temperature |\n"
      table += "| ---- | ----------- |\n"

      for (let i=0; i < data.hourly.time.length; i++) {
        table += "| " + data.hourly.time[i] + " | " + data.hourly.temperature_2m[i] + " |\n"
      }
      send.lia("LIASCRIPT: "+table) }
    )
    .catch(e => {
      send.lia("ups, something went wrong")
    })
  "waiting for the weather"
</script>

                      --{{0}}--

At the moment it is possible to insert horizontal rules by adding lines with at least 3 dashes, longer sequences of dashes are allowed too. Common Markdown also allows to define such rules with asterisks *, but this is used in LiaScript to group blocks, as we will described later...

Markdown-Syntax:

some paragraph

---

something else

----------------

Result:

some paragraph

something else

             <!-- style="color: red" -->
                      --{{0}}--

In order to support a nearly equal experience for all Markdown interpreters you should stick with the basic Markdown notation or use simple HTML-tags as much as possible, for example if you want to change the color of a sentence or a word.

                      --{{1}}--

However, LiaScript allows you also to inject attributes into all Markdown blocks and inline elements by attaching an HTML-comment to that specific object. If the content of this HTML-comment can be parsed as HTML-attributes, then these settings will be applied to the element attached.

                       {{1-2}}

<!--
style="color: red;" id = "elementID" class="foo bar"
-->

                        {{2}}

Further resources:

                     --{{2}}--

The following resources will give you a full overview onto the most common HTML attributes and onto styling elements. It might be pretty overwhelming at first glance, what is possible, but you will see, that with some basic elements you can already achieve a lot. And when it comes to HTML and styling, you can find examples for pretty much everything on your prefered search-engine, e.g. ecosia.

• HTML attributes:

  Checkout the following link to get a full overview onto all HTML attributes, which you can also apply in LiaScript: w3schools: HTML Attribute Reference

• Styling with CSS:

  In most cases inline-styling will be applied, the following website covers all CSS-Syntax elements, which then can be used simply by attaching comments in the following way:

  <!-- style="color: red; font-size: 20px;" -->

  w3schools CSS-Tutorial

  !?Basic Inline Styling - CSS

                        --{{0}}--

So what is actually a block in LiaScript or Markdown? Basically it is everything that is separated by a newline, such as a paragraph, a table, a code-block or a list. But it can also be a block of multiple blocks, such as a list, which may consist of different bullet points, where every bullet point can be a list of multiple blocks by itself.

• Blocks:

  • tables
  • paragraphs
  • lists (ordered/unordered)
  • blockquotes
  • horizontal rules
  • HTML-blocks (if standing alone)

• LiaScript-Extensions:

  • comments

  • citations

  • effects

  • quizzes

  • surveys

  • tables

  • ASCII-Art & Charts

  • executable code-blocks and projects

                      --{{1}}--
    

Settings for entire blocks can be set with a starting comment that includes all required HTML-attributes and can even contain animation settings. This can also be used to highlight specific elements of your slides.

                        {{1}}

LiaScript-Syntax:

<!-- class = "animated rollIn" style = "animation-delay: 3s; color: purple" -->
The whole text-block should appear in purple color and with a wobbling effect.
Which is a **bad** example, please use it with caution ...

Result: (be patient)

The whole text-block should appear in purple color and with a wobbling effect. Which is a bad example, please use it with caution ...

                      --{{2}}--

Additionally, this method can be used to overwrite some aspects of all Markdown element. The example shows how you can change the background color for a certain element. This comes quite handy, if you want to emphasize further some parts of your document.

                        {{2}}

<!-- style="background-color: tomato;"-->
> **Warning**
>
> You have to be aware, that this does not affect the
> font-color (dark/light mode). Try to use  pastel
> colors, or overwrite the color manually with:
>
>  `color: white;`

Warning

You have to be aware, that this does not affect the font-color (dark/light mode). Try to use pastel colors, or overwrite the color manually with:

color: white;

                      --{{3}}--

The following example depicts the interconnection of nested block-elements. For the entire table and also for all other blocks, it is possible to set the properties for width, font-color and font size, which will be applied onto every cell. And every cell can overwrite these values simply by adding a style-comment as the first element. These settings are even preserved, if you reorder the table.

                        {{3}}

               <!-- style="width: 50%; min-width: 400px; color: red; font-size:20px" -->
| <!-- style="background: azure"--> Header 1 | <!-- style="background: brown"--> Header 2        |
|:------------------------------------------ |:------------------------------------------------- |
| <!-- style="background: coral"--> Item 1   | <!-- style="background: rgb(12,12,111)"--> Item 2 |
| <!-- style="background: cyan" --> Item 3   | <!-- style="background: #b88608"--> Item 4        |

Result

            <!-- style="width: 50%; min-width: 400px; color: red; font-size:20px" -->

                      --{{4}}--

There are some special (internal) formats for changing the appearance of code-blocks and how to deal with tables. These topics will be handled separately.

                      --{{0}}--

So what are inline elements? These are basically all the tiny parts, such as single words, bold-text, links, inline-code, but also images and videos. In contrast to blocks where you attach the comment to front, inline elements can be modified by attaching a comment to the end. That's it ...

LiaScript-Syntax:

This **is an important**<!-- style="color: red" --> part
of the text<!-- style="color: green; font-size: 10rem;" -->.


![image](...Creative-Tail-Animal-lion.svg)<!--
style = "width: 300px;
         border: 10px solid;"
class = "animated infinite bounce"
-->

Some blurry and black-and-white video:

!?[movie](https://www.youtube.com/watch?v=8pTEmbeENF4)<!--
style = "filter: blur(2px); grayscale(80%);"
-->

                      --{{1}}--

As you can see from the results, the entire bold text is treated as one block, whereby in the second case only the single word "text" gets modified.

                        {{1}}

Result:

This is an important part of the text.

Some blurry and black-and-white video:

!?movie

                      --{{2}}--

CSS is a pretty powerful tool and by using HTML-comments to tweak your Markdown, you can still read the document with any ordinary Markdown interpreter that simply ignores these comments.

                      --{{0}}--

Styling images might happen quite often. However, you have to be aware of the fact, that the modal view functionality is only possible if LiaScript is in total control of the image. Thus, it will handle the optimal scaling for you and adds a click-event to switch to the modal view.

![The Wave](...ave_off_Kanagawa_%28Kanagawa_oki_nami.jpg "without attribute injection")

![Workplace](https://www.w3schools.com/htmL/workplace.jpg "with attribute are added")<!-- usemap="#workmap" -->

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" title="Computer" onclick="alert('You clicked the Computer')" >
  <area shape="rect" coords="290,172,333,250" title="Phone" href="#12">
  <area shape="circle" coords="337,300,44" title="Cup of coffee" href="#Projects">
</map>

                      --{{1}}--

Thus, if you click onto the first image, you will be able to inspect it in more detail. If you click onto the second image, then a map associated with this image is in charge of it, which handles click-events differently.

                        {{1}}

Result

-- The example for the map was taken from w3schools.

                     --{{0}}--

The following examples present some useful application of combining attribute injection into LiaScript components.

                      --{{0}}--

There might be use cases where you either want to show some parts only on GitHub and provide and alternative view at LiaScript. As it was shortly introduced in the sections before, you can add comments to the start of every block to add additional attributes. These attributes can also be used as a trigger to hide or show content.

<!-- style="display:block" -->
<div style="display:none">

Visible only in LiaScript, but not on GitHub.

</div>

-----------------------------------------------

<!-- style="display:none" -->
<div style="display:block" id="fooBar">

Not visible in LiaScript, but on GitHub!

</div>

                      --{{1}}--

The attributes within the comment will overwrite the attributes within the block. Thus, if there would be more stuff within style, this will be overwritten too, but other attributes like id that are not contained within the comment won't be affected...

                      --{{0}}--

As you have seen previously sizing videos and applying CSS filters is easy. However, there might also be the case that you want to start a video from some special point or to play it automatically, when it appears.

                      --{{1}}--

If the video is yours, then you can use the following attributes àutoplay and muted to control the behavior and the additional fragment #t=4,12 attached to the URL of the video, will tell the browser where to start and where to stop the video. The stop-parameter should be optional.

                        {{1}}

!?[Something about math](vid/math.mp4#t=4,12)<!--
autoplay="true"
muted="true"
-->

                      --{{2}}--

The resulting video starts immediately at second 4 and stops at second 10, and of course it will be muted.

             {{2}}

!?Something about math

                      --{{0}}--

However, if you are referencing other resource on platforms such as YouTube, Vimeo, DailyMotion, PeerTube or TeacherTube you can achieve something similar, but in a slightly different way. These settings have to be added to the URL of your resource and different platforms might have different capabilities.

                      --{{1}}--

In most cases, you can use something like &autoplay=1, &muted=true or &mute=false as it is depicted below:

                        {{1}}

!?[Multimedia](url/...?autoplay=1&mute=1&start=1895&end=1905)

                      --{{2}}--

But, different platforms support different functionalities. Here is a link list of the different possible settings. For PeerTube and TeacherTube we could not find any settings so far.

                        {{2}}

URL Parameters:

• DailyMotion
• Vimeo
• YouTube
• PeerTube
• TeacherTube

             --{{0}}--

The following will not work on GitHub, but most Markdown-interpreters do support formulas with a LaTeX-like syntax. As it is common in many Markdown dialects, such as in Pandoc-Markdown, you can apply dollar signs to surround a "math"-environment. Everything within the dollar signs belongs to the formula only, there is currently no nesting of other HTML or LiaScript/Markdown allowed.

          --{{1}}--

Use single dollar signs to define an inline formula, which will be treated as an ordinary text element.

                      {{1}}

Inline math-mode $ \frac{a}{\sum{b+i}} $ -> $ \frac{a}{\sum{b+i}} $

         --{{2}}--

Use double dollar signs to indicate a formula-block. This way you can also use multiple lines to define a formula or a set of formulas that will furthermore be displayed larger.

                      {{2}}

                       --{{3}}--

Currently, we apply the KaTeX library for typesetting. If you are already familiar with LaTeX or MathJAX, as another alternative library, then you can start immediately to define formulas. If not, then check out some of the following resources.

     {{3}}

• via KaTeX: http://katex.org

• Supported functions:

  https://katex.org/docs/supported.html

• Alphabetically sorted features:

  https://katex.org/docs/support_table.html

• Detexify: get the appropriate command by drawing symbols

  http://detexify.kirelabs.org/classify.html

             --{{4}}--
  

Sometimes it might be tedious to find the right, command for the intended symbol, if you can draw it, then you should give detexify a try.

                      --{{0}}--

Alignment is a typical use case for formulas. The code below, shows how this can be achieved by using ampersands, which are used as an anchor for the center of a formula.

\begin{split}
  a &=b+c \\
    &=e+f \\
    &=g+h+i+j\\
a+b+&c+d=12\\
\end{split}

@runFormula

                      --{{1}}--

If you want to number your formulas, we recommend using the \tag command to add or overwrite the reference number. Automatic numbering does not work well at the moment, since the formulas are rendered within a web component, and it does conflict with the LiaScript idea of animation, which we describe in a later part of this series.

  {{1}}

\tag{33}
\begin{equation}
 a =b+c
\end{equation}

@runFormula

                      --{{2}}--

And finally it is possible to add some styling, but with KaTeX-functionalities, this includes some basic styling, with the same inline CSS, as we had described it in section Custom Styling. (Can you spot the strange looking german character Eszett.) And you can mark elements as links with \href and add images with the command \includegraphics.

  {{2}}

\begin{Bmatrix}
   a & b & c & d & e & f \\
   g & h & i & j & k & l \\
   m & n & o & p & q & r \\
   s & t & u & v & w & x \\
   y & z & ä & ö & ü &
   \htmlStyle{color: red; font-size: 26px}{ß}
\end{Bmatrix}
\\
\href{https://katex.org/docs/supported.html#html}{\KaTeX HTML support}
\\
\includegraphics[height=0.8em, totalheight=0.9em, width=0.9em, alt=KA logo]{https://katex.org/img/khan-academy.png}

@runFormula

             --{{0}}--

Additionally, you can define custom macros, as it is supported by KaTeX. However, there are currently two options to define macros, which can be either local or global.

   {{1}}

  --{{1}}--

{{2}}

--{{2}}--

<!--
author: ...

formula:  foo   {x^2}
formula:  \bar  {#1^2}

-->

# Main

$ \foo + \foo $

$ \bar{y} + \bar{y} $

{{3}}

--{{3}}--

...

## Subsection
<!--
formula: \foo  {y^3}
-->

$ \bar{\foo} + \bar{\foo} $

{{4}}

--{{4}}--

                        --{{0}}--

Before moving on to the LiaScript specific features, such as quizzes, surveys, animations, ASCII-art, etc., we would like present a last feature that is common to many Markdown dialects and these are footnotes. So, what are footnotes in general and when to use them.

                        {{0-1}}

{{|> UK English Male}}

Footnotes are notes at the foot of the page while endnotes are collected under a separate heading at the end of a chapter, volume, or entire work. Unlike footnotes, endnotes have the advantage of not affecting the layout of the main text, but may cause inconvenience to readers who have to move back and forth between the main text and the endnotes.

-- Wikipedia

                      --{{1}}--

In LiaScript a "section", which is defined by a header and a body, resembles a page. Thus, the body might contain a couple of footnote-marks, while the actual footnotes have to be defined at the end of the body. Other Markdown interpreters might define a more "wide-spread" usage of footnotes, but in LiaScript this is not possible at the moment. We parse/interpret only one section at a time and not the entire document. So keep this in mind when using footnotes.

                        {{1}}

### header 3

body

body

body

footnotes

## ...

                      --{{0}}--

The standard way of creating footnotes is to attach a marker to important elements within your sections. A marker is defined by brackets with a starting ^. Then you can insert numbers, symbols and words.

           <!-- class="translate"-->

Something[^1] important[^2] about[^🦶] notes.

                      --{{1}}--

At the end of your body, you simply add a list with all indented remarks you want to add. This list starts with your markers, that are followed by a colon. Your notes or footnote-bodies can consist of multiple paragraphs and all other block-elements that you have mentioned so far, but they have to be indented with at least 2 spaces.

                        {{1}}
            <!-- class="translate"-->

[^1]: **Something** and **anything** are concepts of existence in ontology,
  contrasting with the concept of nothing. Both are used to describe the
  understanding that what exists is not nothing without needing to address the
  existence of everything. The philosopher, David Lewis, has pointed out that
  these are necessarily vague terms, asserting that "ontological ...

  -- [Wikipedia](https://en.wikipedia.org/wiki/Something_%28concept%29)

[^2]:> It is **important** to mention that anything can be added to a footnote
  > also some piece of code, images, videos, etc.
  >
  > ??[How to Use Footnotes](https://www.youtube.com/watch?v=Gg6vXoHO95I)

[^🦶]: Actually you are not forced to use numbers, you can use any kind of
       symbol or even words too.

       _But, please be consise._

                      --{{2}}--

By clicking onto the footnote, all of your comments will be shown in a modal view in all view-modes. If you are in "textbook" mode, then these footnotes are additionally displayed at the very end of the current "page".

                        {{2}}

Result:

Something¹ important² about³ notes.

-- Wikipedia

also some piece of code, images, videos, etc.

??How to Use Footnotes

                      --{{0}}--

The following idea of defining inline-footnotes was borrowed from LaTeX. If you want to add only some text without further Markdown-syntax then you can add this in parentheses to your footnote-mark. In this case it is not necessary to add a more sophisticated explanation to the end of the sections.

Inline Footnote [^x](__explanation__ in one line) => Inline Footnote[^x](explanation in one line)

                      --{{0}}--

Some words about state. The LiaScript runtime-environment preserves the internal state of the following elements, depending on where you execute your courses and depending on the version.

• Tasks

• Quizzes

• Surveys

• Code

• (<script>)

                      --{{1}}--
  

LiaScript currently runs in three different environments. You can either share and read courses via the project website, generate SCORM-packages, which can be uploaded to an LMS, or create self-containing websites.

                        {{1}}

1. LiaScript PWA

                      --{{2}}--
   

   If you share your course via the website, then all the courses and the current course states are preserved within the Browser database IndexedDB locally. All of the states? Well ... the internal state of the previous components is only preserved, if your course has a version greater than or equal to 1.0.0. The default version is 0.0.1, which means that the course is in development mode, and thus the structure of your course might change every time. If a user reloads the course, then all states are cleared.

   • Where: https://LiaScript.github.io/course/
   • Source: liascript/src/typescript/connectors/Browser

2. SCORM 1.2

                      --{{3}}--
   

   SCORM stands for Sharable Content Object Reference Model and allows you to store the course state directly within every LMS that has support for SCORM 1.2. For this case you have to use our exporter, which translates your course into a "SCORM-compliant" zip-file. You can check if your LMS has support for SCORM, by visiting our LMS-overview.

   • Where: https://github.com/LiaScript/LiaScript-Exporter#scorm12
   • Source: liascript/src/typescript/connectors/SCORM1.2
   • Does your LMS support SCORM 1.2: LMS-Overview

3. Base

                      --{{4}}--
   

   You can also use our exporter-tool to create single websites of your course. But, this "base" does only support to store user-settings, such as style, mode, etc. This "base-connector" is also used for the live-server and editors. If you are a developer and want to extend the LiaScript support to store state within your backend, then this is the right place to look at. This module provides an abstract class, to which all statefull data is sent. You can simply inherit from this class and implement the access to your system.

   • Where: https://github.com/LiaScript/LiaScript-Exporter#web

   • Source: liascript/src/typescript/connectors/Base

                      --{{5}}--
     

For more information on versioning and how to use it, check out section version within the macros section. But for now, it is okay to know, that you can adapt, restructure and share your courses freely, if you are in dev-mode. If your course is ready to be launched, use versioning to preserve the state of your users.

                      --{{0}}--

Before we show you how to create quizzes, we would like to introduce tasks, which were also a source of inspiration for us, for developing a similar syntax for quizzes and surveys. The GitHub flavored Markdown offers a very intuitive way of creating check-lists or task-lists.

**Which topics did you master so far?**

- [ ] Biology
- [ ] Chemistry
- [ ] Computer Science
- [X] Something about LiaScript

                      --{{1}}--

It is basically a list where the brackets are used to symbolize check-boxes and by using an upper- or lowercase x, it is possible to mark a checkbox as checked. In LiaScript however, it is possible for the user to manipulate these states, and they will be preserved if your document is in version 1 or greater.

                        {{1}}

Which topics did you master so far?

• Biology
• Chemistry
• Computer Science
• Something about LiaScript

                      --{{0}}--

In case you are wondering where the "Script" in LiaScript comes from? We wanted to make documents more interactive, by embedding native support for scripting. Coding will become an essential skill in the future so why not using it to directly extend the native capabilities of static documents and its elements. Scripts can either be executed separately or they can be attached to tasks, quizzes, surveys, and code-snippets.

                      --{{1}}--

The example might look a bit weird for the moment, but it is only meant as a demonstration. You can use scripting in LiaScript, if you want to, but it is not required. Thus, whenever you change the state of the task-list, then the script below gets executed and the @input-macro will be substituted by current input. output="tasks" says, that the result is published under the topic "tasks", thus, every script that contains an @input(\tasks`)` will be executed afterwards as well with the changed input. Task-lists simply produces and array with boolean values.

                        {{1}}

**What do you want to learn today?**

- [X] Biology
- [ ] Chemistry
<script output="tasks">"@input"</script>

<script style="width: 100%">
try {
  let task = @input(`tasks`) // interpret the output="tasks"

  if(task[0]) {
    send.liascript(`## Biology

Hey, great, you want to learn something about Biology.

* resource 1
* resource 2

The input from the tasks above was: [${task}]`)
  } else send.clear()
} catch(e) { }
</script>

                      --{{2}}--

Depending on the input scripts can generate different results, it is even possible to return LiaScript code, which will be analyzed and rendered dynamically. If an empty string or undefined gets returned, then the script will not be visible to the user. We will describe all Lia-Scripting capabilities and features in more detail in a later chapter.

                        {{2}}

What do you want to learn today?

• Biology
• Chemistry

                      --{{3}}--

If we are talking about embedding scripts, that perform some kind of calculation, data analysis, etc. Why shouldn't this be visible to the user as well? We all know what can happen when you cannot get access to primary data and the code that was used to analyze it. In LiaScript you can inspect these highlighted elements with rounded corners, which represent the result of a script, simply by double-clicking or double-tabbing. The user can manipulate them and observe the results, simply by changing the code. If the editor is closed, then the code gets reevaluated.

                        {{3}}

Europe's entire austerity policy after the debt crisis was based on wrong conclusions drawn from incorrect data and false calculations from a single Excel spreadsheet.

https://en.wikipedia.org/wiki/Growth_in_a_Time_of_Debt

                      --{{4}}--

But, this is enough for the moment, let us continue with quizzes...

                      --{{0}}--

Quizzes are an essential element of every online course, which allow students to reflect and test their knowledge. As mentioned before, we used the GitHub-flavored Markdown notation for tasks as an inspiration for quizzes.

                      --{{1}}--

Long story short, everything that is related to quizzes is defined as a combination of brackets with brackets or parentheses.

{{1-2}}

• [[ ]]

• [( )]

                      --{{2}}--
  

LiaScript currently supports 6 different types of quizzes and one, so-called generic type, which can be used to created custom quizzes of any kind.

                        {{2-3}}

1. Multiple-Choice: [[X|x| ]] ...

2. Single-Choice: [(X|x| )] ...

3. Matrix: as a combination of multiple- and single-choice quizzes

4. Text-Quiz: [[solution]]

5. Selection-Quiz: [[ opt. 1 | opt. 2 | (solution opt.) ]]

6. Gap-Text everything: Use selection- and text-quizzes within Markdown-blocks

7. "Generic": [[!]]

                      --{{3}}--
   

Additionally, it is possible to tweak every quiz with additional features, such as hints, a resolution that is presented if the users solves the quiz by their own or clicks onto the "show solution" button. And finally, as you have seen it with tasks, you can attach scripts to each quiz in order to implement more sophisticated quizzes or simply to log the output.

                        {{3}}

1. Hints: [[?]]
2. Solutions: some arbitrary Markdown content
3. Associated scripts: to be executed, when the user clicks onto the "check"-button

                      --{{0}}--

Within the following section we will introduce the 6 types of quizzes, which are currently supported by LiaScript. Additionally, you have to know that users cannot fail, by default it is possible to retry a quiz until it is solved, or the user clicks onto the resolve button. The only thing that is counted is the number of trials.

via GIPHY

                      --{{1}}--

If testing knowledge becomes something deeply personal, without any limitation on the number of trials, why should anyone cheat at all. In this sense, LiaScript is meant to be a language for learning and education instead of assessment. But, if you want to, you can also tweak this by using scripts 😉.

                       --{{0}}--

A multiple-choice quiz can also be interpreted as a task list with a predefined solution. Thus, the only thing that has to be done, is to surround your "ASCII" checkboxes with additional brackets, which are followed by a line of Markdown/LiaScript.

- [[ ]] Empty means not checked
- [[X]] Uppercase `X` means checked ...
- [[x]] ... and lowercase `x` too ...
- [[ ]] **as defined in the first line** ...

                      --{{1}}--

As you can see from the example it does not matter, whether you use lowercase or uppercase X to mark a checked element.

                        {{1}}

Result:

• [[ ]] Empty means not checked
• [[X]] Uppercase X means checked ...
• [[x]] ... and lowercase x too ...
• [[ ]] as defined in the first line ...

                      --{{2}}--

The starting dashes for quizzes are also optional, you can omit them and GitHub and other Markdown renderer will present a single paragraph. Or, you can also use an indentation of at least 4 spaces, which will be presented by other interpreters as code. However, all the following representations will be interpreted by LiaScript as the same quiz.

                        {{2}}

Without starting dashes (paragraph):

[[ ]] Empty means not checked
[[X]] Uppercase `X` means checked ...
[[x]] ... and lowercase `x` too ...
[[ ]] **as defined in the first line** ...

With indentation of at least 4 spaces (code):

    [[ ]] Empty means not checked
    [[X]] Uppercase `X` means checked ...
    [[x]] ... and lowercase `x` too ...
    [[ ]] **as defined in the first line** ...

                      --{{0}}--

If brackets are used to define checkboxes, why not using parentheses to indicate radio-buttons. In contrast to multiple-choice quizzes only one option can be selected.

- [( )] Not selected
- [(X)] **This one has to be selected**
- [( )] ~~Do not select this one ...~~

                      --{{1}}--

You can also omit the starting dashes and/or use indentation as with multiple-choice quizzes and use upper- or lowercase X to indicate the solution.

                        {{1}}

Result:

• [( )] Not selected
• [(X)] This one has to be selected
• [( )] Do not select this one ...

                      --{{2}}--

However, you can also define multiple possible solutions a user might select only one option, but multiple might be correct.

                        {{2}}

What is the correct spelling of H(D)D?

    [(X)] hard (**disk**) drive
    [( )] hard (**desk**) drive
    [(x)] hard (**disc**) drive

                        {{3}}

Result:

What is the correct spelling of H(D)D?

[(X)] hard (**disk**) drive
[( )] hard (**desk**) drive
[(x)] hard (**disc**) drive

                      --{{3}}--

Thus, if the user selects the first or the last option, the quiz will be marked as solved, or if the user clicks onto the "show solution" button, both options will be presented.

                        {{4}}

How to create a true/false quiz?

                   --{{4}}--

Using single-choice quizzes, it is also possible to define something simple as a True or False quiz.

Do you know an easier way of creating quizzes?

    [( )] Yes
    [(X)] No

Result:

Do you know an easier way of creating quizzes?

[( )] Yes
[(X)] No

                      --{{0}}--

You can also combine multiple single- and multiple-choice quizzes into one larger matrix-quiz. The "vector" quizzes are now simply defined as rows, whereby you have to define a custom header, which represent the solution options. It makes no real difference if you use parentheses or brackets within the header line, use brackets if you want to insert parenthesis and vice versa.

                        {{0}}

- [[male (der)] (female [die]) [neuter (das)]]
- [    [X]           [ ]             [ ]     ]  Mann - German for man
- [    ( )           (X)             ( )     ]  Frau - German for woman

                      --{{1}}--

However, within the quiz-body, which is contains the quiz-vectors as rows, the brackets and parenthesis make a difference. The first row gets presented as multiple-choice with checkboxes, while the second line defines a single-choice with radio buttons.

                        {{1}}

Man or woman is obvious, but you guess the remaining German grammatical genders?

[[male (der<!-- class="notranslate"-->)]   (female [die<!-- class="notranslate"-->])   [neuter (das<!-- class="notranslate"-->)]]
[    [X]           [ ]             [ ]     ]  Mann<!-- class="notranslate"--> - German for man
[    ( )           (X)             ( )     ]  Frau<!-- class="notranslate"--> - German for woman
[    [X]           [ ]             [ ]     ]  Junge<!-- class="notranslate"--> - German for boy
[    ( )           ( )             (X)     ]  Mädchen<!-- class="notranslate"--> - German for girl
[    [X]           [X]             [ ]     ]  Paprika<!-- class="notranslate"--> - German for bell pepper
[    (X)           (X)             (X)     ]  Joghurt<!-- class="notranslate"--> - German for yogurt

                        {{2}}

Fun fact:

                    --{{2}}--

The number of elements within a row does not necessarily have to match the number of elements within the head. Although it might be rendered strangely, this does not cause an error. You as a course designer can see, that there might have a mistake occurred, but maybe you use it with a purpose.

[[option 1] [option 2]]
[   [X]                     ] only with option 1
[   [ ]        [X]          ] with two options
[   [X]        [ ]       [X]] with three options

[[option 1] [option 2]] [ [X] ] only with option 1 [ [ ] [X] ] with two options [ [X] [ ] [X]] with three options

                      --{{0}}--

A simple text-input quiz is defined only by two brackets that contain the solution string. For these simple kind of quizzes, it is currently not allowed to add a starting dash, but you can use optional indentation. The reason for this is, that in the future we would like to extend the usage of text- and selection-quizzes to be used everywhere, within paragraphs or tables to from clozes.

What did the fish say when he swam into the wall?

    [[dam]]

                        {{1}}

Result:

What did the fish say when he swam into the wall?

[[dam]]

                      --{{1}}--

The user input will be compared with your solution-string, and if and only if they are equal the quiz will be labelled as solved. For different reasons it might be necessary to clean up the input, in order to deal with different types of spelling, uppercase and lowercase, etc. Fort this purpose scripts can be associated to a quiz, see therefor section Quizzes and Scripting.

                      --{{0}}--

Finally, a selection-quiz is a collection of LiaScript/Markdown options that are separated by vertical bars |. The solution is defined by the option or options that are surrounded by parenthesis. An option can be any kind of LiaScript inline element and since vertical bars | are used as separators, you can simplify the readability by using newlines.

What is the derivative function of $f(x) = x^6$?

[[ $f'(x) = 6$ | ( $f'(x) = 6x^5$ ) | $f'(x) = 5x^6$ ]]

Can be also written as:

    [[  $f'(x) = 6$
    | ( $f'(x) = 6x^5$ )
    |   $f'(x) = 5x^6$
    | ( **This will be counted as correct too...** )
    ]]

                      --{{1}}--

This type of quiz allows you to have multiple correct options and starting dashes are not supported yet, due to their future usage as native input elements for clozes. And you can use indentation, such as it is possible for all quizzes.

                        {{1}}

Result:

What is the derivative function of $f(x) = x^6$?

[[ $f'(x) = 6$ | ( $f'(x) = 6x^5$ ) | $f'(x) = 5x^6$ ]]

Can be also written as:

[[  $f'(x) = 6$<!-- class="notranslate"-->
| ( $f'(x) = 6x^5$<!-- class="notranslate"-->  )
|   $f'(x) = 5x^6$<!-- class="notranslate"-->
| ( **This will be counted as correct too...** )
]]

                 --{{0}}--

Internally 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.

 {{1}}

                --{{1}}--

__I (learn) [[  have been learning  ]] English for seven years now.__
But 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.
As I (pass / want) [[ want to pass ]] my English exam successfully next year,
I (study) ~[[ am going to study ]]~ harder this term.

 {{2}}

                --{{2}}--

Wladimir [[ Putin ]] is the richest (still living) dictator
with an estimated fortune of over
__4,500,000,000 [[ (US Dollar 💵) | Euro 💶 | _Rubel 💸_ | Pound 💷 ]]__!

 --{{0}}--

Since 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. This section shows only some inspirational examples that you can use and extend for your own purpose.

   {{1}}

           --{{1}}--

``` ascii
.----------.      .----------.
| ⭐       |      |  ⭐ ⭐   |
|      ⭐  |      | ⭐ ⭐ ⭐ |
'----------'      '----------'
```

[[ 2 ]] + [[ 5 ]] = [[ 7 ]]

.----------.      .----------.
| ⭐       |      |  ⭐ ⭐   |
|      ⭐  |      | ⭐ ⭐ ⭐ |
'----------'      '----------'

   {{2}}

  --{{2}}--

> “How is education supposed to make me feel smarter?
> Besides, every time I learn something new, it pushes some old stuff out of my brain.
> Remember when I took that home winemaking course, and I forgot how to drive?”
>
> -- By [[ Dieter Nuhr | Nida Mohammad Nadim | (Homer Simpson)]]

   {{3}}

                     --{{3}}--

                    {{English Male |>}}
The film that I saw [[(that)|those|these|then]] night wasn’t very good.
It was all [[ about ]] a man [[ who ]] built a
time machine so he [[ could ]] travel back in time.
It took him ages and ages [[ to ]] build the machine.

                {{English Male |>}}

{{4}}

                   --{{4}}--

German grammar test:

| Verb    |   Person      | Präsens von "werden" | Partizip II    | Infinitiv von haben/sein |
|---------|:-------------:|:--------------------:|:--------------:|:------------------------:|
| gehen   | Ich           |     [[ werde  ]]     | [[ gegangen ]] | [[ sein ]].              |
| sage    | Du            |     [[ wirst  ]]     | [[ gesagt ]]   | [[ haben ]].             |
| machen  | Er / Sie / Es |     [[ wird   ]]     | [[ gemacht ]]  | [[ haben ]].             |
| laufen  | Wir           |     [[ werden ]]     | [[ gelaufen ]] | [[ sein ]].              |
| singen  | Ihr           |     [[ werdet ]]     | [[ gesungen ]] | [[ haben ]].             |
| spielen | Sie           |     [[ werden ]]     | [[ gespielt ]] | [[ haben ]].             |

  {{5}}

      --{{5}}--

<!-- data-title="LMS market share 2022 (North America)" -->
| Brightspace    | Canvas          | Classroom      | Moodle          | Others         | Schoology      |
|:--------------:|:---------------:|:--------------:|:---------------:|:--------------:|:--------------:|
| [[(3 %)|11 %]] | [[13 %|(28 %)]] | [[8 %|(24 %)]] | [[(11 %)|31 %]] | [[2 %|(12 %)]] | [[7 %|(22 %)]] |

---

| LMS | Average cost per month   |
|-----|--------------------------|
| Brightspace | [[13 $|(80 $)]]  |
| Canvas      | [[(10 $)|99 $]]  |
| Classroom   | [[(0 free)|3 $]] |
| Moodle      | [[11 $ |(15 $)]] |
| Schoology   | [[(4 $)|12 $]]   |

    {{6}}

          --{{6}}--

![image 1](https://img1 "Markdown subtitle [[(option 1)|option 2|option 3]]")
![image 2](https://img2 "Another [[subtitle]]")
!?[video](https://www.youtube.com/watch?v=... "Subtitle for [[multi-media]]")

{{7}}

  --{{7}}--

<!-- data-show-partial-solution -->
``` ascii
                        .----------------------.
                       /                      /|
             .--------+----------------------+ +---------.
            /         |      " [[  24   ]] " |/         /|
  .--------+----------+----------+-----------+---------+ +----------.
 /         |         11          |      "[[   13   ]] "|/          /|
+----------+----------+----------+----------+----------+----------+ +
|      " [[   5   ]] "|          6          |          7          |/
+---------------------+---------------------+---------------------+
```

--{{8}}--

  {{8}}

                        .----------------------.
                       /                      /|
             .--------+----------------------+ +---------.
            /         |      " [[  24   ]] " |/         /|
  .--------+----------+----------+-----------+---------+ +----------.
 /         |         11          |      "[[   13   ]] "|/          /|
+----------+----------+----------+----------+----------+----------+ +
|      " [[   5   ]] "|          6          |          7          |/
+---------------------+---------------------+---------------------+

                      --{{0}}--

Generic quizzes can be used to define any kind of quiz. The course-developer can define own types of quizzes, whereby the following combination of brackets with an additional exclamation mark has to be associated with a script.

[[!]]
<script>
  const random = Math.random()

  alert("random value: "+ random)

  random < 0.2
</script>

                      --{{1}}--

This script does only generate a random number, outputs the result in an alert and checks if the random value is less than 0.2. And if so, the quiz will be marked as solved otherwise not. Thus, the last statement has to be true in order to mark a quiz as solved, any other value will be accounted as false.

                        {{1}}
[[!]]
<script>
  const random = Math.random()

  alert("random value:"+ random)

  random < 0.2
</script>

                      --{{2}}--

The usage of associated scripts for quizzes will be described in detail in section Quizzes and Scripting.

                      --{{0}}--

Not all of the previous examples we have shown were perfect in the sense of accessibility. Although these quizzes look good "for us", they might not be perfectly for people that require a screen-reader to go through a course. However, you can improve your quizzes by asking your question as a paragraph, which is followed by your quiz. This way LiaScript will associate or label the quiz with your question.

Ask a question as an ordinary Markdown paragraph,
which is followed by what?

    [[quiz]]

                      --{{1}}--

If your question requires more elements, then it is also possible to group it with supplemental elements by putting it into a single HTML-element such as a div. The div will get a unique ID and the question will be labeled with this ID by using the aria-labelledby attribute.

                        {{1}}

<div>

Ask a question as an ordinary Markdown paragraph,
which is followed by what?

1. important
2. also relevant ...
3. [an image](http://...)

</div>

    [[quiz]]

                      --{{0}}--

All of the following elements can be added to any type of quiz that you have seen before. This includes and arbitrary number of hints, a more detailed solution or a custom script that handles the user input.

via GIPHY

                      --{{0}}--

To any type of quiz you can add as many hints as you want, the pattern is simply two brackets with an additional question mark. If you want to, you can also add starting dashes to the hints.

What is $37 + 15$?

    [[52]]
    [[?]] the solution is larger than 50
    [[?]] it is less than 55
    [[?]] it should be an even number

This is also a valid quiz ...

[[52]]
- [[?]] the solution is larger than 50
- [[?]] it is less than 55
- [[?]] it should be an even number

                      --{{1}}--

The user can reveal these hints, step by step by clicking onto the light bulb or "show hint" button.

                        {{1}}

What is $37 + 15$?

[[52]]
[[?]] the solution is larger than 50
[[?]] it is less than 55
[[?]] it should be an even number

                               --{{0}}--

And finally, some quizzes might require some more explanations, if they are solved or not. Therefor, simply use two "lines" that are defined by at least three asterisks to group your solution. The solution explanation can contain an arbitrary number of LiaScript elements.

What is $37 + 15$?

[[52]]
[[?]] the solution is larger than 50
[[?]] it is less than 55
[[?]] it should be an even number
***********************************************************************

52 is the correct solution, you get this by adding:

``` ascii
                        .------.
                        |      |
                        |      v
                        |
                        |     (1)
  37           3(7)     |     (3)x          37
+ 15         + 1(5)     |   + (1)x        + 15
---- -->     ------ --> |   ------ -->    ----
  ??           (12)     |     (5)2          52
                |       |                 ====
                '-------'
                  carry
```

??[MS-DOS Math Game](https://archive.org/embed/msdos_Super_Solvers_Teasure_MathStorm_1992)

***********************************************************************

                      --{{1}}--

In this case the solution contains an ASCII-art drawing, but it can be anything, such as a an image, a video, or even something like a small game

                        {{1}}

What is $37 + 15$?

[[52]] [[?]] the solution is larger than 50 [[?]] it is less than 55 [[?]] it should be an even number

52 is the correct solution, you get this by adding:

                        .------.
                        |      |
                        |      v
                        |
                        |     (1)
  37           3(7)     |     (3)x          37
+ 15         + 1(5)     |   + (1)x        + 15
---- -->     ------ --> |   ------ -->    ----
  ??           (12)     |     (5)2          52
                |       |                 ====
                '-------'
                  carry

??MS-DOS Math Game

                   --{{0}}--

Currently it is only possible to randomize vector and matrix quizzes, that means that the order of rows can be shuffled. This happens only ones, when the slide is loaded for the first time, this includes also page reloads. Just by adding the option data-randomize to the comment attached to the head of the quiz. Other options might be added in the future.

Are the options of the quiz in order?

<!-- data-randomize -->
- [(X)] option 1 (yes)
- [( )] option 2 (no)
- [(X)] option 3 (maybe)
- [( )] option 4 (I don't care)

                   --{{1}}--

If you reload the page, the order of the options will change, but not when you go to another slide and come back.

    {{1}}

          --{{0}}--

Next to randomization you can also use the following configuration options and also combine them:

            {{1}}

• Maximum Trials data-max-trials

          --{{1}}--
  

  Pass an integer to data-max-trials and the quiz will be automatically solved after x wrong trials.

  What happens if you check 3 times the wrong answer?
  
  <!-- data-max-trials="3"-->
  [( )] Absolutelly nothing?
  [(X)] The quiz will be solved!

  ---

  What happens if you check 3 times the wrong answer?

  [( )] Absolutelly nothing? [(X)] The quiz will be solved!

            {{2}}
  

• Hide and reveal the solve button data-solution-button

          --{{2}}--
  

  You can either use values such as on|off, true|false, disable|enable to show or hide the solution button. By default it is always on, but it is also possible to pass an integer value to reveal this button at a certein user trial. In this case 0 is not interpreted as false, but that it should be immediately visible and 1 only after the first wrong trial.

  Can you reveal the solution button?
  
  <!-- data-solution-button="off" -->
  [( )] YES
  [(X)] NO
  
  ---
  
  How many trials are necessary to show the solution button?
  
  <!-- data-solution-button="3" -->
  [[3]]

  ---

  Can you reveal the solution button?

  [( )] YES [(X)] NO

  ---

  How many trials are necessary to show the solution button?

  [[3]]

            {{3}}
  

• Hide and reveal the hint button data-hint-button

          --{{3}}--
  

  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. 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.

  How many trials are necessary to show the hints?
  
  <!-- data-hint-button="2" -->
  [[2]]
  [[?]] The solution is smaller than 3
  [[?]] Try an even number

  ---

  How many trials are necessary to show the hints?

  [[2]] [[?]] The solution is smaller than 3 [[?]] Try an even number

             {{4}}
  

• Revealing Partial Solutions data-show-partial-solution

           --{{4}}--
  

  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. It can be applied onto gap-texts and matrix-quizzes. 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.

  <!-- data-show-partial-solution -->
  ``` ascii
                          .----------------------.
                         /                      /|
               .--------+----------------------+ +---------.
              /         |      " [[  24   ]] " |/         /|
    .--------+----------+----------+-----------+---------+ +----------.
   /         |         11          |      "[[   13   ]] "|/          /|
  +----------+----------+----------+----------+----------+----------+ +
  |      " [[   5   ]] "|          6          |          7          |/
  +---------------------+---------------------+---------------------+
  ```

  ---

                          .----------------------.
                         /                      /|
               .--------+----------------------+ +---------.
              /         |      " [[  24   ]] " |/         /|
    .--------+----------+----------+-----------+---------+ +----------.
   /         |         11          |      "[[   13   ]] "|/          /|
  +----------+----------+----------+----------+----------+----------+ +
  |      " [[   5   ]] "|          6          |          7          |/
  +---------------------+---------------------+---------------------+
  

            {{5}}
  

• Scoring a quiz data-score

          --{{5}}--
  

  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. Within an export every quiz is rated equally with a value of 1. It is possible to pass an integer or float value, e.g. 2, 2.0, 2.12345.

            {{6}}
  

• Combinations

          --{{6}}--
  

  And as mentioned earlier, you can freely combine all of these configurations.

  You have only two trials, without a solution button ;-)
  
  <!--
    data-max-trials="2"
    data-solution-button="off"
    data-randomize
  -->
  [( )] Wrong
  [(X)] Right

  ---

  You have only two trials, without a solution button ;-)

  [( )] Wrong [(X)] Right

                      --{{0}}--

The following section contains a list of use-cases and ideas how to use quizzes and scripts in association to generate a more complex user experience.

via GIPHY

                      --{{0}}--

If you are using for example the text-quiz, and you want to react to different ways of spelling or to clean starting and trailing white-spaces. Then you can attach a script to your quiz. The @input is marker that will be substituted by the current user input. trim and toLowerCase are JavaScript functions/methods that are used to clean the input string. The last statement of your quiz-script defines if the quiz is marked as solved or not. Only if the last statement evaluates to true it is marked as solved, for any other value it is simply a failed trial.

What did the fish say when he swam into the wall?

[[dam]]
<script>
let input = "@input".trim().toLowerCase()

input == "dam" || input == "damn"
</script>

                      --{{1}}--

Try out the following quiz. You can now enter "damn" or "dam" in different ways, surrounded by spaces.

                        {{1}}

What did the fish say when he swam into the wall?

[[dam]]

                      --{{0}}--

@input will be replaced by the current state of the quiz that should be checked. If you are not sure, how the input might look like, you can always experiment with a simple alert that shows the current input.

                        {{1}}

Text-quiz:

                      --{{1}}--

The output or in LiaScript terms the @input gets substituted by a string, without apostrophes. This might look strange since you have to add apostrophes within the code, but all inputs are substituted without any additional type formatting, this way they can be used in different ways and even contain peaces of code.

[[text]]
<script> alert("@input") </script>

Result:

[[text]]

                        {{2}}

Selection-quiz:

                      --{{2}}--

A selection quiz is defined by a number that represents the current input, starting from 0. The initial state is marked with -1 to indicate that nothing has been selected so far. In this example A would be represented by 0, B by 1, C by 2 and so on.

[[A|B|C|(D)]]
<script> alert(@input) </script>

Result:

[[A|B|C|(D)]]

                        {{3}}

Multiple-choice:

                      --{{3}}--

A multiple-choice quiz is represented by an array of ones and zeros, whereby a 1 means checked and 0 the opposite.

[[X]] A
[[ ]] B
[[X]] C
<script> alert("@input") </script>

Result:

[[X]] A [[ ]] B [[X]] C

                        {{4}}

Single-choice:

                      --{{4}}--

A single-choice quizzes behave similar as selections, the state is represented by a number, starting from 0, which represents the first option. A quiz that has been not touched by the user will return -1 as input value.

[(X)] 0
[( )] 1
[(X)] 2
<script> alert("@input") </script>

Result:

[(X)] 0 [( )] 1 [(X)] 2

                        {{5}}

Matrix:

                      --{{5}}--

As matrices are arrays of "vector" quizzes, their input state is represented as an array of multiple-choice and single-choice states. Thus, a list of lists with zeros and ones as well as numbers.

Weird, isn't it ;-)

[[male (der)]   (female [die])   [neuter (das)]]
[    [X]           [ ]             [ ]     ]  Mann - German for man
[    ( )           (X)             ( )     ]  Frau - German for woman
[    [X]           [ ]             [ ]     ]  Junge - German for boy
[    ( )           ( )             (X)     ]  Mädchen - German for girl
[    [X]           [X]             [ ]     ]  Paprika - German for bell pepper
[    (X)           (X)             (X)     ]  Joghurt - German for yogurt
<script>alert("@input")</script>

Result:

[[male (der)] (female [die]) [neuter (das)]] [ [X] [ ] [ ] ] Mann - German for man [ ( ) (X) ( ) ] Frau - German for woman [ [X] [ ] [ ] ] Junge - German for boy [ ( ) ( ) (X) ] Mädchen - German for girl [ [X] [X] [ ] ] Paprika - German for bell pepper [ (X) (X) (X) ] Joghurt - German for yogurt

                        {{6}}

Generic:

                      --{{6}}--

In case of a generic quiz, the developer is responsible for defining and storing state. Thus, there will be no input. The only case where @input gets substituted by a value, is when the user clicks onto the resolve button. This is indicated by the input true.

[[!]]
<script>alert("@input")</script>

[[!]]

                      --{{0}}--

There might be the rare case, where you have to send the user input to an external service to check them. Scripts in LiaScript can also define asynchronous code, as it is displayed within the example.

What is $37 + 15$?

[[52]]
<script>
setTimeout(function(){
  alert("your input was: '@input'")
  send.lia("true")
}, 1000)

"LIA: wait"
</script>

                      --{{1}}--

In LiaScript, we can use some command strings that trigger a certain behavior, these are global to all scripts and will be described in more detail in section Communication.

                        {{1}}

• "LIA: wait": mark the script as still running

• "LIA: stop": halt the execution of the script

                      --{{2}}--
  

Additionally, you can see a function-call within the example. setTimeout triggers the execution of the internally defined function, which performs an alert with the user input and then sends "true" back to the internal quiz-event handler. Every script is executed with an additional send object and send.lia means send this back to LiaScript. Thus, the result could also be evaluated by an external service, and this result will then be used to control the quiz.

                        {{2}}

• send: general object to for communicating with the LiaScript internal event-handler for a specific entity, for more information see section Communication

                      --{{3}}--
  

Let us extend this example a little bit further. The send to lia can have two meanings, one if everything was ok while the second might be the result of an error. send.lia can have three values, the first is the message, the second one contains more detailed information about the result, which is not required at the moment, while the last value tells LiaScript if everything was ok or by using false that an error has occurred. The default value is always ok.

                        {{3}}

What is $37 + 15$?

[[52]]
<script>
setTimeout(function(){
  alert("your input was: '@input'")

  if ("@input" === "") {
    // generic error message
    send.lia("You have to fill in something into the input field", [], false)
  } else {
    // this is equal to send.lia("some message", [], true)
    send.lia("true")
  }
}, 1000)

"LIA: wait"
</script>

                      --{{4}}--

Thus, if you try out the following example, you will have to wait one second until the result is evaluated, which in this case always results in a solved quiz. But, if you do not add any input, then an error message will be displayed.

                        {{4}}

Result:

What is $37 + 15$?

[[52]]

                      --{{0}}--

We would like to note, that this is only one method to obfuscate a quiz, by using JavaScript, in this case by using the function btoa.

[[...]]
<script>
// btoa("solution") == "c29sdXRpb24="
"c29sdXRpb24=" == btoa( "@input".trim().toLowerCase() )
</script>

                      --{{1}}--

btoa creates a Base64-encoded ASCII string, while atob does the opposite. You can try out to the following two scripts to encode and decode different strings.

                        {{1}}

• btoa: <script input="text" value="solution" input-always-active modify="false">btoa(@input)</script>

  (Beautiful TO Awful)

• atob: <script input="text" value="c29sdXRpb24=" input-always-active modify="false">atob(@input)</script>

  (Awful TO Beautiful)

                        {{2}}
  

                      --{{2}}--

The result is a quiz, where it is not possible to see the solution immediately, simply by getting a glimpse onto the raw course document.

Result:

[[...]]

                      --{{0}}--

It might look tedious to create these trailing scripts and to add them again and again to your document, which makes a course harder to maintain and to develop. However, in LiaScript you can define macros, that can be used to solve repetitive tasks.

                      --{{1}}--

As depicted in the example, you can define custom macros within an HTML-comment of a section or within the main comment at the head of every document. Wherever you write the macro @customQuiz within your document, this macro will be substituted by the content defined in the HTML-comment, which comes between @customQuiz and @end. For more information see section Macros.

                        {{1}}

##### Quizzes & Macros
<!--

@customQuiz
[[...]]
<script>
"@0" == btoa( "@input".trim().toLowerCase() )
</script>
@end

-->

...

@customQuiz(c29sdXRpb24=)


@customQuiz(NTI=)

                      --{{2}}--

You can further parameterize your macros, as you can see in the code, there is an @0, which can be interpreted as a placeholder that shall be substituted by the first parameter of your macro call.

                      --{{3}}--

That's it, you can add as much as @customQuiz-macros and if you do some changes, you do not have to go through all scripts, but instead you only have to change one single macro.

                        {{3}}

The solution should be "solution":

@customQuiz(c29sdXRpb24=)

What is $37 + 15$?

@customQuiz(NTI=)

                       --{{4}}--

By defining macros it is furthermore possible to create LiaScript libraries that can imported into other courses, see therefor also section Macros.

                      --{{0}}--

The quiz for adding two numbers was actually taken from the presentation of Greg Wilson, and it gives a good example for what scripts can be used for. Instead of logging and checking if an answer is correct or not, we should use it to assist students while they are learning and try to identify patterns in wrong answers.

                       {{0-1}}

!?What Everyone in Tech Should Know About Teaching and Learning

                      --{{1}}--

As you have seen it for tasks, the result of a script can also be published, in this case the topic is defined by the output attribute.

                        {{1}}

What is $37 + 15$?

[[52]]
<script output="quiz:37+15">
  if ("@input" == "52") {
    true
  } else {
    "@input"
  }
</script>

                      --{{2}}--

Other scripts can be defined, that are subscribed to the output of the quiz, see the different @input macro. These scripts are executed when the output of the previous script changes. Every script can be used to identify another pattern, since students can be wrong for different reasons. We need to identify such patterns and react properly instead of measuring only fail and success.

                        {{2}}

<script style="display: block">
//   3(7)       (3)7
// + 1(5)     + (1)5       The first and second steps were correct,
// ------ ->  ------  ->   but the student forgot to carry the 1
//   (12)       (4)2       in the 10 digit column.

if ("@input(`quiz:37+15`)" == "42") {
  send.liascript(`## Maybe you forgot to carry...

Checkout the follow video to recap carrying.

!?[Carrying for larger digits](https://www.youtube.com/watch?v=VPsYRPdlIpU)
`)
} else ""
</script>

<script style="display: block">
//   3(7)       (3)7       The first and second steps were also
// + 1(5)     + (1)5       correct, but carrying was not provided
// ------ ->  ------  ->   properly, maybe there is a problem with
//   (12)      (4)12       understanding digit columns...


if ("@input(`quiz:37+15`)" == "412") {
  send.lia(`You are nearly there, there might be a problem with the 10 digit columns...`)
} else ""
</script>

                      --{{3}}--

With LiaScript you do not have to come up immediately with a perfect online course, you can adapt it in little steps and let it increasingly grow.

                        {{3}}

What is $37 + 15$? This time you should make the mistakes 42 and 412.

[[52]]

                      --{{0}}--

Ok, German articles behave strangely. This is a more complex example of a generic quiz that is connected to multiple scripts with an input, which are implemented with a single LiaScript macro.

Do you know which German articles belong to which gender in which case?

[[!]]

                      --{{1}}--

The following code-block shows how this quiz was actually implemented.

                        {{1}}

##### Generic++
<!--
@article: <script output="@0" value="select" input="select" options="der|die|das|dem|den|des">
            if("@input(`articles`)" == "true") {
              "@1"
            } else {
              "@input"
            }
          </script>
-->

                          --{{0}}--
Ok, German articles behave strangely. This is a more complex example of a
generic quiz that is connected to multiple scripts with an input, which are
implemented with a single LiaScript macro.

Do you know which German articles belong to which gender in which case?

[[!]]
<script output="articles">
if ("@input" !== "true") {
  "@input(`11`)"=="der"  &&  "@input(`21`)"=="die"  &&  "@input(`31`)"=="das"  &&  "@input(`41`)"=="die" &&
  "@input(`12`)"=="des"  &&  "@input(`22`)"=="der"  &&  "@input(`32`)"=="des"  &&  "@input(`42`)"=="der" &&
  "@input(`13`)"=="dem"  &&  "@input(`23`)"=="der"  &&  "@input(`33`)"=="dem"  &&  "@input(`43`)"=="den" &&
  "@input(`14`)"=="den"  &&  "@input(`24`)"=="die"  &&  "@input(`34`)"=="das"  &&  "@input(`44`)"=="die"
}
</script>

| Case      | Masculine        | Feminine         | Neuter           | Plural           |
| --------- | ---------------- | ---------------- | ---------------- | ---------------- |
| Nominativ | @article(11,der) | @article(21,die) | @article(31,das) | @article(41,die) |
| Genitiv   | @article(12,des) | @article(22,der) | @article(32,des) | @article(42,der) |
| Dativ     | @article(13,dem) | @article(23,der) | @article(33,dem) | @article(43,den) |
| Accusativ | @article(14,den) | @article(24,die) | @article(34,das) | @article(44,die) |

                           --{{0}}--

A survey or questionnaire from our perspective is a quiz without a predefined solution. Thus, the syntax is the same to quizzes, but instead of a solution you have to provide options. If you use the LiaScript-Exporter to generate SCORM-packages of a course, then the state of the quizzes, surveys, and tasks will be stored within the LMS-backend.

via GIPHY

                           --{{1}}--

But, if you are also using LiaScript 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. We will explain the classroom-idea in more detail at the end of this section.

                           --{{0}}--

As already mentioned, the difference to quizzes is, that you have to provide options or placeholders. In case of a text-input, you have to provide a placeholder, which consists of at least 3 underscores that are separated spaces.

You can have a single text-input by using the following pattern:

**This is a one liner, you can use commas `,` to separate your inputs:**

    [[___]]

                             {{1}}

This is a one-liner, you can use commas to separate your inputs:

[[___]]

                           --{{1}}--

In this type of survey, you can use commas to separate different phrases or keyword/topics. Apply this for short comments or reactions only.

                           --{{2}}--

Similar to text-quizzes, use the following syntax to define a text-survey, where the number of underlines defines the presented line numbers:

                             {{2}}

Please describe your opinion in a few sentences:

    [[___ ___ ___ ___]]

    [[______   ___   ___   ______]]

                           --{{3}}--

Thereby, 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.

                             {{3}}

Please describe your opinion in a few sentences:

[[___   ___   ___   ___]]

                           --{{0}}--

And 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 identifier. That is why they do not have to be in order.

Select one option:

    [(1)] option 1
    [(2)] option 2
    [(3)] option 3
    [(0)] option 0

                           --{{1}}--

The result will look like the one presented below:

                             {{1}}

Select one option:

[(1)] option 1
[(2)] option 2
[(3)] option 3
[(0)] option 0

But, instead of numbers, you can also define more complex option names. 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.

         {{2}}

Select one option:

- [(very good)]       I like it very much
- [(good)]            It is ok
- [(bad)]             I don't like it
- [(something else)]  I am not sure

As you can see from the example, you can apply different styles for encoding surveys too. Either you use indentation, so that other Markdown interpreter will show it as code, or you use lists.

                             {{2}}

Select one option:

• [(very good)] I like it very much
• [(good)] It is ok
• [(bad)] I don't like it
• [(something else)] I am not sure

                           --{{0}}--

Similar to multi-choice quizzes, you can define multi-choice survey vectors with a number in double square brackets. But, and this is also possible for all other kinds of surveys, you can define some kind of variable name with a starting colon.

What are your favorite colors?

[[red]]         is it red
[[green]]       green
[[blue]]        or blue
[[dark purple]] last chance ;-)

                           --{{1}}--

Within a LiaScript classroom, this represents categorical values.

                             {{1}}

What are your favorite colors?

[[red]]         is it red
[[green]]       green
[[blue]]        or blue
[[dark purple]] no one likes purple ( last chance ;-) )

                             --{{2}}--

If you want to turn this into a continuous representation, you have to work with starting numbers.

                              {{2}}

What are your favorite colors?

- [[1 red]]         is it red
- [[2 green]]       green
- [[3 blue]]        or blue
- [[4 dark purple]] last chance ;-)

What are your favorite colors?

• [[1 red]] is it red
• [[2 green]] green
• [[3 blue]] or blue
• [[4 dark purple]] last chance ;-)

                          --{{0}}--

For defining survey blocks, you only have to have a header row, whose definition is also used by the trailing rows.

Markdown-format:

What is your opinion about LiaScript?

    [(totally)(agree)(unsure)(maybe not)(disagree)]
    [                                             ] LiaScript is great?
    [                                             ] I would use it to make online **courses**?
    [                                             ] I would use it for online **surveys**?

Result:

What is your opinion about LiaScript?

[(totally)(agree)(unsure)(maybe not)(disagree)]
[                                             ] LiaScript is great?
[                                             ] I would use it to make online **courses**?
[                                             ] I would use it for online **surveys**?


                           --{{1}}--

And also in this case, again, you can use numbers to display the summary as categorical.

                           --{{2}}--

As depicted below, the brackets [ ] do not have to match with the first line.

                             {{1}}

Markdown-format:

What is your opinion about LiaScript?

- [(1 totally)(2 agree)(3 unsure)(4 maybe not)(5 disagree)]
- [                ] LiaScript is great?
- [                ] I would use it to make online **courses**?
- [                ] I would use it for online **surveys**?

Result:

What is your opinion about LiaScript?

• [(1 totally)(2 agree)(3 unsure)(4 maybe not)(5 disagree)]
• [ ] LiaScript is great?
• [ ] I would use it to make online courses?
• [ ] I would use it for online surveys?

                           --{{0}}--

The multi-choice blocks are self-explanatory and behave exactly as the single-choice blocks from the previous section.

Markdown-format:

[[1][2][3][4][5][6][7]]
[                     ] question 1 ?
[                     ] question 2 ?
[                     ] question 3 ?

Result:

[[1][2][3][4][5][6][7]]
[                     ] question 1 ?
[                     ] question 2 ?
[                     ] question 3 ?

                           --{{0}}--

As 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. By default, you have to provide some input in order to submit the data. Within 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. The script returns true, if the input matches your experience. Otherwise, an error message will be presented to the user, depending on the input length. If you just return false, then no information will be presented to the user.

Please enter some spaces at first:

[[___]]
<script>
  let input = `@input`.trim()

  if (input.length > 4) {
    true
  } else if (input.length == 0) {
    send.lia("Please enter some text", [], false)
  } else {
    send.lia("Please provide some meaningfull input", [], false)
  }
</script>

Result:

[[___]]

                           --{{1}}--

The input-data for different types of summaries is the same as for quizzes, but you can check the input always manually via alert function. Note that console.log will not work in this case at the moment.

                             {{1}}

What are your favorite colors?

[[1 red]]         is it red
[[2 green]]       green
[[3 blue]]        or blue
[[4 dark purple]] last chance ;-)
<script>
  alert(`@input`)
</script>

What are your favorite colors?

[[1 red]] is it red [[2 green]] green [[3 blue]] or blue [[4 dark purple]] last chance ;-)

We try to develop a simple classroom experience, light without any centralized authority or server. Therefor, we currently apply distributed Web3.0 technologies, which synchronize the state of a classroom across multiple connected users/browsers. At the moment, we can synchronize and visualize quizzes and surveys and display an anonymous overview onto the results. Additionally every executable code can also be edited in collaborative mode. Last but not least, the current implementation of a LiaScript classroom offers a chat, that interprets the inputs as LiaScript. Thus, it is possible to add quizzes, surveys and even code into the chat.

What is Synced?

• Quizzes
• Surveys
• Executable code

The 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. Thus, nothing is stored nothing is logged, and you have the control over your data. All associated servers run only as relays. But, chat messages and collaborative changes to a code snippet will remain within the classroom as long as on user is within the room. If all leave the room, the chat and the collaborative changes are lost...

                           --{{0}}--

You can also disable this feature for your course, simply by adding the command classroom: disable or classroom: false to your main definition.

<!--
author: ...

classroom: disable
-->

# Title

                           --{{0}}--

If 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.

      {{0-1}}

                           --{{1}}--

When you click onto the classroom button, you should be presented with the classroom settings, where you have to choose one backend service. We would prefer to use GunDB. Some services like Beaker require you to run your course from another browser, or you will have different settings.

      {{1-2}}

                           --{{2}}--

We provide different information for the different services that can be applied. However, what is similar to all is that you have to define a room name that must be unique. To help you, you can click onto the circle arrow symbol and a name will be generated randomly for you. The passwords are optional.

      {{2-3}}

                           --{{3}}--

If you then click onto connect and a connection could be established, the classroom settings will be closed automatically. Otherwise, an error message should be provided. If everything worked fine, you will see, at least one user within the classroom and the URL of your course will have changed. You 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. In this case, they will have to repeat these steps.

      {{3-4}}

                           --{{4}}--

In order to disconnect, you will have to go to the classroom settings again and click onto the disconnect button. Again, the URL of the course will change back to the original representation.

       {{4}}

                             {{3}}

Note: You can try this out, if you open LiaScript on different browsers and go back to the quizzes and surveys sections. You should experiment a bit with the resulting presentations. Additionally, try to disconnect and observe the effect on the connected instances.

                           --{{0}}--

The following video shows how to open, share, and close a LiaScript classroom.

!?LiaScript classroom demo

                           --{{0}}--

If you have exported your course to a SCORM or IMS package with the LiaScript-Exporter you can also establish classrooms between different users of the same course within a single LMS or between different ones, such as Moodle or ILIAS.

                           --{{1}}--

By 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. Thus, at first, you have to enable this feature within your course, before you export it.

                             {{1}}

<!--
...

classroom: enable

-->

# Your Course

                           --{{2}}--

Secondly, the classroom name has to be truly unique and surrounded by quotations. By 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. However, by surrounding the room-name with single or double quotation marks, you instruct LiaScript to use this specific room name and to ignore the course URL. All the roommates have to enter exactly the same name for the classroom. That's it!

                             {{2}}

Room name: "This has to be a truely unique name 129281715#123"

                           --{{0}}--

As already mentioned, we currently only synchronize quizzes and surveys. Other elements will be added in the future, such as distributed pair-programming, user roles, asking questions, etc.

                            {{0-1}}

via GIPHY

                           --{{1}}--

If you are interested in the implementation stuff, we build classrooms with the help of CRDTs and try to make LiaScript as backend-agnostic as possible. You can add support for your own systems here.

                             {{1}}

Implementation: https://github.com/LiaScript/LiaScript/tree/development/src/typescript/sync

                           --{{0}}--

There are currently three types of effects that we call:

1. Animations

2. Comments via Text-to-Speech

3. and Playback functions

                           --{{1}}--
   

All of these elements can be used inline and as block-level elements. Every effect is defined by two braces:

                             {{1}}

    --{{1}}--
Spoken comments.

     {{1-2}}
Blocks that appear at animation
step 1 and disappear on step 2.

     {{|>}}
To be read aloud when user clicks
the on the play button...

                           --{{2}}--

Animations are only visible, and comments are read aloud in "Presentation" or "Slides" mode. If 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. In the other two modes, they are revealed step by step with each click.

                            {{3 |>}}

You need to balance these features properly so that your course can be read in Textbook mode and used for presentations and more.

                               --{{0}}--

Animations are defined by two curly braces: one starting and one optional ending number. They can be associated with single blocks, multiple blocks, and also inline elements.

{{start-stop?}} | {start-stop?}{inline}

                               --{{0}}--

Animations can be associated with blocks by adding two curly braces above the block. We recommend indenting the animation definition by at least 4 spaces. Other Markdown renderers will highlight this as code, making it easier to read.

     {{1}}
This is an example for a *single* block animations.

     {{2-3}}
This one will appear on animation step 2 and disappear on 3.

{{4}} This is also ok, but it will look be harder to spot on GitHub.

                           --{{2}}--

Use a starting and an ending number, if you want the element to disappear at a certain point.

Result:

 {{1}}

This is an example for a single block animations.

 {{2-3}}

This one will appear on animation step 2 and disappear on 3.

{{4}} This is also ok, but it will look be harder to spot on GitHub.

                           --{{0}}--

Similarly to quizzes, as described in section Quiz-Solution, you can group multiple markdown blocks by lines of asterisks. Simply add the curly braces with the animation definition above the upper line.

            {{1-2}}
************************************

This is an example...

| that     | contains |
|----------|----------|
| multiple | blocks.  |

************************************


             {{2}}
<section>

As an alternative, you can also use
HTML-tags ...


... to surround multiple blocks.

</section>

                           --{{1}}--

Blocks can also have a starting and disappearing number.

                           --{{2}}--

Depending on your preferred style, you can also use HTML tags to group blocks. These will then be displayed slightly differently on GitHub.

Result:

        {{1-2}}

This is an example...

         {{2}}

                               --{{0}}--

Inline effects can be used in nearly all LiaScript elements. In this case, you will have to unpack the curly braces: the first pair surrounds the animation definition, while the second pair contains all inline elements that should appear and/or disappear.

* no effect here
* but in this line {2}{show ***second***}
* as well as this one {1-2}{show ***first*** remove on __second__}

• no effect here
• but in this line {2}{show second}
• as well as this one {1-2}{show first remove on second}

                           --{{0}}--

Animations can also be grouped freely, allowing one multi-block animation to contain multiple block animations, and one block can also contain further inline animations:

<!--
class="animate__animated animate__backInUp"
style="background:#CCC; padding:3rem; min-height: 40vh; border-radius: 3rem"
-->
                 {{1}}
*******************************************

This block contains {2}{multiple} inline animations.
With some
{2-3}{styled}<!-- class="animate__animated animate__flash" -->
elements as well.

<!-- class="animate__animated animate__backInDown" -->
                  {{3}}
!?[Animated paintings](https://www.youtube.com/watch?v=-DDphfCnFQc&autoplay=true)

*******************************************

             {{1}}

This block contains {2}{multiple} inline animations. With some {2-3}{styled} elements as well.

              {{3}}

!?Animated paintings

                           --{{4}}--

Any kind of CSS can also be added to an animation, as described in the section on Custom Styling. Additionally, we have included an additional CSS stylesheet in the main HTML comment of this document. This will load Animate CSS, but you can use any other CSS library or custom styling as well.

                             {{4}}

Animate.css documentation: https://animate.style

<!--
author: ...

link:   https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
-->

# LiaScript

                           --{{0}}--

The idea of a comment is that they should be associated with animations. When animation $x$ is revealed, then the comment $x$ is read aloud. Similar to a PowerPoint presentation, when one element appears and the presenter says something, then clicks and the next element appears and is also commented. Thus, a comment is a paragraph that is marked by two sets of curly braces, which contain a number, and two dashes around the braces. If multiple comments have the same number, then they will be replayed in the order of appearance.

          --{{1}}--
This will be spoken out loud.

          --{{2}}--
This will be spoken out loud too,
but at animation step 2.

          --{{2}}--
Don't forget me.

            {{1}}
__I am animation 1 {2}{and 2 too}.__

      --{{1}}--

This will be spoken out loud.

      --{{2}}--

This will be spoken out loud too, but at animation step 2.

      --{{2}}--

Don' forget me.

        {{1}}

I am animation 1 {2}{and 2 too}.

                           --{{3}}--

If you change the presentation mode, you will notice that these comments will be displayed in place in "Textbook" mode. In "Slides" mode, they will also be presented to the user, while they will be hidden in "Presentation" mode. If 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.

                           --{{0}}--

But where does the voice come from? In LiaScript, within the initial comment, you can use the language macro to define the document translation and narrator to define the default voice. Currently, we are using responsivevoice as a backup solution if your browser does not support text-to-speech. Otherwise, your default browser and operating system text-to-speech is utilized, which can vary across browsers and systems. Within the settings, it is possible to switch between the browser and backup TTS. It 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.

1. Backup Speech-Engine: https://responsivevoice.org
2. Default narrator must be defined within the initial comment, otherwise US English Male is used
3. You can overwrite the default narrator per slide, by attaching a comment to the title tag
4. Use --{{number}}-- to indicate what is spoken and when
5. Use --{{number voice}}-- to change the voice for this particular comment
6. It is also possible to define custom macros for language definitions
7. You can have multiple comments with the same number, those will be combined, but only the voice of the first one is used
8. See a complete list of all supported voices in section narrator

<!--
author:   ...
language: en
narrator: US English Male
-->

# Title

...

#### Voices & Language
<!--
narrator: UK English Female
@Tanja:   Russian Female
-->

                    --{{1}}--
The entire ***Markdown*** paragraph right below the effect definition in double
minus notation is sent to responsivevoice to speak the text out loud in
`Presentation` or `Slides` mode.

                    --{{3 Deutsch Female}}--
Markdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber und
Aaron Swartz entworfen und im Dezember 2004 mit Version 1.0.1 spezifiziert ...

                    --{{4 @Tanja}}--
«Для торжества зла достаточно бездействия хороших людей».

                --{{1}}--

The entire Markdown paragraph right below the effect definition in double minus notation is sent to responsivevoice to speak the text out loud in Presentation or Slides mode.

                --{{3 Deutsch Female}}--

Markdown ist eine vereinfachte Auszeichnungssprache, die von John Gruber und Aaron Swartz entworfen und im Dezember 2004 mit Version 1.0.1 spezifiziert ...

                --{{4 @Tanja}}--

«Для торжества зла достаточно бездействия хороших людей».

                           --{{0}}--

Sometimes, 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. Therefore, it is possible to put your TTS output into simple HTML comments. This won't be shown to anyone and also not visible on most other Markdown parsers and renderers.

<!-- --{{1}}--
Speak this out, but do not show it to anyone.
-->

                             {{1}}

The associated hidden comment to this point will not be visible in Textbook mode!

                           --{{0}}--

If you click on the language settings, you can either click on the element "Translate with Google (experimental)" and select another language. In this case, a JavaScript library will be injected that implements the translation feature. As you can see from the example, not all parts will be translated. Code blocks will not be translated by default, as well as comments that have been marked with another voice than the default. These comments remain as they are, while LiaScript tries to find an appropriate voice for the new language and gender.

                           --{{1}}--

You can attach specific parameters to the comment that prohibit or enforce translation. By 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. So it is always good to use both definitions.

                             {{1}}

<!-- class="notranslate" translate="no" style="color: red" -->
                    --{{2}}--
I will not be translated!

                    --{{3 Russian Female}}--
«Для торжества зла достаточно бездействия хороших людей».

                --{{2}}--

I will not be translated!

                --{{3 Russian Female}}--

«Для торжества зла достаточно бездействия хороших людей».

                           --{{4}}--

You can attach these language attributes to any kind of Markdown block or inline element to control the translation. Note that code environments and foreign language comments will be tagged automatically with no-translate.

                           --{{0}}--

Since Text2Speech output is integrated into the LiaScript notation, it can be intentionally used for language learners. Simply add a stylized play button to the effect definition to indicate what should be spoken out loud. You can also use different voices.

    {{|>}}
This entire paragraph will be spoken out __LOUD__.

    {{!> Australian Female}}
* But in this case, this can also be combined
* with a couple of
* - different
  - Markdown elements
  - whether it makes sense or not.

{{|>}}

This entire paragraph will be spoken out LOUD.

{{!> Australian Female}}

• But in this case, this can also be combined
• with a couple of
• • different
  • Markdown elements
  • whether it makes sense or not.

                           --{{0}}--

And, as introduced for animations, you can also group multiple blocks together. Simply add as many Markdown blocks between two lines of asterisks, and they will be interpreted as one larger block.

<!--style="background: #EEE; padding:2rem"-->
                  {{|>}}
**************************************************
This entire paragraph will be spoken out __LOUD__.

* But in this case, this can also be combined
* with a couple of
* - different
  - Markdown elements
  - whether it makes sense or not.

**************************************************

              {{|>}}

This entire paragraph will be spoken out LOUD.

• But in this case, this can also be combined
• with a couple of
• • different
  • Markdown elements
  • whether it makes sense or not.

                           --{{1}}--

As an alternative, you can also use an HTML tag like <section> or <div> to group blocks. The LiaScript result will remain the same, but it will be rendered differently on other Markdown interpreters.

                           --{{0}}--

Like in the presented example, the exclamation will not interfere with the table definition. And as presented before, you can also use inlining for Playback elements, as it was used for animations, by simply using two pairs of braces. Depending 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. Like in the presented example, the exclamation will not interfere with the table definition.

| English              | German                            | Russian                                 | Arabic male               | Arabic female               |
| -------------------- |:--------------------------------- |:--------------------------------------- |:------------------------- | --------------------------- |
| {!>}{I go}           | {!> Deutsch Male}{ich gehe}       | {!> Russian Male}{я хожу}               | {!> Arabic Male}{أذْهبُ}  |                             |
| {!>}{you go}         | {!> Deutsch Male}{du gehst}       | {!> Russian Male}{ты ходишь}            | {!> Arabic Male}{تذْهبُ}  | {!> Arabic Female}{تذْهبين} |
| {!>}{he/she/it goes} | {!> Deutsch Male}{er/sie/es geht} | {!> Russian Male}{он / она / оно ходит} | {!> Arabic Male}{يذْهبُ}  | {!> Arabic Female}{تذْهبُ}  |
| {!>}{we go}          | {!> Deutsch Male}{wir gehen}      | {!> Russian Male}{мы ходим}             | {!> Arabic Male}{نذْهبُ}  |                             |
| {!>}{you go}         | {!> Deutsch Male}{ihr geht}       | {!> Russian Male}{вы ходите}            | {!> Arabic Male}{تذْهبون} | {!> Arabic Female}{تذْهبْن} |
| {!>}{they go}        | {!> Deutsch Male}{sie gehen}      | {!> Russian Male}{они ходят}            | {!> Arabic Male}{يذْهبون} | {!> Arabic Female}{يذْهبْن} |

                           --{{1}}--

The result is displayed within the table; all elements can be played on demand.

                             {{1}}

                           --{{0}}--

If you only want to show the play buttons but not the text, it is possible to use some HTML tricks. The 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. Simply 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.

                           --{{1}}--

But, since it is possible to define custom Macros, we can also apply a more elegant way. We define a set of local macros directly within a comment attached to the current heading. The @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. Within the Arabic macro, it is also possible to define the gender of the narrator.

                             {{1}}

#### Hiding Text
<!--
@play: {!> @0}{<span style="display: inline-block; text-indent: -10000px">@1</span>}
@en: @play(UK English Male,@0)
@de: @play(Deutsch Male,@0)
@ru: @play(Russian Female,@0)
@ar: @play(Arabic @0,@1)
-->

| go        |         EN          |         DE          |            RU             |      AR male      |      AR female      |
| --------- |:-------------------:|:-------------------:|:-------------------------:|:-----------------:|:-------------------:|
| I         |      @en(I go)      |    @de(ich gehe)    |        @ru(я хожу)        | @ar(Male,أذْهبُ)   |                     |
| you       |     @en(you go)     |    @de(du gehst)    |      @ru(ты ходишь)       | @ar(Male,تذْهبُ)   | @ar(Female,تذْهبين) |
| he/she/it | @en(he/she/it goes) | @de(er/sie/es geht) | @ru(он / она / оно ходит) | @ar(Male,يذْهبُ)   | @ar(Female,تذْهبُ)   |
| we        |     @en(we go)      |   @de(wir gehen)    |       @ru(мы ходим)       | @ar(Male,نذْهبُ)   |                     |
| you       |     @en(you go)     |    @de(ihr geht)    |      @ru(вы ходите)       | @ar(Male,تذْهبون) | @ar(Female,تذْهبْن)  |
| they      |    @en(they go)     |   @de(sie gehen)    |      @ru(они ходят)       | @ar(Male,يذْهبون) | @ar(Female,يذْهبْن)  |

                           --{{3}}--

The 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.

                             {{3}}

                           --{{0}}--

Since we are utilizing the double braces notation for playback elements, this can also be combined with animations by adding appearance and disappearance numbers. Depending on the current state of the animation, this will result in different sentences.

    {{1 |>}}
This is an example where {|> 1-2}{I go} _{|> 2}{I am going}_ to work.

                           --{{1}}--

You need to keep in mind that this will function as intended only if the user is not in Textbook mode. Otherwise, all elements will be read out loud, and nothing will be hidden.

{{1 |>}}

This is an example where {|> 1-2}{I go} {|> 2}{I am going} to work.

--{{0}}--

As previously noted, tables serve not only as structural elements within a Markdown document but also as datasets. In essence, there's minimal distinction between a diagram and a collection of values.

  9 |                                       (* dots)
    |
  y |                              *
  - |
  a |                    *
  x |
  i |          *
  s |
    |*
  0 +------------------------------------
    0            x-axis                 36

--{{1}}--

The same values can be collected within a list. By clicking on the small icon above this list, you will obtain the same plot as depicted previously.

  {{1}}

--{{2}}--

One of the most significant challenges in science is the scarcity of primary data. Initiatives 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. However, rather than relying on external tools to create visualizations, why not directly incorporate and visualize the data? This would enable others to utilize and examine the data more readily.

--{{3}}--

Everyone who creates or utilizes data and incorporates it into Markdown is already engaging in some form of configuration. Leveraging the structural settings of tables or data, we can automatically visualize data. It's rather surprising that Markdown tables have not been treated as datasets before. The following sections aim to provide a brief overview of various visualization options and how the system determines which one to apply. Additionally, you have the flexibility to enforce your preferred visualization style.

--{{0}}--

The following dataset, sourced from https://ourworldindata.org, illustrates government expenditure on education as a percentage of GDP. The first column represents the x-values, while the subsequent columns denote different categories.

--{{1}}--

If you click on the image icon again, you'll encounter a more elaborate representation complete with a title and labels.

https://ourworldindata.org/financing-education#all-charts-preview

--{{2}}--

The 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. The type of representation is still automatically determined based on the table structure. However, you can still add attributes like data-title, data-xlabel, and data-ylabel to adjust the graphical representation. Refer to the section Attributes for more detailed information.

  {{2}}

<!--
data-title="Government expenditure on education"
data-xlabel="year"
data-ylabel="% of GDP"
-->
| Year | Finland | USA | Germany |   China |
| ---- | -------:| ---:| -------:| -------:|
| 1995 | 6.80942 |     | 4.42079 | 1.84192 |
| 1996 | 6.86052 |     | 4.48319 | 1.85338 |
| ...  |     ... | ... |     ... |     ... |

--{{3}}--

Certainly, you can visualize any type of table that doesn't adhere to the classification of a line or ScatterPlot. Let's define another type of presentation, such as a bar chart. If not all values within the first column can be parsed as numbers, they are interpreted as categories. Additionally, if you change the order of the table, the order of categories in the visualization will also change accordingly.

  {{3}}

| Animal          | weight in kg | Lifespan years | Mitogen |
| --------------- | ------------:| --------------:| -------:|
| Mouse           |        0.028 |              2 |      95 |
| Flying squirrel |        0.085 |             15 |      50 |
| Brown bat       |        0.020 |             30 |      10 |
| Sheep           |           90 |             12 |      95 |
| Human           |           68 |             70 |      10 |

  {{3}}

--{{0}}--

If 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. In this case, the data is simply visualized as a ScatterPlot, displaying only the dots without connecting lines.

| Random |    I |  II |
| ------:| ----:| ---:|
|    5.0 |  1.0 |   5 |
|    ... |      |     |
|    5.0 | 10.0 |   7 |
|    ... |      |     |

--{{0}}--

If 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. This can be achieved by adding the following attribute to the beginning of your table, as demonstrated in the snippet below. Each column is then treated as a dataset and visualized accordingly.

<!-- data-type="boxplot" -->
| Random |    I |  II |
| ------:| ----:| ---:|
|    5.0 |  1.0 |   5 |
|    ... |  ... |  .. |