{"id":13532369,"url":"https://github.com/doldsimo/solid-quiz","last_synced_at":"2025-04-12T21:32:47.953Z","repository":{"id":181405339,"uuid":"628391311","full_name":"doldsimo/solid-quiz","owner":"doldsimo","description":"Simple quiz component for solidjs and solid-start.","archived":false,"fork":false,"pushed_at":"2023-09-08T14:04:53.000Z","size":15611,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T15:54:32.657Z","etag":null,"topics":["quiz","quiz-component","solid-js-framework","solid-start","solidjs","solidjs-library"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/solid-quiz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doldsimo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-04-15T19:56:59.000Z","updated_at":"2024-11-08T20:16:35.000Z","dependencies_parsed_at":"2024-01-14T02:02:22.616Z","dependency_job_id":null,"html_url":"https://github.com/doldsimo/solid-quiz","commit_stats":null,"previous_names":["doldsimo/solid-quiz"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doldsimo%2Fsolid-quiz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doldsimo%2Fsolid-quiz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doldsimo%2Fsolid-quiz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doldsimo%2Fsolid-quiz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doldsimo","download_url":"https://codeload.github.com/doldsimo/solid-quiz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248636280,"owners_count":21137414,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["quiz","quiz-component","solid-js-framework","solid-start","solidjs","solidjs-library"],"created_at":"2024-08-01T07:01:10.479Z","updated_at":"2025-04-12T21:32:42.943Z","avatar_url":"https://github.com/doldsimo.png","language":"JavaScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Form"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/solid-quiz\"\u003e\n    \u003cimg\n      alt=\"Solid quiz - Simple quiz component for solidjs and solid-start.\"\n      src=\"https://raw.githubusercontent.com/doldsimo/solid-quiz/master/docs/imges/solid-quiz-title-preview.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/doldsimo/solid-quiz\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/GitHub-Repository-black?logo=github\" alt=\"GitHub Repo\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/solid-quiz\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/solid-quiz.svg?logo=npm\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License: MIT\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- Quiz library build for [solidjs](https://www.solidjs.com/) and [solid-start](https://start.solidjs.com/getting-started/what-is-solidstart).\n- Example apps which uses solid quiz:\n  -  [solidjs](https://github.com/doldsimo/solidjs-quiz)\n  -  [solid-start](https://github.com/doldsimo/solid-start-quiz-app)\n- Allows you to add a simple quiz in solidjs. You can [create the content](#how-do-i-create-my-own-quizzes) by yourselve and use it in the quiz.\n\n\n## Live demo\n\u003e Try it out in the [live demo](https://doldsimo.github.io/solidjs-quiz/quiz).\n\n![solid drag and drop preview](https://github.com/doldsimo/solid-quiz/blob/master/docs/imges/quiz-video.gif?raw=true)\n\n## Installation\n```sh\nnpm i solid-quiz\n```\nor:\n```sh\npnpm install solid-quiz\n```\n\n## Importing\n```jsx\nimport Quiz from \"solid-quiz\";\n```\n\n## Usage\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json'; //your own quiz data in json format\n ...\n\u003cQuiz quiz={quiz}/\u003e\n```\n\n## How do I create my own quizzes?\n\nYou can use the [simple quiz editor](https://doldsimo.github.io/solidjs-quiz/editor) or write the json quiz by hand in the correct format.\n\nThe correct json format is given in the following:\n\u003e In this quiz is for every question type (multiplechoice, singlechoice, correctorder, numberinput, gaptext) an example given.\n\n```jsx\nconst quiz = {\n  \"questions\": [\n    {\n      \"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.\",\n      \"questionType\": \"gaptext\",\n      \"correctAnswer\": [\n        \"JavaScript\",\n        \"applications\",\n        \"re-render\",\n        \"JSX-like\",\n        \"performance\"\n      ],\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"Who invented solidjs?\",\n      \"questionType\": \"singlechoice\",\n      \"answers\": [\n        \"Ryan Carniato\",\n        \"Linus Torvalds\"\n      ],\n      \"correctAnswer\": \"0\",\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"How many GitHub stars does the Solidjs repository have? (04/25/2023)\",\n      \"questionType\": \"numberinput\",\n      \"correctAnswer\": \"27000\",\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"Who invented solidjs?\",\n      \"questionType\": \"singlechoice\",\n      \"answers\": [\n        \"Ryan Carniato\",\n        \"Linus Torvalds\"\n      ],\n      \"correctAnswer\": \"0\",\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"Arrange the different frontend frameworks in descending order of their Github Stars.\",\n      \"questionType\": \"correctorder\",\n      \"answers\": [\n        \"Solid\",\n        \"Angular\",\n        \"Vue\",\n        \"React\",\n        \"Svelte\"\n      ],\n      \"correctAnswer\": [\n        \"React\",\n        \"Vue\",\n        \"Angular\",\n        \"Svelte\",\n        \"Solid\"\n      ],\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"What are new JSX components that solidjs has out of the box compared to React?\",\n      \"questionType\": \"multiplechoice\",\n      \"answers\": [\n        \"For\",\n        \"Index\",\n        \"All\",\n        \"Switch\",\n        \"Match\"\n      ],\n      \"correctAnswer\": [\n        true,\n        true,\n        false,\n        true,\n        true\n      ],\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"When was the first commit in the Solidjs repostory?\",\n      \"questionType\": \"singlechoice\",\n      \"answers\": [\n        \"2020\",\n        \"2016\"\n      ],\n      \"correctAnswer\": \"1\",\n      \"point\": \"10\"\n    }\n  ]\n}\n```\n\n## Functions\n\n- JSON based input\n- styled Quiz\n- optimized for mobile and large screens\n- dark/light mode\n- quiz progress bar\n- random question order\n- Different question types (multiplechoice, singlechoice, correctorder, numberinput, gaptext)\n- Event after quiz finished\n- Points evaluation (extensive, only points, no evaluation\n- allow back jump to questions\n- show quiz points to user\n\n## Props\n\n| **Prop Name**   | **Type** | **Required** | **Description**                                                                                       |\n|-----------------|----------|--------------|-------------------------------------------------------------------------------------------------------|\n| quiz            | `Object` | Yes          | JSON Object for quiz data                                                                             |\n| quizStartButton | `String` | No           | String for showing text on start button on start page, default text is \"Start Quiz\"                                                           |\n| config          | `Object`  |No           | JSON Object for config (color, theme darkmode/lightmode)                                              |\n| allowBackJump   | `Boolean` | No           | allow backjumping to previous questions                                                               |\n| showProgressBar | `Boolean` | No           | can be enabled to show a quiz progress bar                                                            |\n| showQuizPoints  | `Boolean` | No           | can be enabled to show inside the quiz the max. points for every question                             |\n| resultType      | `String`  | No           | decide how the result is displayed there are these options: (\"none\" \\| \"points\" \\| \"feedback\")        |\n| onComplete      | `func`    | No           | Function which is executed after quiz is completed event e can be used with informations about result |\n\n## Functionality examples\n\u003e Examples how the probs above can be used inside the quiz. Of course all probs can be combined\n\n### Start button with your own text\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n ...\n\u003cQuiz quiz={quiz} quizStartButton=\"Start solidjs quiz\"/\u003e\n```\n\n### With own visual config (for quiz in dark or lightmode) \n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\nconst config = {\n  initialColorMode: \"light\", // \"dark\" | \"light\" | \"system\"\n  ...\n}\n ...\n\u003cQuiz quiz={quiz} config={config}/\u003e\n```\n\n### Allow backjumping to previus questions\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n ...\n\u003cQuiz quiz={quiz} allowBackJump/\u003e\n```\n\n### Show progress bar\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n ...\n\u003cQuiz quiz={quiz} showProgressBar/\u003e\n```\n\n### Show quiz points for every question inside the quiz\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n ...\n\u003cQuiz quiz={quiz} showQuizPoints/\u003e\n```\n\n### Show the results after the quiz is finished\n\n\u003e There are three different result tyles: \"none\" \\| \"points\" \\| \"feedback\"\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n ...\n\u003cQuiz quiz={quiz} resultType=\"points\"/\u003e\n```\n\n### Callback function which is triggered after the quiz is finised\n\n\u003e This function can be used trigger everything you want to do after the quiz is finised.\n```jsx\nimport Quiz from \"solid-quiz\";\nimport { quiz } from './quiz.json';\n\nconst resultFunction = (e) =\u003e {\n  console.log(e); //Event with quiz results\n  // Do what ever you want\n}\n ...\n\u003cQuiz quiz={quiz} onComplete={resultFunction}/\u003e\n```\n\n## Need Help?\n\nIf you have a problem with the library, [create a new issue](https://github.com/doldsimo/solid-quiz/issues/new).\n\n## License\n\nThis project is released under the [MIT license](https://github.com/doldsimo/solid-quiz/blob/master/LICENSE).\n\n## Github and NPM\n- [![GitHub Repo](https://img.shields.io/badge/GitHub-solid--quiz-black?logo=github)](https://github.com/doldsimo/solid-quiz)\n- [![npm](https://img.shields.io/npm/v/solid-quiz.svg?logo=npm)](https://www.npmjs.com/package/solid-quiz)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoldsimo%2Fsolid-quiz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoldsimo%2Fsolid-quiz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoldsimo%2Fsolid-quiz/lists"}