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?
Thanks,
Santosh
We have closed this ticket because another page addresses its subject:
TOC CustomizationHi,
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?
Thanks,
Santosh
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:
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.
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.
Obtain the Table of Contents navigation element and set the itemComponent
property to the custom component name.
JavaScriptsurvey.findLayoutElement("toc-navigation").data.listModel.itemComponent = "sv-custom-toc-item";
I hope this example helps. Please let me know if you have any questions or require further assistance.
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