Instancy Assignment Launch

Instancy assignment launch component for web applications. Easy to integrate and use.

Table of Contents

1. Getting Started
2. Installation
3. Usage

Getting Started

Installation

1. The assignment launch package is published on the npm Registry.
2. Install the package: npm install assignment-launch
3. Once installed import AssignmentLaunchModule from the installed package into your module as follows:
4. We have dependency of Angular Material
   • Install the package: ng add @angular/material
5. We need to add froala library, add in index.html file
6. import style.css file in styles.css or styles.scss of the project
   • @import url('../node_modules/assignment-launch/src/lib/styles/style.css');

Usage

Import AssignmentLaunchModule into NgModule in app.module.ts.

In case if you get error with Angular Material Controls import MatButtonModule MatIconModule MatSidenavModule MatCardModule MatDividerModule MatTabsModule MatFormFieldModule MatInputModule

Above Mention Angular Material Control used in library

import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatTabsModule } from '@angular/material/tabs';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

import { AssignmentLaunchModule } from "assignment-launch";

const materialModules = [
  MatButtonModule,
  MatIconModule,
  MatSidenavModule,
  MatCardModule,
  MatDividerModule,
  MatTabsModule,
  MatFormFieldModule,
  MatInputModule,
];

@NgModule({
  // ...
  imports: [
    ...materialModules,
    AssignmentLaunchModule,
  ],
  exports: [...materialModules]
  // ...
})

Declare the component data variables and options in your component where you want to consume the assignment launch component.

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {

  answerHtmlData: string = "<p>Assignment Answer</p>";

  instructions: string = "<p>Assignment Instruction</p>";

  feedbackList: any = [];

  config = {
    user: 'Adam Levine',
    clientURL: '',
    froalaKey: 'froala_key',
    requestHeaders: '',
    imageUploadURL: '',
    imageUploadParams: '',
    imageMaxSize: 10 * 1024 * 1024,
    imageUploadMethod: 'POST',
    videoUploadURL: '',
    videoUploadParams: '',
    videoUploadMethod: '',
    videoMaxSize: 50 * 1024 * 1024,
    fileUploadURL: '',
    fileUploadParams: '',
    fileUploadMethod: '',
  };

  // get answer
  sendAnswer(editorHtml: string) {
    this.editorData.emit({
      html: editorHtml,
    });
  }

  // get feedback list
  getFeedbackListData(list: any) {
    this.getFeedbackList.emit(list);
  }

  // add new feedback
  addNewFeedback(feedback: any) {
    this.addFeedback.emit(feedback);
  }

  // add new reply
  addNewReply(reply: any) {
    this.addReply.emit(reply);
  }

  // edited feedback details
  getEditedFeedback(feedback: any) {
    this.editFeedback.emit(feedback);
  }

  // edited reply feeback
  getEditedReply(reply: any) {
    this.editReply.emit(reply);
  }

  // delete feedback
  deleteFeedback(feedback: any) {
    this.deletedFeedback.emit(feedback);
  }

  // delete reply
  deleteReply(reply: any) {
    this.deletedReply.emit(reply);
  }

  //score
  getScore(score: any) {
    this.score.emit(score);
  }

  // is assignment accepted
  assignmentAccepted(accepted: boolean) {
    this.isAccepted.emit(accepted);
  }

  // is assignment rejected
  assignmentRejected(rejected: boolean) {
    this.isRejected.emit(rejected);
  }

}

Add the following component tag in you template

<instancy-assignment-launch
    [instructions]="instructions"
    (editorData)="getEditorData($event)"
    [setEditorData]="answerHtmlData"
    (getFeedbackList)="getFeedbackList($event)"
    (addFeedback)="addNewFeedback($event)"
    (editFeedback)="editFeedback($event)"
    [config]="config"
    [feedbackList]="feedbackList"
    (deletedFeedback)="deleteFeedback($event)"
    (score)="getScore($event)"
    (isAccepted)="assignmentAccepted($event)"
    (isRejected)="assignmentRejected($event)"
  >
  </instancy-assignment-launch>

We need to add froala library, add in index.html file

<link
      href="https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/css/froala_editor.pkgd.min.css"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Include Code Mirror CSS. -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css"
    />

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/froala-editor@3.1.0/js/froala_editor.pkgd.min.js"
    ></script>
    <!-- Include Code Mirror JS. -->
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"
    ></script>

    <!-- Include PDF export JS lib. -->
    <script
      type="text/javascript"
      src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"
    ></script>

Config Variable

The following list of settings are supported by the component. Configure the settings to meet your requirement.

Settings	Type	Description	Suggestion
user	string	Pass use current user name value	No suggestion
userID	number	Pass the current user id	No suggestion
isEditable	boolean	Allow answer to be editable or read-only mode	Pass true or false
isAdmin	boolean	Is user is Admin/Reviewer	Pass true or false
clientURL	string	Pass the application url (host url)	No suggestion
froalaKey	string	Pass the froala license key you got at the time of the froala subscription	No suggestion
requestHeaders	object	Pass the required header for API call	No Suggestion
imageUploadURL	string	Pass the image upload API url	No suggestion
imageUploadParams	object	Pass the required params to upload the image	{SiteId: '', LocaleId: ''}
imageMaxSize	number	Pass the image max size in kb	10 _ 1024 _ 1024
imageAllowedTypes	array	Pass the image upload types	['jpeg', 'jpg', 'png', 'gif']
imageUploadMethod	string	Pass the method	'POST'
videoUploadURL	string	Pass the video upload API url	No suggestion
videoUploadParams	object	Pass the required params to upload the video	{SiteId: '', LocaleId: ''}
videoMaxSize	number	Pass the image max size in kb	50 _ 1024 _ 1024
videoAllowedTypes	array	Pass the video upload types	['mp4', 'wmv', 'avi', 'flv', 'mov', 'ogg', 'webm']
videoUploadMethod	string	Pass the method	'POST'
fileUploadURL	string	Pass the file upload API url	No suggestion
fileUploadParams	object	Pass the required params to upload the file	{SiteId: '', LocaleId: ''}
fileMaxSize	number	Pass the image max size in kb	5 _ 1024 _ 1024
fileAllowedTypes	array	Pass the video upload types	['*']
fileUploadMethod	string	Pass the method	'POST'

Events

Event	Description
getFeedbackList	To get all the feedback list
addFeedback	To add new feedback, it returns added feedback data
editFeedback	To edit the feedback, it returns edited feedback data
deletedFeedback	To delete the feedback, it returns deleted feedback data
score	Provide score for assignment, it returns score value (between 0 - 100)
isAccepted	It returns true(boolean) if assignment accepted
isRejected	It returns true(boolean) if assignment rejected
feedbackOpened	It returns, if feedback panel is opened true or else false

Pass Data to the Libraray

Event	Description
instructions	To pass the instructions data
setEditorData	To set the editor data (Answer Data)
config	To pass the configuration for editor and feedback
feedbackList	To pass the feedback data
setScore	To pass the value to set score

Themes and Theming

import style.css file in styles.css or styles.scss of the project - @import url('../node_modules/assignment-launch/src/lib/styles/style.css');