Lectora - Wipe Image to See Before and After Content

it works perfectly until I move it to the larger module file.

Where would I go to ensure draggerXpos and draggerYpos are not missing? What do I need to add?

Add these 2 variables just in the Variable Manager like this.

There was an extra bit of code. I kept it based on your statement underneath. "For all the scripts listed here should be a

min.js

and a

min.js.map

"

This matches exactly.

Still the same error.

I am not given access to our LMS so I tried it in SCORM cloud and the same thing. Does not work.

Next, I will go back through this chat and review everything carefully.

I could normally import it in Lectora Online and in the latest version of Lectora desktop.

Zipped that desktop version as a project for you.

here is the zip.

I am receiving the follow message when trying to open your file.

That indicates that the Javascript library GSAP cannot be found. Doublecheck that the 'include jQuery GSAP' HTML Object has these Additional Files.

For all the scripts listed here should be a min.js and a min.js.map

If thats all fine, then indeed somehow when you publish to ReviewLink...it goes wrong.

You can try skipping ReviewLink, publish to Scorm and test it on your LMS.

Kind regards,

Math

So all perfect now ! :-)

Lectora Desktop project added.

thank you for your persistence on this. I will get working on this now.

I was able to get it to work!!!! I modified you example so the interaction would work as soon as the page showed.

However,

The bar is not in the center of the image upon Is there a way to fix this? If you give me an idea of where to look I will try to fix it.

And when viewing in Preview Page in Browser (Edge) the following message and I am not sure how to fix:

thank you again. I was able to open it and will start playing to see what you did and add my test graphics too.

I have only trained myself on desktop and am learning the basics and advanced stuff (like this) as I need it. TRUELY appreciative of your time.

Well now this works.

So i commented out the lines as stated above. Somehow Lectora Desktop's localhost is different than the Online version...

And doublechecked some of the positioning code to ensure its centered.

Lectora Desktop project added.

Kind regards,

Math

PS. Depending on the width of your dragging element you might need change this line.

gsap.set(".dragger", { x: "-=20"});

This sets the dragger 20px to the left so its nicely aligned.

You could use the function getElementProperty() to get the actual width of the dragger element.

Also setting the x of the dragger needs to happen after the bounds of the draggable is set... ( bounds: ".gallery" ) else it will miscalculate.

PPS.

Still noticing some issues in Edge and Firefox. Apparently the clip doesnot work untill the first drag. In Chrome it works immediately. Trying if delaying the function helps... Nope in Edge it enables the clipping only when drag/clicking the dragger.

:-) Adding an onDrag() to the script fixes this also in Edge and Firefox.

Im quite sure this is doable with or without a bit of Javascript. Alas your sample doesnot show anywhere, so its hard to see what is going wrong. Basically you can do it in 2 ways. Use 1 image and change that with CSS to show a second version of it and clip both to show them partially. Or using 2 separate images and clip those. Making a sample of the second method now.

Here you see the first step of it... Added 2 images and clipping them with CSS.

As you can see in the gif added, basically it works. Still some issues with the correct positioning of the draggable element that show/hides the before/after image, but that is a bit of finetuning. I donot have the time now to go into that alas.

Adding the Lectora Online package so you can continue with it.

Kind regards,

Math

So apparently 2 variables missed in your version. draggerXpos and draggerYpos. Adding these all worked in local publishing. I also published to Scorm and tried it on our LMS ( Canvas, which is a very picky LMS ) and also there it worked perfect. It however didnot work on ReviewLink, as i did get my previous version working on ReviewLink i do suspect something else in your title prevents it from working properly on ReviewLink.

Adding my fixed working version and the published Scorm.

Kind regards,

Math

So doublechecked the latest version and in the end getting it to work on ReviewLink was simple enough. Apparantly missed the CSS plugin in the files, so added that. And on publishing to ReviewLink do ensure you have these settings in HTML.

Then it works.

Kind regards,

Math

I couldnot resist improving it. So i got the positioning working on the slide. As you can see in the added gif ( somehow i cannot publish to Review as i get errors my password isnot correct ? ).

Only thing missing is the position at start...thats not correct yet. I guess thats in the CSS.

Added the package.

Kind regards,

Math

you are amazing!!! Thank you for taking the time do help and to provide the files as well.

After lunch I will look at your zip and hopefully follow-up one last time on this item to report a success.

MUCH

appreciated. :)

I have no idea what is going on. I uploaded your 4th attempt as is to review link with the options you recommended and received the following message:

I am not that familiar with Lectora, but

I am beginning to think that the issue is on my end.

I tried and it does not work. I tested (in Edge) in Preview Browser and Review Link.

I have included a word file so you can see how I tried to figure the errors out, but I just don't know to problem solve java/ js.

If/ When you have time I would appreciate more help. I am even willing to send a zip file privately.

Side note - wouldn't it be wonderful if ELB would create a wireframe with a slider interaction such as this!

Commenting out these lines in the desktop version in the generic Javascript functions HTML object at least fixes those errors in all browsers.

In this function:

function initialSetup(){

console.log("docLoaded -> initial setup");

//pageDIV = getCurrentPageDiv();

//without this line, plugins will not be available...

gsap.registerPlugin(InertiaPlugin,CSSRulePlugin,Draggable);

//getHTMLNamesFromLectora();

}

It doesnot yet center the dragging element properly at start... Trying to fix that now in the desktop version.

this is beyond what I was asking for (but wanting to achieve). I will try it out right now. THANK YOU! THANK YOU! THANK YOU!

I have not used CSS but will give it a try.

UPDATE - I tested in Chrome and the same challenges occur.

and I reviewed my file and can not see that I added anything to make these errors occur.

It is as if the transitions are getting confused from group 1 to 2 to 3 to 4.

As you tested on ReviewLink i wanted to doublecheck whether that was the issue...and apparently it indeed is. When i uploaded the latest version to ReviewLink it fails. As you however can see the older version does work on ReviewLink. I guess all about timing and paths on ReviewLink that makes it fail there.

Do share your latest version with me, so i can see how to get it working properly on ReviewLink too... and share it with you there so we can wrap this up :-)

Weird... not sure why...your using Lectora Online or Desktop ? Let me try opening/importing it myself.

docLoaded is in the generic Javascripts functions HTML extension and is executed the moment the page is loaded. In it getCurrentPageDiv() is a default Lectora command, but it might be that it needs to be called later. So you can try to move it to initialSetup function... or even commenting it out like this.

function docLoaded(){

//pageDIV = getCurrentPageDiv();

window = getDisplayWindow();

//getHTMLNamesFromLectora();

initialSetup();

}

Moving it to initialSetup indeed fixes that error.

Fixed this...and made sure it loads properly at start of the slide. And cleaned up some unneeded extra code from previous projects i still had in. Tested it on Edge and Chrome and works as intended.

Kind regards,

Math

The weird thing is...this works perfectly in Lectora Online and i donot get any errors anymore and the dragger is nicely centered. Not however in Lectora Desktop...there i get those 'getCurrentDiv' errors now in all browsers... Might be some difference in localhost on desktop and online ?

Joe

maybe you can shed some light ?

. Just getting back at this.

Unfortunately, I am unable to change the Desktop options. I have an email into my team and will be in touch shortly.

If it still fails, share your project with me and i test it and fix it if needed.

Kind regards,

Math

Thank you.

It Works!!!!

Alright... did you try without changing anything? As it does work. Do sent me your Lectora by mail, Wetransfer and i will doublecheck. Some of the assumptions in your doc are wrong. I will show how and what. Sent to m.notermans@tilburguniversity.edu

Kind regards,

Math

PS. this you can forget i think. 'Depending on the width of your dragging element you might need change this line.

gsap.set(".dragger", { x: "-=20"});' As we call onDrag() now onstart the positioning is fine.

In the mp4 you can see it works.