Installation

🏷️ System requirements

The following are prerequisites to use question set editor

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

💠 QuestionSet Editor library for Sunbird platform

📑 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 i @project-sunbird/sunbird-questionset-editor --save
npm i common-form-elements-web-v9 --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 angular2-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-pdf-player-v9 --save
npm i @project-sunbird/sunbird-epub-player-v9 --save
npm i @project-sunbird/sunbird-video-player-v9 --save
npm i @project-sunbird/sunbird-quml-player-v9 --save
npm i ngx-bootstrap@6.0.0 --save
npm i ng2-cache-service --save
npm i ngx-chips@2.2.0 --save
npm i epubjs --save
npm i videojs-contrib-quality-levels --save
npm i videojs-http-source-selector --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 Editor library is build with angular version 9, we are using ngx-bootstrap@6.0.0 and ngx-chips@2.2.0 which are the compatible versions.
For more reference Check compatibility document for ng-bootstrap here

🏷️ Step 2: Add the required services and QuestionSet editor config

Create a editor-cursor-implementation.service.ts in a project and which will implement the QuestionCursor and EditorCursor abstract class. Refer: editor-cursor-implementation.service.ts

Remember EditorCursor is to be imported like this

import { EditorCursor } from '@project-sunbird/sunbird-questionset-editor';

Create a data.ts file which contains the questionSetEditorConfig Refer: data.ts

Note: questionSetEditorConfigin data.ts contains the mock config used in component to send it as input to QuestionSet Editor. We need only questionSetEditorConfig

Create a latexService.js in root folder. Refer: latexService.js
Create a proxy.conf.json in root folder. Refer: proxy.conf.json
Create server.js in root folder. Refer: server.js
Copy the assets from: assets

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

{
  ...
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      ...
      "aot": false,
      "assets": [
        ...
        ...
              {
                "glob": "**/*",
                "input": "node_modules/@project-sunbird/sunbird-pdf-player-v9/lib/assets/",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@project-sunbird/sunbird-questionset-editor/lib/assets",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "node_modules/@project-sunbird/sunbird-quml-player-v9/lib/assets/",
                "output": "/assets/"
              }
      ],
      "styles": [
        ...
        "src/assets/quml-styles/quml-carousel.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",
        "node_modules/video.js/dist/video-js.min.css",
        "node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
        "node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
      ],
      "scripts": [
        ...
        "node_modules/epubjs/dist/epub.js",
        "src/assets/libs/iziToast/iziToast.min.js",
        "node_modules/jquery/dist/jquery.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/client-services/index.js",
        "node_modules/video.js/dist/video.js",
        "node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs-markers.js",
        "node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js",
        "node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js"
      ]
    }
  }
  ...
  ...
}

🏷️ Step 4: Change in package.json

{
    ...
    ...
    "scripts": {
      "ng": "ng",
      "start": "ng serve --proxy-config proxy.conf.json",
      ...
      ...
    },
    ...
    "dependencies": {
    ...
    ...
    },
    "devDependencies": {
    ...
    ...
    }
  }

🏷️ Step 5: Import the modules and components

Import the required modules such as below::

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { QuestionsetEditorLibraryModule, EditorCursor } from '@project-sunbird/sunbird-questionset-editor';
import { RouterModule } from '@angular/router';
import { QuestionCursor } from '@project-sunbird/sunbird-quml-player';
import { EditorCursorImplementationService } from './editor-cursor-implementation.service';

  @NgModule({
   ...

   imports: [ 
      QuestionsetEditorLibraryModule,
      BrowserAnimationsModule,
      RouterModule.forRoot([])
      ],
   providers: [
    { provide: QuestionCursor, useExisting: EditorCursorImplementationService },
    { provide: EditorCursor, useExisting: EditorCursorImplementationService }
   ]

   ...
  })

 export class AppModule { }

Add the questionset editor config in component

...
import { questionSetEditorConfig } from './data';
@Component({
  ...
  ...
  ...
})

export class AppComponent {
  ...
  public editorConfig: any = questionSetEditorConfig;
}

🏷️ __ Step 6: Send input to render QuestionSet Editor

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>

Available components

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

🔻 Input Parameters

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

🔻 Output Events

editorEmitter() - It emits event for each action performed in the editor.

🏷️Step 7: Set the auth token and questionset identifier

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, copy the questionset_id from the browser url 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
    ...
    ...
  };

🏷️ Setp 8: Run the application

From the root directory - Start the server (Open terminal in root folder and start the application) as:

npm run start

The app will launch at http://localhost:4200

Run Node server to proxy the APIs (Open another terminal in root folder and run the server.js ) as:

nodemon server.js

📑 Questionset Editor Contribution Guide

Repo Setup

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.

Starting up the Sample application

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

Set the auth token and questionset identifier

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Installation

🏷️ System requirements

💠 QuestionSet Editor library for Sunbird platform

📑 Getting Started

🏷️ Step 1: Install the packages

🏷️ Step 2: Add the required services and QuestionSet editor config

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

🏷️ Step 4: Change in package.json

🏷️ Step 5: Import the modules and components

🏷️ __ Step 6: Send input to render QuestionSet Editor

Available components

🔻 Input Parameters

🔻 Output Events

🏷️Step 7: Set the auth token and questionset identifier

🏷️ Setp 8: Run the application

📑 Questionset Editor Contribution Guide

Repo Setup

Starting up the Sample application

Set the auth token and questionset identifier

Files

README.md

Latest commit

History

README.md

File metadata and controls

Installation

🏷️ System requirements

💠 QuestionSet Editor library for Sunbird platform

📑 Getting Started

🏷️ Step 1: Install the packages

🏷️ Step 2: Add the required services and QuestionSet editor config

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

🏷️ Step 4: Change in package.json

🏷️ Step 5: Import the modules and components

🏷️ __ Step 6: Send input to render QuestionSet Editor

Available components

🔻 Input Parameters

🔻 Output Events

🏷️Step 7: Set the auth token and questionset identifier

🏷️ Setp 8: Run the application

📑 Questionset Editor Contribution Guide

Repo Setup

Starting up the Sample application

Set the auth token and questionset identifier