Ability to scroll using javascript actions in the All New Captivate , 2023.
With the release of all new Adobe Captivate 2023, instructors have the feasibility to author E-learning content with the ability to scroll vertically apart from the traditional slide based method. The feature allows authors to stack content blocks and other available widget containers vertically without any restriction of the slide height. Learners would be presented with an option to access the extended content, with the availability of scroll bar while consuming the content on a browser window.
With the introduction of this feature it also becomes imperative that tool allows me an interaction to scroll content vertically may be on a click of a button/or any other interactive content, but before you realise there is no such action in the interaction panel, let me remind you of the magic wand that all new Captivate 2023 inherits from Captivate Classic!
Its the all powerful javascript editor under interactions and we can utilize a javascript function to scroll to the required element on the page.
let me put the code snippet here :
const content_block = document.getElementsByClassName(“cp-cb__container cp-cb__container”);
content_block[5].scrollIntoView({behavior: “smooth”,});
to understand the above code , you can refer to my video.
Happy Captivating!!
We would like to utilize this functionality in our new Captivate (12.4) long scroll projects.
We have created a test project to mimic the one in the video – but when adding the javascript, the Done button is not enabled.
We have tried changing the snippet from content-block to text_block without success. We are unfamiliar with javascript and are not sure how to proceed.
Any help or insight would be greatly appreciated.
Thank you!
Attachment 
Hi Lieve,
scenario 1:
If its more like you don’t want to allow learners to click and scroll until prior interactions are complete we can keep the following content sections hidden(hiding content section does not reserve space) and allow scroll once interaction is complete. So your interaction would go like:
if standard state of UIC ( one or more be viewed )
then
1) Show content block :
2) followed by javascript code to scrollIntoView()
scenario 2:
show following content only after certain content is consumed which may not necessarily have an interaction, say the criteria could be time spent .. we can write javascript function to prevent scroll until that time.
Let me know if any one of the above fits into your use-case.
regards,
Aditya
Understood, but it would be a lot easier if we could have Shared and Advanced actions in the new version. For many developers JS is a bridge too far as I learned in the 15 years that I provided support to Capitvate users. The point-and click advanced actions, and certainly the Shared actions were a lot easier to use. Not everyone has a programming skills background (I used old Fortran for my final project as engineer, probably before you were born).
If I have time I would look into using bookmarks and the Timeline to possibly achieve the scenario, to avoid JS.
Agreed.. javascript is not a substitute for the direct functionality… But as we explore more use-cases around scrolling to have seamless integration with scroll method of course consumption, few of the most needed things can be handled smoothly with js..
Meanwhile do let me know when you happen to try this with timeline and bookmarks.. you can definitely time your content blocks.. and allow them to appear on a bookmark incrementally!
Sure, when I have found time to try out that idea, which could be an alternative easier to understand because Timeline gives visual clues, which is different from just inserting a script created by someone else.
Hello
This interaction is exactly what we are trying to do.
We use Captivate 12.4.
We have one slide with many text and image boxes to create a long scroll project.
We want our learners to be able to return to the project and review one section if they want, instead of scrolling through the full project.
I have created a project to mimic the one you have in the video, and I have pasted in the javascript text. But it does not work. The Done button is not enabled.
I am not familiar with javascript, and I do not know if the content blocks have a different name now.
Any help or insight would be greatly appreciated.
Thank you!
Attachment 
How do you cope with ‘Forced View’ which is – sadly – often required by clients if you use infinite scrolling?
Hey Lieve! I do share a distaste for forced navigation. But I can say that our learners and designers both like to use a “hidden” section at the bottom of a scrollable page for interaction feedback. As means of ending a slide in learning summary or knowledge check interaction, revealing that last little bit of feedback for the learner with a short little scroll is a very natural feeling way to “end” that slide. one fully baked thought per scroll.
much scrolling content beyond that disrupts that “complete thought” feeling to the slide. so definitely toying with the scrollability of the slide is something to be done with finesse, it’s not to be overlooked I think.
When I first started, most computer users were used to the PowerPoint, slide by slide experience which for years is all the Cp could mimic. Now our users, my design team is finding, are very used to the “infinite scroll” of social media. By mimicking that, we are getting very positive responses.
Thanks for explaining the advantage of scrolling pages. I don’t agree with CP mimicking PPT at all however. For responsive projects both in Breakpoint views and Fluid Boxes it was already possible to have scrollable pages. Although it is much easier in version 12, one of the few positive features (I am not a fan in its present status). Also the possibility to have smooth slide transitions made the ‘slide per slide’ scenario not as visible as in PPT. I mean: learner wouldn’t even see that she/he was navigated to another slide. That is a reason why I don’t understand that version 12 makes it so difficult to have those same smooth slide transitions? The only way to mimick them is to have a bookmark at the last frame with the option ‘Go to Next Slide’. You cannot link that ‘interaction’ to the On Exit Slide event. The fact that we lost dynamic bookmarks (which I used often under the label ‘micro-navigation’) is even worse.
Sure, you need surprises for the learner, there were a lot of ways to achieve that besides having interaction feedback at the bottom of a scrollable page, but I understand your appreciation.
You must be logged in to post a comment.
