Composable react components for the creation and display of digital learning content.
MIT License
Composable react components for the creation and display of digital learing content.
Currently the project is in alpha. API changes are extremly likely.
$ yarn add @learnblocks/core
# or
$ npm i @learnblocks/core
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 },
],
}
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.
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).
TODO
s and FIXME
s (see Code)Run yarn start
to open a storybook containing the currently implemented
learnblocks.
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.
Parts of this repositories structure are inspired by the chakra-ui project.