Hello, working with Lia has so far been a challenging experience.
While the availability and usability which are present are great, I am personally lacking a... let's call it... "div" that I can throw script-based elements/interactions/ ... in and have them been cleaned up on the leaving / return of the page.

I am currently toying around with a project, in which I am attempting to dynamically generate a task for a user. Said task I am currently having, along with an input field and an image in a div, that I have placed onto the page as a placeholder.
Upon reaching the part where the script gets activated, it fills the div with the necessary layout of button, text, and image to have a user work on...
So far so good... in theory... at least for me... a good idea...
Though when I switch to a page where I no longer employ my... "div" or... "place holder"... I suddenly find it displayed on the page...

After some... problem analysis... it was suspected, that this might be the case as the background process might not "clean up" a seemingly empty div... as... well... it's empty and therefore doesn't bother anyone... and nobody realizes that it's no longer empty.

Maybe I am using everything wrong... but... the idea of having an empty placeholder to be replaced dynamically with a script... sounds like an idea worth considering.
So... maybe just have an lia HTML-based element which is an empty div, and gets handled like any other object on the page (therefore removed upon switching to the next page) would be a great addition for this project.

Hi everyone,

The course overview (reachable by the home button) is essential to receive the basic information on all LiaScript courses. Beside delete and reset buttons, a link on the code of a course would be helpful.

When I asked my students for individual extensions of the material, they explained to me that they were not able to find the course on GitHub. A direct link would overcome this excuse :-)

Sebastian

There are still some points that need to be optimized in terms of Accessibility:

• Quizzes
• Surveys
• Presentations with updated elements
• Colors, at least in light-mode
• Menues
• Todo-Lists
• Console output
• ...

Most Markdown viewers use highlight.js, while LiaScript uses ace. Their mappings have been added in the docs/Code. These mappings have to be done also within the project.

Mir ist aufgefallen, dass durch das Verwenden von Anführungszeichen ("") in einem Textabschnitt, die Formatierung von folgenden Objekten nicht mehr funktioniert. Definitiv konnte ich es bei den Kästchen beobachten, die man mit erzeugt und bei einem Link.

Das Kästchen wurde einfach nicht angezeigt, sondern nur Test mit den schrägen Strichen ohne Formatierung.
Bei dem Link konnte man keinen eigenen Name vergeben bzw. wurde einfach alles wieder genau so angezeigt wie man es in Markdown eingegeben hatte also z.B. statt title als Link konnte man [title](http://goo.gl/fGXNvu) sehen und es wurde nicht als Link erkannt.

Die Probleme verschwanden als ich die " durch zwei ' ersetzte. Dabei war es egal, ob die Anführungszeichen noch offen oder bereits geschlossen waren. Danach funktionierte die Formatierung nicht mehr, davor aber schon, als würden die Anführungszeichen die Formatierung deaktivieren.

Vielen Dank!

I know it is possible to make a two sided page with HTML and Markdown but there must be an easier way. All I want is to have a picture on the left side and some Code samples on the right side.

In my opinion there are many usecases in Powerpoint slides for this feature. But I dont know how a to implement this.

Error output after running npm install && npm run build:

> npx workbox injectManifest workbox-config.js

command not found: workbox
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] sw: `npx workbox injectManifest workbox-config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] sw script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

After running npm install workbox-cli && npm run build:

> npx workbox injectManifest workbox-config.js

Using configuration from /home/jacol/Documents/elm/LiaScript/workbox-config.js.
Service worker generation failed:

Unable to find a place to inject the manifest. Please ensure that your service worker file contains the following: self.__WB_MANIFEST
    at Object.injectManifest (/home/jacol/Documents/elm/LiaScript/node_modules/workbox-build/build/inject-manifest.js:168:11)
    at async runBuildCommand (/home/jacol/Documents/elm/LiaScript/node_modules/workbox-cli/build/app.js:49:9)
    at async module.exports (/home/jacol/Documents/elm/LiaScript/node_modules/workbox-cli/build/app.js:138:11)

I know this feature request could be way out of scope of LiaScript and its current goals. But I would like to at least discuss it here.

H5P is an openly documented specification for rich media content that can be implemented into websites especially learning courses. The libraries utilizing this scheme are also open source and based on JavaScript (as far as I can see). The functionality to open and run H5P-content is integrated into several LMS (namely Moodle, Brightspace, Canvas, Blackboard) via LTI and also CMS like WordPress or Drupal with plugins.

The current way of creating and hosting H5P-content is to use the authoring tools on h5p.org or using the plugins on WordPress, Drupal or Moodle. Those H5P-content can then be embedded as iframe or downloaded and shared as H5P-file (zip). Using the latter could be a chance to embed H5P-content into LiaScript without the need to host it at another website.

I added a test file for evaluation purposes: example-content-find-the-words-557697.zip
This is taken from the examples page and hopefully shows some capabilities of H5P and its structure.

Therefore, I request to evaluate the possibility to open up and run h5p-files directly from LiaScript. That would be a massive plus when comparing it to other LMS which do not support running those files out of the box. Apart from that H5P could be a big aggregator for OER and a smooth integration would clearly rise interest into LiaScript as an OER authoring tool.

TLDR:
LiaScript 📜 + H5P 🚀 = ❤️

I stumpled across Paper.js today. Seems to be a good addon.

Examples: http://paperjs.org/examples/
Repository: https://github.com/paperjs/paper.js

I've found a few issues in the settings panel.

Scrollbars everywhere

As can be seen in the screenshot every button and the whole panel itself have an unnecessary vertical scrollbar. This does not happen on mobile devices:

Desktop	Mobile

The share panel has the same problem:

Buttons are confusing

If you want to choose another font for code view you can select from a list. The buttons are used in the same way (choose a theme) but why buttons instead of a list? This is a confusing UX at first.

Nightmode

I couldn't find the night-mode setting because I misinterpreted the word "Color" next to it. Also the moon is hard to see. Maybe use 🌙 or 🌜 instead of 🌝 ?
Would it be possible to automatically switch to a dark code style when changing to night-mode?

Font scaling

A font scale < 100% does also scale the frame sizes. At 80% I get a messy UI on my not FHD screen:

And also the gray-theme button seems to have a problem in dark-mode because the font color changes to a light one while the background is also in a light gray. This is due to the fact that the background color does not correspond to the theme color (see theme button in the last screenshot).

Inserting text, which should be read out loud, but not be visible to the user is not working anymore ...

<!-- --{{1}}--
list, blockquotes, tables, custom HTML, horizontal rules and dealing with
code-blocks. 
 -->

⚠️ This is still a Work-in-progress thing. I'll remove the [WIP] tag as soon as it is ready.

What

A comparison chart for functions related to questions and quizzes available in LiaScript could be added to the documentation.

Why

This could improve some points namely:

1. Users coming from other LMS wanting to switch to LiaScript searching for information if all functions needed are supported.
2. Users wanting to know how to transfer their questions from their LMS repositories into a LiaScript file.
3. Developers seeing what is worth implementing or what could be extended in the LiaScript universe.
4. Fans wanting to share LiaScript as a comparable alternative to other LMS. 🚀

Sources

Marked ones have been investigated:

• H5P - Content types and applications
• Moodle 3.10 - Question types
• Moodle 3.10 - Third-party question types
• OpenOLAT 15.3 manual - Test question types
• ONYX 9.6 - Question types
• Other?

Table

How to edit the table:

• An Excel-Sheet: Liascript_Comparison.zip
• https://www.tablesgenerator.com/markdown_tables

Notes

Some additional notes and ideas about this topic:

• I really have to restructure the table a bit:
  • Naming conventions are hard. Every LMS has another name for the same thing. Maybe these should be included to make the transition easier.
  • I need to separate content (accordion, charts, column etc.) from quiz stuff (Fill in the blanks, Image pairing, Multiple Choice etc).
• The table is a first step to compare those systems. It could be an entry point in the docs that links to corresponding pages explaining how to create such things in LiaScript. So links could be added in the LiaScript column.
  • Example: "Text inputs" in the LiaScript column should be Text inputs
• Some implementations of question types are very different in LiaScript compared to the ones listed. After the table is filled it should be investigated which are the functional differences and if they could be added in the future.
  • Example: Text inputs in LiaScript are different from the "Fill in the blanks" functionality of other LMS because for now you can't emebd the text-fields into a text. This is a function that could be added and so it should get an extra feature request in the issue tracker. Funnily there is one: #34

I used Firefox 72.0.1 (64-Bit) on Win10.

I recreated and demonstrated the bug https://LiaScript.github.io/course/?https://github.com/EliasTechnik/EnglishPresentation/blob/main/imagebug.md

If an underscore is used in the alt-text of an image its get interpreted as a text-formatting character.

That does not load: ![ttally_controler class](img/lo_res/imagebug/ttally_controller.jpg)

That does load: ![ttally controler class](img/lo_res/imagebug/ttally_controller.jpg)

It seems that the underscore in the alt-text is a problem. Maybe the underscore in the path contributes also to it.

I am not sure if an underscore in an alt-text should be interpreted as a text-formatting character. If so please close this issue because it's not a bug.

I've tried to use the LiaScript docs page as a test for mobile usage. Here is a list of issues I've found there.

Starts with an open navigation bar

When opening the page the nav sidebar is opened. You have to click on the burger menu to start reading. It would be better if the nav-bar is hidden on mobile by default and only shows up by clicking on the burger menu (or adding the function that you could open it with a swipe from the left border).

Out of range problems

Some elements seem to get out of the view. This is sometimes hard to prevent (e.g. for tables) but also there are some issues with text overflow and such. I tracked it in the docs with some screenshots:

Zooming with two fingers

I accidently zoomed into it with the zoom gesture. I think this is a useful feature on mobile but I wasn't able to reset to 100%. Since the I'm getting problems like cut end of pages (not able to scroll down any further) and so buttons get lost:

I don't know if this problem comes from firefox (that I'm using on the phone) so that the adress bar on the bottom simply isn't substracted from the screen height or it is something that could be done on the websites settings. I also had other troubles with the adress bar unpredictably hiding my settings panel:

Cut radio buttons

I stumbled upon the issue that the radio buttons seem to be cut on the top and bottom of a quiz. This happens only on mobile devices:

If a section title contains the > character it breaks the whole course:

## Topic > Subtopic

The above example breaks the whole course

The template/macros for including mermaidJS graphs into LiaScript render the SVG content as HTML escaped. The examples don't render properly. Any suggestions how to fix?

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

Translate the JavaScript part to TypeScript in order to give the same/similar type guarantees as in Elm. There are currently two projects that seem to offer some kind of interoperability:

• elm-typescript: https://github.com/galactic-run/elm-typescript
• elm-typescript-interop: https://github.com/dillonkearns/elm-typescript-interop

CodiMd has some great diagram generators included for flow charts, sequence diagrams and so on.
The usage is very easy and on the data side, meaning that you only have to specify the relations of the blocks.
See the CodiMd documentation Section with links to the involved javascript projects.

It would be good to have this features in LiaScript also. The ASCII System ist quite good but a bit cumbersome as you have to draw the diagram yourself.

I have a bit of javascript that allows for animated gifs to replace static images so that learners can "click to play" gifs (see https://liascript.io/course/?https://raw.githubusercontent.com/arcus/education_liascript_experiments/main/gif_stuff.md#1, in Chrome as I'm troubleshooting other browsers).

I've used both the script: YAML (main branch: https://github.com/arcus/education_liascript_experiments/edit/main/gif_stuff.md) as well as the @onload macro (testing_onload branch: https://raw.githubusercontent.com/arcus/education_liascript_experiments/testing_onload/gif_stuff.md), and in both cases, the click-to-play in page 1 works in Chrome but if I navigate to page 2 and go back to page 1, it doesn't. I'm honestly not sure if this is due to my rusty js skills, incomplete understanding of LiaScript, or an enhancement opportunity. BUT. Can I force the reloading of scripts when a page is changed?

Simple repo with just enough to demo the problem: https://github.com/arcus/education_liascript_experiments

Document the Elm and the JavaScript/TypeScript.

• Elm-Guidelines: https://package.elm-lang.org/help/documentation-format
• TypeScript: https://blog.bitsrc.io/documenting-your-typescript-projects-there-are-options-da7c8c4ec554

In the following examples LiaScript renders a blank slide:

• Example containing no headers: https://liascript.github.io/course/?https://raw.githubusercontent.com/jhc-at-home/scratch/master/NoHeaders.md

Some text

Some more text

• Example with heading after some text: https://liascript.github.io/course/?https://raw.githubusercontent.com/jhc-at-home/scratch/master/WithHeaders.md

Some text

# A heading

Some more __text__

As stated here LiaScript should be able to use the Sensor APIs on mobile device browsers. Are there any docs or templates about how to implement the Sensor APIs?

VS Code is a comparable editor to Atom and is used by alot of people. Maybe the reach of LiaScript could be extended by adding a liascript extension to its marketplace.

I'm not sure how the marketplace works but this could also benefit users of vscodium or code-server.

GitHub flavored Markdown supports the definition of tasks:

- [ ] not yet done
- [X] done

which is rendered as follows:

• not yet done
• done

It would be convenient, if LiaScript could support the same feature, which could be helpful to users to mark their progress, some properties, or something else. Furthermore, this should be combined with the LiaScript feature of attached scripts:

- [ ] not yet done
- [X] done
<script>
let task = @input // substituted by [false, true]
if (task[0] && task[1])
    alert("super")
else if (task[0] || task [1])
    alert("it is okay")
else
    alert("that is absolutely not sufficient")                             
</script>

Such attached scripts are not mandatory, but they allow to trigger a certain action, if the input value changes, which might be or might not be useful ;-)

If there is a limitation of max words or length of talking for the TTS service you use, I suggest to add a kind of queue to your wrapper.

If a TTS section exceeds the max length, the text is split up into sentences and the whole section is chained using the onEnd callback or killed at onStop.

This way any technically caused pauses are hidden between sentences.

Nested lists at the third level show a map-icon instead of bullet-point ...

* 1
* 1
  * 2
    * 3 <- Wrong Icon  

Expected behavior

Currently it is somehow possible to use the arrow keys left and right to navigate through the slides.

Actual behavior

However, this is only possible if the navigation buttons at the top have been clicked at first and keep the focus, if they loose it, because the user clicks somewhere onto the slide, then these click events are not handled anymore.

Need help

These arrow-key events are handled in src/elm/Lia/View.elm by function onNavigationKey:

However, I have no idea why this happens if the focus is lost. The event-handling happens on the main div and thus work for all child elements, if they do not disable event-bubbling... at least in theory.

Hints and suggestions are welcome ;-)

LiaScript should be checked to fulfill most issues from ChromeDev-Tools in terms of Performace, Best Practices, SEO. Web-Accessibility is a separate point and requires more effort ...

Since last release is Liascript for me not working. I can't use it on a Chrome based Browser and Firefox. Also Liascript-preview isn't working anymore.

Also i have tried to open this presentation.

It would be nice to be able to add presentation theming hints in the markdown metadata that override the Lia theme.
e.g.

• The "logo" could be displayed in the top bar (Not just in the courses cards).
• A foreground colour scheme of 2 colours. Something like:

colors:
  primary: #abc
  secondary: #00ff33
  text: red
  background: grey

• A font. Something like:

font: 
  - main:
    name: Fira Sans Condensed
    url: https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap

or just

font: https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap

While enjoying your elmeurope2019 LiaScript presentation with your player I was irritated by the US female voice.

The phrase Sec. 1.2 was voiced as "seconds 1 point 2".

To avoid this, please recommend to your users to:

• Test voice parts
• Better avoid abbreviations. ie. write Section instead of Sec.

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

SeeTranslations:

And Informations:

By the way it should be Information instead of Informations

Automate versioning and CHANGELOG generation with semver.org and conventionalcommits.org.

Better integration of the LiaScript parser with the ASCII-Art parser SvgBob in order to support nesting elements in verbatim code. This might be useful for integrating formulas, images, links, maybe javascript code, etc.

``` ascii
+---------------------------+           +---------------------------+
| "$ f(x) = \frac{a+b}{x}$" |---------->| "[click me](https://url)" |
+---------------------------+           +---------------------------+
```

As Dropbox was stated here as a hosting provider I tried our Nextcloud implementation but wasn't successful.

Here is a test link: https://tuc.cloud/index.php/s/CC47jYYfR6skd6Z
And here is the direct download: https://tuc.cloud/index.php/s/CC47jYYfR6skd6Z/download

Something that can be done here?

Example: https://liascript.github.io/course/?https://raw.githubusercontent.com/jhc-at-home/scratch/master/Simple.md#1

This contains:

<div>
*Some* _markdown_
</div>

Expected result (see note):
Some markdown

Actual result:

*Some* _markdown_

Note: Apparently github isn't working properly either on this.

Since the code output also supports images to be included, it is better to have a custom sized terminal, so that the user can decide what size fits the most. I guess this does not have to be persistent.

1. Link to sections via #section-title

Currently sections are identified by numbers as URL-fragments ?https://course-url#slideNumber. It is possible to use the slide number as local references [link](#123) but it is also possible to use title tags [link](#some-title). However, linking to a certain section from another website or course, is currently only possible via section numbers. By using section-titles, linking would still work even if the structure of the course has changed.

Thus, linking to slides should be possible via:

• https://liascript.../?course-url#12
• https://liascript.../?course-url#section-title

2. Link to fragments (animation steps)

A section can contain multiple fragments, that are currently visible only in Presentation-mode. It could be beneficial to provide also references to these "subsections" such as [link](#section-title;fragmentNumber) and also to allow external links to point to specific animation steps. However, this breaks the common Markdown semantic and would not be compatible to other Markdown reader/interpreter anymore.

Maybe the fragment could be provided as part of the link title, that is then interpreted a bit differently:

[fragment-2](#section-title)

Or there is another kind of reference-syntax that I am currently not aware of, that allows to add additional information to a local reference?

A new version of eCharts is online, upgrade might be usefull:

https://echarts.apache.org/en/index.html

The MD file here: https://raw.githubusercontent.com/jhc-at-home/scratch/master/README.md
contains:

<details markdown="1">
<summary>Solution
</summary>

### A Header
1. Yes, add explanation here

**TODO**: add image
</details>

LiaScript renders:

<details markdown="1">
Solution 

Github renders:

It would be great to have a mouseover preview for links to Wikipedia articles like it is done in Wikipedia, so that the user does not need to go to the website of Wikipedia if a brief preview is sufficiant for understanding. This would make reading more fluent.

Currently elm does only support http and https. Other browsers do also support peer2peer protocols for file and website-shareing, such as the Beaker Browser which supports hyper:// and dat://, or the Brave Browser that supports ip(f/n)s://. In order to enable course-sharing by using these protocols, it is required to add this support to LiaScript

At the moment LiaScript supports, simple text quizzes [[solution]] , selections [[(**right**)|wrong|wrong wrong]], single-choice [(X)], multiple-choice [[X]], matrix and generic [[!]] quizzes. Text-quizzes and selections should become part of normal paragraphs and tables, such that the following example could define more complex quiz-type:

This is an [[example]] of a [[ (quiz) | horse | utter nonsense ]],
which [[might]] be 
[[ interesting
| (helpful)
| helpfully
| I do not know ]]
for other to create quizzes.

The same elements could be used also within a table.

Note: The vertical lines | within the selection might cause some problems with tables, rendered by other Markdown editors.

Hi Andre,

currently, it is not possible to "execute" course from private GitHub repositories. Inexperienced users asked for this feature hoping to implement first steps with LiaScript without public visibility. Of course, they did not consider that the history of the attempts is still available :-)

Looking forward to further discussions!

Sebastian

I suggest to either use the Github WebUI or to add a LICENSE.txt/.md and clearify the licensing situation.

Whether you use a viral GPL or a less limiting BSD/MIT/Apache will decide about future developments, re-use of this gem.

I've found some issues with the toolbar.

Search is buggy

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

Just type in Tools (it's the second header after the start page). It can't be found. It seems that the search only goes through the paragraphs and not the headings?

Delete search terms with an X

If I'm searching for stuff the navigation reduces itself to the pages that may contain my search terms. This is okay but it leads to the problem that when I want to get back to the normal navigation overview I have to delete my search term. A simple X at the end of the search bar could be added to instantly delete the current search terms and to get back to the normal view.

Buttons

The buttons for burger menu, index, previous and next page and also mode are very small. They are barely 'readable'. Also this is a problem on mobile devices but I'll discuss this in another issue.

Despite the small size their width seems to be variable. They don't have a static ratio like quadratic or 16:9 or whatever. Instead their width differs a lot an so the click area does. See here for reference:

Index

I was confused about the home button. I thought it would bring me to the first page but I got to my own Index page (UX problem). I tried to get back but the back button is not working there (UX). Maybe another symbol could be used for the Index page? Or it could be moved down - left side of the user settings button. This would make it more clear that this button has nothing to do with the current course.

When I'm searching for a template my first obstacle is to find the templates repositories. I often forget that it is not located in the LiaScript org.
While searching, I always go to the github.io website and often I scroll over the link (below JavaScript Ready).

My first idea would be to add a specific link into the navigation bar at the top of the github.io page. This could be also done for the LiaBooks.

Just another fact about the website:
When clicking on one of the navigation links the page jumps to the specific part. But when I'm searching for the Docs and I click on the Docs I would expect the website to bring me directly to the docs. But I have to click another link which is called 'here'.

Maybe the navigation bar could be divided into page-jumping links (explaining what LiaScript is) and direct links to specific places (docs, templates, books, source, blog)?

When using a script tag on code block in liascript, send.stop is undefined.