Explore the community Forums Lectora Lectora Questions & Answers Populate a drop-down list with javascript

Viewing 15 posts - 1 through 15 (of 24 total)
  • Author
    Posts
  • #348525 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    9 pts
    @smiller7502

    How can I populate a drop-down list with javascript in Lectora?

    I need to allow learners to tell me which of our 230+ stores they work in. The list of stores changes as we open new ones, and I don’t want to have to edit and republish the course every time. So, I have the list in an external file. I know how to read the file. I have a javascript that can pop up an alert showing each store number as it iterates the array. But I cannot figure out how to I add the elements of the array to my drop-down box.

    Outside of Lectora, I do this, and it just works:

    select = document.getElementById( 'stores' );
    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    } 
    
    

    Inside Lectora, I do this, and nothing — no error, empty drop-down list:

    select = combo1609.objLyr.ele;
    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    }

    Am I not setting select to the drop-down list correctly? Is there a hidden language difference that means I need to do something other than select.add( new Option … to add an option to a drop-down list? Am I doing something else wrong?

    #348527 Score: 0
    Profile photo of Andrew Corbett
    Andrew Corbett
    Member
    intermediate
    wise owl
    advanced
    curious george
    picture perfect
    contributor
    1 pt
    @acorbett3701

    Hi Stan,

    I don’t have an answer, unfortunately.  However, I do know that when I’ve populated Lectora screen elements from custom javascript I’ve needed to examine closely the actual HTML that Lectora produces to discover where precisely I need to do the substitution.

    Also, I’ve found jquery particularly useful for this purpose as it makes it easy to select the specific element you are trying to manipulate.  Here is the resource that got me started with that:
    http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-2

    Hope this is helpful.
    andrew

    • This reply was modified 2 months, 2 weeks ago by Profile photo of Andrew Corbett Andrew Corbett. Reason: fixed tagging mess
    #348530 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
    57 pts
    @mnotermans5114

    Hi Stan, i do think jQuery UI ( http://jqueryui.com/controlgroup/ ) does a great job at that. If im not wrong i have it used in several Lectora projects.

    Gonna look for you if i can find a sample.

    Kind regards,

    Math

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

    Hey Stan,

    Shared my solution to this here:

    Fill Stan’s Drop Down List

    Just plain old vanilla javascript. Works fine.

    I do think that maybe the only thing that you missed in your solution was the proper id of the dropdownList.

    As you see in my sample the name to refer is combo39id…
    You could give that a try, or just dissect my sample.

    Kind regards,

    Math

    This post has received 1 vote up.
    #348556 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    9 pts
    @smiller7502

    Maths,

    This wasn’t exactly the solution I needed, but it gave me the clues I needed. Thank you very much!

    First, I was indeed not correctly identifying the control. Silly me for thinking I could find the element ID within the .awt instead of previewing in a browser and looking at the source.

    Second, this bit that I was trying originally does not work in Lectora, for reasons I don’t understand but no longer care about:

    for( store in stores ) {
      select.add( new Option( stores[store] ) );
    }

    My challenge with your solution was that it required the drop-down list to have the correct number of elements to start with, and that will change for me, growing by one every time we open a store. But this works perfectly:

    var droplist = document.getElementById("combo1069id");
    var opts = stores.length;
    droplist.options.length = opts;
    for (var i=0; i<opts; i++){
    droplist.options[i].value = i;
    droplist.options[i].innerHTML = stores[i];
    }
    
    Now I get to complicate it by adding more elements to the array. But I'm on the way, and I wouldn't be without your help. Thanks again!

    Stan

     

    #348599 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
    57 pts
    @mnotermans5114

    Yeah, after i uploaded my solution i immediately knew…wait what if… if you cant get it working with a list that hasnt a preset length let me know, and i will jump on it too 😉

    #348626 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    9 pts
    @smiller7502

    Nope, I’m good, thanks! I knew how to resize the droplist.options array, and it works great! Thanks again for your help.

    Stan

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

    I’m reviving this thread as I want to do something that this may work for with some adjustments.

    I’m wondering if it’s possible to populate a drop down list based on the selection from another drop down list. Basically, each choice in one drop down list changes the list in a second drop down list. The choice in the second drop down list changes the list in a third. I know I can use a hide/show on Select/Change to show or hide the different drop downs, but if there’s an easier way, that would be awesome!

    #354160 Score: 0
    Profile photo of Stan Miller
    Stan Miller
    Member
    beginner
    intermediate
    LUC16 Attendee
    wise owl
    contributor
    curious george
    friend finder
    9 pts
    @smiller7502

    Jason, yes, this is definitely possible. I don’t have time to code it right now, but the basic idea would be:

    1. For each option in List A, set up an array with the options to show in List B when the List A option is chosen.
    2. For each option in List B, set up an array with the options to show in List C.
    3. For the Select/Change event on List A, run a javascript with a switch statement to populate List B with the array that matches the option chosen from List A.
    4. Repeat #3 for List B to populate List C.

    If you need help with the code itself, post back; one of the real experts might get to you with a coding example, and I’ll check back and provide one when I can if no one beats me to it.

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

    That’s exactly the idea – Thanks for the offer of help with the code. The only JS I know is based on what’s been shared with me through the forum and some experimenting based off the help. I fall into that category of developers that was originally thrust into the position because I was a trainer, have vision and am very technically inclined. JS and CSS are on my agenda for training once this project is complete.

    #354197 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
    57 pts
    @mnotermans5114

    Hi Jason, mocked up a quick solution for this. Based on my previous entry for Stan, i continued on that… now linking 3 boxes together filling the content dynamically. Some things could be improved, but well.. one step in the right direction i do think.

    Multiple dynamic dropboxes

    Regards,
    Math

    #354275 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
    57 pts
    @mnotermans5114

    @smiller7502

    if you could show me/us a simple working example using ‘switch/case’ instead of either the standard ‘if/then’ or Lectora’s conditions would be great. Tried to implement switch/case in my sample but kept bumping into weird issues. Not sure why, and in the end stopped trying 😉 Wondering if it works in a Lectora environment…

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

    Deja vu

    #354282 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
    57 pts
    @mnotermans5114

    @darrel How Deja vu ? The store issue is fixed in this setup 😉

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

    EDIT: I just noticed that you have to add selections in the droplist properties equal to the number of choices in the text box. However, I ran into a situation where if there is a difference, there are listings that say “undefined” if the text box has fewer options than the list in the droplist properties. For example:

    • Droplist 1 has 2 items.
    • If you choose list item 1, droplist 2 should only have 1 item.
    • If you chose list item 2, droplist 2 should have 5 choices.

    Since I need 5 choices for droplist 2, I put items 1-5 as choices for droplist 2. The problem is that if I choose item 1 from droplist 1, droplist 2 shows 1 correct item and 4 “undefined” items. This happens in reverse, too – with only item 1 in the properties for droplist 2, it only ever shows 1 item.

    I also tried removing all choices from droplist 2, but that definitely doesn’t work either. So close!

    • This reply was modified 3 weeks, 6 days ago by Profile photo of Jason Dalrymple Jason Dalrymple. Reason: discovered solution to initial problem, but found a different one
Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in to reply to this topic.