Search code examples
javascriptimagepopupwindowinstructions

Javascript Instructions for first time users

I've made a game that has 2 input fields, a next button, and a submit button. The game is geared towards a young audience (6-8 years old) and I think it would be beneficial to visually explain how to use all the different functions in the game. Is there an easy way to have an image popup right when the window opens, but only for first time users?

Solution

  • This is a great use case for cookies. The logic of your site would be this:

    • When your page loads, check if your cookie exists
    • If the cookie exists, don't show the instructions
    • If the cookie does not exist, show the instructions and create a cookie

    The following is an example that could be adapted to your page: http://www.w3schools.com/js/js_cookies.asp

    Use the following functions for creating and reading cookies:

    function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}

    Include an onload function in your body tag:

    <body onload="checkCookie()">

    Use this function to check if the cookie exists and choose whether to display instructions:

    function checkCookie()
{
var return_visitor=getCookie("return_visitor");
if (return_visitor!=null && return_visitor!="")
  {
  // Don't show the instructions
  }
else 
  {
    alert("Instructions: This is how you play!");
    setCookie("return_visitor",1,365);
  }
}