- Quiz library build for solidjs and solid-start.
- Example apps which uses solid quiz:
- Allows you to add a simple quiz in solidjs. You can create the content by yourselve and use it in the quiz.
Live demo
Try it out in the live demo.
Installation
npm i solid-quizor:
pnpm install solid-quizImporting
import Quiz from "solid-quiz";Usage
import Quiz from "solid-quiz";
import { quiz } from './quiz.json'; //your own quiz data in json format
...
<Quiz quiz={quiz}/>How do I create my own quizzes?
You can use the simple quiz editor or write the json quiz by hand in the correct format.
The correct json format is given in the following:
In this quiz is for every question type (multiplechoice, singlechoice, correctorder, numberinput, gaptext) an example given.
const quiz = {
"questions": [
{
"question": "SolidJS is a lightweight *** library for building web user interfaces. It emphasizes efficient rendering and strong typing to create fast, scalable ***. One of its key features is its use of a reactive programming model, which means that components automatically *** when their underlying data changes. SolidJS also includes a powerful *** syntax for creating templates and components, making it easy to build complex UIs. Additionally, it offers first-class support for TypeScript and integrates well with other popular libraries and frameworks. With its focus on *** and ease of use, SolidJS is a promising option for developers looking to build high-quality web applications.",
"questionType": "gaptext",
"correctAnswer": [
"JavaScript",
"applications",
"re-render",
"JSX-like",
"performance"
],
"point": "10"
},
{
"question": "Who invented solidjs?",
"questionType": "singlechoice",
"answers": [
"Ryan Carniato",
"Linus Torvalds"
],
"correctAnswer": "0",
"point": "10"
},
{
"question": "How many GitHub stars does the Solidjs repository have? (04/25/2023)",
"questionType": "numberinput",
"correctAnswer": "27000",
"point": "10"
},
{
"question": "Who invented solidjs?",
"questionType": "singlechoice",
"answers": [
"Ryan Carniato",
"Linus Torvalds"
],
"correctAnswer": "0",
"point": "10"
},
{
"question": "Arrange the different frontend frameworks in descending order of their Github Stars.",
"questionType": "correctorder",
"answers": [
"Solid",
"Angular",
"Vue",
"React",
"Svelte"
],
"correctAnswer": [
"React",
"Vue",
"Angular",
"Svelte",
"Solid"
],
"point": "10"
},
{
"question": "What are new JSX components that solidjs has out of the box compared to React?",
"questionType": "multiplechoice",
"answers": [
"For",
"Index",
"All",
"Switch",
"Match"
],
"correctAnswer": [
true,
true,
false,
true,
true
],
"point": "10"
},
{
"question": "When was the first commit in the Solidjs repostory?",
"questionType": "singlechoice",
"answers": [
"2020",
"2016"
],
"correctAnswer": "1",
"point": "10"
}
]
}Functions
- JSON based input
- styled Quiz
- optimized for mobile and large screens
- dark/light mode
- quiz progress bar
- random question order
- Different question types (multiplechoice, singlechoice, correctorder, numberinput, gaptext)
- Event after quiz finished
- Points evaluation (extensive, only points, no evaluation
- allow back jump to questions
- show quiz points to user
Props
| Prop Name | Type | Required | Description |
|---|---|---|---|
| quiz | Object |
Yes | JSON Object for quiz data |
| quizStartButton | String |
No | String for showing text on start button on start page, default text is "Start Quiz" |
| config | Object |
No | JSON Object for config (color, theme darkmode/lightmode) |
| allowBackJump | Boolean |
No | allow backjumping to previous questions |
| showProgressBar | Boolean |
No | can be enabled to show a quiz progress bar |
| showQuizPoints | Boolean |
No | can be enabled to show inside the quiz the max. points for every question |
| resultType | String |
No | decide how the result is displayed there are these options: ("none" | "points" | "feedback") |
| onComplete | func |
No | Function which is executed after quiz is completed event e can be used with informations about result |
Functionality examples
Examples how the probs above can be used inside the quiz. Of course all probs can be combined
Start button with your own text
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
...
<Quiz quiz={quiz} quizStartButton="Start solidjs quiz"/>With own visual config (for quiz in dark or lightmode)
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
const config = {
initialColorMode: "light", // "dark" | "light" | "system"
...
}
...
<Quiz quiz={quiz} config={config}/>Allow backjumping to previus questions
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
...
<Quiz quiz={quiz} allowBackJump/>Show progress bar
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
...
<Quiz quiz={quiz} showProgressBar/>Show quiz points for every question inside the quiz
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
...
<Quiz quiz={quiz} showQuizPoints/>Show the results after the quiz is finished
There are three different result tyles: "none" | "points" | "feedback"
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
...
<Quiz quiz={quiz} resultType="points"/>Callback function which is triggered after the quiz is finised
This function can be used trigger everything you want to do after the quiz is finised.
import Quiz from "solid-quiz";
import { quiz } from './quiz.json';
const resultFunction = (e) => {
console.log(e); //Event with quiz results
// Do what ever you want
}
...
<Quiz quiz={quiz} onComplete={resultFunction}/>Need Help?
If you have a problem with the library, create a new issue.
License
This project is released under the MIT license.
