Scrolling Text DIV [JPG Form, TEBs, Radios, CheckBoxes, Feedback Elements

msullivan3430

An interesting test problem for all of those advanced JavaScript, and jQuery developers. 

About this Test Project: Training usually requires that the users learn how to complete long data forms. Therefore, need to incorporate a visual of the form (high res JPG); superimpose on it many (could be upwards of 40 per page) text-entry-boxes, radio buttons, checkboxes, dropdowns, etc. [This is an adapted project from one I'm working on at work. I've stripped out the "live" content and replaced it with lorem ipsum. The word doc attached includes all of my questions as well as snips of the HTML Extensions.]

Current Method

• At the Title Level: script uses a link to the latest jQuery on web via the HTML Extension; another to attach mauraReflow.js; another for custom css.
  • Is this a bad way to do this? I notice that some people have been pasting in the minified jQuery here instead. What are the pros/cons?
• At the Page Level (Scrolling Example) run JS onShow:
  • Detach the Form (class=form) and append it to my scrollTextDIV (class) which is for a text block called “toScroll” in the Title Explorer and is set for Vertical Scroll
  • Use jQuery to reposition the form within the scrollTextDIV;
  • Use jQuery to set overflow-x to hidden for scrollTextDIV;
  • Find, detach, and append all classes (teb, rad, chk, msg) to scrollTextDIV using jQuery
  • Run whichPage(“pg4a”) to then work through a set of if statements and call up the page specific function for each page. These functions then reposition all of the input and error messages using inelegant JavaScript.
• I’d like to get to the point of looping to do this (automatic capture of current position and recalculation on new position) and have this so far:
  • var arrayTEB = [];
    $(".teb").each(function() { arrayTEB.push(this.id); });
    console.log(arrayTEB);
    var numTEB = arrayTEB.length;
    console.log("Number of textEntryBoxes = " + numTEB);
  • var arrayRAD = [];
    $(".rad").each(function() { arrayRAD.push(this.id); });
    console.log(arrayRAD);
    var numRAD = arrayRAD.length;
    console.log("Number of radioButtons = " + numRAD);
  • var arrayCHK = [];
    $(".chk").each(function() { arrayCHK.push(this.id); });
    console.log(arrayCHK);
    var numCHK = arrayCHK.length;
    console.log("Number of checkBoxes = " + numCHK);
  • var totalInputs = arrayTEB.concat(arrayRAD, arrayCHK);
    console.log(totalInputs);
    var length = totalInputs.length;

Questions:

1. Previewing in Browser: In either IE or Chrome the JS and jQuery works fine although at the office, for IE, I must: allow scripts > F12 > Choose 10 instead of 11 to get the page to display. Why?
2. Review Link: I tried to test the project in Review Link last night from home. (I have version 2017 at home, but it has not yet been installed at work). None of the JS/jQuery worked. Is it disallowed? If not, what could be the problem? Is this because I didn’t use the minified code in my HTML Extension?
3. Publish to HTML: When I published (from home since I have 2017 there, but not yet at work) and tried to preview it from the dialog box that came up, JS/jQuery were not working properly. Is this because I didn’t use the minified code in my HTML Extension?

I appreciate any and all help with the above. Maura

 

timk

The difference between "Preview in browser" and both ReviewLink and HTML is "Seamless play". Try to turn it off and see whether it's working.

mnotermans5114

I just quickly checked your doc and 1 big difference L17 has from L16 is the 'seamless play'.
Due to the fact that is in Lectora 17 Lectora now uses iFrames, so quite a lot of Javascript needs to be revised to work properly in L17.

One big difference i noted immediately when reading your readMe is the use of 'pageDiv' in your Javascript. That worked fine in L16, but is gone in L17.
I know there is info online somewhere ( from Jennifer i think ) about the exact calls to access the page now. I probably have it in my shared content too somewhere, but cannot find it quickly ;-)
regards,

Math

timk

If you want to use "seamless play", replace $("#pageDIV") with $(getDisplayDocument())

mnotermans5114

I do think that even when seamless is off in L17 you need to do that, else your Javascript fails. Well easy enough to test ;-)

msullivan3430

Thanks for the responses so far!

Any tips on improvements to my "wordy" JavaScript?

I'm trying to work on a function that will build a multidimensional array of the IDs automatically and then relocate all inputs via a loop, but have not gotten the logic right just yet.

Also, is there anyway to add the radio buttons and check boxes to the tab order that I've fixed via JS? I'd like it to work more like standard web-based forms in that you tab into the group and can use the spacebar to select an item if you like rather than use the mouse.

msullivan3430

Do any of you know how I grab the image associated with a drag-and-drop after I've relocated it into my scrollTextDIV? I thought I had the correct ID name, but I'm unable to drag these items.

mnotermans5114

I have functions for that in my Javascripts. If you download some of my Shared Content you can find functions that get all assets and IDs in arrays and objects. If you share a sample, i can add it  for you.

Regards,

Math

msullivan3430

Tim: What is the purpose/advantage of Seamless Play? I deactivated it for my test in ReviewLink. Thanks!

mnotermans5114

Seamless Play is Trivantis answer to the 'dreaded'white flash between pages that happens when going from page to page in Lectora prior to version 17. Using it you wont see that white flash and pages transition nicely.