packages/ecl/components/ecl-quiz/ecl-quiz-card.component.ts
ECL Quiz Card component – represents a single card in the quiz.
For the 'reveal' variant, the entire card is clickable to flip. For the 'poll' variant, individual options trigger the flip.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | div[eclQuizCard] |
| imports |
EclIconComponent
TranslateModule
|
| templateUrl | ./ecl-quiz-card.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
| ariaHidden |
Type : string | null
|
Default value : null
|
| isActive |
Type : boolean
|
Default value : false
|
|
Whether this card is currently active/visible in the slider. |
| answer |
Type : string
|
Default value : ''
|
|
The answer text displayed on the back of the card. Used in 'reveal' variant or as explanation in 'poll' variant. |
| answerTitle |
Type : string
|
Default value : ''
|
|
The answer title (e.g. "The correct answer is A.") for poll variant. |
| category |
Type : string
|
Default value : ''
|
|
Category label displayed in the card header (poll variant). |
| icon |
Type : string
|
Default value : ''
|
|
Icon name for the card header. Defaults to 'sparkle' for reveal, 'question' for poll. |
| iconSize |
Type : "xs" | "s" | "m" | "l" | "xl" | "2xl"
|
Default value : 'xl'
|
|
Icon size for the card header. |
| options |
Type : Array<{ text: string; match: boolean }>
|
Default value : []
|
|
Options for the poll variant. Each option has text and a match flag. |
| question |
Type : string
|
Default value : ''
|
|
The question text displayed on the front of the card. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| cardFlip |
Type : EventEmitter
|
|
Emitted when the card is flipped. |
| attr.aria-pressed |
Type : string | null
|
| attr.aria-roledescription |
Type : string | null
|
Default value : null
|
| attr.role |
Type : string
|
Default value : 'group'
|
| attr.tabindex |
Type : number | null
|
| class |
Type : string
|
| style.tranform |
Type : string
|
Default value : 'translate3d(0px, 0px, 0px)'
|
| click |
click()
|
|
Handle click on the card itself (reveal variant). |
| keydown |
Arguments : '$event'
|
keydown(event: KeyboardEvent)
|
|
Handle keyboard events (Enter/Space to flip for reveal variant). |
| flipCard |
flipCard()
|
|
Flip the card between front and back.
Returns :
void
|
| getAnswerElement |
getAnswerElement()
|
|
Get the native answer element for height calculations.
Returns :
HTMLElement | null
|
| getBackElement |
getBackElement()
|
|
Get the native back element for height calculations.
Returns :
HTMLElement | null
|
| getContentElement |
getContentElement()
|
|
Get the native content element for height calculations.
Returns :
HTMLElement | null
|
| getFrontElement |
getFrontElement()
|
|
Get the native front element for height calculations.
Returns :
HTMLElement | null
|
| getIconName |
getIconName()
|
|
Get the resolved icon name based on variant.
Returns :
string
|
| getIconSize |
getIconSize()
|
|
Get the resolved icon size.
Returns :
string
|
| getQuestionElement |
getQuestionElement()
|
|
Get the native question element for height calculations.
Returns :
HTMLElement | null
|
| onClick |
onClick()
|
Decorators :
@HostListener('click')
|
|
Handle click on the card itself (reveal variant).
Returns :
void
|
| onKeydown | ||||||
onKeydown(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('keydown', ['$event'])
|
||||||
|
Handle keyboard events (Enter/Space to flip for reveal variant).
Parameters :
Returns :
void
|
| onOptionClick | ||||||
onOptionClick(optionIndex: number)
|
||||||
|
Handle option click (poll variant).
Parameters :
Returns :
void
|
| onOptionKeydown | |||||||||
onOptionKeydown(event: KeyboardEvent, optionIndex: number)
|
|||||||||
|
Handle keyboard on option (poll variant).
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| answerElementRef |
Type : ElementRef
|
Decorators :
@ViewChild('answerElement')
|
| ariaRoleDescription |
Type : string | null
|
Default value : null
|
Decorators :
@HostBinding('attr.aria-roledescription')
|
| backElementRef |
Type : ElementRef
|
Decorators :
@ViewChild('backElement')
|
| contentElementRef |
Type : ElementRef
|
Decorators :
@ViewChild('contentElement')
|
| frontElementRef |
Type : ElementRef
|
Decorators :
@ViewChild('frontElement')
|
| isCorrect |
Type : boolean | null
|
Default value : null
|
|
Whether the selected option is correct (poll variant). |
| isFlipped |
Type : unknown
|
Default value : false
|
|
Whether the card is currently flipped (showing back). |
| questionElementRef |
Type : ElementRef
|
Decorators :
@ViewChild('questionElement')
|
| role |
Type : string
|
Default value : 'group'
|
Decorators :
@HostBinding('attr.role')
|
| selectedOptionIndex |
Type : number | null
|
Default value : null
|
|
Index of the selected option (poll variant). |
| styleTransform |
Type : string
|
Default value : 'translate3d(0px, 0px, 0px)'
|
Decorators :
@HostBinding('style.tranform')
|
| variant |
Type : "poll" | "reveal"
|
Default value : 'reveal'
|
|
The variant of the quiz, set by the parent EclQuizComponent. |
| cssClasses |
getcssClasses()
|
| tabIndex |
gettabIndex()
|
| ariaPressed |
getariaPressed()
|