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-num>: Numeric answer.
• <ed-speech>: Speech to text answer.

WIP

• <ed-survey>
• <ed-ans>: Simple text answer analyzed with NLP, not part of the bundle.

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()

Importing one element

Each element can be imported on its own: the import registers it, with the elements it uses (ed-pb registers ed-choice, ed-num and ed-speech).

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

The entry points are ed-choice, ed-micro, ed-num, ed-pb, ed-speech and ed-survey, also from a CDN:

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

To register an element under another name, import its class from the main entry point, bundlers keep only the elements you use:

import { EdNumElement } from "@ed-components/ed-components";
EdNumElement.define("my-num");

Other entry points

• @ed-components/ed-components/i18n: registerMessages to change the interface messages, see Internationalization.
• @ed-components/ed-components/emd: parseQuestions, the parser of the Educational Markdown questions, and the types of their model, without the elements.

import { parseQuestions } from "@ed-components/ed-components/emd";

parseQuestions("Value of $\\pi$?\n\n- :num: 3,14");
// [{ question: { type: "numeric", stem: "Value of $\\pi$?", answer: 3.14 }, list: 0 }]

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