documenthub-web-components

DocumentHub Web Components

With DocumentHub Web Components you can use in your Application a set of customizable lightning fast UI features.

1.1 React Components

You can simply use documenthub-web-components inside your React application by installing its module via npm i documenthub-web-components.

Import a module via import { Article, Document, Form, Page, Quiz } from "documenthub-web-components";

Article

Display a document as an article.

Usage

<Article
	catalogid="your-catalog-id",
	documentid="document-id",
	language="en" , //optional
	headings="false", //optional
	toc="false", //optional
	scrollUp="true", //optional
	token="aaa.bbb.ccc" //optional
/>

Document

Display a document.

Usage

<Document
  catalogid=""your-catalog-id",
  documentid="document-id",
  language="en" , //optional
  headings="false", //optional
  toc="true"  //optional
	token="aaa.bbb.ccc" //optional
/>

Form

Use form component to be able to edit a document via form fields.

Usage

<Form
  catalogid=""your-catalog-id",
  documentid="document-id",
  language="en" , //optional
/>

Page

Display content as a page.

Usage

<Form
  catalogid=""your-catalog-id",
  documentid="document-id",
  language="en" , //optional
/>

Quiz

Usage

Requirements

• Ability to have a quiz/test with multiple sections with configurable number of question and randomness.
• Store the snapshot of question along with sequence returned to the user so that the test can be resumed and same set of questions can be returned incase of disconnect/ resumption
• Store the results of the attempt against the test. This could be part of the snapshot above.
• Passing could be section based which is optional or overall. Our requirement is more of a overall passing percentage in which the passingPercent field could be skipped in the sections configuration.

e.g

"sections": [
  "A": {
    "title": "",
    "body": "",
    "randomQuestions": true,
    "numberOfQuestions": 5,
    "passingPercent": 80
  }
],
  "questions": [
    {
      "id": "q1",
      "section": "A,"
      "question": "What does <em>HTML</em> stand for?",
      "body": "",
      "answers": [
...

Model

Questions

Responses

{
  "catalogId": "",
  "documentId": "",
  "quiz": "",
  "libraryId": "",
  "userId": "",
  "startTime": "",
  "restartTimes": [],
  "finishTime": "",
  "passingScore": 80,
  "score": 0,
  "scorePerSection": [
    0,
    0,
    0
  ],
  "sections": {
    "A": {
      "title": "",
      "body": "",
      "passingScore": 80
    }
  },
  "questions": [
    {
      "id": "q1",
      "section": "A",
      "question": "What does <em>HTML</em> stand for?",
      "body": "",
      "answers": [
        {
          "id": "1",
          "answer": "Hyperlinks and Text Markup Language",
          "valid": false
        }
      ]
    }
  ],
  "responses": {
    "q1": [
      "a1"
    ],
    "q2": [
      "a3",
      "a4"
    ],
    "q3": [],
    "q5": []
  }
}

Course

Usage

Requirements

• track progress
• process final quiz

Model

Progress

{
  "catalog": "",
  "document": "",
  "language": "",
  "library": "",
  "user": "",
  "numberOfModules": 10,
  "progress": ["01.01", "01.02"],
  "checkpoints": ?
}

1.2 HTML Tags

You can simply use DocumentHub Web Components inside your page by including a js and a css file.

Import the js module via

<script 
    type="module" 
    src='https://unpkg.com/documenthub-web-components@latest/dist/lib/index.js'>
</script>

Import the css module via

<link rel="stylesheet" href="https://unpkg.com/documenthub-web-components@latest/dist/lib/index.css">

Article

<documenthub-article 
  catalogid="catalog-id"
  documentid="document-id"
  language="en"  //optional
  headings="false"  //optional
  token="aaa.bbb.ccc"
></documenthub-article> 

Document

<documenthub-document 
  catalogid="catalog-id"
  documentid="document-id"
  language="en" //optional
  headings="false" //optional
  token="aaa.bbb.ccc"
></documenthub-document>

Form

<documenthub-form
  catalogid="catalog-id"
  documentid="document-id"
  language="en" //optional
  token="aaa.bbb.ccc" 
></documenthub-form> 

Page

<documenthub-page 
    catalogid="catalog-id"
    documentid="document-id"
    headings="false" //optional
    token="aaa.bbb.ccc"g"
></documenthub-page> 

Quiz