Forum Discussion

CatherineG's avatar
CatherineG
Community Member
2 days ago

Bingo Counter JavaScript Bug

Hi folks,

I'm creating a bingo activity where I want to let learners advance only once they've selected 5 (or more) of the bingo rectangles. I've used JavaScript to check if each of the toggled rectangles is set to true when a button is clicked and for the most part it seems to be working. (in the past I've had trouble trying to get a counter in storyline to accurately add and subtract based on states so JavaScript seemed more straightforward and reliable.)

However, it seems to get buggy and begins mis-counting if I select more than 24 of the rectangles. I'm not sure what is causing this and while that's well over what I learners will need to click, I don't want this bug to come back to bite me later (plus it could be fun to have a little reward for a blackout...)

If anyone is able to tell where I'm going wrong (or suggest a different solution), that would be incredibly appreciated! 

Thanks.

 

3 Replies

  • Nedim's avatar
    Nedim
    Community Member

    CatherineG​ 

    Try to optimize the script to provide real-time updates by running a short interval loop that keeps bingo_Count current. Also, using a simple for loop instead of .filter() avoids creating temporary arrays and performing unnecessary string operations, making it faster and more efficient. The count can then be easily accessed in a separate script via setVar("Bingo_Count", bingo_Count") when a button is clicked. This ensures the count remains accurate, even if buttons are clicked very quickly. Given the small number of variables, the interval has negligible impact on CPU load, so there’s no performance concern.

    Example:
    Run when the timeline starts:

    const bingoVarNames = [
        "B1_True","B2_True","B3_True","B4_True","B5_True",
        "I1_True","I2_True","I3_True","I4_True","I5_True",
        "N1_True","N2_True","N3_True","N4_True","N5_True",
        "G1_True","G2_True","G3_True","G4_True","G5_True",
        "O1_True","O2_True","O3_True","O4_True","O5_True"
    ];
    
    setInterval(() => {
        let count = 0;
    
        for (let i = 0; i < bingoVarNames.length; i++) {
            if (getVar(bingoVarNames[i])) count++;
        }
    
        window.bingo_Count = count;
    
    }, 200);

    Run when the user clicks a button

    setVar("Bingo_Count", window.bingo_Count);


    This entire process could be handled in a single JavaScript script to manage rectangle states without the need for additional triggers. Let me know if you’d like me to assist with that.

  • The problem happens more often than you think, it also happens at 5.

    You should use references of console.log to troubleshoot some of this.

    I think (I have not changed all the triggers) the problem is because your trigger is on the rectangles and not the group so sometimes you press the group and trigger does not fire and you get a miscount, swap the triggers to the group (you will have to remove from the rectangle or the risk is it fires twice.

    Just to confirm, if you click carefully and ensure it is the rectangle you click you get 25 every everytime.

  • SBP_Inc's avatar
    SBP_Inc
    Community Member

    I've added a second slide that might shed some light on the issue. While the javascript is mostly correct, there's some changes needed during publishing, and triggers within the Storyline triggers that I'm hoping my slide might point you in the correct direction.