Explore the community Forums Lectora Lectora Questions & Answers Change button text based on variable

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #334419 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    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!

     

    #334454 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    116 pts
    @mnotermans5114

    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

    #334459 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    This is one way out of many.

    Attachments:
    1. TOC.zip
    #334464 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    I styled the “button” in this one.

    Attachments:
    1. TOC2.zip
    #334467 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    116 pts
    @mnotermans5114

    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…

    #334475 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    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.

    #334494 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    335 pts
    @ssneg

    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.

    Attachments:
    1. Archive.zip
    #334506 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    296 pts
    @timk

    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

    #334509 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    335 pts
    @ssneg

    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 🙂

    #334511 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    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.

    #334513 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    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? 🙂

    #334535 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    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.

    #334588 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    44 pts
    @JasonADal

    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.

    #334630 Score: 1
    Profile photo of Nick Williams
    Nick Williams
    Member
    friend finder
    beginner
    intermediate
    contributor
    wise owl
    curious george
    advanced
    9 pts
    @nwilliams3743

    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?

    This post has received 1 vote up.
    #334699 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    197 pts
    @Klaatu

    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.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.