@ed-components/ed-components

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-survey>
• <ed-num>
• <ed-speech>

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 documenation 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.