https://github.com/liascript/custom-style
A simple demo that shows, how a custom css can be used to style a LiaScript course
https://github.com/liascript/custom-style
css liascript liascript-course stylie
Last synced: 8 months ago
JSON representation
A simple demo that shows, how a custom css can be used to style a LiaScript course
- Host: GitHub
- URL: https://github.com/liascript/custom-style
- Owner: LiaScript
- Created: 2020-01-16T20:52:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-13T14:20:23.000Z (10 months ago)
- Last Synced: 2025-03-13T15:27:02.641Z (10 months ago)
- Topics: css, liascript, liascript-course, stylie
- Language: CSS
- Homepage: https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/custom-style/master/README.md
- Size: 30.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://LiaScript.github.io/course/?https://github.com/LiaScript/custom-style) [](https://gitter.im/LiaScript/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
# Custom-Style demo
This is a simple demo, that shows how LiaScript courses can be customized.
Please see the [Lia-Script-Version](https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/custom-style/master/README.md)
to see how this document gets rendered in [LiaScript](https://liascript.github.io).
## How does it work?
You can load any css file that you want, simply place the URL of your style
into the main header of your document via `link: url.css`. Unfortunately loading
`custom.css` directly does work only for local development, using it on github
you will need a CDN, such as https://www.jsdelivr.com/?docs=gh ... simply refer
to your style in your github repository.
``` markdown README.md
The whole text-block should appear in purple color and with a wobbling effect.
Which is a **bad** example, please use it with caution ...
~~ only this is red ;-) ~~
## Charts
Use ASCII-Art to draw diagrams:
Multiline
1.9 | DOTS
| ***
y | * *
- | r r r r r r r*r r r r*r r r r r r r
a | * *
x | * *
i | B B B B B * B B B B B B * B B B B B
s | * *
| * * * * * *
-1 +------------------------------------
0 x-axis 1
## Quizzes
### A Textquiz
What did the **fish** say when he hit a **concrete wall**?
[[dam]]
### Multiple Choice
Just add as many points as you wish:
[[X]] Only the **X** marks the correct point.
[[ ]] Empty ones are wrong.
[[X]] ...
### Single Choice
Just add as many points as you wish:
[( )] ...
[(X)] <-- Only the **X** is allowed.
[( )] ...
## Executable Code
A drawing example, for demonstrating that any JavaScript library can be used, also for drawing.
```javascript
// Initialize a Line chart in the container with the ID chart1
new Chartist.Line('#chart1', {
labels: [1, 2, 3, 4],
series: [[100, 120, 180, 200]]
});
// Initialize a Line chart in the container with the ID chart2
new Chartist.Bar('#chart2', {
labels: [1, 2, 3, 4],
series: [[5, 2, 8, 3]]
});
```
@input
### Projects
You can make your code executable and define projects:
``` 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
}
```
// insert the JSON dataset into the local variable data
let data = @input(1);
// eval the script that uses this dataset
eval(`@input(0)`);
## More
Find out what you can even do more with quizzes:
https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md