Getting buttons to cooperate

ascott7223 Community Member Posts: 84
Hi there! I'm pretty new here, as we just purchased Lectora last week and before that I'd used the 30 day trial and visited here a few times. I'm creating a course in which I want people to be able to click on an image, then use the back button to return them to the original page. So if my image page has a phone, an envelope, and a person, they can click any of those things and go to a new page, then click back to return to the phone, envelope, and person page. Then after they've clicked through all of those, I'd like a "next" button to appear and navigate them past those three screens to a new page. Is this where chapters come in handy? What's the easiest way to do this? Currently I have it on a template that uses inherited buttons, but I expect I'll have to remove those? I know this is a pretty basic interaction I'm trying to do, but your help is appreciated anyway.


  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    The easiest way to force navigation like you describe is to have individual versions of the next and back button on each page.  You'd add the action onto the image of the phone that says on click go to the phone page.  Then add an action onto the next button that on click go to the last visited page.  This should return you to the "menu" page where you can select another option like the person.  Just keep repeating the process and you should have a looping course that takes you to each page without appearing to skip around.  If you'd like I can put together a sample course or show you how to adapt an existing one to meet you needs.
  • ascott7223
    ascott7223 Community Member Posts: 84
    Thanks  Jennifer! I will give it a try and let you know if I can't get it to work out or if I need more help. I appreciate the advice!
  • klaatu
    klaatu Community Member Posts: 988
    Jennifer beat me to the punch with a very easy method to do what you want, however, as there are usually many ways to accomplish the same thing, here's another.

    You want the participant to have to click on each picture thereby visiting a specific page for that item. They then use the browsers back button to return to the first page. When all the specific pages have been visited, you want to have an initially hidden NEXT button appear that will skip over the specific pages and bring you right to page 2.

    Add five pages to your project. Name then page 1, telephone page, envelope page, person page and page 2.

    On page 1, add your three pictures and a next button. For the action on click of the next button set it to go to page 2.

    So we need to be able to track if each specific page was visited. While Lectora does not have this feature built in, creating some variables to manaully track it will work. Create three variables (telephone_visited, envelope_visited and person_visited) and set them all to an initial value of false.

    Next, back on page 1 where you have the three pictures set up two actions for each. The first will be to take you to the specific page of that item when clicked. The second action will modify a variable. Choose the correct variable named for that page and set it to true. so what will happen is when the participant clicks on a picture it will do two things immediately; take them to the specific page and set the variable that tracks if that page was visited to true.

    Again, back on the first page add an action to the show of the page. This action will be fired off each time the page is loaded, including when the participant returns to it by hitting the back button. This on show action should be to show the next button, however, you will need to add some conditions. In the conditions tab make sure the top is set to all condtions must be true. Then using the drop down under variable select the first of the three variables you made (like telephone_visited). Set the relationship to equal to. Set the value to true. Do this for all three variables. Now when that page is shown a check will be made to see if all three variables are true, if they are the next button will be shown.

    That's pretty much it. Attached is an example of the above. The .awt file is included in the zip.

  • ascott7223
    ascott7223 Community Member Posts: 84
    I'm almost there, but I can't get the Next button to hide/show when I want it to. It shows all the time. When I download the example you posted here, I get an error trying to open it that says the graphics cannot be found. I'm attempting to attach my file here to see if I can get some guidance.
  • ascott7223
    ascott7223 Community Member Posts: 84
    I found the "initially hidden" box and that helps me hide the button, but now I can't get it to appear, haha.


    Edit: I fixed it! It does what it's supposed to do now, thanks!