Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/siggi-learn/learnblocks
Composable react components for the creation and display of digital learning content.
https://github.com/siggi-learn/learnblocks
education exams learning react
Last synced: about 2 months ago
JSON representation
Composable react components for the creation and display of digital learning content.
- Host: GitHub
- URL: https://github.com/siggi-learn/learnblocks
- Owner: siggi-learn
- License: mit
- Created: 2021-03-18T13:51:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-26T10:15:27.000Z (over 2 years ago)
- Last Synced: 2024-11-22T21:34:16.053Z (3 months ago)
- Topics: education, exams, learning, react
- Language: TypeScript
- Homepage:
- Size: 483 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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.**
```sh
$ yarn add @learnblocks/core
# or
$ npm i @learnblocks/core
```
# Example
- [Multiple Choice Presenter](https://codesandbox.io/s/learnblocks-choice-presenter-pgknv?file=/src/index.tsx)
- [Multiple Choice Presenter with Custom Atoms](https://codesandbox.io/s/learnblocks-choice-presenter-custom-atoms-vvizo?file=/src/index.tsx)
- 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:
```JSON
{
"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 `TODO`s and `FIXME`s (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](https://h5p.org/)
- 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.
# Attribution
Parts of this repositories structure are inspired by the
[chakra-ui](https://github.com/chakra-ui/chakra-ui/) project.