Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement TOC navigation #5551

Closed
tsv2013 opened this issue Jan 23, 2023 · 2 comments · Fixed by #5552
Closed

Implement TOC navigation #5551

tsv2013 opened this issue Jan 23, 2023 · 2 comments · Fixed by #5552
Assignees
@tsv2013
Labels
enhancement
Milestone
v1.9.77

Comments

@tsv2013
Copy link
Member

tsv2013 commented Jan 23, 2023

Survey navigation/Table Of Contents panel helps survey respondents go through a survey and directly access a required questionnaire item. It is especially useful for large surveys: when there are a lot of questions in a questionnaire. With a navigation bar, respondents can easier access questions and have greater control over the flow.

Currently, SurveyJS has the following navigation options:

Suggestion: implement a left-side panel / a sidebar navigation.

Customer requests:

Third-party alternatives

  • A Sidebar

https://www.qualtrics.com/support/survey-platform/survey-module/survey-flow/advanced-elements/table-of-contents/

Image

See also the internal issue - https://github.com/surveyjs/service/issues/702
@tsv2013 tsv2013 self-assigned this Jan 23, 2023
tsv2013 added a commit that referenced this issue Jan 23, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - changed app markup and li…
098d0a3 
…st selection behavior
tsv2013 added a commit that referenced this issue Jan 23, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed rendering
aaf725d
@OlgaLarina OlgaLarina added this to the v1.9.71 milestone Jan 26, 2023
@JaneSjs
Copy link
Contributor

JaneSjs commented Jan 26, 2023

Consider supporting TOC out of the box: currently, no support on small screens.
Customer feedback from T10404 - How to setup an external PageSelector for a Multi-page Survey.
image

@tsv2013
Copy link
Member Author

tsv2013 commented Jan 27, 2023

Adaptivity design -
https://www.figma.com/file/7QOeoDDCaPuqzWAROR0kDY/Creator?node-id=15839%3A137655&t=mSumhDwpJhmebUFc-4

tsv2013 added a commit that referenced this issue Feb 1, 2023
@tsv2013
Work for #5551 - Implement TOC navigation
55dbb3a
@OlgaLarina OlgaLarina modified the milestones: v1.9.71, v1.9.72, v1.9.73 Feb 6, 2023
tsv2013 added a commit that referenced this issue Feb 13, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - added TOC navigation to r…
3a2236b 
…eact
tsv2013 added a commit that referenced this issue Feb 13, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - added TOC navigation to vue
5f0e0bc
tsv2013 added a commit that referenced this issue Feb 14, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - added TOC navigation to a…
c8332f1 
…ngular
tsv2013 added a commit that referenced this issue Feb 14, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - added toc navigation styles
872cbf7
@OlgaLarina OlgaLarina modified the milestones: v1.9.73, v1.9.75 Feb 16, 2023
tsv2013 added a commit that referenced this issue Feb 16, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - make containers don't dra…
1148116 
…w themselfs if empty
tsv2013 added a commit that referenced this issue Feb 16, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed typings build
71931c9
tsv2013 added a commit that referenced this issue Feb 16, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed toc styles
cb6d8c7
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed angular build
e6496be
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed top progress bar co…
6a65b80 
…ntainer
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed component names cas…
746baf0 
…e sencitivity
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed component names case
20a5275
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed errors in vue progress
3953436
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed angular markup tests
0e1d40f
tsv2013 added a commit that referenced this issue Feb 17, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed progress buttons in…
55d012e 
… vue
tsv2013 added a commit that referenced this issue Feb 20, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fix vr-tests
7f1f51f
tsv2013 added a commit that referenced this issue Feb 20, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - reanimated timer panel
3d1f8cd
@OlgaLarina OlgaLarina modified the milestones: v1.9.75, v1.9.76 Feb 21, 2023
tsv2013 added a commit that referenced this issue Feb 21, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed vue component list …
9bb22e6 
…update
tsv2013 added a commit that referenced this issue Feb 21, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed angular f-tests
2ecada9
tsv2013 added a commit that referenced this issue Feb 21, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed timer panel compone…
b2fbbc3 
…nt registration in angular
tsv2013 added a commit that referenced this issue Feb 21, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - renamed addons to layout …
0ba5f1c 
…elements
tsv2013 added a commit that referenced this issue Feb 21, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed react top bar style
4467a7a
tsv2013 added a commit that referenced this issue Feb 22, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - attempt to fix timer posi…
9d859d6 
…tion
tsv2013 added a commit that referenced this issue Feb 22, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed timer panel rendering
1028f98
tsv2013 added a commit that referenced this issue Feb 22, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed ko components conta…
ae7562f 
…iner update
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed vr-tests - header/f…
a3cfa5d 
…ooter containers rendering - no wrapper now
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed f-test and skipped …
438c622 
…one vr-test for Vue
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed f-test for all plat…
545f726 
…forms
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - refactoring
e9852d4
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed markup test
e3c96be
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - added f and vr tests
5ab85cf
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - attempt to fix f-tests
6d636d8
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - style file renamed
e877422
tsv2013 added a commit that referenced this issue Feb 27, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed survey body modific…
8a43f2f 
…ator
tsv2013 pushed a commit that referenced this issue Feb 27, 2023
Work for #5551 - Implement TOC navigation - fixed markup test snapshot
ea1a5c0
tsv2013 added a commit that referenced this issue Feb 28, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - fixed vr-test
33bd52f
@OlgaLarina OlgaLarina modified the milestones: v1.9.76, v1.9.77 Feb 28, 2023
tsv2013 added a commit that referenced this issue Mar 1, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - introduced TOC control su…
1509fee 
…rvey properties
tsv2013 added a commit that referenced this issue Mar 1, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - try to fix vr-test
d02936c
tsv2013 added a commit that referenced this issue Mar 1, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - try to fix f-test
f3a7953
@OlgaLarina OlgaLarina linked a pull request Mar 2, 2023 that will close this issue
Feature/5551 toc navigation #5552
Merged
tsv2013 added a commit that referenced this issue Mar 6, 2023
@tsv2013
Work for #5551 - Implement TOC navigation - renamed ids
8555644
tsv2013 added a commit that referenced this issue Mar 6, 2023
@tsv2013
Feature/5551 toc navigation (#5552)
59beea1 
* Work for #5551 - Implement TOC navigation - changed app markup and list selection behavior

* Work for #5551 - Implement TOC navigation - fixed rendering

* Work for #5551 - Implement TOC navigation

* Work for #5551 - Implement TOC navigation - added TOC navigation to react

* Work for #5551 - Implement TOC navigation - added TOC navigation to vue

* Work for #5551 - Implement TOC navigation - added TOC navigation to angular

* Work for #5551 - Implement TOC navigation - added toc navigation styles

* Work for #5551 - Implement TOC navigation - make containers don't draw themselfs if empty

* Work for #5551 - Implement TOC navigation - fixed typings build

* Work for #5551 - Implement TOC navigation - fixed toc styles

* Work for #5551 - Implement TOC navigation - fixed angular build

* Work for #5551 - Implement TOC navigation - fixed top progress bar container

* Work for #5551 - Implement TOC navigation - fixed component names case sencitivity

* Work for #5551 - Implement TOC navigation - fixed component names case

* Work for #5551 - Implement TOC navigation - fixed errors in vue progress

* Work for #5551 - Implement TOC navigation - fixed angular markup tests

* Work for #5551 - Implement TOC navigation - fixed progress buttons in vue

* Work for #5551 - Implement TOC navigation - fix vr-tests

* Work for #5551 - Implement TOC navigation - reanimated timer panel

* Work for #5551 - Implement TOC navigation - fixed timer position

* Work for #5551 - Implement TOC navigation - fixed vue component list update

* Work for #5551 - Implement TOC navigation - fixed angular f-tests

* Work for #5551 - Implement TOC navigation - fixed timer panel component registration in angular

* Work for #5551 - Implement TOC navigation - renamed addons to layout elements

* Work for #5551 - Implement TOC navigation - fixed react top bar style

* Work for #5551 - Implement TOC navigation - attempt to fix timer position

* Work for #5551 - Implement TOC navigation - fixed timer panel rendering

* Work for #5551 - Implement TOC navigation - fixed ko components container update

* Work for #5551 - Implement TOC navigation - fixed vr-tests - header/footer containers rendering - no wrapper now

* Work for #5551 - Implement TOC navigation - fixed f-test and skipped one vr-test for Vue

* Work for #5551 - Implement TOC navigation - fixed f-test for all platforms

* Work for #5551 - Implement TOC navigation - refactoring

* Work for #5551 - Implement TOC navigation - fixed markup test

* Work for #5551 - Implement TOC navigation - added f and vr tests

* Work for #5551 - Implement TOC navigation - attempt to fix f-tests

* Work for #5551 - Implement TOC navigation - style file renamed

* Work for #5551 - Implement TOC navigation - fixed survey body modificator

* Work for #5551 - Implement TOC navigation - fixed markup test snapshot

* Work for #5551 - Implement TOC navigation - fixed vr-test

* Work for #5551 - Implement TOC navigation - introduced TOC control survey properties

* Work for #5551 - Implement TOC navigation - try to fix vr-test

* Work for #5551 - Implement TOC navigation - try to fix f-test

* Update new property descriptions

* Work for #5551 - Implement TOC navigation - renamed ids

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
Co-authored-by: Roman Tsukanov <roman.tsukanov@devexpress.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tsv2013 tsv2013

Labels
enhancement
Projects
None yet
Milestone
v1.9.77
Development

Successfully merging a pull request may close this issue.

Feature/5551 toc navigation surveyjs/survey-library
3 participants
@tsv2013 @OlgaLarina @JaneSjs