Javascript Instructions for first time users
Question
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?
2 answers
solution1
0 ACCPTED 2013-02-11 02:10:06
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);
}
}
solution2
0 2013-04-23 23:57:41
I found one interesting way to do something similar to what I wanted. You have to click a link but it could just say "instructions".
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.