Progress Bar

benpitman
benpitman Community Member Posts: 763
I posted this elsewhere but I wanted it posted with a much better heading and not buried as a response to another posting.Progress Bar HTML Javascript Note that this only works when publishing to HTML.Chris Giddings in support suggested that I use an external HTML object directly instead of trying to manipulate a Lectora image. The main problem is that the HTML name of the actual gif in Lectora is buried. Using HTML code to set one up gives direct access to the name of the bar. Thanks Chris. With that one time I was able to get a very easily and workable solution.SOLUTION: This solution is for a 100 x 8 px green progress bar surrounded by a 1px border showing graphical progress in a chapter. It takes creating 2 gifs, one for the bar and one for the background and 2 HTML objects and 4 actions in Lectora. You are done. 1. Create 2 gifs – a white one 102 x 10px (WhiteBorder) and a green one 100 x 8 px.(GreenBar) . Place them both on a page where they will NOT BE SEEN. This is required for Lectora to load them into the images folder. I have not tried to put this on an LMS. You may find you have to hid the Lectora images accessing these two on the first page of your title. 2. Create 2 HTML objects in Lectora at the title level so these will appear on every page. Size them to match the gif size.

Code:

HTML Object 1 for the green barimage




Code:

HTML Object 2 for the white borderimage


3. Align them horizontally. Layer the Green Bar HTML object on top. For some strange reason I had to set the green one 1 px higher ( Y coordinate was 1 less) than the white bar. I am clueless as to why.4. Attach 4 actions to the green bar.

Code:

All are On: Show, Action: Modify Variable, Target: BarWidth (a new variable)Action 1: Get current page #: --- Value: VAR(PageInChapter)--- Modification type: Set Variable ContentsAction 2: divide by # pgs--- Value: VAR(PagesInChapter) --- Modification type: Divide Variable ByAction 3: Convert to length in px--- Value: 100--- Modification type: Multiply Variable ByAction 4: Get current page #:--- Value: javascript:resizableBar.width=VarBarWidth.getValue()--- Modification type: Set Variable Contents


cheers,benEdited By: bpitman on 2006-1-25 16:17:53
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!