Show/Hide Hint (data-step) does not work

[jstgermain]

Description

I want to use cookies to determine if a hint should be shown on page load or not.

Checking for cookie, and setting cookie functions

function checkCookie(cname) {
  var cookieName = getCookie(cname);
  if (cookieName != "") {
    return true;
  } else {
    return false;
  }
}

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Find out if a specific cookie exists, and if it doesn't, show the hint, and on close of the hint, set a cookie so that it should not be seen again.

if (!checkCookie('myschedule-hint')) {
  var myschedule = introJs();

  myschedule.setOptions({
    hintPosition: 'top-middle'
  });

  myschedule
  .showHint(1)
  .onhintclose(function() {
    setCookie("myschedule-hint", 'complete', 365);
  });
}

HTML for setting the tip and the step

<div id="usersScheduleContainer" data-hint="This is your weekly workout schedule where you can add or remove classes. It will stay the same each week until you change it." data-step="1">HTML here</div>

Expected Behavior

Using mysechedule.showHint(1) should display ONLY the hint with data-step="1"

Actual Behavior

Nothing loads

Errors and Screenshots (optional)

No errors shown

Example Code on CodePen

https://codepen.io/jstgermain/pen/ywwGRy

You can see the code actually work by changing...

  myschedule
  .showHint(1)
  .onhintclose(function() {
    setCookie("myschedule-hint", 'complete', 365);
  });

to:

  myschedule
  .showHints()
  .onhintclose(function() {
    setCookie("myschedule-hint", 'complete', 365);
  });

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.