@testgorilla/tgo-typing-test

@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.