Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 34 Next »

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:

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

  @NgModule({
   ...

   imports: [ 
      CollectionEditorLibraryModule,
      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

<lib-editor [editorConfig]="editorConfig"></lib-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

Fork the project

  https://github.com/Sunbird-Ed/sunbird-collection-editor.git

Go to the root directory

  cd sunbird-collection-editor

Install dependencies

  npm install

Build the library

  npm run build-lib

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

  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

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

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:

  export interface questionSetEditorConfig = {
    context: Context;
    config: Config;
  }

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.

export interface Context {
    programId?: string;
    contributionOrgId?: string;
    user: User;
    identifier?: string;
    mode?: string;
    authToken?: string;
    sid: string;
    did: string;
    uid: string;
    channel: string;
    pdata: Pdata;
    contextRollup: ContextRollup;
    tags: string[];
    cdata?: Cdata[];
    timeDiff?: number;
    objectRollup?: ObjectRollup;
    host?: string;
    endpoint?: string;
    userData?: {
        firstName: string;
        lastName: string;
    };
    env: string;
    defaultLicense?: any;
    framework: string;
    cloudStorageUrls?: string[];
    additionalCategories?: any[];
    labels?: any;
    targetFWIds?: string[];
}

Description of the properties for the context

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.  

config: {
    mode: 'string', //ex: 'edit'/'review'/'read'/'sourcingReview'/'orgReview'
    editableFields: {
      sourcingreview: string[],
      orgreview: string[],
      review: string[],
    },
    maxDepth: number, //ex: 1
    objectType: 'QuestionSet',
    primaryCategory: 'Practice Question Set',
    isRoot: boolean, //ex: true
    iconClass: 'string', //ex: 'fa fa-book'
    children: {
      Question: [
        'Multiple Choice Question',
        'Subjective Question'
      ]
    },
    hierarchy: {
      level1: {
        name: '', //ex: 'Section'
        type: '', //ex: 'Unit'
        mimeType: 'application/vnd.sunbird.questionset',
        primaryCategory: 'string', //ex: 'Practice Question Set'
        iconClass: 'string' //ex: 'fa fa-folder-o',
        children: {}
      },
      level2: {
        name: 'string', //ex: 'Sub Section'
        ...
        ...
      },
      level3: {
      ...
      ...
      }
    },
    contentPolicyUrl: 'string' //ex: '/term-of-use.html' 
  }

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

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.

editableFields: {
    "sourcingreview": [
        "instructions"
    ],
    "orgreview": [
        "name",
        "instructions",
        "learningOutcome"
    ],
    "review": [
        "name",
        "description"
    ]
}

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:

assetConfig: {
    "image": {
        "size": "1",
        "sizeType": "MB",
        "accepted": "png, jpeg"
    },
    "video": {
        "size": "50",
        "sizeType": "MB",
        "accepted": "mp4, webm"
    }
}

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.

children: {
    Question: [
      'Multiple Choice Question',
      'Subjective Question'
    ]
  }

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

hierarchy: {
    "level1": {
        "name": "Section",
        "type": "Unit",
        "mimeType": "application/vnd.sunbird.questionset",
        "primaryCategory": "Practice Question Set",
        "iconClass": "fa fa-folder-o",
        "children": {
            "Question": [
                "Multiple Choice Question",
                "Subjective Question"
            ]
        }
    }
}

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.

questionSet: {
    "maxQuestionsLimit": "500"
}

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:

{
           "code": "string",
           "dataType": "string", // text, list, number, boolean
           "description": "string",
           "editable": boolean, // true/ false
           "inputType": "", // text, richtext, textarea,keywords,nestedselect,select,topicselect,checkbox,timer,
           "label": "string",
           "name": "string",
           "placeholder": "string",
           "renderingHints": {
               "class": "sb-g-col-lg-2 required"
           }, //sb-g-col-lg-2 required, sb-g-col-lg-1 required
           "validations": [
               {
                   "type": "required",
                   "message": "string"
               } // required, maxLength,compare
           ]
       }

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:

"validations": [
    {
        "type": "required",
        "message": "Any message to be shown below the field if field is not filled"
    }
  ]

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

  "validations": [
    {
        "type": "maxLength",
        "value": "120",
        "message": "Input is Exceeded"
    }
]

  • 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:

"validations": [
    {
        "type": "compare",
        "criteria": {
            "<=": [
                "maxTime"
            ]
        },
        "message": "warning time should be less than max timer"
    }
]

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"
{
    "code": "name",
    "dataType": "text",
    "description": "Name of the Practice Question Set",
    "editable": true,
    "inputType": "text",
    "label": "Name",
    "name": "Name",
    "placeholder": "Enter name of the question set",
    "renderingHints": {
        "class": "sb-g-col-lg-1 required"
    },
    "required": true,
    "visible": true,
    "validations": [
        {
            "type": "maxLength",
            "value": "120",
            "message": "Input is Exceeded"
        },
        {
            "type": "required",
            "message": "Name is required"
        }
    ]
}

 "inputType": "textarea"
{
    "code": "description",
    "dataType": "text",
    "description": "Description of the content",
    "editable": true,
    "inputType": "textarea",
    "label": "Description",
    "name": "Description",
    "placeholder": "Description",
    "renderingHints": {
        "class": "sb-g-col-lg-1 required"
    },
    "required": true,
    "visible": true,
    "validations": [
        {
            "type": "required",
            "message": "description is required"
        }
    ]
}

"inputType": "richtext"
{
    "code": "instructions",
    "dataType": "text",
    "description": "Instructions for the question set",
    "editable": true,
    "inputType": "richtext",
    "label": "Instructions",
    "name": "Instruction",
    "placeholder": "Enter Instructions",
    "renderingHints": {
        "class": "sb-g-col-lg-2 required"
    },
    "validations": [
        {
            "type": "required",
            "message": "Instruction is required"
        }
    ],
    "required": true,
    "visible": true
}

“inputType”: “keywords”
{
    "code": "keywords",
    "visible": true,
    "editable": true,
    "dataType": "list",
    "name": "Keywords",
    "renderingHints": {
        "class": "sb-g-col-lg-1"
    },
    "description": "Keywords for the content",
    "inputType": "keywords",
    "label": "keywords",
    "placeholder": "Enter Keywords",
    "required": false,
    "validations": []
}

"inputType": "nestedselect"
{
    "code": "additionalCategories",
    "dataType": "list",
    "description": "Additonal Category of the Content",
    "editable": true,
    "inputType": "nestedselect",
    "label": "Additional Category",
    "name": "Additional Category",
    "placeholder": "Select Additional Category",
    "renderingHints": {
        "class": "sb-g-col-lg-1"
    },
    "default": "",
    "required": false,
    "visible": true
}
"inputType": "select"
{
    "code": "board",
    "default": "",
    "visible": true,
    "depends": [],
    "editable": true,
    "dataType": "text",
    "renderingHints": {
        "class": "sb-g-col-lg-1"
    },
    "description": "Board",
    "label": "Board/Syllabus",
    "required": false,
    "name": "Board/Syllabus",
    "inputType": "select",
    "placeholder": "Select Board/Syllabus"
}

"inputType": "topicselector"
{
    "code": "topic",
    "visible": true,
    "editable": true,
    "dataType": "list",
    "depends": [
        "board",
        "medium",
        "gradeLevel",
        "subject"
    ],
    "default": "",
    "renderingHints": {
        "class": "sb-g-col-lg-1"
    },
    "name": "Topic",
    "description": "Choose a Topics",
    "inputType": "topicselector",
    "label": "Topics",
    "placeholder": "Choose Topics",
    "required": false
}

"inputType": "checkbox"
{
    "code": "showSolutions",
    "dataType": "text",
    "description": "Show Solution",
    "editable": true,
    "inputType": "checkbox",
    "label": "Show Solution",
    "name": "Show Solution",
    "placeholder": "Show Solution",
    "renderingHints": {
        "class": "sb-g-col-lg-1"
    },
    "required": false,
    "visible": true
}

“inputType”: “timer”
{
    "code": "maxTime",
    "visible": true,
    "editable": true,
    "dataType": "text",
    "name": "MaxTimer",
    "renderingHints": {
        "class": "sb-g-col-lg-1 required"
    },
    "description": "MaxTime for the content",
    "inputType": "timer",
    "label": "Max Time",
    "placeholder": "HH:mm:ss",
    "required": true,
    "validations": [
        {
            "type": "required",
            "message": "Maxtime is required"
        },
        {
            "type": "maxTime",
            "value": "05:30",
            "message": "Maxtime should be less than or equal to 05:30"
        },
        {
            "type": "minTime",
            "value": "00:01",
            "message": "Maxtime should be greater than 00:00"
        }
    ]
}

  • No labels