Designing FAQs on a slide with a scrolling window. Each FAQ has a hotspot. When the user clicks an FAQ, it opens in a lightbox slide. Working as designed.
However, am anticipating there'll be many FAQs, more than what will fit on one slide with a scrolling window.
Any ideas how of how I can present FAQs and keep it seamless and easy for the user to find what they're looking for? I'd hate to use SharePoint to display this information (boring).
Hi, Jodi -- Thanks so much for reaching out here! While I will defer to your fellow community members to share their own unique ideas and suggestions to assist, I thought I might pass along the following in case you'd like to take a look:
Sure thing, Jodi, and if you do decide to post over in the design forum, you may want to upload your file if you'd like advice on a certain set up you have in mind! Always helps if others can see what you have described!
Hi, Jodi -- Thanks for your reply and while I am not aware of an existing SL2 FAQ template similar to what you have shared, may I ask if you have access to Engage? Please see Nancy W.'s suggestion for how to make this work over here. And if you don't have Engage, you would always have to the option to test it out via the 30 day free trial.
Or, hopefully others can stop in to share some additional ideas to assist! :)
However, am anticipating there'll be many FAQs, more than what will fit on one slide with a scrolling window.
Hi Jodi,
How do you mean "more than what will fit on one slide with a scrolling window"? The whole idea behind a scrolling window is that you can put an unlimited amount of objects on the slide that will scroll vertically.
I appreciate you taking the time to respond. I may have 50+ questions and order for me to see them all I need to minimize the screen while creating them. Please see attached screenshot (ignore the blue rectangular, it's to cover proprietary info.). However, it is working as designed (see screenshot). I guess to me, it's just not as user-friendly while building the FAQs. Am I missing a tip or trick?
Yeh it can be a bit tricky working with such a deep scroll. The one thing that I have learnt is to forget about the scrollbar until al your questions and objects are complete. You want to have everything done and working, and only then drag it all into a scroll area.
With these things duplication is key. Also in order to have all your question line up nice and neat, working at the correct zoom percentage is important to easily ensure that all margins between questions are consistent.
I know you probably have it all working by now, but I share how I would do something like this.
1) Make a question text box in a nice dark color, you can change it later with a click of the format painter. Also add a trigger on the button, so everything is complete. I would make the box nice and big so that it can take anything from 1 to 3 lines of text.
Now you have one question, with working trigger, and a working layer with some dummy text and a close button.
2) Now all you have to do is duplicate the text box and the layer 50 times, and you will have all your questions.
So CTRL + Shift and drag the first box to duplicate until you have 10 boxes. Make sure you are not snapping to grid and only snapping to object.
Make for example a 2 px margin between your boxes.Now your first ten boxes are ready and looking like so:
3) So now there are 10, but you need 50. To make it easier, group the 10 boxes into a group, duplicate the group so that you have 5 groups. Then make your zoom nice and small, and just drag and lock your 5 groups below each other. It's very important that you always work at 100% when you need to align objects. So after you have created your groups, go back to 100% and make sure they all have the 2px margin.
Then just ungroup all your groups, and you will have a long list of individual questions with perfect margins like so:
4) Now you can go and change your question numbers and text. Then after you are done, its probably easiest to group all 50 questions into one group again.
5) Now move the group of the canvas, and insert the scrolling panel. Tip: Make the scrolling panelnice and small, it will make it easier to get your group in there. You can change it later.
6) Now drag the group with questions into the panel.
7) And now you can adjust the scrolling panel to the size and position you want.
8) Now you can just duplicate the answer layers 50 times. Then maximise the triggers panel and change the triggers quickly for each question.
Finally, you will also need to ungroup your questions again, otherwise your hover states won't work, if you have any.
Then you have all your questions working and then you can start the tedious task of getting all your text in place :)
I will also attach the project file.
It's a bit of a schlep, but yeh I think the key is to work methodically and do as much as you can before you start duplicating objects. But do make use of duplication and get it all as a whole working first before you start editing text, etc.
Don't know if that will help, just a not on how I would approach something like this.
Wow, Jacques! What a robust answer! Thanks so much for sharing your suggestions, and Jodi, please feel free to let us know if Jacques ideas will do the trick!
Thank you for taking the time to map the instructions out for me. I will totally try your approach. I have done something very similar but I think this way maybe easier to update and maintain.
13 Replies
Hi Jodi!
Hopefully some users will be able to chime in and share ideas and experience to assist you here with your design.
You may also find benefit in reaching out in our Building Better Courses forum, which tends to hold more design-related questions.
Check this out as well :)
Hi, Jodi -- Thanks so much for reaching out here! While I will defer to your fellow community members to share their own unique ideas and suggestions to assist, I thought I might pass along the following in case you'd like to take a look:
Hope that helps and you would also be welcome to post over in our Building Better Courses forum if you'd like! :)
Thank you both for your prompt responses.
Sure thing, Jodi, and if you do decide to post over in the design forum, you may want to upload your file if you'd like advice on a certain set up you have in mind! Always helps if others can see what you have described!
Hi Christie,
Is it possible to replicate this FAQ interaction in SL2? The below FAQ interaction was created in Studio 13.
Hi, Jodi -- Thanks for your reply and while I am not aware of an existing SL2 FAQ template similar to what you have shared, may I ask if you have access to Engage? Please see Nancy W.'s suggestion for how to make this work over here. And if you don't have Engage, you would always have to the option to test it out via the 30 day free trial.
Or, hopefully others can stop in to share some additional ideas to assist! :)
Hi Jodi,
How do you mean "more than what will fit on one slide with a scrolling window"? The whole idea behind a scrolling window is that you can put an unlimited amount of objects on the slide that will scroll vertically.
Thanks!
Hi Jacques,
I appreciate you taking the time to respond. I may have 50+ questions and order for me to see them all I need to minimize the screen while creating them. Please see attached screenshot (ignore the blue rectangular, it's to cover proprietary info.). However, it is working as designed (see screenshot). I guess to me, it's just not as user-friendly while building the FAQs. Am I missing a tip or trick?
Jodi
Hey Jodi,
Yeh it can be a bit tricky working with such a deep scroll. The one thing that I have learnt is to forget about the scrollbar until al your questions and objects are complete. You want to have everything done and working, and only then drag it all into a scroll area.
With these things duplication is key. Also in order to have all your question line up nice and neat, working at the correct zoom percentage is important to easily ensure that all margins between questions are consistent.
I know you probably have it all working by now, but I share how I would do something like this.
1) Make a question text box in a nice dark color, you can change it later with a click of the format painter. Also add a trigger on the button, so everything is complete. I would make the box nice and big so that it can take anything from 1 to 3 lines of text.
Now you have one question, with working trigger, and a working layer with some dummy text and a close button.
2) Now all you have to do is duplicate the text box and the layer 50 times, and you will have all your questions.
So CTRL + Shift and drag the first box to duplicate until you have 10 boxes. Make sure you are not snapping to grid and only snapping to object.
Make for example a 2 px margin between your boxes.Now your first ten boxes are ready and looking like so:
3) So now there are 10, but you need 50. To make it easier, group the 10 boxes into a group, duplicate the group so that you have 5 groups. Then make your zoom nice and small, and just drag and lock your 5 groups below each other. It's very important that you always work at 100% when you need to align objects. So after you have created your groups, go back to 100% and make sure they all have the 2px margin.
Then just ungroup all your groups, and you will have a long list of individual questions with perfect margins like so:
4) Now you can go and change your question numbers and text. Then after you are done, its probably easiest to group all 50 questions into one group again.
5) Now move the group of the canvas, and insert the scrolling panel. Tip: Make the scrolling panelnice and small, it will make it easier to get your group in there. You can change it later.
6) Now drag the group with questions into the panel.
7) And now you can adjust the scrolling panel to the size and position you want.
8) Now you can just duplicate the answer layers 50 times. Then maximise the triggers panel and change the triggers quickly for each question.
Finally, you will also need to ungroup your questions again, otherwise your hover states won't work, if you have any.
Then you have all your questions working and then you can start the tedious task of getting all your text in place :)
I will also attach the project file.
It's a bit of a schlep, but yeh I think the key is to work methodically and do as much as you can before you start duplicating objects. But do make use of duplication and get it all as a whole working first before you start editing text, etc.
Don't know if that will help, just a not on how I would approach something like this.
Tx!
You can view the published example here.
Wow, Jacques! What a robust answer! Thanks so much for sharing your suggestions, and Jodi, please feel free to let us know if Jacques ideas will do the trick!
Welcome, hope it helps a bit!
Hi Jacques,
Thank you for taking the time to map the instructions out for me. I will totally try your approach. I have done something very similar but I think this way maybe easier to update and maintain.
I'll let you know how it goes.
Many thanks,
Jodi
Thanks, Jodi! Updates are always appreciated. :)
This discussion is closed. You can start a new discussion or contact Articulate Support.