Immersive Test component
npm install @testgorilla/tgo-immersive-testImmersive Test component for TestGorilla assessments.
``bash`
npm install @testgorilla/tgo-immersive-test
`typescript
import { ImmersiveTestComponent } from '@testgorilla/tgo-immersive-test';
@Component({
imports: [ImmersiveTestComponent],
template:
[test]="test"
[isFirstQuestion]="false"
[expirationObservable]="expirationObservable"
[selectedMediaDevices]="selectedMediaDevices"
[mediaAccessChanged]="mediaAccessChanged"
(submissionStateChanged)="onSubmissionStateChanged($event)"
(loadingStateChanged)="onLoadingStateChanged($event)"
(requestMediaAccess)="onRequestMediaAccess()"
>
,`
})
export class MyComponent {}
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.
| 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\
| selectedMediaDevices | SelectedMediaDevices | No | - | Selected audio/video device IDs |
| mediaAccessChanged | Observable\
| Name | Type | Description |
| ---------------------- | ---------------------------------------- | ----------------------------------------------- |
| submissionStateChanged | EventEmitter\
| loadingStateChanged | EventEmitter\
| requestMediaAccess | EventEmitter\
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.10ngx-quill
- ^26.0.10 (for rich text display in review instructions)rxjs
- ~7.8.1
All required services, models, and components are included within this library:
- MediaService - Handles audio/video recording and playbackThemeService
- - Provides theme/company color configurationQuestion
- , TestResultRead, SelectedMediaDevices, ISubmissionState - Type definitionsAudioAnimationComponent
- , RingingPhoneAnimationComponent, VideoCountdownComponent, VimeoVideoComponent - UI componentsReviewInstructionsDialogComponent
- - Dialog component for review instructionsTranslocoLazyModuleUtils
- , getAvailableLangs` - Translation utilities
- Audio and video question playback
- Candidate video recording
- Audio answer recording
- Media device selection
- Translation support via Transloco
- Review instructions dialog
- Preview mode support