Change button text based on variable

jasonadal
jasonadal Community Member Posts: 439 ♪ Opening Act ♪
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!

 

Comments

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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
  • klaatu
    klaatu Community Member Posts: 988
    This is one way out of many.
  • klaatu
    klaatu Community Member Posts: 988
    I styled the "button" in this one.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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

     

    Basically mine and Darrel's sample are the same approach...
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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.
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    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
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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 :)
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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? :)
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • nwilliams3743
    nwilliams3743 Community Member Posts: 74
    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?
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • support
    support Community Member Posts: 96
    I've written the cursor problem up as a bug for our developers, thanks!
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!