-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MCQ component added and wrote stories for that
- Loading branch information
1 parent
29b2c7b
commit ded7627
Showing
4 changed files
with
72 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import {Props,Options} from "./mcq.types" | ||
|
||
const optionsArray:Array<Options>=[ | ||
{value:1,labelText:"Classes and IDs both are reusable"}, | ||
{value:2,labelText:"Classes are unique and IDs are reusable"}, | ||
{value:1,labelText:"IDs are unique and Classes are reusable"}, | ||
{value:1,labelText:"Both classes and IDs are reusable"}, | ||
|
||
] | ||
const data:Props = { | ||
question:"What is the difference between class and id in css", | ||
description:"Classes and IDs in are something we have learned in unit-2", | ||
required: true, | ||
options:optionsArray, | ||
currect_option:3, | ||
orientation:"horizontal", | ||
} | ||
export default data; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import MCQ from "./mcq"; | ||
import data from "./data"; | ||
export default { | ||
title: "MCQ", | ||
}; | ||
|
||
export const Horizontal = () => ( | ||
<MCQ | ||
question={data.question} | ||
description={data.description} | ||
required={data.required} | ||
options={data.options} | ||
currect_option={data.currect_option} | ||
orientation={data.orientation} | ||
/> | ||
); | ||
|
||
export const Vertical = () => ( | ||
<MCQ | ||
question={data.question} | ||
description={data.description} | ||
required={data.required} | ||
options={data.options} | ||
currect_option={data.currect_option} | ||
orientation={"vertical"} | ||
/> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { RadioGroup, Radio } from "@mantine/core"; | ||
import React from "react"; | ||
import { Props } from "./mcq.types"; | ||
|
||
export default function MCQ(props: Props) { | ||
const { question, description, required, options , orientation } = props; | ||
return ( | ||
<RadioGroup label={question} orientation={orientation} description={description} required={required}> | ||
{options.map((option) => ( | ||
<Radio value={option.value.toString()} label={option.labelText}></Radio> | ||
))} | ||
</RadioGroup> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export type Props = { | ||
question: string; | ||
description: string; | ||
options:Array<Options>; | ||
required: boolean; | ||
currect_option:number, | ||
orientation:"horizontal" | "vertical", | ||
} | ||
|
||
export type Options = { | ||
value: number; | ||
labelText: string; | ||
} |