Installation
The following are prerequisites to use question set editor
Softwares / Frameworks | Version |
---|---|
Node | 10x to 12x |
Angular | 9.1.12 |
The QUML player library components are powered by Angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.
For existing apps, follow the below-mentioned steps:
These are the peerDependencies of the library, that need to be installed in order to use this library.
npm install @project-sunbird/sunbird-quml-player-v9 --save
npm install @project-sunbird/sb-styles --save
npm install @project-sunbird/client-services --save
npm install [email protected] --save
npm install jquery --save
npm install katex --save
npm install lodash-es --save
npm install [email protected] --save
Note: As the QuML library is built with angular version 9, we are using [email protected] and [email protected] which are the compatible versions.
For more reference check the compatibility document for ng-bootstrap here
Copy CSS code from the below given
styles.css
to app's default styles.css
or styles.scss
keep quml-carousel.css
in the root folder.Create a question-cursor-implementation.service.ts in a project that will implement the
QuestionCursor
abstract class.
QuestionCursor
is an abstract class, exported from the library, which needs to be implemented. Basically, it has some methods which should make an API request over HTTPFor more information refer question-cursor-implementation.service.ts and do not forget to add your question list API URL here, for example: https://staging.sunbirded.org/api/question/v1/list
Add the following under
architect.build.assets
for default project{
...
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
...
"assets": [
...
...
{
"glob": "**/*.*",
"input": "./node_modules/@project-sunbird/sunbird-quml-player-v9/lib/assets/",
"output": "/assets/"
}
],
"styles": [
...
"src/styles.css",
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
"./quml-carousel.css",
"./node_modules/katex/dist/katex.min.css"
],
"scripts": [
...
"./node_modules/katex/dist/katex.min.js",
"./node_modules/jquery/dist/jquery.min.js"
]
}
}
...
...
},
Import the required modules such as CarouselModule, QumlLibraryModule, HttpClientModule and question-cursor-implementation.service as below:
import { HttpClientModule } from '@angular/common/http';
import { QumlLibraryModule, QuestionCursor } from '@project-sunbird/sunbird-quml-player-v9';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { QuestionCursorImplementationService } from './question-cursor-implementation.service';
@NgModule({
...
imports: [ QumlLibraryModule, CarouselModule.forRoot(), HttpClientModule ],
providers: [{
provide: QuestionCursor,
useClass: QuestionCursorImplementationService
}]
...
})
export class AppModule { }
Users can get a response from the
api/questionset/v1/hierarchy/:do_id
or can use the provided mock config for demoUse the mock config in your component to send input to Quml player as
playerConfig
Click to see the mock - playerConfig1<quml-main-player [playerConfig]="playerConfig" ><quml-main-player>
Feature | Notes | Selector | Code | Input | Output |
---|---|---|---|---|---|
Quml Player | Can be used to render Quml | quml-main-player | <quml-main-player [playerConfig]="playerConfig"><quml-main-player> | playerConfig | playerEvent, telemetryEvent |
- 1.playerConfig: Object - [
Required
]
{
context: Object // Information about the telemetry and default settings for quml API requests
metadata: Object // Question hierarchy response
config: Object // default player config such as sidebar menu list
}
- 1.playerEvent() - It provides a heartbeat event for each action performed in the player.
- 2.telemetryEvent() - It provides the sequence of telemetry events such as
START, INTERACT, IMPRESSION, SUMMARY, END
The QuML Library can also be used as a web component which means users can import this library in any web application and use these custom components. Follow the below-mentioned steps to use it in plain javascript project:
- <script type="text/javascript" src="sunbird-quml-player.js"></script>
- Create an asset folder and copy all the files from here, the library requires these assets internally to work well.
- Create a custom html element:
sunbird-quml-player
const qumlPlayerElement = document.createElement('sunbird-quml-player'); - Pass data using
player-config
qumlPlayerElement.setAttribute('player-config', JSON.stringify(playerConfig));Note: Attribute should be in string type - Listen for the output events: playerEvent and telemetryEventqumlPlayerElement.addEventListener('playerEvent', (event) => {console.log("On playerEvent", event);});qumlPlayerElement.addEventListener('telemetryEvent', (event) => {console.log("On telemetryEvent", event);});
- Append this element to existing elementconst myPlayer = document.getElementById("my-player");myPlayer.appendChild(qumlPlayerElement);
- Clone the Repo with the desired release branch - https://github.com/project-sunbird/sunbird-quml-player
- Add your questionList API_URL in
/projects/quml-demo-app/src/app/question-cursor-implementation.service.ts
- Run
npm i
in root folder - Run
npm i
inprojects/quml-library
- Open two terminal windows (on root folder)
- Run
npm run mybuild
once this run completes, run the next command - let it be running on 1st terminal window - Run
npm run serve
on second terminal window (This will copy assets from thequml-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
Last modified 11mo ago