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/[email protected]/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/[email protected]/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');