Adding a quiz component

[Gitstar-OC]

I am thinking of adding a quiz component like the one this next js component have below it for various purposes which it can be used especially in docs, forms or surveys .

I will add options to the question and add a particular property of isAnswer={yes} if that one is answer and one of the many option can be selected and if the correct one is selected as a quiz it will be shown a promt of something that the developer wants to show or a more easier one like congratulations and for the generic one the developer could select a more normal one like incorrect option please select another one.

Here's the step by step process in the Shadcn way,

1st step will be that the user will need to import the Quiz, QuizQuestion, QuizOption and one as a QuizAnswer ( in place of creating the isAnswer function for now). Here's an example code block

import {Quiz, QuizQuestion, QuizOptions, QuizOption, QuizAnswer} from  "@/components/ui/quiz" 

function QuizComponent() {
return (
<>
<Quiz>
<QuizQuestion>What is Shadcn UI </QuizQuestion>
<QuizOptions>
<QuizOption> A framework for TypeScript </QuizOption>
<QuizOption> A CSS library <QuizOption> 
<QuizAnswer>  A collection of beautifully designed, accessible, and customizable React components </QuizAnswer> 
<!--
// this will work same as designing a function like isAnswer or Answer i.e. it can be used as 
// <QuizOption isAnswer={yes}> Answer </QuizOption>   OR   <QuizOption answer={yes}> Answer </QuizOption>
--> 
<QuizOption> A Python library </QuizOption>
</QuizOptions>
</Quiz>
</> ) } 

We can also add more options or functions to it as if developer wants to show answer to user on selecting the incorrect option or giving more detail about the answer once a option or answer is selected for example for the we can add more properties

<QuizOption details={"Details about the option if this option is selected"} > Option </QuizOption> 

Here's how we can use it in the above example for more details

function QuizComponent() {

const details = "Incorrect! Shadcn UI is collection of beautifully designed, accessible, and customizable React components" 
// to avoid repetetion

return (
<>
<Quiz>
<QuizQuestion>What is Shadcn UI </QuizQuestion>
<QuizOptions>
<QuizOption details={details} > A framework for TypeScript </QuizOption>
<QuizOption details={details} > A CSS library <QuizOption> 
<QuizAnswer details={"Correct"}>  A collection of beautifully ....</QuizAnswer>  
<QuizOption details={details}> A Python library </QuizOption>
</QuizOptions>
</Quiz>
</> )
}

More things can be added to this component if this works in the future ( if multiple forms and surveys starts using this component ) like adding multiple correct options to it, filling it up with a text field etc. but right now this is all I can think with one addition to it.

There will also be an option to use an image to be shown in the question for more hard problem solving or if the question is related to the image or video, the developer could add it with the help of a special QuizQuestionImage, QuizQuestionVideo or QuizQuestionBanner component. The image or video will be of the users choice.

Note that this component will also include some of the other components like card ( if used ), tooltip and other icons for the questons and option.

Should I build this component as I will also be using this for the documentation of my website ?

[Gitstar-OC]

Any reply or should I submit a pull request directly?

[Cool-boy0]

...

[Gitstar-OC]

?

[Dionnie123]

Just do it dude no one's stopping you. If you can contribute, then contribute.

[Gitstar-OC]

Great, I would like to contribute to it but I think this repository is no longer maintained there are already 681 pull requests.