packages/ecl/components/ecl-quiz/ecl-quiz.component.ts
ECL Quiz component – renders a carousel of quiz cards with navigation. Supports two variants: 'reveal' (flip cards) and 'poll' (multiple choice).
Uses Embla Carousel (via embla-carousel-angular) to match the ECL vanilla implementation which also uses Embla internally.
AfterContentInit
AfterViewInit
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | div[eclQuiz] |
| imports |
TranslateModule
EclIconComponent
EmblaCarouselDirective
|
| templateUrl | ./ecl-quiz.component.html |
Properties |
Methods |
Inputs |
HostBindings |
HostListeners |
Accessors |
| eclDescription |
Type : string
|
Default value : ''
|
|
Description displayed below the title. |
| eclTitle |
Type : string
|
Default value : ''
|
|
Title displayed in the quiz header. |
| variant |
Type : "poll" | "reveal"
|
Default value : 'reveal'
|
|
Quiz variant: 'reveal' for flip cards, 'poll' for multiple choice. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| class |
Type : string
|
| keydown |
Arguments : '$event'
|
keydown(event: KeyboardEvent)
|
|
Handle keyboard events. |
| checkHeight |
checkHeight()
|
|
Equalizes the height of all cards based on the tallest content.
Mirrors the ECL vanilla
Returns :
void
|
| getCardsCount |
getCardsCount()
|
|
Returns the total number of cards.
Returns :
number
|
| getDotIndices |
getDotIndices()
|
|
Returns an array of indices for dot rendering.
Returns :
number[]
|
| goTo | ||||||
goTo(index: number)
|
||||||
|
Navigate to a specific snap index.
Parameters :
Returns :
void
|
| onEmblaChange | ||||||
onEmblaChange(eventName: string)
|
||||||
|
Called by the emblaChange event from the directive.
Parameters :
Returns :
void
|
| onKeydown | ||||||
onKeydown(event: KeyboardEvent)
|
||||||
Decorators :
@HostListener('keydown', ['$event'])
|
||||||
|
Handle keyboard events.
Parameters :
Returns :
void
|
| onNextClick |
onNextClick()
|
|
Navigate to the next snap.
Returns :
void
|
| onPrevClick |
onPrevClick()
|
|
Navigate to the previous snap.
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| activeIndex |
Type : unknown
|
Default value : signal(0)
|
|
Current snap index. |
| cards |
Type : QueryList<EclQuizCardComponent>
|
Decorators :
@ContentChildren(undefined)
|
| counterText |
Type : unknown
|
Default value : signal('')
|
|
Counter text for mobile display. |
| dotButtons |
Type : QueryList<ElementRef>
|
Decorators :
@ViewChildren('dotButton')
|
| emblaOptions |
Type : object
|
Default value : { loop: false, align: 'start' as const }
|
|
Embla carousel options matching ECL's configuration. |
| emblaRef |
Type : EmblaCarouselDirective
|
Decorators :
@ViewChild(EmblaCarouselDirective)
|
| liveRegionText |
Type : unknown
|
Default value : signal('')
|
|
Live region text for screen readers. |
| nextDisabled |
Type : unknown
|
Default value : signal(true)
|
|
Whether the next button is disabled. |
| prevDisabled |
Type : unknown
|
Default value : signal(true)
|
|
Whether the previous button is disabled. |
| showControls |
Type : unknown
|
Default value : signal(false)
|
|
Whether navigation controls should be shown. |
| subscribeToEvents |
Type : EmblaEventType[]
|
Default value : ['select', 'init', 'reInit']
|
|
Subscribed Embla events. |
| totalSnaps |
Type : unknown
|
Default value : signal(0)
|
|
Total number of snap points. |
| cssClasses |
getcssClasses()
|