New Tutorial! Build Dynamic Animated Bar Charts In Storyline Using JavaScript

Hi - 

I've tried this, however I just can't seem to get it working! - I've copied exactly the naming etc so the JavaScript is - should be -  exactly the same - when I use the inspect tool I get the following - 

The script I'm using is below - any advice gratefully received!!

var adventure = getVar("adventure");
var safety = getVar("safety");
var treasure = getVar("treasure");
var maxvalue =  getVar("maxvalue");

var adventurebar = document.querySelector('[data-acc-text*="Adventure"]');
var safetybar = document.querySelector('[data-acc-text*="Safety"]');
var treasurebar = document.querySelector('[data-acc-text*="Treasure"]');

//Calculate percentages
var adventurepercent = (adventure / maxvalue) * 100;
var safetypercent = (safety / maxvalue) * 100;
var treasurepercent = (treasure / maxvalue) * 100;

//Function to animate the bar
function animateBar(barElement, percentage) {
    //Calculate the scaleY value
    var scaleYValue = percentage / 100;

    //Get the existing transform value
    var computedStyle = getComputedStyle(barElement);
    var existingTransform = computedStyle.transform; 

    consol.log(existingTransform);
    
    //Apply an initial scaleY value on load
    barElement.style.transform = existingTransform + 'scaleY(0)';
    barElement.style.transformOrigin = 'bottom';
    
    //Forece reflow to ensure the transistion starts from the initial state
    barElement.offsetHeight;
    
    //Set up a transition for a smooth animation
    BarElement.style.transitionProperty = 'transform';
    BarElement.style.transitionDuration = '1s';
    BarElement.style.transitionTimingFunction = 'ease-out';
    
    //Apply the final transform with the calculated scaleYValue
    barElement.style.transform = existingTransform + 'scaleY(' + scaleYValue + ')';

    //Return inner text to normal height
    var text = barElement.querySelector('text');
    var inverseScaleY = 1 /scaleYValue;
    text.style.transform = 'scaleY(' + inverseScaleY + ')';
}

animateBar(adventurebar, adventurepercent);
animateBar(safetybar, safetypercent);
animateBar(treasurebar, treasurepercent);