I made a global glossary using storyline and i'ma actually implementing the research functionnality using storyline.
To have a nice list of words, I used a scrolling panel.
Is it possible to jump to the position of a certain object in the scrolling panel ? I don't want to only send the learners to the slide, as he would have to scroll all the way down to the word he's searching.
Is that possible or should I just try another approach ?
Great question! There isn't a way to jump to a specific place in a scrolling panel. However, there might be a workaround. I'll pass it over to our community members to share if they've achieved something similar!
I had that SAME question! Glad it wasn't only me. It is called a tilde (~). You can find it on your keyboard to the left of the number 1 key. (See attached.)
This video is great and I think it may solve a problem I'm having, but the author left out some details that I just can't figure out.
Note: I have zero experience in javascript, but I get that I need to tweak some text in the code.
This is the code he used:
var boxthree = document.querySelectorAll('[data-acc-test~="msgthree"]');boxthree[0].scrollIntoView({block: "end", inline: "nearest"});
Can you tell me what "boxthree" is? I'm guessing a variable. Did he create a variable in Storyline? If so, what is the value I should assign it in Storyline? What does it represent? Where is it used? I know I need to tweak this to whatever I want, but I don't know where this is coming from.
IF I can figure out what I'm supposed to do with "boxthree" I might be able to use this solution.
A 'boxthree' is a variable name. This variable was not created in Storyline. You can rename it to something more meaningful to you. In summary, this JavaScript code selects all HTML elements that have the data-acc-test (I think it should be data-acc-text) attribute containing the word 'msgthree' and stores them in the variable 'boxthree'. You can then use this variable to access and manipulate these selected elements in your JavaScript code. Now, in order for this code to work, you need to make sure that msgthree is typed in Accessibility text box in Storyline. You can type what ever you like but ensure that this value is updated in the code above as well. For example, my code could look like this:
var myScrollObjects = document.querySelectorAll('[data-acc-test~="scrollobj"]'); myScrollObjects[0].scrollIntoView({block: "end", inline: "nearest"});
If you have two objects with the same data-acc-text attribute but you only want to move the second one, you would execute the following line:
myScrollObjects[1].scrollIntoView({block: "end", inline: "nearest"}); // in JavaScript the indexing starts from 0, not 1
1. I understood the whole accessibility text thing, but I just couldn't get past that the variable part is literally just whatever I want and it didn't have to refer to something specific. I thought I had to create a variable, for example, that matched the object's name or it had to match a variable I needed to create in Storyline, or something along those lines. But, it's literally just anything I want and it doesn't have to refer to anything.
2. But, here's where you solved it for me...I had a typo! And you pointed it out...I had data-acc-test when it should have been data-acc-text.
I tested it out and it works. I can't believe I made such an simple error. Thank you so much!!! :)
7 Replies
Hello Thibault!
Great question! There isn't a way to jump to a specific place in a scrolling panel. However, there might be a workaround. I'll pass it over to our community members to share if they've achieved something similar!
That's actually not true. Using JS you can jump to a point in a scrolling panel.
See here - https://www.youtube.com/watch?v=c_WjEe0qzUo
In the JavaScript code, what is the strange character immediately following data-acc-text?
I had that SAME question! Glad it wasn't only me. It is called a tilde (~). You can find it on your keyboard to the left of the number 1 key. (See attached.)
This video is great and I think it may solve a problem I'm having, but the author left out some details that I just can't figure out.
Note: I have zero experience in javascript, but I get that I need to tweak some text in the code.
This is the code he used:
var boxthree = document.querySelectorAll('[data-acc-test~="msgthree"]');boxthree[0].scrollIntoView({block: "end", inline: "nearest"});
Can you tell me what "boxthree" is? I'm guessing a variable. Did he create a variable in Storyline? If so, what is the value I should assign it in Storyline? What does it represent? Where is it used? I know I need to tweak this to whatever I want, but I don't know where this is coming from.
IF I can figure out what I'm supposed to do with "boxthree" I might be able to use this solution.
A 'boxthree' is a variable name. This variable was not created in Storyline. You can rename it to something more meaningful to you. In summary, this JavaScript code selects all HTML elements that have the data-acc-test (I think it should be data-acc-text) attribute containing the word 'msgthree' and stores them in the variable 'boxthree'. You can then use this variable to access and manipulate these selected elements in your JavaScript code. Now, in order for this code to work, you need to make sure that msgthree is typed in Accessibility text box in Storyline. You can type what ever you like but ensure that this value is updated in the code above as well.
For example, my code could look like this:
var myScrollObjects = document.querySelectorAll('[data-acc-test~="scrollobj"]');
myScrollObjects[0].scrollIntoView({block: "end", inline: "nearest"});
If you have two objects with the same data-acc-text attribute but you only want to move the second one, you would execute the following line:
myScrollObjects[1].scrollIntoView({block: "end", inline: "nearest"});
// in JavaScript the indexing starts from 0, not 1
Thank you!!! You solved my problem!
1. I understood the whole accessibility text thing, but I just couldn't get past that the variable part is literally just whatever I want and it didn't have to refer to something specific. I thought I had to create a variable, for example, that matched the object's name or it had to match a variable I needed to create in Storyline, or something along those lines. But, it's literally just anything I want and it doesn't have to refer to anything.
2. But, here's where you solved it for me...I had a typo! And you pointed it out...I had data-acc-test when it should have been data-acc-text.
I tested it out and it works. I can't believe I made such an simple error. Thank you so much!!! :)