documenthub-web-components

DocumentHub Web Components

Less is more. Now with DocumentHub Web Components you can use customizable UI features right in your Application.

1. How to...

1.1 React Usage

From the terminal run npm i documenthub-web-components in the root of your application.

Import module via import { Article, ... } from "documenthub-web-components"; where you want the component to be used.

1.1.1 Components

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
/>

1.2 Other Usage

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": ?
}