Explore the community Forums Lectora Lectora Questions & Answers how to apply javaScript to text box/objects?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #411591 Score: 0
    Profile photo of kl shan
    kl shan
    Member
    beginner
    intermediate
    wise owl
    profile
    curious george
    contributor
    @cshanahan9902

    Basic text transition/effects do not work within a client’s template.

    I have found the JavaScript below embedded into the template, I assume that this JavaScript is the key to transitions and effects working?
    However I don’t know how to apply the javascript to the text field/object.(i have limited knowledge of lectora inspire and JavaScript

    Any help would be appreciated?

    See the below JavaScript

    <script type=”text/javascript” src=”jquery-1.7.1.min.js”></script>
    <script type=”text/javascript” src=”jquery.easing.1.3.js”></script>
    <script type=”text/javascript” src=”smoothHTMLtransitions.js”></script>
    <script type=”text/javascript”>
    // OPTIONS
    var SpeedMultiplier = 500; //ms – higher number = slower transitions, relative to Lectora transition speed setting
    var MoveToSpeedMultiplier = 100; //ms – for Move To actions
    // Choose how far the flys will start from their ending point
    var FlyRightDistance = 200; //px
    var FlyLeftDistance = 200; //px
    var FlyTopDistance = 200; //px
    var FlyBottomDistance = 200; //px
    var SizeToFromCenter = true;
    // Choose an ease for each type of effect
    // // Easing Types
    // // swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart,
    // // easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,
    // // easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic,
    // // easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
    var MoveToEase = “swing”;
    var SizeToEase = “swing”;
    var FadeInEase = “swing”;
    var FadeOutEase = “swing”;
    var FlyInRightEase = “swing”;
    var FlyOutRightEase = “swing”;
    var FlyInLeftEase = “swing”;
    var FlyOutLeftEase = “swing”;
    var FlyInTopEase = “swing”;
    var FlyOutTopEase = “swing”;
    var FlyInBottomEase = “swing”;
    var FlyOutBottomEase = “swing”;
    var FlyInTopRightEase = “swing”;
    var FlyOutTopRightEase = “swing”;
    var FlyInTopLeftEase = “swing”;
    var FlyOutTopLeftEase = “swing”;
    var FlyInBottomRightEase = “swing”;
    var FlyOutBottomRightEase = “swing”;
    var FlyInBottomLeftEase = “swing”;
    var FlyOutBottomLeftEase = “swing”;
    var WipeDownInEase = “swing”;
    var WipeDownOutEase = “swing”;
    </script>

    #411910 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    13 pts
    @CarlFink
    #411942 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    18 pts
    @approg

    The latest version of jQuery released in 2016 is version 3.1. DO you really want to use a 5+ year old of jQuery?

    There’s no easy way to know what the identifier of Lectora element is. What I’ve started doing is what someone here suggested ie. add a custom CSS class name to the element (within Lectora 17) and then in my JavaScript I refer to it with

    getDisplayDocument().querySelector(“.my custom CSS class name here”);

    Having said that the JavaScript that Lectora uses is not well documented and not guaranteed to not change from version to version.

    #411944 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    106 pts
    @mnotermans5114

    The script you use is old. Its from Lectora X10 era… at that time you couldnot set CSS classes for elements in Lectora thus this approach was needed to work with JS in Lectora X10. From version 11 and up that has changed very much.
    Although i did notice this old way of using Javascript in Lectora worked up to version 16, you should only stick to it if you have an older version then Lectora 11… Follow Carls and approgs links and/or search the community for how to use Javascript in newer versions.

    Actually i did use the script ( smoothHTMLtransitions.js ) too in X10. What it does..giving elements the option for a transition ( eg. fade ) now is as default available in the latest versions of Lectora. I am not sure in which version it debuted, but with the latest versions of Lectora you can simply select a transition for a page-element.

    Kind regards,
    Math

    #412460 Score: 0
    Profile photo of kl shan
    kl shan
    Member
    beginner
    intermediate
    wise owl
    profile
    curious george
    contributor
    @cshanahan9902

    Thank you so much for your suggestions.

    I am working with lectora inspire 17 version and I have attempted to use the basic transitions “Fade in” /under properties on text box but it does not work within this template. I have been asked to do various animations from basic text fade on screen to more complex transitions of objects.

    I attempted your suggestion

    Using jQuery and Lectora to Customize Your e-Learning Courses: Part 1

    and also the below link which is very close to what I am hoping to achieve.

    How to Integrate JavaScript with Lectora Inspire

    In both cases I have followed instructions as requested but I cannot see either samples when previewing (I am connected to the internet when viewing). I have attached both to see what the issue might be.

    Also when delivering to the client the published form will be an “exe” so will this affect how the JavaScript is applied?(Again my knowledge of JavaScript is Zero) I notice the instructions mention… If you don’t want to rely on someone else’s server, you can download the file from http://www.jquery.com, attach it to your title…. What is the file extension the code is placed in when attaching it to the title.

    Again Many thanks for your help

    #412643 Score: 0
    Profile photo of kl shan
    kl shan
    Member
    beginner
    intermediate
    wise owl
    profile
    curious george
    contributor
    @cshanahan9902

    Hi

    Would anyone be able to tell me why the 2 attached samples do not appear when previewing locally?

    Many thanks

    #412648 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    251 pts
    @timk

    Hi, there are several issues in both files:

    You’re using unsuitable quotes in all your custom js actions and HTML extensions. These need to be replaced with real quotes, so that they look like this " or this '. Currently your quotes are like this ” ‘

    In your first file “fade-up…” …

    … jQuery itself is missing, so it can’t work. You’ll either have to attach it as an “Additional .js file” or link to the library that’s hosted online as you did in the 2nd file (but with real quotes).

    With regards to the second file …

    … You can’t define a function in a “Run javascript” action. Lectora turns the code in the action into a function so there must not be another function in it. You can define a function in an HTML extension and call it in an action.

    … Your code to add an event listener to the checkboxes will be overridden by Lectoras own code for the checkboxes. You can add “On: Select/change” actions to the checkboxes if you want something to happen when the checkbox is changed.

     

    #412651 Score: 0
    Profile photo of kl shan
    kl shan
    Member
    beginner
    intermediate
    wise owl
    profile
    curious george
    contributor
    @cshanahan9902

    Hi Tim,

    thank you very much for your help. I have implemented your suggestions and i can now view it the file in preview, can you please explain why the gradual fade transition are not taking effect on each button as set in the code.

    Many thanks again.

    #412679 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    251 pts
    @timk

    The fading does work, doesn’t it?. But your groups aren’t “initially invisible” so they are all faded in when the page is loaded. Your Show actions have no effect because at that time all are already visible.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.