assignment-launch v0.0.71

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.

Events

Pass Data to the Libraray

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');