Changing button source dynamically at run-time
September 23, 2013 12:00 AM
I have a question which after much trial from my side without success, I thought you could answer.
I have a specific requirement and I will try my best to explain the scenario.
I am working on a few assessment questions. And the simple requirement is that depending on the brand and language selected, the Submit button should change appropriately. It is a custom assessment. So the Submit button is a Button object of lectora with png images as source.
I have the variable values for the brand and the language selected. I know the javascript to change the image source. However, since this is a Button object by Lectora, I do not see any property as 'source' which I can manipulate at run-time. Also, I could have worked with the actual object name (eg. button656640) itself in javascript and executed my code. However, for each assessment question, the object name for button is different. This means my javascript code will not be generic and I will have to change the reference name for the button object for each question.
This is not a generic solution. Also, I cannot change the HTML name of the button object from Lectora IDE too. Help file says I should be able to change. But Lectora IDE does not allow me to change the HTML name for any object!!
So can you please help me understand how to change the HTML names of objects in Lectora. Or can you suggest a best way/work around for my requirement.
Thanks.
Discussion (3)
Ok, here is maybe a better way using Lectora buttons.
- Create all the buttons for all the languages and brands and make them initially hidden.
- Stack them on on top of another.
- Create an action group that does what you want the button to do -- Process Question, etc.
- Add an action to all the buttons to run the group.
- Add a set of Page level actions OnShow, show the desired button based on language and brand. It will show only one of the buttons and that button will run the action group.
Now you can copy this group of buttons, the action group with one (or more actions) that processes the question, and the On Show actions that show the correct button to each page. Then adjust just the action group that processes the question.
Thanks Ben for extending your support. I know what you suggesting. I just wanted to keep the assets list as minimal as possible.
I have finally implemented this by using javascript.
Thanks again.
Sam, not sure I understand at all what you want. Why don't you give me a call and I can ask a lot of questions more easily than here.
so, you want different buttons that all do the same thing -- have the same actions - depending on which language and brand is selected at the beginning? I am pretty sure the answer is NOT using Lectora buttons but rather building the set yourself. Once you build one, you can copy it to the other pages. Here is what would look like in the Title Explorer. You won't be able to have an OnClick image but that is not much of a loss.
Image: button normal state
Action: OnShow; Change contents of image with Language 1 Brand 1
Action: OnShow; Change contents of image with Language 1 Brand 2
..... for the rest of the brands
Action: OnShow; Change contents of image with Language 2 Brand 1
Action: OnShow; Change contents of image with Language 2 Brand 2
..... for the rest of the languages and brands
Action: OnMouseEnter: Change Contents of Image with over image for Language 1 Brand 1
... same as OnShow but for over image
Action: OnClick -- whatever you want to process the question.
Discussions have been disabled for this post