June 30, 2021
Side Scrolling State Changes – JavaScript Idea Series
Comments
(2)
June 30, 2021
Side Scrolling State Changes – JavaScript Idea Series
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 155 people
(2)

This idea is about taking a somewhat simple and common task – changing states – and adding a little flair.

We have a single object with 10 states along with a Previous and Next button. Now – we could just put a single action to go to the next and previous states accordingly but that would update the states in place.

The JavaScript idea here animates the object off of the stage – then changes the state and hides it, animates it to the other side while hidden, and then animates the new state onto the stage from the other side.

This gives the effect of separate objects coming and going.

**I originally tied this action to the scroll wheel so that you could scroll a single notch at a time for a new avatar.
**Tons of possibilities! Want a vertical scroller…? Just change the code to say  ‘top’  instead of  ‘left’.

Feel free to share your thoughts on this idea in the comments below and share some ways this could be used in a project to liven things up.

Preview Project

<—— JavaScript Idea Series

2 Comments
2021-12-16 19:21:28
2021-12-16 19:21:28

Everything that I create has to be accessible. While Captivate has a TOC, it is not accessible, thus I am unable to use it. However, if there is a way to make TOC that can be hidden or shown that can have Accessibility Text so screen readers (like JAWS) can read it, that would be wonderful.

Another thing is that screen readers typically read a variable’s name and not it’s value. Let’s say you had a variable labeled $$SalesPrice$$. And let’s say the the Sales Price for your example is $4.75.  Instead of (saying/reading) “Four dollars and seventy five cents” it currently reads “dollar sign, dollar sign Sales Price dollar sign, dollar sign”.

What I want to do is show progress. You are on slide 25 of 53 slides (where 25 & 53 are variables). Currently I cannot do that for accessibility reasons, not because Captivate has an issue with it.

So, if an object can be created with JS that could then be read differently than how Captivate renders it, maybe then the screen reader would interpret it better.

Like
(1)
>
karlt15940862
's comment
2021-12-17 21:19:23
2021-12-17 21:19:23
>
karlt15940862
's comment

I do not have any experience with screen readers and have no way to test anything.

How about if we remove the variable from the smartShape and display our text using JavaScript?

You could give something like this a try (see attached pic).
I would be interested to know if it works for you.

Attachment

Like
Add Comment