@learnblocks/core NPM

Learnblocks

Composable react components for the creation and display of digital learing content.

Goals

simplify and accelerate the development of learning applications and authoring tools
provide accessible, customizable and easy to use components
provide a concept/framework for building further components
provide great UX and DX

Installation

Currently the project is in alpha. API changes are extremly likely.

$ yarn add @learnblocks/core
# or
$ npm i @learnblocks/core

Example

Multiple Choice Presenter
Multiple Choice Presenter with Custom Atoms
Editor / Presenter Example (TODO)
Example for custom Atoms which add functionality (e.g. richtext)

Concept

Entities (naming)

Block (Data)

The whole concept of this library revolves around Blocks. A Block is a datastructure which describes an element.

Example:

{
  "type": "choice",
  "hideCorrectCount": false,
  "options": [
    { "content": "yes", "isCorrect": true },
    { "content": "no", "isCorrect": true },
    { "content": "maybe", "isCorrect": false },
  ],
}

Editor

An Editor is a react component that takes a block of a certain type as an input and renders a UI which allows a user to modify the block.

Presenter

An Presenter is a react component that takes a block of a certain type as an input and renders a UI that allows to interact with the Block (e.g. answering a multiple-choice question).

 * (user is answering)       (show solution, state may be altered)    (interaction is completed)
 *    [interaction]       -->              [staged]               -->         [committed]
 *                        <--                 ⮠

A Presenter has three callbacks: onChange, onStage and onCommit. Each take the presenter state as an argument. The presenter state contains all the information to reinitialize the presenter and to determine if an interaction is completed (committed).

How to contribute

Fix Bugs
Fix TODOs and FIXMEs (see Code)
Write tests
Implement more Blocks
- Fill in the Blanks
- Feedback
- (static) Blocks like Text, Images, Video, Embeds
- Think about the components you need or draw inspiration from H5P
Improve default Atoms
Create new atoms (Maybe with Tailwind?)

Start Developing

Run yarn start to open a storybook containing the currently implemented learnblocks.

Add a new component

FIXME: Template is not up-to-date. Do not use.

Run yarn gen:pkg and enter a name (lowercase) and a description for the component you'd like to implement. Run yarn start to start if it was not already started storybook. You should see your component in the storybook. Edit the files generated at packages/{{componentName}}/src to implement your component.