eLBX Online 2021 | June 22 - 24

Join us for a FREE, 3-day virtual conference featuring industry experts and eLearning thought leaders. Learn about critical topics such as eLearning accessibility, learning experience design, course authoring, virtual reality, and gamification. Register today!

Creating a Counter

nstephenson4471 Community Member Posts: 7
How to create a counter? I have 10 items on a slide that the learner needs to hover over to show a label. I want them to see a visible counter for when they find the 10 objects. Thus, I only want the counter to record the mouse enter one time per item hovered over.


  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Actually creating a counter can be simple..

    What you need:

    A textfield to show the count.
    A variable to hold the countvalues.
    Action(s) to trigger the countup .
    Blockers to prevent from hovering multiple times.

    Thats basically it for a simple one. Offcourse you can make it much more complex by using Javascript. Actually due to this question i dove into a SVG based counter i made in Lectora 16 way back to recreate it for Lectora Online. Thats much complexer to get done, but is a nice challenge for me :-)
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    I just made a step-by-step sample of a simple counter.

    Including a Lectora Online package to go along.
    Online you will notice the sample keeps the value of the count when going from page to page.

    In fact you need to reset the countervalue to 0 when going to a next page to prevent it from going over 10...
    On the last page there is a reset button...that one does the trick and that page is exactly as you need it.

    The rest is self-explanatory..
    Kind regards,

  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    In fact the fix for your counter was easy. The blocker and hotspot of your refrigerator/freezer differed in size. Thus never blocking it completely. I usually make sure i can see blockers and hotspots when setting things up. On the first page of the package i did it that way. Changing color and transparancy of your shapes for hotspots and blockers immediately showed the issue at hand. So fixing now was easy. I added a second page inwhich i set it back to transparant again...

    2 other things i noticed in your title.. The background image of the kitchen was scaled in size, and actually stretched vertically. That last part i didnot change, but i exported the background again using TinyJPG/PNG as i describe here...

    That lowered the size of your image from 1,092 Kb to 110 Kb.
    That improves speed for your title big. Always make sure to compress images before using them in Lectora.

    The other thing i noticed that except for the text, you dont get any visual indication of what you found. I added that to the second page of this sample for 2 elements, the pots and pans and the frig. This way you get a better visual clue of your findings...

    Adding a package with the 2 pages and a PSD with the setup as used for the pots and pans.

    Kind regards,
  • nstephenson4471
    nstephenson4471 Community Member Posts: 7
    Again, my sincerest 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!