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
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.
- Problem text.
- Response field.
- Rendered answer.
- Submit.
- Attempts.
- Save.
- Reset.
- Show Answer.
- Feedback.
Development
Programming guide
- Element class names are on the form
EdXyzElement
and have a static methoddefine
that allow to register element in the custom registry with default nameed-xyz
. See webcomponents.guide. - The documentation of components follows Custom Element manifest JSDoc.
Web Test Runner
Testing withAll 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.