@testgorilla/tgo-immersive-test

Immersive Test component for TestGorilla assessments.

Installation

``bash
npm install @testgorilla/tgo-immersive-test
`

Usage

`typescript
import { ImmersiveTestComponent } from '@testgorilla/tgo-immersive-test';

@Component({
imports: [ImmersiveTestComponent],
template:
[question]="question"
[test]="test"
[isFirstQuestion]="false"
[expirationObservable]="expirationObservable"
[selectedMediaDevices]="selectedMediaDevices"
[mediaAccessChanged]="mediaAccessChanged"
(submissionStateChanged)="onSubmissionStateChanged($event)"
(loadingStateChanged)="onLoadingStateChanged($event)"
(requestMediaAccess)="onRequestMediaAccess()"
>
,
})
export class MyComponent {}
`

Assets (translations)

This package ships its translations under assets/i18n. Consumer apps must copy these assets into their build output so Transloco can load them at runtime.

- Angular CLI / Nx: add an assets entry pointing at the package:

`json
{
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "*/",
"input": "node_modules/@testgorilla/tgo-immersive-test/assets",
"output": "assets/tgo-immersive-test"
}
]
}
`

If you develop inside this repo (consuming the workspace sources), also include the local path:

`json
{
"glob": "*/",
"input": "packages/tgo-immersive-test/src/assets",
"output": "assets/tgo-immersive-test"
}
`

After adding the asset entries, rebuild/re-serve your app so /assets/tgo-immersive-test/i18n/en.json is available.

API

$3

| Name | Type | Required | Default | Description |
| -------------------- | ---------------------------------- | -------- | ------- | ------------------------------------------------ |
| question | Question | Yes | - | Question data containing text/media content |
| test | TestResultRead | Yes | - | Test configuration and metadata |
| isFirstQuestion | boolean | No | false | Whether this is the first question in the test |
| expirationObservable | Observable\ | No | - | Observable to trigger test expiration externally |
| selectedMediaDevices | SelectedMediaDevices | No | - | Selected audio/video device IDs |
| mediaAccessChanged | Observable\ | No | - | Observable for media device changes |

$3

| Name | Type | Description |
| ---------------------- | ---------------------------------------- | ----------------------------------------------- |
| submissionStateChanged | EventEmitter\ | Emits submission state when answer is submitted |
| loadingStateChanged | EventEmitter\ | Emits loading state changes |
| requestMediaAccess | EventEmitter\ | Emits when media access permission is needed |

Peer Dependencies

This library requires the following peer dependencies:

- @angular/common ~18.2.13
- @angular/core ~18.2.13
- @angular/animations ~18.2.13
- @angular/material ~18.2.14 (for dialog support)
- @ngneat/transloco ~4.3.0
- @testgorilla/tgo-ui ~3.14.10
- ngx-quill ^26.0.10 (for rich text display in review instructions)
- rxjs ~7.8.1

Internal Dependencies

All required services, models, and components are included within this library:

- MediaService - Handles audio/video recording and playback
- ThemeService - Provides theme/company color configuration
- Question, TestResultRead, SelectedMediaDevices, ISubmissionState - Type definitions
- AudioAnimationComponent, RingingPhoneAnimationComponent, VideoCountdownComponent, VimeoVideoComponent - UI components
- ReviewInstructionsDialogComponent - Dialog component for review instructions
- TranslocoLazyModuleUtils, getAvailableLangs` - Translation utilities

Features

- Audio and video question playback
- Candidate video recording
- Audio answer recording
- Media device selection
- Translation support via Transloco
- Review instructions dialog
- Preview mode support