AssessmentMakerLibrary

This library provides a comprehensive set of tools and components to create and manage assessments in an Angular application.

Version Compatibility

• Version 12: For Angular 12 to 15 usage.
• Version 16: For Angular 16+ usage.

Dependencies

The library uses Bootstrap styles and requires the following modules to be imported in your application:

• BrowserAnimationsModule
• HttpClientModule
• AssessmentMakerModule

Installation & Configuration

1. Import Module

Import the AssessmentMakerModule in your app.module.ts:

import { AssessmentMakerModule } from 'commons-assessment-maker';

@NgModule({
  imports: [
    AssessmentMakerModule.forRoot({
      baseURL: 'https://dev.platformcommons.org', // Use your backend API base URL
    })
  ]
})

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

"assets": [
  {
    "glob": "**/*",
    "input": "node_modules/commons-assessment-maker/src/lib/assets",
    "output": "assets/commons-assessment-maker"
  },
  {
    "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.

"styles": [
  "src/styles.scss",
  "node_modules/commons-assessment-maker/src/lib/assets/theme/styles.global.scss",
  "node_modules/@kolkov/angular-editor/themes/default.scss"
]

3. 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:

// Import the library's theme mixin
@use "/node_modules/commons-assessment-maker/src/lib/assets/theme/theme.global" as amTheme;
// Import Bootstrap and Material core styles
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "@angular/material/prebuilt-themes/indigo-pink.css";

// Include customized variables into the theme
:root {
    @include amTheme.assessment-maker-theme(
        (
            font-family: "Poppins",
            // You can override library palette by uncommenting and modifying below:
            // primary-one: #2e7d32,
            // primary-four: #1b5e20,
            // palette-EDF3FD: #e8f5e9,
            // grey-one: #fff,
        )
    );
}

Component Usage

To render the assessment maker interface, use the <lib-assessment-maker> component in your template.

Component Example

component.ts:

export class Component {
  // Define default structure or data payload for the assessment
  createAssessmentDTO: Assessment = {
    assessmentCode: 'TEST_ASSESSMENT_CODE',
    domain: 'domain.test',
    assessmentName: [{
      id: 0,
      text: 'test assessment',
      language: {
        code: 'ENG',
      }
    }],
    tenant: 123
  };
}

component.html:

  <!-- Use the component -->
  <lib-assessment-maker 
    [defaultAssessmentDTO]="createAssessmentDTO"
    [assessmentId]="2298"
    [showFooter]="true">
  </lib-assessment-maker>

Inputs and Outputs

Here is the complete list of available generic inputs and outputs of <lib-assessment-maker>:

| Property | Type (@Input / @Output) | Data Type | Description | | --- | --- | --- | --- | | [labelConfig] | @Input | { [key: string]: string } | (Optional) Configuration strings to overwrite internal labels. | | [imageConfig] | @Input | { [key: string]: string } | (Optional) Configuration paths/URLs to overwrite internal icons or images. | | [questionTypes] | @Input | QuestionType[] | (Optional) Restrict or customize the array of available question types. | | [showFooter] | @Input | boolean | (Optional) Toggles visibility of the assessment component footer actions. | | [customRules] | @Input | any | (Optional) Pass your custom question builder rules overrides. | | [assessmentId] | @Input | number | Provide the ID of an existing assessment to edit or attach questions to. Default is 0. | | [assessmentInstanceId] | @Input | number | Current assessment instance identifier, if the assessment is already published. Default is 0. | | [defaultAssessmentDTO] | @Input | Assessment | The default contextual configuration object for creating new assessments. | | (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. |

Development Commands

• Run ng run commons-assessment-maker:build to build the library project. The build artifacts will be stored in the dist/ directory.
• Run ng test commons-assessment-maker to execute the unit tests via Karma.