Dear JS Developers---I have designed a web survey. it has 30 questions (qs). I want to give users the option of [a] seeing one q at a time (and go forward or backward), or [b] seeing all qs at the same time and use standard browser scroll-up and scroll-down. users should be able to switch between [a] and [b] at any time. moreover, if I am on a small screen device (e.g., an iPhone), the default should be [a], and when I am on a large screen device (e.g., a 30" monitor where the browser has been maximized), the default should be [b].

the "submit" button can and should remain at the bottom of the webpage. I obviously know where I want to break the qs.

this is useful not only for surveys, but for reading, for example. uses something a little bit like it, where one can switch to a "View All" mode.

can you please give me some pointers to a JS library or function where I would find support to do this easily? I presume that this cannot be done with .css alone.