Installation
Last updated
Was this helpful?
Last updated
Was this helpful?
The following are prerequisites to using the QuML player
Angular
15.2.3
The QuML player library components are powered by Angular. This player is primarily designed to be used on Sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability and maintainability, hence reducing the redundant development effort significantly, and it can be integrated with any platform irrespective of the platforms and the frontend frameworks. It is exported not only as an but also as a aims to make it easy to share, discover, and reuse web components. It creates a framework agnostic way of composing and repurposing code.
The QuML player can be integrated as a web component and also as an angular library in angular application projects and it can also be integrated into any mobile framework as a web component.
QuML Library can also be used as a web component which means if your project does not use a JavaScript framework but prefers platform-based HTML, CSS, and JavaScript, you may wish to use QuML Library in this way. Simply follow the below-mentioned steps to use it in plain JavaScript project:
Insert as below:
Create an asset folder and copy all the files from , the library requires these assets internally to work well.
Create a custom HTML element: sunbird-quml-player
Get sample playerConfig from here: and pass data using player-config
Note: Attribute should be in string type
Pass the Question List API baseUrl for, e.g.
Listen for the output events: playerEvent
and telemetryEvent
Append this element to the existing element
▶️ Refer demo
Run command
Add these entries in an angular JSON file inside assets, scripts, and styles like below
Import CUSTOM_ELEMENTS_SCHEMA in the app module and add it to the NgModule as part of schemas like below
Integrating sunbird-quml-player web component in the angular component
Create a viewChild in HTML template of the angular component like
Refer to the viewChild
in the ts file of the component and create the QuML player using the document.createElement
, then attach the player config and listen to the player and telemetry events like below and since we are rendering using viewChild
these steps should be under the ngAfterViewInit
hook of the angular component.
Pass the Question List API baseUrl for, e.g.
You're done! Sunbird QuML Player is now ready to play in your application. Use the following CLI command to run your application locally
For existing apps, follow the below-mentioned steps:
Just run the following:
It will install sunbird-quml-player for the default application specified in your angular.json
. If you have multiple projects, and you want to target a specific application, you could specify the --project
option
If you prefer not to use schematics or want to add sunbird-quml-player
to an older project, you'll need to do the following:
Users can get a response from the api/questionset/v1/hierarchy/:do_id
or can use the provided mock config for the demo
QuML Player
Can be used to render QuML
quml-main-player
<quml-main-player [playerConfig]="playerConfig"><quml-main-player>
playerConfig
playerEvent, telemetryEvent
playerConfig: Object - [Required
]
Note: context is optional, which is used for capturing the telemetry event. If context is not passed in playerConfig telemetry event of player will not be captured.
playerEvent() - It provides heartbeat event for each action performed in the player.
telemetryEvent() - It provides the sequence of telemetry events such as START, INTERACT, IMPRESSION, SUMMARY, END
You are done! Use the following CLI command to run your application locally
Install Node 14.20.x and Angular 15
Add the baseUrl in the environment.ts and proxy.conf.json files
If there are any changes in API endpoints, update the app.constant.ts file
Change the default content ID in the app.component.ts
file if pointing to different baseUrl
Run npm i
in root folder
Run npm i
in projects/quml-library
Open two terminal windows (on the root folder)
Run npm run build
once this run completes, run the next command - let it be running on 1st terminal window
Run npm run serve
on the second terminal window (This will copy assets from the quml-library
to the library dist folder)
Now it will be served on http://localhost:4200/
To run the web-component npm run build-web-component
Note:: Click to see the mock - and send the input config as a string
To see your application in the browser, Go to .
For help in getting started with a new Angular app, check out the . If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add sunbird-quml-player library to it.
Schematics will create question-cursor-implementation.service.ts
. Please update the listUrl
in it. For more information refer and do not forget to add your question list API URL here, for example
Note: As QuML library is build with angular version 15, we are using bootstrap@^4.6.2 and ngx-bootstrap@^10.0.0 which are the compatible versions. For more reference Check compatibility document for ng-bootstrap
For more information refer and do not forget to add your question list API URL here, for example: listUrl = "";
Note: To avoid CORS errors, add proxy configuration for API's refer -
Use the mock config in your component to send input to the QuML player as playerConfig
Click to see the mock -
Here is the detailed description of playerConfig:
To see your application in the browser, go to .
Clone the Repo with desired release branch -