@ed-components/ed-components v0.0.13
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.
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.