Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #344263 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    146 pts
    @Klaatu

    Tim, export and take a look see at the html files. By using “Top of File Scripting” Lectora manages to actually place the code before the DOCTYPE. LOL.

    #344273 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
    206 pts
    @timk

    I was wondering about that as well (some years ago, when I still was a beginner with jQuery), but someone whom I trust to be an expert said, this was the best way to include jQuery:

    http://community.trivantis.com/forums/topic/embedding-jquery-into-lectora/

    In this example the whole html extension (which comes from my shared sample) can be deleted as jQuery is not required to make my approach work.

    #344276 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    The change to “onShow” worked; I was able to move the text field and button to where they need to be on the page. You guys are truly amazing and have been such a huge help with this project. I’m going to try and get approval at some point to get into a CSS and JavaScript class. Another option I know of is Codecademy, though I think it may be a tougher sell to get them to just let me use work time to self-teach versus enrollment in an actual course with reimbursement.

    Any suggestions on books I could read that would help get me up to speed beyond what I’m learning from your knowledge?

    #344306 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    146 pts
    @Klaatu

     

    Tim, I don’t think that guy realizes that the code gets injected before the Doctype. Doing so can cause browsers to enter quirks mode. It’s bad practice at best.

    Jason, here are two of my all time favorite learning resources:

    Quentin Watts YouTube Channel – Great for beginners.
    Adam Khoury’s Develop PHP site – In my opinion, Adam provides one of the best free learning resources available. He can be a bit sharp witted, however, he knows his stuff and could probably teach a sponge to code.

     

    #344347 Score: 0
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    8 pts
    @nwilliams3743

    Wanting to second what Jason mentioned. You guys have helped me greatly too. Tim, I used your scrollable div post on my previous project and worked a charm.

    Jason, I completed the codecademy courses for HTML & CSS, JS and JQuery. It was a great way to start and I’ve actually started going back over them a second time to embed the knowledge more.

    One thing I am struggling with is although I know the concepts now, adding jQuery interactions to a Lectora file has been a struggle (adding the link is the easy part – I get stuck on loading the actual interaction correctly.) But practice will make perfect with this. Stick with it because I sure as hell am trying to!

    #344818 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    One more quick question on the div solution – Can I use the same RunJS on multiple buttons? For example, in the text field, there’s also an Intake Search area, etc. Can I create a button that need to be a child of the text field without having to create separate divs?

    If I’m reading the way this works correctly, I can use the same code to add multiple buttons as “children” of the text field…

    #344821 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
    206 pts
    @timk

    Hm, why don’t you just try… 😉 With the current version of my code you can have only one target textfield but you can copy the action to several buttons and it should work.

    #345240 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    I’m getting to the experimentation part for sure 🙂 Unfortunately, my trial on my home computer ran out and I’m on such a ridiculous timeline for the project I’m on, experimentation is at a minimum. The current expectation is to have 6 modules of a similar functionality and interactivity ready for release on June 1st. I’m on the second one and started in roughly November. You’ve seen what I’ve been doing so far, and I think 2 months on that first one is pretty reasonable when you factor in QA and content revisions.

    I’ll get there, I promise!

    #349658 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    I was able to get this to work with multiple buttons, but now I’m really pushing the envelope, I think.

    I’m trying to do the same thing now with drop-down menus, text entry fields and radio buttons. I think where I’m coming up short is the value for the appendChild value. I tried “form” and “combo” and neither of those worked. This was based on seeing that the button has a type value of “button”, but I don’t see a type for the drop-down.

    #349663 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    I’m maybe pushing the envelope in bringing this question back – I’m now trying to do the same thing with drop-down menus (in this example) and will later be doing it with radio buttons and text fields (i.e., this page would have three text fields that go along with it). I tried to find the value to use for appendChild, but after trying “form” and “combo” I had no luck. I saw method drop-down, but didn’t think the value could have a space in it.

    I’m also struggling with applying the JS to the two buttons (intake and workgroup) to mimic the other page – is it the position in lectora that makes the difference? I’m sadly stumped again.

    #349719 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
    206 pts
    @timk

    1.

    The position on the Lectora page is essential. The object keeps its position after being appended to the other element. If you place an element at x = 100 and y = 100 in Lectora, this is the position from the top and the left with regard to x=0, y=0 of the page. By appending the element to another object you change not the position of the object itself, you change x=0, y=0. The object will still be at x = 100, y = 100, but the new 0-point now is the top left corner of the element you’ve appended it to. If the object is supposed to be in the top left corner of the target element, place it at 0,0 on the Lectora page.

    2.

    To adress an object in a script you always have to find a suitable selector to get it. If you don’t know one, you can use an easy way you already know: Give the objects a CSS class. Then you can adress the elements in javascript with document.getElementsByClassName(“your_class”). This will get you all the objects with the named class. To do something with them, you’ll have to use a loop, to do whatever you want with each of the objects one after the other.

    I attached your sample again. Your pages have become too complex for me… Check “Page 4”. You’ll find a radio button group, a drop down, and two buttons that all have the same class. Also check where the elements are placed on the page and where they end up in the textfield.

     

    #350177 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    11 pts
    @JasonADal

    Tim, I can’t thank you enough for your help and patience with a complete neophyte like myself 🙂 I think what I was missing was attaching a class to each object and facepalmed when I realized it. I’m thinking (and will experiment) that I can do the same for a second textbox image on the page by attaching a different set of classes and appending the extension with the first one copy/pasted and just changing the “appendme” to the new classes for the text box and button, etc. elements. The only thing I wasn’t sure of was the j and i variables. When I played with those, the page definitely did not like what I was messing with.

    Thanks again – For what it’s worth, I gave you and others on the forum credit for helping and inspiring the work I did on the customized audio player. Wouldn’t have been possible without your and others’ input.

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

    Hi Jason,

    we’ve all been beginners at the start and I’m truely impressed by the speed of your learning. Sharing the results of your development with the community is all I could ask for in return.

    With regard to the script:

    The first variable “tobeappended” contains a collection of all objects with the class “appendme”, i.e. all objects we want to refer to in the loop. In this case I’m using a “while” loop, can’t exactly tell why.

    The second variable “image” contains a reference to the first element with the class “textfield”. This is the target textfield. The naming of the variable may be a little counter-intuitiv, it comes because we used an image as the target element in the beginning. Now, the method “getElementsByClassName” cannot provide you with a direct reference to the object, because there could be multiple elements with the class “textfield”. Although we do know there’s only one, we still have to tell the script to always take the first. This is done by adding “[0]”. Check the sample I’ve attached, in that I’m using another textfield with the class “textfield” as a second target for different elements.

    Both variables i and j are needed to control the loop.

    The variable “i” (= 0) is just a value to tell the script when to stop repeating the command between the { }.

    The variable “j” contains the length of the collection “tobeappended” minus 1. In my example there are 9 objects with the class “appendme”, 6 radio buttons, 1 drop down, 2 buttons. So in the beginning j equals “8”. It defines how often the loop is to be repeated. The script collects all the objects and finds 9 elements. Javascript starts counting with “0”, so the 9 objects have indexes from 0 – 8. That’s why I subtract 1 from the length.

    Then the loop starts.

    The command says: Append the currently adressed object as a child of the element stored in the variable “image”.

    The first round of the loop is:

    j = 8

    Command says:

    image.appendChild(tobeappended[j]);

    Make the element with the index equal to the value of “j” in the collection “tobeappended” a child of the object stored in “image”. In this round j is equal to 8, so the nineth element is adressed. You’ll recognize the same principal used to get the first element with the class “textfield” in “image”.

    Second line of the command is:

    j–

    When the nineth element has been appended, subtract 1 from j.

    The second round of the loop starts, now with j = 7, adressing the 8th element with the class “appendme”.

    The nineth round of the loop goes:

    j = 0

    the first element is appended and j is made equal to -1.

    When starting the 10th round of the loop, the script finds that now j (=-1) is not greater or equal to i (=0) any more and stops looping, as the condition defined with “while(j>=i)” isn’t met.

    The way it’s programmed with all the variables, allows you to give the class “appendme” to any number of objects and the script will still work and make them all children of the target textfield. The variables i and j are controled automatically by the script, there’s no need to modify them manually.

    In the new sample, I’ve copied the loop to append different objects to a different target. The new loop uses the variable “k” instead of “j”, as there are more elements in the new collection. And of course because the first loop ends with “j” being -1, so the new loop wouldn’t start at all.

    Tim

     

    This post has received 1 vote up.
Viewing 13 posts - 16 through 28 (of 28 total)

You must be logged in to reply to this topic.