This library offers several quiz react components. To see them in action visit the Storybook: Storybook
npm install -S react-quiz-ui
Adapt your tailwind.config.js as follows to have the necessary css included:
module.exports = {
...
content: ['...',./node_modules/react-quiz-ui/src/**/*.{js,jsx,ts,tsx}'],
...
}
Each exercise elements represents a specific type of exercise or a part of an exercise. Each type is discussed in this section.
They take an initial answer as an input and pass back any changes made to the answer.
In this exercise, the user is asked to select 1 or m from n elements (with m <= n).
- Randomized order of the items
- Disable any User Input
- Show evaluation
- Radio button (1 out of n) vs checkbox (m out of n)
In this exercise, the user is asked to solve a coding problem.
- Provide starting Code
- Tabs Support (Source / Preview)
In this exercise, the user is asked to write a text response based on a given question or problem.
- Vertical / horizontal alignment of the editor and the rendered markdown
Each ExerciseObject component asks for the same generic props ExerciseProps<T extends IExerciseObject, E extends IExerciseAnswer,>, where T and E are implemented according to the needs of its component.
Example implementation for IExerciseObject
Example implementation for IExerciseAnswer
Then the following Component can be defined:
const MultipleChoiceComponent:
React.FC<ExerciseProps<IMultipleChoiceExercise, IMultipleChoiceAnswer>> = (props: ExerciseProps<IMultipleChoiceExercise, IMultipleChoiceAnswer>) => {
}Consists of the exercise object(IExerciseObject), an initial answer (IExerciseAnswer) and a callback function that emits any changes made to the answer (IExerciseAnswer)
Consists of a metadata object that contains additional information and configurations and may also have additional exercise-specific properties.
Consists of an optional reference id to the exercise itself, and an answer object which is exercise-specific.
These small components are used as modular building blocks for the exercise elements.
Renders a markdown text.
Provides a monaco code editor with language highlighting.
This Interface consists of a src property which is rendered based on the implementation of the component
Further packages can be found in the package.json