Change button text based on variable
November 15, 2016 12:00 AM
I'm trying to find a way to change the text of a button based on the value of a variable that is changed when selecting the option. As way of explanation:
I'm setting up my module so that the learner can either show or hide the table of contents at will. What I would like to see happen is:
- If the TOC is hidden, the text of the button states "Show TOC"
- If the TOC is visible, the text of the button states "Hide TOC"
I'm able to do this with a clickable text box, however in testing, once the text box is clicked and the contents change, it does not appear to be a clickable text box.
The only other solution I've thought of is a transparent button on top of a text box. I'm not a fan of this option, as I'm considering accessibility and want to avoid scenarios like this.
Any thoughts would be much appreciated!
Jason, easily solved. Simply add this rule to the CSS for #text46 (above the line that states display: inline-block;)
Now whenever the cursor is over the button it will show the pointer.
In the end, I'm going with two buttons instead, where the "hide" button is layered below the "show". The "show" button will hide when clicked, revealing the Hide button and the TOC.
The issue with using the text box is that it does not "appear" clickable after the first click. When I tested this in both my own and Darrel's sample, when the page loads, the cursor turns to an arrow. Once clicked, however, it no longer appears as an arrow.
One other piece that may have been worth mentioning is that a clickable text box does not have states. For accessibility, I like to have the "over" state distinctly different from the normal and down states to make it easier to see when the learner hovers.
I attached my module for reference if you want to take a look and have any other ideas.
Tim, you are as always correct, and a really simple textbox does indeed lose the 'pointer' cursor after change text action (@support, this is a bug). But in any case my solution solves the problem - just add style to the box and voila :)
The issue with using the text box is that it does not “appear” clickable after the first click. When I tested this in both my own and Darrel’s sample, when the page loads, the cursor turns to an arrow. Once clicked, however, it no longer appears as an arrow.
I don't get this problem. Check out attached demo. Simple textbox button that toggles a TOC on and off and also changes button text.
are you sure that's a simple textbox ;-? If you make it even more simple by removing background color and margin, you'll get the effect Jason describes. Style properties seem to make Lectora insert a table, that behaves differently with an action attached to it.
As i allready thought the text of a textbutton will get an image (png) after publishing, so cannot be changed.
However if you use a plain textfield for your label as in my sample..you can change it with 'changeContents'
Basically mine and Darrel's sample are the same approach...
I'll piggy back on that and say that it was the margins that made the difference - without margins on the text box, the behavior didn't change. Set the margins to 20 (as in Sergey's example) and viola! Interesting little quirk.
Does this mean it wasn't me, it was the tool? :)
I don't have any background in CSS unfortunately - I'm one of those developers that got here because I'm the tech-iest of the trainers, have some graphic design and layout experience and a vision. On top of that, I'm on an exceedingly short timeline for getting a full curriculum of modules completed and am struggling to get content in the first place. Thanks for the future resource - I may play in my "spare" time with it.
Thanks for all the feedback - now to try and tackle my other question in a separate thread.
Before you posted the CSS cursor:pointer Darrel, I was thinking of this solution. 2 months ago I wouldn't have a clue, but thanks to this forum and encouragement to learn the basics of CSS/JS to enhance Lectora, that was my solution. Enjoy CSS is great, and I've also been completing the free courses at codecademy.com. while making references to w3schools.com
The main hitch I face is integrating it all into Lectora. While I can eventually get it, it usually takes many attempts and tweaking and referring to other works posted here. I feel like I miss some of those linking fundamentals. Are there any other resources I should be made aware of to boost my knowledge?
Jason, are you familiar at all with cascading style sheets? With the method of using a text box in lieu of an actual button you can style it to your hearts content. This includes the normal, hover, active states as you mention you like to have on buttons. I didn't include them initially because my intent was more at showing the logic behind the actions.
If you jump over to Enjoy CSS you can generate the CSS for all the buttons states with little or no knowledge of CSS. Buttons made like this look 10 times better than the standard lectora buttons and you have a plethora of styling options, like transitions, not available otherwise.
I rarely use Lectora button objects in production due to the heavy graphic weight they add. I re-purpose text boxes, text inputs and check boxes depending on what I am trying to accomplish and style them myself.
I've written the cursor problem up as a bug for our developers, thanks!
Discussions have been disabled for this post