Drag and Drop Question Layering

Lectora awards drag and drop items with z-indixes starting at "1000" so they are above anything else. You can either use javascript to give your menu items higher values (messing with the z-index can be an unexpected adventure) or hide the question when a menu button is clicked. As long as the users are navigating through the menus, they won't be able to answer the question anyway.

Here's a way to do it via the zIndex. When a menu button is clicked the zIndex of the menuitems is increased by 2000, when the menues are hidden the zIndex is reduced to its original value. This way the menus are above the question while open and under it if closed.

Tim

Hiding the question as Tim suggest doesnot work with Jason's setup because all elements for the dragdrop are in the question, so that hides too much. Z-index by Javascript is an option, or hiding specific elements of the question by javascript. Mocking up a sample now. A possible solution would be:

- give the choice 1-10 images a css-classname (eg. choiceImg )

- on a click on the menu above hide all choiceImg with Javascript

- on releasing show them again

Issue though that remain still is, when having an image dragged and dropped to its position, it would be hidden too. So you also would need a check whether a choiceImg is dragged... if so..exclude from the hideaction..

Damn... must be an easier solution..

Tim, you are and have been on numerous occasions a lifesaver. This is way easier than moving all the buttons, since every time I try to move the drag and drops, it messes with the image. Out of curiosity, I noticed you have the zIndex on the File Menu and View Menu images, but none of the rest. In tinkering, I took that action off the actual menu images and it does still work, at least in Run Mode. For my own reference, it's just the buttons that I need the action on and not necessarily the images?

undefined

Thanks again!

For whatever reason, I can't find the option to edit my last reply, so I'm adding another follow-up...

I copied the JS text from Tim's sample into my own and I can't emulate the behavior. I was able to just copy and paste the page into my course and do get the behavior.

There's one new caveat with the solution - Setting the zindex on the group ends up covering the next menu item. As soon as you open the file menu, the view menu and searches buttons are both lower in the order. I'm thinking I could use the same method to set the zindex for the buttons to a value higher than the images for the menus? Otherwise, I can also edit the menu images to be JUST the menu and not the emulation of what happens when the menu is selected.

The JavaScript hide option seems the better of the two if I can figure out the javascript to add to the menu buttons. Adding the action to make them visible again might be pretty straight forward. I have an action group on the page that hides all the menus. This action is run anytime the learner either clicks on any of the buttons for the menu OR hovers over any object outside of the menus.

Depending on the action to make the images visible again, I could always use a Show action in that group. Yes, it's 22 actions (11 Run JS and 11 Show), but I like it better than the other option I came up with, which is to move the drag and drop images so they're over the drag and drop area. (I really don't like this particular solution as it breaks from the simulation realism.)

@Jason: in Tims version the menuitems that have to stay on top have a CSS class ( 'ontop') to ensure you can select them all and bring them to the top. Maybe thats what your missing in your version...

I've given all menu items the CSS class "ontop". See screenshot how to do that. By this I can adress all the object in Javascript. Each of the menu buttons has an action with the following code:

This part collects references to each of the elements that has the class "ontop" (i.e. to all menu items). The variable "items" now "contains" all items:

items = document.getElementsByClassName("ontop");

undefined

The "length" of the variable contains the number of elements in it. The code within the for loop increases the zIndex of the currently adressed object by "2000" (= (new zIndex = current zIndex + 2000). The loop is repeated as long as "i" (just a counter) is smaller than the total number of elements

for(i=0;iundefinedi++){

items[i].style.zIndex = items[i].style.zIndex + 2000;

}

The action doesn't only increase the zIndex of one element, but of all elements.

Each of the background images of the main menus, does the opposite, i.e. it reduces the zIndex of all elements by 2000. The action is run when the background image is hidden, i.e. when the menu is closed. The action is not needed for the submenus as these cannot be open while the main menues are closed.

undefined

I've attached a new version, that keeps the menu buttons over the menus (I've moved the buttons to the bottom of the title explorer). Each of the menu buttons now disables itself on click, so that the MouseOver image with the dotted line is not displayed, while the respective menu is open.

I chose the easiest way to achieve it. If you need the buttons in the place you had them in the title explorer, you can just use the same javascript logic to give them a higher zIndex than the rest of the menu items. Change the CSS class of the buttons to something different, e.g. "evenhigher". In the Run javascript action of each button add another loop:

buttons = document.getElementsByClassName(undefined
for(j=0;jundefinedj++){
buttons[j].style.zIndex = buttons[j].style.zIndex + 3000;
}

Now the buttons will be higher than the other elements without changing their position in the title explorer.

Add a similar loop to each of the background images of the main menus to substract "3000" On: Hide.

The ontop class is what I missed - thanks for pointing that out and how to do that. I do keep finding myself between a rock and hard place with my design ideas and gaps in knowledge on how to achieve the desired outcomes and behaviors. I foresee some significant CSS and JavaScript study in my future through Codecademy or other venues. I spend some significant time tweaking the trivantis-focus to get the tab focus to work in IE.

Speaking of tab focus, one reasons I had the order the way it is in the title explorer was to emulate tab/arrow order from the software. Not only does this solution change the tab order, it actually breaks tab functionality for some reason. The solution would be to use tabindex again to manually set tab order on the page, but at this point, I need to step back and resign myself to moving the drag and drop images even though I know drag and drop is not accessibility friendly).

Your help has been amazing, Tim, and really pointed out where I need to start studying the inner workings of CSS and JavaScript. I am definitely keeping hold of this for future use when I'm not creating such an involved set of screens and buttons.

I am not sure what I did...but I fixed it! Thanks for the code!

Jason's right, this is good stuff. I just can't get it to work for my purposes. I need to display an image (checkmark) on my drag-and-drop, but it's winding up under the drag item. I tried to implement this code, without success. I have assigned the CSS as 'ontop' to the images. I have included the set z-index on my page... not sure where it's failing...but this entire interaction has just been a mental challenge.