ed-components

Teach, learn, explore new possibilities in education with these web components.

• Easy to write with a Lightweight markup language based on Markdown.
• Easy to use, it can be used without any server with a simple Web browser.
• Easy to share, save and reuse with a file based approach, no database required.

White book

ed-components are implemented as web-components and can be used in the client-side without any server.

ed-components could be integrated in any LMS or CMS with server-side hydration and server-side grading thanks to DOM Events.

A playground is provided for teachers that do not want to install anything. Fill a form and submit it to get a shareable url with the form data encoded in the url.

ed-components emit events in order to be used in server apps.

ed-components can be exported to various formats using pandoc.

An open-source library of contents is published as a git repo.

Syntax

Problems are easy to write thanks to a markdown like syntax which will turn your text into the interactive html ed-components.

For example using the <ed-choice> let you easily write choices questions like this.

<ed-choice>
# Einstein formula

We remind you that $$E=m c^2$$

What means $E$ in this formula?

   - [ ] empty
   - [x] energy
   - [ ] entropy
</ed-choice>

See ed-choice for more information.

events

Use https://www.xapijs.dev/ verbs, see https://doc.xapi.fr/profiles/xapi/taxonomy/verbs

Each component emits Custom EdEvents that can be accessed in the details attribute.

{
  "date": "2023-08-17T13:58:11.038Z",
  "url": "http://localhost:8080/components/ed-quiz/",
  "edc": "_EdQuiz",
  "title": "Quiz",
  "verb": "RESPONDED",
  "question": 2,
  "answer": 2
}

Documentation

The website is build using eleventy. Each README.md file is turned into a html page.

Each html source code starting with <ed- is turned into an interactive demo.

Syntax overview

Ed components are sort of cousin of Open Edx Problems.

Open edx use olx an xml format to describe problems. As much as possible ed-components follows the vocabulary used in olx, enabling an easy conversion of ed-components content to olx to be used in edx platforms.

However, ed-components goal is simplicity, so information is embedded in a Lightweight markup language based on Markdown.

Also, as ed-components can be used in the client-side, script programmatic graders should use javascript instead of python.

References

• Web components Guide
• Open UI for presentational content.
• zoo-web-components bundle vanilla web-components with shared part.

Roadmap

1. Enable blank lines in ed components children of ed-quiz.
2. Docs: implement search with Pagefind
3. DEV: Try bun instead of pnpm.