result-card

v0.0.3

v0.0.2

v0.0.1

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

N/A

1 contributor

Install result-card as a package?

Copied

npm i @bit/clui.nui-ui.ui.challenge.result-card

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

Description

This component is used to show challenge result in a challenge module.

yarn add @bit/clui.nui-ui.ui.challenge.result-card

import ResultCard from '@bit/clui.nui-ui.ui.challenge.result-card';

Below are the props defined for this component:

Name	Type	Default	Description
questions*	ChallengeQuestion[]	-	-
result*	ChallengeResult	-	-
failText	string	-	-
passText	string	-	-
buttonContainer	React.ReactElement	-	-
onClickResultItem	(questionId: number, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	-	-

Name	Type	Default	Description
id*	number	-	-
variant*	“DEFAULT” \| “SPOT” \| “PIN”	-	-
pickMany	boolean	-	-
isAttempted	boolean	-	-
html	string	-	-
hint	string	-	-
buttonLabel	string	-	-
imgURL	string	-	-
imgAlt	string	-	-
answers	ChallengeAnswer[]	-	-
questionData	{ [key: string]: string \| number }	-	-

Name	Type	Default	Description
id*	number	-	-
html	string	-	-
x	number	-	-
y	number	-	-
data	string	-	-

Name	Type	Default	Description
questions*	ChallengeQuestionResult[]	-	-
isPass*	boolean	-	-
passNum*	number	-	-
requiredToPass*	number	-	-

Name	Type	Default	Description
id*	number	-	-
feedback	string	-	-
hint	string	-	-
isCorrect*	boolean	-	-

Properties