Change button text based on variable

Hi Jason,

I mostly do this kind of thing with Javascript. I do think however you can use 'changeContents' too to change the text of a textfield. Not sure if you can target a button text with 'changeContents', but if thats the case , you just have to make sure your text is plain text instead of buttontext. I will make a sample of solutions the next few days.

Regards,

~Math

Jason, easily solved. Simply add this rule to the CSS for #text46 (above the line that states display: inline-block;)

cursor:pointer;

Now whenever the cursor is over the button it will show the pointer.

Thanks to both of you for the samples. Unfortunately, the Change Contents cannot be applied to buttons, even when it's a text button and JavaScript is a bit over my head. :)

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.

I styled the "button" in this one.

This is one way out of many.

Hi Sergey,

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.

Tim

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'

~Math

undefined

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.

That's great to hear, George! Keep up those tutorials, CodeAcademy is excellent. Sergey Snegirev has written some terrific articles on integrating Javascript with Lecotra. As you know, there's a wealth of information in these forums from past questions/answers, too. If at any time you have a question, no matter how trivial you may feel it is, ask it here, I'm usually lurking about a couple of times a week.

As far as learning HTML5 concepts, there are tons of great resources to draw from. A couple of my favorite FREE ones include Quentin Watt's tutorials on YouTube. His video's are succinct and well though out; excellent for beginners on up. Another incredible resource is developphp.com. Don't let the site's name trick you, it is chock full of HTML, CSS and JavaScript lessons and I feel Adam Khoury can teach a watermelon to code.

I've written the cursor problem up as a bug for our developers, thanks!