@testgorilla/tgo-typing-test

Typing Test component for TestGorilla assessments.

Installation

npm install @testgorilla/tgo-typing-test

Usage

import { TgoTypingTestComponent } from '@testgorilla/tgo-typing-test';

@Component({
  imports: [TgoTypingTestComponent],
  template: `
    <tgo-typing-test
      [time]="time!"
      [showMiniTimerAndLiveWpm]="false"
      [punctuation]="_typingTestMode?.punctuation!"
      [numbers]="_typingTestMode?.numbers!"
      [customTGQuotes]="_typingTestMode?.sentences!"
      [funbox]="_typingTestMode?.funbox!"
      [restartTest]="false"
      [testVersion]="(test$ | async)?.test_version ?? 1"
      [testExpiration$]="testExpiration$"
      (replayExport)="updateTypingSnapshots($event)"
      (resultEvent)="updateTypingTest($event)"
      (errorEvent)="handleError($event)"
    >
    </tgo-typing-test>
  `,
})
export class MyComponent {}

API

Inputs

| Name | Type | Required | Default | Description | | ----------------------- | ----------------- | -------- | ------- | ------------------------------------------------ | | time | number | No | 180 | Test duration in seconds | | showMiniTimerAndLiveWpm | boolean | No | true | Show mini timer and live WPM display | | punctuation | boolean | No | false | Include punctuation in test | | numbers | boolean | No | false | Include numbers in test | | customTGQuotes | boolean | No | false | Use custom TestGorilla quotes/sentences | | funbox | string | No | 'none' | Funbox mode for visual effects | | restartTest | boolean | No | false | Trigger to restart the test | | testVersion | number | No | 1 | Test version for sentence variations | | testExpiration$ | Observable<void>| No | - | Observable to trigger test expiration externally |

Outputs

| Name | Type | Description | | ------------ | --------------------- | ---------------------------------------- | | resultEvent | EventEmitter<any> | Emits test results when test completes | | replayExport | EventEmitter<any> | Emits replay data for test playback | | errorEvent | EventEmitter<string>| Emits error messages (e.g., network errors)|

TgoTypingReplayInputComponent

import { TgoTypingReplayInputComponent } from '@testgorilla/tgo-typing-test';

@Component({
  imports: [TgoTypingReplayInputComponent],
  template: `
    <tgo-typing-replay-input
      [replayExport]="replayData"
      [funbox]="funbox"
      class="funbox"
      data-testid="candidate.typing-report.replay-input"
    ></tgo-typing-replay-input>
  `,
})
export class MyComponent {}

API

Inputs

| Name | Type | Required | Default | Description | | ----------- | ------ | -------- | ------- | -------------------------------------------- | | replayExport| any | Yes | - | Replay data exported from TgoTypingTestComponent| | funbox | string | No | 'none' | Funbox mode for visual effects (must match original test)|

Outputs

This component has no outputs. It automatically plays the replay after initialization.