Suggestion T14475
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

TOC Customization

Is it possible to show the progress bar based on the pages?

created a year ago

Hi,

We are having a need of showing progress of answered questions based on the pages like below screenshot.

Is it possible to implement with Survey JS?

Clipboard-File-1.png

Thanks,
Santosh

Comments (3)

    Hello Santosh,
    You can obtain information about the user progress using the survey.getProgress function. The value returned by this function depends on the survey.progressBarType property value. By default, it is set to pages. This means that you will get information on how many pages of total number of pages user has completed.

    Please let me know if this API works for you.

      Hi Jane,

      Thanks for your reply, Actually we need to display total answered questions out of total questions on that page in the siderbar panel where we are displaying the page TOC.

      Thanks,
      Santosh

        Hi Santosh,
        Thank you for the clarification. Unfortunately, Table Of Contents doesn't currently have an option to render information about user progress per pages. I forwarded the corresponding inquiry to our developers for further consideration: TOC Progress Bar - Display the total number of asnwered questions per page within TOC.

        Meanwhile, you can implement a custom table of contents and display the required information. To implement a custom table of contents, register a custom component and add it as a layout item to the left container.

        An example of how to implement a custom layout item is available at Percentage Progress Bar. A template for a built-in TOC Angular component (ProgressTocComponent) is available in our source code: progress.component.ts. You can review the component and its template, and register a custom TOC which would display the total number of questions answered per page.

        I hope this information can help you. Please let me know if you have further questions.

        Thanks

        Answers approved by surveyjs Support

        created 4 months ago (modified 4 months ago)

        Hello Santosh,
        We introduced an option to define a custom item template for a Table of Contents. Please refer to the following demo: View CodeSandbox for Angular.

        This demo shows how to display the number of answered out of total questions per page and highlight a page item based on the answer progress.

        Follow these steps:

        1. Implement a component that renders item markup.
          The component accepts the item configuration object as a prop. You can use its item property to access the IAction which corresponds to the current page item within a TOC. Use this object to retrieve information about the current page and its answered and total question count.

        2. Register the component so that it can be accessed by name.
          In Angular, register the component in AngularComponentFactory as shown in the toc-custom-item.component.ts file.

        3. Obtain the Table of Contents navigation element and set the itemComponent property to the custom component name.

        JavaScript
        survey.findLayoutElement("toc-navigation").data.listModel.itemComponent = "sv-custom-toc-item";

        Clipboard-File-1.png
        I hope this example helps. Please let me know if you have any questions or require further assistance.