@testgorilla/tgo-immersive-test

Immersive Test component for TestGorilla assessments.

Installation

npm install @testgorilla/tgo-immersive-test

Usage

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

@Component({
  imports: [ImmersiveTestComponent],
  template: `
    <tgo-immersive-test
      [question]="question"
      [test]="test"
      [isFirstQuestion]="false"
      [expirationObservable]="expirationObservable"
      [selectedMediaDevices]="selectedMediaDevices"
      [mediaAccessChanged]="mediaAccessChanged"
      (submissionStateChanged)="onSubmissionStateChanged($event)"
      (loadingStateChanged)="onLoadingStateChanged($event)"
      (requestMediaAccess)="onRequestMediaAccess()"
    ></tgo-immersive-test>
  `,
})
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:

{
  "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:

{
  "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

Inputs

| 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<void> | No | - | Observable to trigger test expiration externally | | selectedMediaDevices | SelectedMediaDevices | No | - | Selected audio/video device IDs | | mediaAccessChanged | Observable<SelectedMediaDevices> | No | - | Observable for media device changes |

Outputs

| Name | Type | Description | | ---------------------- | ---------------------------------------- | ----------------------------------------------- | | submissionStateChanged | EventEmitter<ISubmissionState | null> | Emits submission state when answer is submitted | | loadingStateChanged | EventEmitter<boolean> | Emits loading state changes | | requestMediaAccess | EventEmitter<void> | 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