Need help on creating a mobile-first website with quiz-like presentation (HTML CSS & Javascript)

I need some help with creating a mobile-first website with quiz-like presentation. The idea is to create a website layout similar to this: https://ig.ft.com/climate-game/

• One-page application where all the content is loaded up when first opening the page.
• There will be no score or logic behind it, the idea is to display text and images in very bite-size manner.

I am basically trying to find a javascript trick to display content on a page one at a time and with a press of a button it would display the next page or smoothly scroll down the page to the desired part (scrolling would have to be disabled). The main issue I am having is that the way the content is displayed and loaded (like when the button is pressed how the page will load and from where).

I cannot share any of the code or more context about it, sorry!

Any tips, articles or videos with tutorials or explanations on how to create a website like this is all welcome.

Thank you for the help!

Comments

[Aileen Rae]

That sounds like a fun challenge.

It's hard to offer help without looking at the code you have so far but I can try to break down the problem and offer some pointers.

First of all, figure out how to get one "page" which takes up the full screen with HTML and CSS. Try looking for "responsive fullscreen landing page" tutorials for this. If it needs to be mobile-first, "responsive" is important.

Next, create all your "pages" so they're all on the same page. Try giving all but one of these the CSS display:none.

Once you have all your pages, you'll need to write some JavaScript to add or remove display:none on a button click. Try searching for something like "JavaScript show/hide element onclick".

Hopefully this helps you get started. Good luck!

[Eixi]

thank you for the tips! :D

[JoelBonetR 🥇]

As @aileenr said you need to use a responsive layout (check CSS Flex, a.k.a. flexbox) and CSS property display: none hidding and showing blocks as you make progress through the quiz (the opposite of display: none would be the default display for a given HTML tag (i.e. a div is display: block by default) or what you used in your display (if you need so, change none for flex instead).

You said there's no logic behind but there's a bare minimum I can think of. That is to store the result of the quiz somewhere, be in a remote DB or in a cookie to present the results to the user afterwards and/or to remember in which step the user is so they don't need to start over again if they reload the site.

I guess a multi-step form will suit perfectly on this purpose. Also you called the SPA keyword but you don't really need a framework or lib for building SPAs (Angular, React...) on that. You can use one or not, it's up to your election.

Best regards