Table Of Contents - Visually indicate the completed and uncompleted pages

[JaneSjs]

User Issue: T15473 - How to change toc dynamically? https://surveyjs.answerdesk.io/internal/ticket/details/T15473

_We would also like to show 2 visual indications as below -

A green check mark icon to indicate completed pages A small orange circle icon to indicate incomplete pages which will turn to green checkmark once page is complete.

We have a 9 page survey with about 6-7 long questions in each section. Such a visual indication would really help users.

Both these icons are in addition to a red start symbol to indicate pages in error.

Thank you, Ravi_

[JaneSjs]

Use the Markdown feature to visually indicate completed/uncompleted pages.

The following demo shows how to highlights navigation titles of completed/uncompleted pages: View CodeSandbox.

Within the survey.onTextMarkdown function, use the isCompleted flag (const isCompleted = pi.questionCount === pi.answeredQuestionCount) to determine whether or not a page was completed. If it was, highlight a navigation title by applying required CSS styles.

survey.onTextMarkdown.add((sender, options) => {
    const el = options.element;
    if (!el || el.getType() !== "page") return;

    const page = el;
    const pi = page.getProgressInfo();
    const isCompleted = pi.questionCount === pi.answeredQuestionCount;
    let html = "";
    // Highlight complete/incomplete pages
    if (isCompleted) {
      html =
        '<span style="background-color: lightgreen">' +
        options.text +
        "</span>";
    }
    options.html = html;
});

[JaneSjs]

+1 T16057 - Related To TOC https://surveyjs.answerdesk.io/internal/ticket/details/T16057

[JaneSjs]

The following demo shows how to implement a custom TOC item and:

• Display information about the answered and total questions per page.
• Highlight a TOC item with Red/Yellow/Green depending on the number of answered questions.

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 React and other JS applications, register the component in ReactElementFactory as shown in the CustomTocItem.jsx file. In Angular, register the component in AngularComponentFactory as shown in the toc-custom-item.component.ts file. In Vue, implement the CustomTocItem component as shown in the CustomTocItem.vue file and register it within application components.

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

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

   • View Demo for JS
   • View Demo for React
   • View Demo for Angular
   • View Demo for Vue