Installation

​🏷
 System requirements
The following are prerequisites to use question set editor 
Softwares / Frameworks
Version
Node
10x to 12x
Angular
9.1.12
​💠
 QuML player library for Sunbird platform
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.
​📑
 Getting Started
For getting started with a new Angular app, check out the Angular CLI.
For existing apps, follow the below-mentioned steps:
​🏷
 Step 1: Install the packages
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​
​🏷
 Step 2: Add CSS
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.
​styles.css​
​quml-carousel.css​
​🏷
 Step 3: Add question-cursor-implementation.service
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 HTTP
For 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​
​🏷
 Step 4: Include the styles, scripts, and assets in angular.json
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"
      ]
    }
  }
  ...
  ...
},
​🏷
 Step 5: Import the modules and components
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 { }
​🏷
 Step 6: Send input to render Quml player
Users can get a response from the api/questionset/v1/hierarchy/:do_id or can use the provided mock config for demo
Use 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>
​🟠
 Available components
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
​🔻
 Input Parameters
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
}
​🔻
 Output Events
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
​
Use as web components 🌏
​
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:
Insert library as below:
<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.
Get sample playerConfig from here: playerConfig​
Pass the QuestionListAPI baseUrl for eg. https://staging.sunbirded.org/api/question/v1/list​
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 telemetryEvent
qumlPlayerElement.addEventListener('playerEvent', (event) => {
  console.log("On playerEvent", event);
});
qumlPlayerElement.addEventListener('telemetryEvent', (event) => {
  console.log("On telemetryEvent", event);
});
Append this element to existing element
const myPlayer = document.getElementById("my-player");
myPlayer.appendChild(qumlPlayerElement);
​▶
 Refer demo example​
​
​📑
 QuML Player Contribution Guide
Repo Setup
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 in projects/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 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

Softwares / Frameworks	Version
Node	10x to 12x
Angular	9.1.12

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

Last modified 11mo ago

Installation

​🏷 System requirements

​💠 QuML player library for Sunbird platform

​📑 Getting Started

​🏷 Step 1: Install the packages

​🏷 Step 2: Add CSS

​🏷 Step 3: Add question-cursor-implementation.service

​🏷 Step 4: Include the styles, scripts, and assets in angular.json

​🏷 Step 5: Import the modules and components

​🏷 Step 6: Send input to render Quml player

​🟠 Available components

​🔻 Input Parameters

​🔻 Output Events

Use as web components 🌏​

​📑 QuML Player Contribution Guide

Repo Setup

🏷
System requirements

💠
QuML player library for Sunbird platform

📑
Getting Started

🏷
Step 1: Install the packages

🏷
Step 2: Add CSS

🏷
Step 3: Add question-cursor-implementation.service

🏷
Step 4: Include the styles, scripts, and assets in angular.json

🏷
Step 5: Import the modules and components

🏷
Step 6: Send input to render Quml player

🟠
Available components

🔻
Input Parameters

🔻
Output Events

Use as web components
🌏

📑
QuML Player Contribution Guide