# assignment-launch
> This library is created by instancy, you can use this library for assignment submission and it also includes the ability to manage feedback and reply between ‘Learner’ and ‘Reviewer’. The learner can submit answer using a rich text editor with the ability
Latest version **0.0.71** (published 2022-04-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install assignment-launch
pnpm add assignment-launch
yarn add assignment-launch
bun add assignment-launch
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.71 |
| Published | 2022-04-07 |
| First published | 2021-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 510.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dileep Singh |
| Maintainers | dileep3605 |
| Keywords | Assignment, Assignment Launch, Feeback, Learner, Reviewer, Enrollment |
## Links
- npm: https://www.npmjs.com/package/assignment-launch
- Repository: https://Instancy@dev.azure.com/Instancy/Angular%20Platform/_git/Assignment_Launch
- npm.io page: https://npm.io/package/assignment-launch
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.1.0
## Recent versions
- 0.0.71 (latest) — 2022-04-07
- 0.0.70 — 2022-04-07
- 0.0.69 — 2022-04-07
- 0.0.68 — 2022-03-03
- 0.0.66 — 2022-03-03
- 0.0.65 — 2022-03-01
- 0.0.64 — 2022-03-01
- 0.0.63 — 2022-03-01
- 0.0.62 — 2022-03-01
- 0.0.61 — 2022-03-01
- 0.0.60 — 2022-02-28
- 0.0.59 — 2022-02-28
- 0.0.58 — 2022-02-28
- 0.0.57 — 2022-02-28
- 0.0.56 — 2022-02-28
- … 52 more at https://npm.io/package/assignment-launch/versions
## README
# 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 = "
Assignment Answer
";
instructions: string = "
Assignment Instruction
";
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
```
```
We need to add froala library, add in `index.html` file
```
```
## 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');`
---
_Source: https://npm.io/package/assignment-launch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._