js-lesson
v0.0.8
Published
a tool for teaching javascript
Downloads
3
Readme
👹 js-lesson
⚠️ This is a work in progress. Use at your own risk. ⚠️
Basic Use
Easily turn code blocks in markdown and html into editable, runnable, and savable assignments and examples for students or users.
Just include the script tag in your html.
<script src="https://unpkg.com/js-lesson/dist/js-lesson.bundle.min.js"></script>And then initialize it like so:
GistLabsFromPage(props, some_element);Now, we can just write examples using standard markdown syntax for fenced code blocks:
# My title
Some example text.
```js
console.log("hey!");
document.write("hello world!");
```
# Another title
```html
<html>
<body>
Some html content here
<script src="index.js"></script>
</body>
</html>
```
```js
document.write(document.body.textContent + "goodbye!");
```You can also embed existing gists, like so.
Arguments
options, see below. defaults to{}root_el, the parent element of the blocks you want to become labs, defaults todocumentc_sel, the querySelector of the code blocks to replace with labs, defaults to"pre code", expects a child inside a parent.
Advanced Use
React components
Advanced Options/Props
<GistLab> takes the following props.
Limitations and Notes
- runtime errors don't include the filename of where the error originated, though syntax errors do.
- when embedding gists, they should be unique for the page, i.e. don't embed multiple of the same
data-gist_idorgist_idprop per page page.
GistLabsFromPage() and UncontrolledLabsFromPage()
- Use heading tags (
<h1>,<h2>, etc) to separate different labs, and to group example files into a labs. Because of this, they should be unique on a lesson page.
<GistLab/> React Component
- the props
inital_filesandgist_idare mutually exclusive.
Development
git ac -m 'did stuff'
npm version patch
npm publish