commons-assessment 12.0.32 → 12.0.34

package/README.md

@@ -15,57 +15,76 @@ The library uses Bootstrap styles and requires the following modules to be impor
 - `AssessmentMakerModule` (If creating assessments)
 - `AssessmentTakerModule` (If rendering assessments)
 
+**Proctoring (optional):** if you use the proctoring feature, install the `@proctorlink/sdk` peer dependency (`npm install @proctorlink/sdk`) — it is loaded on demand only when a proctored session starts. Also allow the proctoring enclave in your app's `Content-Security-Policy`: `frame-src https://app-dev.proctorlink.com;`.
+
 ## Installation & Configuration
 
 ### 1. Import Modules
 
-Import the appropriate modules in your `app.module.ts`. You must configure `CommonsAssessmentModule` with `forRoot()` to provide the backend base URL.
+Import the `CommonsAssessmentModule.forRoot()` in your root `app.module.ts` once to register the singleton service providers. Other modules can then import the specific feature modules as needed:
 
 ```typescript
 import { CommonsAssessmentModule, AssessmentMakerModule, AssessmentTakerModule } from 'commons-assessment';
 
 @NgModule({
   imports: [
-    CommonsAssessmentModule.forRoot({
-      baseURL: 'https://dev.platformcommons.org', // Use your backend API base URL
-    }),
+    CommonsAssessmentModule.forRoot(), // Import once in root app.module
     AssessmentMakerModule,
     AssessmentTakerModule
   ]
 })
 ```
 
-### 2. Configure `angular.json`
+### 2. Configure HTTP Interceptor (Decoupled base URL)
+
+Since the library uses relative paths, you must configure an HTTP Interceptor in your application to detect library API requests (which carry the `X-Library-Source: commons-assessment` header), prepend your backend API base URL, and strip the header before forwarding the request.
+
+```typescript
+import { Injectable } from '@angular/core';
+import { HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+
+@Injectable()
+export class ApiInterceptor implements HttpInterceptor {
+  intercept(req: HttpRequest<any>, next: HttpHandler) {
+    let headers = req.headers;
+    let url = req.url;
+
+    if (headers.has('X-Library-Source')) {
+      headers = headers.delete('X-Library-Source');
+      url = 'https://your-api-domain.org' + url; // Prepend your backend base URL
+    }
+
+    req = req.clone({ url, headers });
+    return next.handle(req);
+  }
+}
+```
+
+### 3. Configure `angular.json`
 
 Add the necessary assets and global styles in your `angular.json` file inside the `architect.build.options` block.
 
 **Assets:**
-Add the library assets and angular-editor icons to the `assets` array.
+Add the library assets to the `assets` array.
 ```json
 "assets": [
   {
     "glob": "**/*",
     "input": "node_modules/commons-assessment/src/lib/assets",
     "output": "assets/commons-assessment"
-  },
-  {
-    "glob": "**/*",
-    "input": "node_modules/@kolkov/angular-editor/assets/icons",
-    "output": "assets/ae-icons/"
   }
 ]
 ```
 
 **Styles:**
-Include the library's global styles and third-party dependencies in the `styles` array.
+Include the library's global styles in the `styles` array.
 ```json
 "styles": [
-  "src/styles.scss",
-  "node_modules/@kolkov/angular-editor/themes/default.scss"
+  "src/styles.scss"
 ]
 ```
 
-### 3. Theming Setup (`styles.scss`)
+### 4. Theming Setup (`styles.scss`)
 
 The library provides a mixin to easily customize the theme, including fonts and color variables. Set this up in your application's global `styles.scss`:
 
@@ -142,10 +161,14 @@ export class Component {
 | `[predefinedAssessmentInstance]` | `@Input` | `AssessmentInstance` | The default contextual configuration object for creating new assessment instances. |
 | `[minimumRequiredSections]` | `@Input` | `number` | Minimum number of sections needed before assessment can be published. Default is 0. |
 | `[assessmentContext]` | `@Input` | `AssessmentContext` | (Optional) Pre-loaded assessment context data to bypass the initial data load API call. |
+| `[checkForResponses]` | `@Input` | `boolean` | If true, show a warning on deletion of sections and questions if any responses are linked to them. Default is false. |
+| `[showProctoringToggle]` | `@Input` | `boolean` | (Optional) If true, shows a toggle to enable/disable proctoring. Default is false. Works only when partial response submission is allowed. |
 | `(assessmentIdChange)` | `@Output` | `EventEmitter<number>` | Emits the new `assessmentId` when an assessment is successfully created. |
 | `(assessmentInstanceIdChange)` | `@Output` | `EventEmitter<number>` | Emits the new instance ID integer when an assessment is published. |
 | `(snackbarMessage)` | `@Output` | `EventEmitter<{ message: string, type: 'success' \| 'error' \| 'info' }>` | Emits message status updates representing errors and workflow successes from the service. |
 
+> **Assessment configuration (e.g. allowing partial responses):** behavioral flags such as allowing partial responses are set via `assessmentConfigs` on the assessment DTO. See [Assessment Configuration](../../documentation/assessment-maker.md#assessment-configuration-assessmentconfigs) in the maker documentation for the available config keys and examples.
+
 ### Assessment Taker
 
 To render the assessment taker interface, use the `<lib-assessment-taker>` component in your template.
@@ -194,6 +217,8 @@ To render the assessment taker interface, use the `<lib-assessment-taker>` compo
 | `[showCorrectAnswers]` | `@Input` | `boolean` | (Optional) Shows correct and incorrect answers for objective and multiselect type questions. Default is false. |
 | `[enableSkillsToQuestionMapping]` | `@Input` | `boolean` | (Optional) Enables ability to map skills to questions. Default is false. |
 | `(stepChanged)` | `@Output` | `EventEmitter<{ currentStepIndex: number, totalSteps: number, isLastStep: boolean }>` | Emits initially and on every step change. Provides the current step index, total steps, and indicating boolean. |
+| `(proctoringConsent)` | `@Output` | `EventEmitter<boolean>` | When the assessment is proctored, a mandatory, non-dismissable consent dialog is shown before the session starts. On consent the button shows a loader while the proctoring session is created/refreshed and the dialog stays open until the API responds. Emits `true` once the candidate consents and the session begins. |
+| `(proctoringSession)` | `@Output` | `EventEmitter<ProctoringSession>` | Emits the proctoring session issued on consent. |
 | `(submitAssessment)` | `@Output` | `EventEmitter<{ assesseeId: number, completed: boolean }>` | Emits when the assessment is submitted, containing the `assesseeId` and a `completed` flag indicating if the taker finished the entire assessment. |
 | `(snackbarMessage)` | `@Output` | `EventEmitter<{ message: string, type: 'success' \| 'error' \| 'info' }>` | Emits message status updates representing errors and workflow successes from the service. |