Interactive how to

HTML & CSS
1

I have been working on something for weeks without a success. I wish you could help me out on this.

What I’m trying to achieve is to create an interactive step-by-step “how to” webpage where it should ask me questions and provide me steps based on my answer. Just like an interactive mindmapping but in a text version and doesn’t branch out of the view.

Let’s say:

Interactive Page: “Do you know how to operate a computer?” (Yes button) | (No button)
Users: “Yes” Then it will show a different question.
Interactive Page: Please power on the computer. Ok? (Yes button) | (No button)
Users: “Yes” Then it will show the next step.
Interactive Page: Please log in to your account on prompt. Ok (button)

That’s what I want to achieve. I also want to have a back button just in case the user put in the wrong answer. I wish you could help me out.

Thank you.

Best regards,

2

Normally you’d use JavaScript for this. I can think of a very basic way to do it just with HTML and CSS, but that’s probably not what you are looking for.

You could do it with CSS by perhaps hiding the various questions until a link to them (fragment identifier via an id) is clicked, at which point they are made visible via the :target pseudo class.

Using this method, the back button should also still work nicely.

3

Perhaps if you show us how far you have got so far then we can make suggestions based on what you have tried so far.

As Ralph said JS would normally be used for this and you just hide or show a div as required.

5

Yes. In post #2 I made a suggestion. :slight_smile:

7

It’s fine if you don’t understand what was suggested. We can make further suggestions. Just make sure to acknowledge what’s been said so far and indicate what level of help you need. :slight_smile:

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.