Adding a quiz component along with the accordian.

[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,

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 ?

P.S. I wanted to add this in the shadcn component list, but no one there seems interested. I am going to use fumadocs for my website, which will help people learn ML, DL and various AI algorithms. So I think contributing this component might help. Also have other component ideas for the future for this docs.

[Gitstar-OC]

Also @fuma-nama if you read this, I have not read the docs completely because I chose it just after seeing that it supports openAI api integrations, I am also thinking of adding llama as it is open source ( that's for later btw). I have too many images for my docs and I want to know how does FD render images within the MDX, just answer in a dynamic or static way to save your time, If it renders it in a static way, no need to worry as I will use dynamic nextJS, image component to do that. As the docs are going to have more than a thousand images, so the static way would not benifit neither me not the user.

[fuma-nama]

It uses the Next.js Image component

[fuma-nama]

You should just implement the component on your own, this is really not something a docs framework would provide