The following are prerequisites to use question set editor
Softwares / Frameworks | Version |
---|---|
Angular | 15.2.3 |
{% hint style="info" %} The Question Set Editor is tested against the above version of angular. Updating to latest versions needs further testing.
For more information on installing angular, see angular.io/cli. If you are unsure what version of Angular runs on your system, run “ng version” in a command prompt (terminal) window.
Angular requires an active LTS or maintenance LTS version of Node.js.
Refer here for more details on Angular CLI dependencies
{% endhint %}
Question Set Editor library components is powered by angular. This editor is primarily designed to be used in the sunbirdEd portal and web portal to drive reusability, 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 angular library but also as a web component aims to make it easy to share, discover, and reuse web components. It creates a framework agnostic way of composing and re-purposing code.
The Question Set Editor can be integrated as a web component and also as an angular library in angular application projects.
Question Set Editor 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 Question Set Editor Library in this way. Simply follow the below-mentioned steps to use it in plain JavaScript project:
-
Insert library as below:
<script type="text/javascript" src="sunbird-questionset-editor.js"></script>
-
Copy all the files from here, the library requires these files internally to work well.
-
Define an html element where you want to display the editor and set an
id
to it. For example<div id="inQuiryEditor"> </div>
Note - You can give any
id
of your choice but the same id should be used to append the questionsetEditorElement. -
Create a custom HTML element:
lib-questionset-editor
const questionsetEditorElement = document.createElement('lib-questionset-editor');
-
Get sample questionsetEditorConfig from here: questionsetEditorConfig and pass data using
editor-config
questionsetEditorElement.setAttribute('editor-config', JSON.stringify(questionsetEditorConfig));
Note: Attribute should be in string type
-
Listen for the output events:
editorEmitter
as:questionsetEditorElement.addEventListener('editorEmitter', (event) => { console.log("On editorEvent", event); });
-
Append this element to the existing element
const inQuiryEditor = document.getElementById("inQuiryEditor"); inQuiryEditor.appendChild(questionsetEditorElement);
-
▶️ Refer demo example -
Note: Question Set Editor requires a back-end service for making the API calls. For running the Question Set Editor you need a server where inQuiry services are up and running.
-
For testing purpose we are using a node.js server where the API's proxy and editor are running on
localhost
. For running the editor and services fromlocalhost
please refer the server.js file and run it usingnode server.js
-
Run command
npm i @project-sunbird/sunbird-questionset-editor-web-component
-
Add these entries in an angular JSON file inside assets, scripts, and styles like below
"assets": [ "src/favicon.ico", "src/assets", + { + "glob": "**/*", + "input": "node_modules/@project-sunbird/sunbird-questionset-editor-web-component/assets/", + "output": "/assets/" + } ], "styles": [ "src/styles.scss", + "./node_modules/@project-sunbird/sunbird-questionset-editor-web-component/styles.css" ], "scripts": [ + "node_modules/@project-sunbird/sunbird-questionset-editor-web-component/sunbird-questionset-editor.js" ]
-
Integrating
lib-questionset-editor
web component in the angular componentCreate a viewChild in HTML template of the angular component like
<div #questionsetEditor></div>
Refer to the
viewChild
in the ts file of the component and create the Questionset Editor using thedocument.createElement
, then attach the editor config and listen to the editor events like below and since we are rendering usingviewChild
these steps should be under thengAfterViewInit
hook of the angular component.import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core'; + import { questionSetEditorConfig } from './data'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { + @ViewChild('questionsetEditor') inQuiryEditor! : ElementRef; ngAfterViewInit() { + const editorConfig = questionSetEditorConfig; + const questionsetEditorElement = document.createElement('lib-questionset-editor'); + questionsetEditorElement.setAttribute('editor-config', JSON.stringify(editorConfig)); + questionsetEditorElement.addEventListener('editorEmitter', (event) => { + console.log("On editorEvent", event); + }); + this.inQuiryEditor.nativeElement.append(questionsetEditorElement); } }
Note: Click to see the mock - questionsetEditorConfig and send the input config as a string
For running different question set in the editor, set the do_id of Question Set in
data.ts
file as:export const questionSetEditorConfig = { context: { ... ... ... }, + identifier: 'do_id', // identifier of created questionset ... ... };
-
You're done! Question Set Editor web component integration in angular application is completed.
Note: Question Set Editor requires a back-end service to make the API calls. For running it locally we need a proxy server. You can use the below steps for doing the proxy and run the services on localhost:3000
-
Create a proxy.conf.json in the root folder. Refer: proxy.conf.json
-
Update the packge.json
{ ... ... "scripts": { "ng": "ng", + "start": "ng serve --proxy-config proxy.conf.json", ... ... }, ... "dependencies": { ... ... }, "devDependencies": { ... ... } }
-
Create a latexService.js in the root folder. Refer: latexService.js
-
Create server.js in the root folder. Refer: server.js
Update the host variable to which env your pointing. example if you are pointing sunbird dev instance update variable like below const BASE_URL = 'https://dev.inquiry.sunbird.org/' //add the base url of your portal const API_AUTH_TOKEN = 'XXXX' // Add the API_KEY of your inQuiry API's.
-
For running the server.js file few packges are to be installed. Please install the below packages.
npm i express-http-proxy npm i async npm i mathjax-full npm i svg2img
-
Now we are ready to run the application.
-
Open one terminal in your application's root folder and run the server as below and let it keep on running.
node server.js
-
Open another terminal on root folder and start your application
npm run start
-
-
For getting started with a new Angular app, check out the Angular CLI.
For existing apps, follow the below-mentioned steps:
The following commands will add sunbird-questionset-editor
library to your package.json file along with its dependencies.
npm i @project-sunbird/sunbird-questionset-editor --save
Don't forget to install the below peer dependencies of the library in your application. that need to be installed in order to use the library in your angular project.
npm i @project-sunbird/common-form-elements-full --save
npm i ng2-semantic-ui-v9 --save
npm i ngx-infinite-scroll --save
npm i lodash-es --save
npm i jquery.fancytree --save
npm i uuid --save
npm i @project-sunbird/client-services --save
npm i export-to-csv --save
npm i moment --save
npm i @project-sunbird/ckeditor-build-classic --save
npm i @project-sunbird/sunbird-quml-player-web-component --save
npm i ngx-bootstrap@^10.0.0 --save
npm i [email protected] --save
npm i jquery --save
npm i express-http-proxy --save
npm i mathjax-full --save
npm i svg2img --save
npm i font-awesome --save
npm i @project-sunbird/sb-styles
Note: As QuestionSet 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 here
After installing the above dependencies, now we have to copy the required assets from the given folder to the assets folder of your angular application. It contains styles and plugins.
- Copy the assets from: assets
- Create a latexService.js in the root folder. Refer: latexService.js
- Create a proxy.conf.json in the root folder. Refer: proxy.conf.json
- Create server.js in the root folder. Refer: server.js
Now open the angular.json
file and add the following under architect.build.assets
for default project
{
...
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
...
"aot": false,
"assets": [
...
...
+ {
+ "glob": "**/*",
+ "input": "node_modules/@project-sunbird/sunbird-questionset-editor/lib/assets",
+ "output": "/assets/"
+ },
+ {
+ "glob": "**/*",
+ "input": "node_modules/@project-sunbird/sunbird-quml-player-web-component/assets/",
+ "output": "/assets/"
+ }
],
"styles": [
...
+ "node_modules/@project-sunbird/sunbird-quml-player-web-component/styles.css",
+ "node_modules/@project-sunbird/sb-styles/assets/_styles.scss",
+ "src/assets/lib/semantic/semantic.min.css",
+ "src/assets/styles/styles.scss",
+ "node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
...
+ "node_modules/@project-sunbird/sunbird-quml-player-web-component/sunbird-quml-player.js",
+ "src/assets/libs/iziToast/iziToast.min.js",
+ "node_modules/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js",
+ "src/assets/lib/dimmer.min.js",
+ "src/assets/lib/transition.min.js",
+ "src/assets/lib/modal.min.js",
+ "src/assets/lib/semantic-ui-tree-picker.js",
+ "node_modules/@project-sunbird/telemetry-sdk/index.js",
+ "node_modules/@project-sunbird/client-services/index.js"
]
}
}
...
...
}
{
...
...
"scripts": {
"ng": "ng",
+ "start": "ng serve --proxy-config proxy.conf.json",
...
...
},
...
"dependencies": {
...
...
},
"devDependencies": {
...
...
}
}
Create a question-cursor-implementation.service.ts
in a project and which will implement the QuestionCursor
and EditorCursor
abstract class.
QuestionCursor
and EditorCursor
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
Let's create the question-cursor-implementation
service by running the following command:
cd src/app
ng g service question-cursor-implementation
Now open app.module.ts
file and import like this:
+ import { EditorCursor } from '@project-sunbird/sunbird-questionset-editor';
+ import { EditorCursorImplementationService } from './editor-cursor-implementation.service';
@NgModule({
providers: [
+ { provide: EditorCursor, useExisting: EditorCursorImplementationService }
],
})
export class AppModule { }
For more information refer question-cursor-implementation.service.ts.
Include QuestionsetEditorLibraryModule
in your app module:
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ import { QuestionsetEditorLibraryModule, EditorCursor } from '@project-sunbird/sunbird-questionset-editor';
import { RouterModule } from '@angular/router';
import { EditorCursorImplementationService } from './editor-cursor-implementation.service';
@NgModule({
...
imports: [
+ QuestionsetEditorLibraryModule,
BrowserAnimationsModule,
RouterModule.forRoot([])
],
providers: [
{ provide: EditorCursor, useExisting: EditorCursorImplementationService }
]
...
})
export class AppModule { }
Once your library is imported, you can use its main component, lib-questionset-editor
in your Angular application.
Add the tag to the app.component.html
like so:
<lib-questionset-editor [editorConfig]="editorConfig" (editorEmitter)="editorEventListener($event)"></lib-questionset-editor>
Create a data.ts file which contains the questionSetEditorConfig
Refer: data.ts
(Note: data.ts
contains the mock config used in component to send it as input to questionset Editor. We need only questionSetEditorConfig.Use the mock config in your component to send input to questionset editor as editorConfig
)
app.component.ts
...
+ import { questionSetEditorConfig } from './data';
@Component({
...
})
export class AppComponent {
...
+ public editorConfig: any = questionSetEditorConfig;
}
app.component.html
<lib-questionset-editor [editorConfig]="editorConfig" (editorEmitter)="editorEventListener($event)"></lib-questionset-editor>
Feature | Notes | Selector | Code | Input | Output |
---|---|---|---|---|---|
QuestionSet Editor | Can be used to render Editor | lib-questionset-editor | <lib-questionset-editor [editorConfig]="editorConfig"></lib-questionset-editor> |
editorConfig | editorEmitter |
- editorConfig: Object - [
Required
]
{
context: Object // Information about the telemetry and default settings for editor API requests
config: Object // default editor config such as sidebar menu list
}
For more information refer this documentation: CONFIGURATION.MD
- editorEmitter() - It emits event for each action performed in the editor.
From the root directory - go to server.js
file
Update the host variable to which env your pointing. example if you are pointing sunbird dev instance update variable like below
const BASE_URL = 'dev.sunbirded.org'
const API_AUTH_TOKEN = 'XXXX'
const USER_TOKEN= 'YYYY
Note: You will need actual API_AUTH_TOKEN
and USER_TOKEN
If you are pointing to sunbird dev (dev.sunbirded.org
), create a Question Set in sunbird dev, set the do_id of Question Set in data.ts
file
export const questionSetEditorConfig = {
context: {
...
...
...
},
identifier: 'do_id', // identifier of questionset created in sunbird dev
...
...
};
Run npm run build-lib
to build the library. The build artifacts will be stored in the dist/ directory.
Before running the application, we have to start the node server to proxy the APIs by running the following command:
nodemon server.js
Once that is done, Use the following CLI command to run your application locally
npm run start
To see your application in the browser, go to http://localhost:4200.
Clone the Repo with the desired release branch: https://github.com/Sunbird-inQuiry/editor
Go to the root directory
cd editor
Install dependencies
npm install
Build the library
npm run build-lib
It will create a /dist/questionset-editor-library
folder at the root directory and also copy all the required assets.
A sample angular application is included as part of this repo
In another terminal tab -
From the root directory - Start the server
npm run start
The demo app will launch at http://localhost:4200
From the root directory - go to server.js
file
Update the host variable to which env your pointing. example if you are pointing sunbird dev instance update variable like below
const BASE_URL = 'dev.sunbirded.org'
const API_AUTH_TOKEN = 'XXXX'
const USER_TOKEN= 'YYYY'
Note: You will need actual API_AUTH_TOKEN
and USER_TOKEN
If you are pointing to sunbird dev (dev.sunbirded.org
), create a Question Set in sunbird dev and set the do_id of Question Set in data.ts
file
export const questionSetEditorConfig = {
context: {
...
...
...
},
identifier: 'do_id', // identifier of questionset created in sunbird dev
...
...
};
Run Node server to proxy the APIs (Open one more terminal in root folder and run the server.js ) as:
nodemon server.js