Best practice: including interactive HTML

[tilman-schieber]

As recommended, I have created a course as a github-repo.
In my course I am embedding some interactive learning contents (HTML files with inline CSS and JS) with the ?? syntax, i.e. as iframes.

Because of githubs X-frame policy this does not work:
Refused to display 'https://raw.githubusercontent.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

Here is an example of what I am trying to embed.

Of course I could deploy the little web apps somewhere else and embed them from there. However, I would love to have all the source code in one git repo.
Is there a way to make Liascript inline the html at this spot so it does not come from another server?

[andre-dietrich]

Adding this to LiaScript as a fallback, would be an interesting feature ...

However, you can create a custom macro for this, and use it with the link/url syntax. You can try this out here:

example

The code looks like follows, and to my knowledge, iframe and srcdoc are the only option to accomplish this. This will work only, if no other recources, like script-urls of css are embedded with a relative URL into the original text-file.
By writing @[macro(param, param)](url), LiaScript will expect the last parameter to be the URL and therefor also check if it is relative or absolute. Thus, this way, you can refer also to local resources in your project and LiaScript will handle the appropriate URL-handling.

<!--
@embed
<script run-once modify="false">
fetch("@1")
  .then(response => {
    if (!response.ok) {
      const error = `HTTP error! status: ${response.status}`
      send.lia(error)
      throw new Error(error);
    }
    return response.text();
  })
  .then(html => {
    html = html.split('')

    for(let i=0; i<html.length; i++) {
      if (html[i] === '"') {
        html[i] = "'"
      }
    }

    send.lia(`HTML: <iframe @0 srcdoc="${html.join('')}"></iframe>`)
  })
  .catch(error => {
    console.warn('Error fetching and extracting text:', error);
    send.lia(error)
  });

"LIA: wait"
</script>
@end

persistent: true
-->

## Embed

@[embed(style="height: 380px; border: none")](https://raw.githubusercontent.com/tilman-schieber/OKInf/main/html/1/addieralgorithmus.html)

## another one
<!--
persistent: true
-->

@[embed(style="width: 500px; height: 246px; border: none")](https://raw.githubusercontent.com/tilman-schieber/OKInf/main/html/1/bubblesort.html)

Titles are ignored at the moment and will not be passed as a parameter. The @0 and @1 are the parameter substitutions within the script. You can modify and redefine this script at your will. The persistent definition, in the main header, tells LiaScript to not destroy the content. Thus, when you switch to another slide, the bubble-sort example will still be running in the background.

If you have defined a couple of macros or styles that you want to reuse in other projects, I recommend creating a separate Markdown-file for this. This one can then be imported into all other projects with:

<!--
import: https://my_custom_macros.md
-->

# Another script

This would be the original macro command, but with `@[embed...` you still have a link in other editors ...

@embed(style="border: none",https://another-raw-html-site)

Besides ...

I have seen you were using text-to-speech (TTS) in your example, maybe the following example would be interesting for you too ... this was a virtual presentation at the "We Are Developers" Conference in Berlin. However, I tried to define the TTS-comments for every animation step, so that it can be replayed within the slides' mode with a British voice (you have to enable the sound at the bottom), but it is still readable in textbook-mode. This way you could use your materials also for presentations ...

https://github.com/LiaPlayground/Transforming-Education

and here is the interactive version:

https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaPlayground/Transforming-Education/main/README.md

[tilman-schieber]

Thank you so much for the elaborate answer. It works great!

I didn't get the external macro-file to work at first. It appears that a file you import needs to have some markdown content.
Using

<!--
import: https://my_custom_macros.md
-->

does not work if my_custom_macros.md consists only of a big html comment.

That was a bit surprising but now it works!