Upgradable Custom Navigation in Lectora 11
July 1, 2016 12:00 AM
I'm wondering what folks have done in terms of creating custom menu nav in Lectora 11?
I've seen work done here (proprietary, sorry) whereby a simple button is created with a transparent fill and a simple 3px border. It was then placed on top of text. Next to that button was a separate icon, where another separate graphic was located showing complete/incomplete/not started status of a lesson.
When a user clicked on the last page of a lesson, the course registered it as "complete" and when the next button went back to the main menu, that icon was switched out from either the "not started" or "incomplete" icon - to a completed icon.
What is cool about this is that the developers can easily go in and update the lesson names because they are simple text blocks underneath transparent buttons - not actual graphics created within Photoshop or whatever. Can this be done within Lectora 11 whereby a button starts out as grey and then when they complete a lesson - it turns to a different when finished?
Thanks in advance for your help.
Discussion (5)
A company I worked for created a similar page style. Where circles acted like "stop lights" on the progress of the course and page or section titles were linked the the separate sections.
You could have an OnShow Action on a custom (Lectora) text button that sets the state to Disable on the Condition that Lesson X is not complete. This way, when the page loads, it will check to see whether or not the given lesson is complete and set the state accordingly.
If you are using this to lock down user advancement, you would most likely put the action on the next lesson in the course. Meaning, the Lesson 1 button would initially be enabled, but Lesson 2 would be disabled until Lesson 1 is complete (and so on for the rest of the course).
You could then add lock/unlock images and implement similar Show/Hide actions.
Is there a way to trick Lectora into updating the nav text without creating buttons outside of the tool using the scenario above? Thanks - this is good stuff.
When you say 'nav text' are you referring to the button text? There isn't a way I know of to change the text within a Lectora-created button, but it may be possible.
I suppose you could create a semitransparent colored box in 4 states and import this as a button*. Then, lay this over a text box containing the text you want the user to see. Using the same logic as in my previous post, you can create two actions: one to set the state of the button and one to change the contents of the text box.
On Show: Set State, Target: Button 2 , State: Active, Condition: Lesson 1 is Complete
On Show: Change Contents, Target: Button 2 Text Box, Set Text: Lesson 2 Available, Condition: Lesson 1 is Complete
*The benefit of this is, no matter what you change the dimensions of the box to, the image will not distort. Plus, you can use the same 4 images for as many buttons as you'd like. Take a look at the attachment and let me know if this suits your needs.
Thanks Clammers! I will definitely give this a run! This sounds like it could save me a ton of headaches and open up some design alternatives.
Discussions have been disabled for this post