{"_id":"@dicdikshaorg/sunbird-quml-player-v9","_rev":"8-a41a18250dc027ec1dcf6de3ea3c9c97","name":"@dicdikshaorg/sunbird-quml-player-v9","dist-tags":{"latest":"5.0.5"},"versions":{"5.0.4":{"name":"@dicdikshaorg/sunbird-quml-player-v9","version":"5.0.4","keywords":["sunbird","sunbird QuML player","project-sunbird"],"license":"MIT","_id":"@dicdikshaorg/sunbird-quml-player-v9@5.0.4","maintainers":[{"name":"akash.trigyn","email":"akash.jaiswal@trigyn.com"},{"name":"sayalimore1610","email":"sayali.more@trigyn.com"},{"name":"shailendra123","email":"Shailendra.Pratap@trigyn.com"},{"name":"tejaswini19","email":"tejaswini.giram@trigyn.com"},{"name":"yashveer","email":"yashveer.negi@trigyn.com"},{"name":"dictrigyngroup","email":"Diksha.Leads@trigyn.com"}],"homepage":"https://github.com/dicdiksha/sunbird-quml-player/blob/release-4.3.0/README.md","bugs":{"url":"https://github.com/dicdiksha/sunbird-quml-player/issues"},"dist":{"shasum":"18dc2dc12d242323b29a728984fc17ac0c712233","tarball":"https://registry.npmjs.org/@dicdikshaorg/sunbird-quml-player-v9/-/sunbird-quml-player-v9-5.0.4.tgz","fileCount":185,"integrity":"sha512-ElMDb1VXOerDwkt41i2lzNRb7R1PAoCac1Ppzva5L/F6kHwKkHYdI5OsoWbKCUPdL6UeYj7XX2L02nX7Wlvjmg==","signatures":[{"sig":"MEUCIQDQjgWb0R/+LFRFni3zWsNxbwQVFYUOlBP32YjsMKX6OwIgHUc/m0UPIRoTbFUMLDorm0OHrDnifEVXob8Cot+wu6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":616418},"_npmUser":{"name":"sayalimore1610","email":"sayali.more@trigyn.com"},"repository":{"url":"git+https://github.com/dicdiksha/sunbird-quml-player.git","type":"git"},"_npmVersion":"6.14.18","description":"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 develop","directories":{},"_nodeVersion":"14.21.3","dependencies":{"@project-sunbird/sunbird-player-sdk-v9":"4.8.0"},"_hasShrinkwrap":false,"peerDependencies":{"katex":"^0.11.1","lodash-es":"^4.17.21","@angular/core":">=9.0.0","ngx-bootstrap":"^5.3.2","@angular/common":">=9.0.0","@dicdikshaorg/client-services":"4.8.15"},"_npmOperationalInternal":{"tmp":"tmp/sunbird-quml-player-v9_5.0.4_1722427273936_0.938623819083221","host":"s3://npm-registry-packages"}},"5.0.5":{"name":"@dicdikshaorg/sunbird-quml-player-v9","version":"5.0.5","keywords":["sunbird","sunbird QuML player","project-sunbird"],"license":"MIT","_id":"@dicdikshaorg/sunbird-quml-player-v9@5.0.5","maintainers":[{"name":"akash.trigyn","email":"akash.jaiswal@trigyn.com"},{"name":"sayalimore1610","email":"sayali.more@trigyn.com"},{"name":"shailendra123","email":"Shailendra.Pratap@trigyn.com"},{"name":"tejaswini19","email":"tejaswini.giram@trigyn.com"},{"name":"yashveer","email":"yashveer.negi@trigyn.com"},{"name":"dictrigyngroup","email":"Diksha.Leads@trigyn.com"}],"homepage":"https://github.com/dicdiksha/sunbird-quml-player/blob/release-4.3.0/README.md","bugs":{"url":"https://github.com/dicdiksha/sunbird-quml-player/issues"},"dist":{"shasum":"9d85b242427d8de77d4316ae7bbd93e78df88205","tarball":"https://registry.npmjs.org/@dicdikshaorg/sunbird-quml-player-v9/-/sunbird-quml-player-v9-5.0.5.tgz","fileCount":143,"integrity":"sha512-KC/XaHLi/rdw/LeRZMG4IUMeJb2fdzbKagv5lF1PR1GqA76MUuo22hadzll++sosuRsSLFn9WCRE88rWkRNrrg==","signatures":[{"sig":"MEUCIDZ6eb5nNzYdYcwW/BrZQXqQFTfZypGED3iygm5eKj8oAiEAwC/17eo02ITe8YkPog34r6PRjCTBLEF2WyFPfz2t2/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":3981640},"esm5":"esm5/dicdikshaorg-sunbird-quml-player-v9.js","main":"bundles/dicdikshaorg-sunbird-quml-player-v9.umd.js","fesm5":"fesm5/dicdikshaorg-sunbird-quml-player-v9.js","es2015":"fesm2015/dicdikshaorg-sunbird-quml-player-v9.js","module":"fesm5/dicdikshaorg-sunbird-quml-player-v9.js","esm2015":"esm2015/dicdikshaorg-sunbird-quml-player-v9.js","typings":"dicdikshaorg-sunbird-quml-player-v9.d.ts","_npmUser":{"name":"sayalimore1610","email":"sayali.more@trigyn.com"},"fesm2015":"fesm2015/dicdikshaorg-sunbird-quml-player-v9.js","metadata":"dicdikshaorg-sunbird-quml-player-v9.metadata.json","repository":{"url":"git+https://github.com/dicdiksha/sunbird-quml-player.git","type":"git"},"_npmVersion":"6.14.18","description":"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 develop","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"@project-sunbird/sunbird-player-sdk-v9":"4.8.0"},"_hasShrinkwrap":false,"peerDependencies":{"katex":"^0.11.1","lodash-es":"^4.17.21","@angular/core":">=9.0.0","ngx-bootstrap":"^5.3.2","@angular/common":">=9.0.0","@dicdikshaorg/client-services":"4.8.15"},"_npmOperationalInternal":{"tmp":"tmp/sunbird-quml-player-v9_5.0.5_1722430563827_0.8469889238154109","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-07-31T12:01:13.827Z","modified":"2025-04-04T05:07:00.441Z","5.0.4":"2024-07-31T12:01:14.188Z","5.0.5":"2024-07-31T12:56:04.075Z"},"bugs":{"url":"https://github.com/dicdiksha/sunbird-quml-player/issues"},"license":"MIT","homepage":"https://github.com/dicdiksha/sunbird-quml-player/blob/release-4.3.0/README.md","keywords":["sunbird","sunbird QuML player","project-sunbird"],"repository":{"url":"git+https://github.com/dicdiksha/sunbird-quml-player.git","type":"git"},"description":"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 develop","maintainers":[{"email":"satyanarayana.khaja@trigyn.com","name":"satyadiksha"},{"email":"bharath.raj@trigyn.com","name":"bharathrajjv"},{"email":"Diksha.Leads@trigyn.com","name":"dictrigyngroup"},{"email":"yashveer.negi@trigyn.com","name":"yashveer"},{"email":"tejaswini.giram@trigyn.com","name":"tejaswini19"},{"email":"purushotam.kumar@trigyn.com","name":"purushottam_trigyn"},{"email":"Shailendra.Pratap@trigyn.com","name":"shailendra123"},{"email":"sayali.more@trigyn.com","name":"sayalimore1610"},{"email":"baijanti.yadav@trigyn.com","name":"trigynby"},{"email":"bhoopendra.modanwal@trigyn.com","name":"bmodanwal"}],"readme":"# :diamond_shape_with_a_dot_inside: QuML-player library for Sunbird platform\nThe 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.\n\n# :bookmark_tabs: Getting Started\nFor getting started with a new Angular app, check out the [Angular CLI](https://angular.io/tutorial/toh-pt0).\n\nFor existing apps, follow below-mentioned steps: \n\n## :label: Step 1: Install the packages\nThese are the peerDependencies of the library, need to be installed in order to use this library.\n\n npm install @project-sunbird/sunbird-quml-player-v9 --save\n npm install @dicdikshaorg/sb-styles --save\n npm install @dicdikshaorg/client-services --save\n npm install bootstrap@4.6.1 --save\n npm install jquery --save\n npm install katex --save\n npm install lodash-es --save\n npm install ngx-bootstrap@6.0.0 --save\n\n\nNote: *As QuML library is build with angular version 9, we are using **bootstrap@4.6.1** and **ngx-bootstrap@6.0.0** which are the compatible versions.\nFor more reference Check compatibility document for ng-bootstrap [here](https://valor-software.com/ngx-bootstrap/#/documentation#compatibility)* \n\n## :label: Step 2: Add CSS\nCopy CSS code from the below given `styles.css` to app's default `styles.css` or `styles.scss` \nkeep `quml-carousel.css` in root folder.\n\n - [styles.css](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/projects/quml-demo-app/src/styles.css) \n - [quml-carousel.css](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/quml-carousel.css) \n\n## :label: Step 3: Add question-cursor-implementation.service\nCreate a **question-cursor-implementation.service.ts** in a project and which will implement the `QuestionCursor` abstract class. \n`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 \n\nFor more information refer [question-cursor-implementation.service.ts](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/projects/quml-demo-app/src/app/question-cursor-implementation.service.ts) and do not forgot to add your question list API URL here, for example: [https://staging.sunbirded.org/api/question/v1/list](https://staging.sunbirded.org/api/question/v1/list)\n\n## :label: Step 3: Include the styles, scripts and assets in angular.json\n Add the following under `architect.build.assets` for default project \n```javascript\n{\n ...\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:browser\",\n \"options\": {\n ...\n ...\n \"assets\": [\n ...\n ...\n {\n \"glob\": \"**/*.*\",\n \"input\": \"./node_modules/@project-sunbird/sunbird-quml-player-v9/lib/assets/\",\n \"output\": \"/assets/\"\n }\n ],\n \"styles\": [\n ...\n \"src/styles.css\",\n \"./node_modules/@dicdikshaorg/sb-styles/assets/_styles.scss\",\n \"./quml-carousel.css\",\n \"./node_modules/katex/dist/katex.min.css\"\n ],\n \"scripts\": [\n ...\n \"./node_modules/katex/dist/katex.min.js\",\n \"./node_modules/jquery/dist/jquery.min.js\"\n ]\n }\n }\n ...\n ...\n},\n```\n \n## :label: Step 4: Import the modules and components\nImport the required modules such as **CarouselModule**, **QumlLibraryModule**, **HttpClientModule** and **question-cursor-implementation.service** as below:\n\n```javascript\n import { HttpClientModule } from '@angular/common/http';\n import { QumlLibraryModule, QuestionCursor } from '@project-sunbird/sunbird-quml-player-v9';\n import { CarouselModule } from 'ngx-bootstrap/carousel';\n import { QuestionCursorImplementationService } from './question-cursor-implementation.service';\n\n @NgModule({\n ...\n\n imports: [ QumlLibraryModule, CarouselModule.forRoot(), HttpClientModule ],\n providers: [{\n provide: QuestionCursor,\n useClass: QuestionCursorImplementationService\n }]\n\n ...\n })\n\n export class AppModule { }\n```\n\n## :label: Step 5: Send input to render Quml player\nUser can get a response from the `api/questionset/v1/hierarchy/:do_id` or can use the provided mock config for demo\n\nUse the mock config in your component to send input to Quml player as `playerConfig` \nClick to see the mock - [playerConfig1](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/projects/quml-demo-app/src/app/quml-library-data.ts#L5305) \n\n```html\n\n```\n\n\n## :orange_circle: Available components\n|Feature| Notes| Selector|Code|Input|Output\n|--|--|--|------------------------------------------------------------------------------------------|---|--|\n| Quml Player | Can be used to render Quml | quml-main-player| *``*|playerConfig|playerEvent, telemetryEvent|\n\n### :small_red_triangle_down: Input Parameters\n1. playerConfig: Object - [`Required`] \n```javascript\n{\n context: Object // Information about the telemetry and default settings for quml API requests\n metadata: Object // Question hierarchy response\n config: Object // default player config such as sidebar menu list\n}\n```\n\n### :small_red_triangle_down: Output Events\n1. playerEvent() - It provides heartbeat event for each action performed in the player.\n2. telemetryEvent() - It provides the sequence of telemetry events such as `START, INTERACT, IMPRESSION, SUMMARY, END`\n\n---\n \n\n# Use as web components :earth_asia:\nQuML Library can also be used as web component which means user can import this library in any web application and use these custom component.\nFollow below-mentioned steps to use it in plain javascript project:\n\n- Insert [library](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/web-component/sunbird-quml-player.js) as below:\n\t```javascript\n\t\n\t```\n- Create a asset folder and copy all the files from [here](https://github.com/project-sunbird/sunbird-quml-player/tree/release-4.7.0/web-component/assets), library requires these assets internally to work well.\n\n- Get sample playerConfig from here: [playerConfig](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/projects/quml-demo-app/src/app/quml-library-data.ts)\n\n- Pass the QuestionListAPI baseUrl for eg. [https://staging.sunbirded.org/api/question/v1/list](https://staging.sunbirded.org/api/question/v1/list)\n\n- Create a custom html element: `sunbird-quml-player`\n\t```javascript\n\tconst qumlPlayerElement = document.createElement('sunbird-quml-player');\n\t```\n\n- Pass data using `player-config`\n\t```javascript\n\tqumlPlayerElement.setAttribute('player-config', JSON.stringify(playerConfig));\n\t```\n\t**Note:** Attribute should be in **string** type\n- Listen for the output events: **playerEvent** and **telemetryEvent**\n\n ```javascript\n qumlPlayerElement.addEventListener('playerEvent', (event) => {\n console.log(\"On playerEvent\", event);\n });\n qumlPlayerElement.addEventListener('telemetryEvent', (event) => {\n console.log(\"On telemetryEvent\", event);\n });\n ```\n\n- Append this element to existing element\n ```javascript\n const myPlayer = document.getElementById(\"my-player\");\n myPlayer.appendChild(qumlPlayerElement);\n ```\n- :arrow_forward: Refer demo [example](https://github.com/project-sunbird/sunbird-quml-player/blob/release-4.7.0/web-component/index.html) \n\n---\n\n# :bookmark_tabs: QuML Player Contribution Guide \n## Repo Setup \n - Install Node 12.x and Angular 9\n - Clone the Repo with desired release-branch - https://github.com/project-sunbird/sunbird-quml-player\n - Add the your baseUrl in the *environment.ts* and *proxy.conf.json* files\n - If there any changes in API endpoints, update the *app.constant.ts* file\n - Change the default content ID in *app.component.ts* file\n - Run `npm i` in root folder\n - Run `npm i` in `projects/quml-library` \n - Open two terminal windows (on root folder)\n - Run `npm run mybuild` once this run completes, run the next command - let it be running on 1st terminal window\n - Run `npm run serve` on second terminal window (This will copy assets from the `quml-library` to the library dist folder)\n - Now it will be served on `http://localhost:4200/`\n - To run the web-component `npm run build-web-component`\n\n","readmeFilename":"README.md"}