QuestionSet Editor library for sunbird !

Owned by Kartheek Palla
Last updated: Feb 02, 2022 by Rajnish Dargan
21 min read

Contains QuestionSet Editor library components powered by angular. These components are designed to be used in the sunbirdEd portal and coKreat reference web portal to drive reusability, maintainability hence reducing the redundant development effort significantly.

 

Developer Documentation

Getting Started

For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using .

Step 1: Install the packages

npm i @project-sunbird/sunbird-collection-editor-v9 --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 fine-uploader --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

Remember EditorCursor is to be imported like this

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

  • 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

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-collection-editor-v9/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:

Add the questionset editor config in component

Step 6: Send input to render QuestionSet Editor

<lib-editor [editorConfig]="editorConfig"></lib-editor>

Step 7: Set the auth token and questionset identifier

From the root directory - go to server.js file

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

 

Setp 8: Run the application

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

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:

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Questionset Editor Contribution Guide

Repo Setup

Fork the project

Go to the root directory

Install dependencies

Build the library

It will create a /dist/collection-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

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

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

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

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Configuration Documentation - QuestionSet Editor

Questionset Editor is an angular library built with Angular version 9, and it exports some modules and components.

Component: editor

This is the main editor Component that accepts some configuration (here editorConfig) based on it loads the editor.  

Let's deep dive into the player input configuration:

Context - Required

This Required property from the questionSetEditorConfig provides the context to the questionset editor mostly in terms of the telemetry.

Along with this it also provides the channel level config, if available.

Description of the properties for the context

Property

Required

Description

Property

Required

Description

programId

false

program id in which questionset is created.

contributionOrgId

false

Organisation id of the contributor.

user

true

User object which contains users id, fullName, lastName, orgIds.

identifier

false

identifier of questionset

authToken

false

Authentication token

sid

true

session id of the requestor stamped by portal

did

true

uuid of the device

channel

true

Channel which has produced the event

pdata

true

Producer of the event

contextRollup

true

Context Rollups upto level 4

tags

true

Encrypted dimension tags passed by respective channels

cdata

false

Correlation data

timeDiff

false

Last player duration

objectRollup

false

Object Rollup up to level 4

host

false

Host URL

endpoint

false

Telemetry API endpoint

userData.firstName

false

User's first name

userData.lastName

false

User's last name

env

true

type of editor , in case of questionset editor its questionset_editor

defaultLicense

false

default license of questionset

framework

true

Organisation framework id

cloudStorageUrls

false

Array of cloud storage urls

additionalCategories

false

Array of objects of additional categories

labels

false

Additional labels to be used in editor

targetFWIds

false

Array of target framework ids

 

Config - Required


This Required property from the questionsetEditorConfig provides the configuration for the questionset editor to enable/disable some functionalities.  

Note: If any of the property is added in object-category-definition of questionset. It will take the config from there, otherwise questionset editor will take the mock config passed as input to the editor.

Description of the properties for the config:

Property

Default Value

Required

Description

Property

Default Value

Required

Description

mode

 

true

Defines the mode in editor is to be loaded loaded.

editableFields

{

sourcingreview: [], orgreview: [], review: [],

}

false

Defines which fields is to be enabled when mode of questionset is

review / sourcingReview / orgReview

enableQuestionCreation

true

false

It enables or disables the creation of question in questionset

assetConfig

 

false

asset Config sets the max size limit for image and videos to be uploaded in question in questionset.

maxDepth

 

true

Defines the depth to which the questionset is to be created. If the depth is 1, hierarchy should have level1 described.

children

 

 

true

If maxdepth is 0 this children inside the root node defines the template of questions.

hierarchy

 

false

If maxdepth is > 0 then hierarchy should have definiton of the levels.

objectType

'QuestionSet'

true

Defines the object type

primaryCategory

'Practice Question Set'

true

Defines the primary category

isRoot

true

true

Defines the node is root node.

iconClass

'fa fa-book'

true

Defines the icon of root node

showAddCollaborator

false

false

This is to enable/disable the functionality of add collaborator in questionset. If it is true add collobrorator button will be enabled and created can add the collolaborator to collaborate in questionset.

questionSet. maxQuestionsLimit

 

 

false

It defines the limit of total number of question to be created inside questionset.

contentPolicyUrl

 

true

It defines where should the content policy link will be redirected.

  • mode:

mode: edit (all the fields will be enable to edit for questionset creator)

 

mode: sourcingReview (all those fields will be enabled whatever will be present in editableFields.sourcingreview)

 

Note: In above case editableFields.sourcingreview: ['instructions'] so only instruction field is enabled for sourcing reviewer while reviewing the questionset.

 

  • editableFields:

Its object for different types of mode based on which some fields get enabled.

 

In sourcingreview, we have “instructions”, so when the mode of editor is sourcingReview in that case instruction will be only enabled.

 

  • enableQuestionCreation:

When enableQuestionCreation: false “Create New” button gets disabled

 

  • assetConfig:

asset Config sets the max size limit for image and videos to be uploaded in questionset and the type of image and videos.

 

  • maxDepth:

maxDepth defines the level of questionset i.e at which level question to be created. If maxDepth is set as 0, “Create New“ button get enabled to question at root node.

Note: children at root node is to be defined which defines the type of question can be created at root node. Here is the default value for children.

If the maxDepth is set as 1, we need to define hierarchy also.

Here is the default value of hierarchy we are using, you can change the name of level also

Note: If you add more depth you need to add more levels in hierarchy.

 

  • iconClass:

This defines the icon which comes in the node and levels, you can set your own icon here by adding the class of icon, in root node for iconClass: 'fa fa-book' icon is shown as:

 

 

  • showAddCollaborator:

When showAddCollaborator is set it to true it enable the add collaborator option in questionset. With which creator can as select the collaborate to contribute to same questionset.

 

  • questionSet.maxQuestionsLimit:

This defines the maxiumun number of question to be created in a questionset.

Suppose if "maxQuestionsLimit" is set to “5“ then while trying to create new question it will give error maxlimit message as:

 

  • contentPolicyUrl:

It defines where should the content policy link should be retirected.

contentPolicyUrl: "/term-of-use.html" in diksha we are using this config as it redirects to (https://diksha.gov.in/term-of-use.html)

Object Category Definition of Questionset and form config

 Field Format:

dataType

datatype is the format in which sb-form outputs the data of field in that data type:

  • text: “string”

  • list: array[]

  • number: number

  • boolean: true/false 

 

renderHints

renderHints defines whether the field should take space of two column(sb-g-col-lg-2) or one column(sb-g-col-lg-1) and to add asterisks(*) in the label of field(required)

 

validations

validations defines the different types of validations which can be done on fields

We are using required, maxLength,compare

  • required: for making the field to be required you need to add the required validations as:

 

  • maxLength: for adding restriction of length on field text, textarea, richtext.

 

  • compare: for comparing one field with another.

In the case of timer warningTime should be less than or equal to maxTime so in warning time we can add the compare validation as:

 

inputType

inputType defines the different types of field with which some kind of data can be sent to sb-form.

We are using text, richtext, textarea, keywords, nestedselect, select, topicselect, checkbox, timer

"inputType": "text"

 

 "inputType": "textarea"

 

"inputType": "richtext"

 

“inputType”: “keywords”

 

"inputType": "nestedselect"

"inputType": "select"

 

"inputType": "topicselector"

 

 

"inputType": "checkbox"

 

“inputType”: “timer”

Root Node form

 

Section Form

Publish Check List

This list is shown when questionset is being reviewed and clicked on publish button.

 

objectCategoryDefinition