ed-components ·

A set of web-components for education.

Components

Not ready for production yet. These components are used for research.

Wrapper components

• <ed-pb>: Handle a set of questions and interactive answers.
• <ed-micro>: Allows wrapping content inside a minimal dialog element to easily chunk information and maximize memorization.

Single answer components

• <ed-choice>: Single or multiple choice answer.
• <ed-ans>: Simple text answer analyzed with NLP.
• <ed-num>

WIP

• <ed-survey>
• <ed-speech>

Importing all elements

Components are published as npm packages, you can easily import all components and register it with the ed-components file including side-effects.

import  "https://esm.sh/@ed-components/ed-components/ed-components";

You can also install locally with npm i @ed-components/ed-components and then in your code.

import  "@ed-components/ed-components/ed-components";

A registerComponents function is also provided.

import  registerElements from "https://esm.sh/@ed-components/ed-components";
registerElements()

With local package:

import  registerElements from "@ed-components/ed-components";
registerElements()

You also can register the elements you use and rename them. See dedicated pages for each component.

Styling

Via CSS custom properties (variables) inspired by bootstrap.

• --ed-primary
• --ed-success
• --ed-danger

User interface layout

Ideas comes from Edx licensed CC-BY-SA.

1. Problem text.
2. Response field.
3. Rendered answer.
4. Submit.
5. Attempts.
6. Save.
7. Reset.
8. Show Answer.
9. Feedback.

Development

Programming guide

1. Element class names are on the form EdXyzElement and have a static method define that allow to register element in the custom registry with default name ed-xyz. See webcomponents.guide.
2. The documentation of components follows Custom Element manifest JSDoc.

Testing with Web Test Runner

All components are tested from the components directory.

To execute all tests npm run test, in watch mode: npm run test:watch.

To execute test for a single component, pass the test group to wtr:

npm run test -- --group ed-survey

TODO

• [ ] Share submit button with localization.
• [ ] Localize.