How to Save the puzzle in cookie?

Question

Hi, After completed the puzzle successfully,when i click on save button the puzzle will be saved in cookie.Can anyone tell me?how to do it? Thanks, Saritha

Raj Bandi · Answer

Ok its working in Firefox and Chrome. Dont open html file with a local path for example, directly clicking on the file. I mean, you'll see path like file:///E:/Csc/puzzle/crossword/crossword_home.html when you open crossword_home.html directly. (Cookies in Firefox is working but not chrome for locally opened files) Cookies will not work for locally opened files. It should come from valid domain. For example http://localhost:8080/crossword/crossword_home.html So better use ASP.net development server or iis and open the file url in browser. Attached zip file.

Saritha · Answer

Hi Raj Garu, Trash is not working properly for me...Can you please tell me? here is my code... $(document).ready(function() { //Counter counter = 0; //Make element draggable $(".drag").draggable({ helper: 'clone', containment: 'frame', //When first dragged stop: function(ev, ui) { var pos = $(ui.helper).offset(); objName = "#clonediv" + counter $(objName).css({ "left": pos.left, "top": pos.top }); $(objName).removeClass("drag"); //When an existiung object is dragged $(objName).draggable({ containment: 'parent', stop: function(ev, ui) { var pos = $(ui.helper).offset(); //console.log($(this).attr("id")); //console.log(pos.left) //console.log(pos.top) } }); } }); //Make element droppable $("#frame").droppable({ drop: function(ev, ui) { if (ui.helper.attr('id').search(/drag[0-9]/) != -1) { counter++; var element = $(ui.draggable).clone(); element.addClass("tempclass"); $(this).append(element); $(".tempclass").attr("id", "clonediv" + counter); $("#clonediv" + counter).removeClass("tempclass"); //Get the dynamically item id draggedNumber = ui.helper.attr('id').search(/drag([0-9])/) itemDragged = "dragged" + RegExp.$1 //console.log(itemDragged) $("#clonediv" + counter).addClass(itemDragged); } $("#trash").droppable({ drop:function(ev, ui) { accept: "#frame", $(ui.draggable).remove(); } }); } }); }); After dragging the letters into particular cell from that into trash it's working fine,problem is the letters are in the left side of the puzzle also droppable into trash permanantly.I want only drop the letters from cells into trash. Thanks, Saritha

Raj Bandi · Answer

Yes you can, and it is easier to validate words entered in individual cells. Make table droppable.

Saritha · Answer

Right side of my design is puzzle(it's an image),it is taking more size...so can i use table?

Saritha · Answer

Can we use table instead of using image for puzzle....

Raj Bandi · Answer

Ok, as I said before, give unique id for each letter, they'll be saved with their id's in cookie, and when we load them, rebind events like drag etc. if any for all the elements in frame div like you did for left side groups. You can save it in database, each puzzle is provided with a puzzleId. So whenever a user enters puzzle url with some id, puzzle data identified by id can be retrieved from database.

Saritha · Answer

Hi Raj Garu, Once we save the puzzle,All the letters are not saving,you already told me the maximum size is upto 4k..

Raj Bandi · Answer

Make trash icon droppable, when you drop an item on trash, simple remove it if the div id is #clonediv $("#clonediv").remove();

Saritha · Answer

Thank You so much Raj Garu..one more thing is,if i place wrong letter in particular cell,i want to remove that letter and replace other letter...for that i want to use trash...u drag the letter from puzzle(only right side) into trash box...can u please tell me for this...

Raj Bandi · Answer

Send me all the files, including css, I couldn't test anything

Raj Bandi · Answer

Is cookie stored? check browser cookie. Ok I'll have a look Send your code If possible upload your code here in zip format. If that is not working, use http://pastebin.com/ or jsfiddle.net. and paste the public url.

Saritha · Answer

yes..i tried that one...once i drag some letters into puzzle..i click on save button...then close my browser..again i open my browser i didn't get my filled puzzle(dragged letters)...

Raj Bandi · Answer

Remove that line, not required. I mean $("#btnLoad").click ... line

Saritha · Answer

Already u keep $("#btnLoad").click(LoadPuzzle); then again we have to keep loadpuzzle() function.

Raj Bandi · Answer

Ok, Use this $(document).ready(function(){ LoadPuzzle(); });

Saritha · Answer

ha...but whenever i will open the browser i want to see my filled puzzle...after saving..

Raj Bandi · Answer

Yes just to show example I added three buttons, you can remove load button and clear button. You'll need only SavePuzzle function, and save button. You dont have to worry about other functions.

Saritha · Answer

Here i am using only one button....i.e save button...u are using three buttons....

Raj Bandi · Answer

All three functions are compulsory, they are used for different purposes and are not called at once. SavePuzzle function is used for saving puzzle. When you want to save your puzzle call this function. LoadPuzzle function is used for loading already saved puzzle. When you want to load your puzzle from cookie, use this function. This may be used when user comes back and you want to load already saved puzzle. ClearPuzzle function is used for resetting puzzle or clearing. Its not compulsory to use but I included in case if you need it. Example code below, Save button saves cookie, clear button clears puzzle div, Load button loads your puzzle from cookie. First Save it, clear it, load it. Check your browser cookies, a cookie with name puzzle is stored with your puzzle letters. Raj A B C E A B B B /// Code copied from http://www.w3schools.com/js/js_cookies.asp 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; } /// Code copied from http://www.w3schools.com/js/js_cookies.asp function getCookie(c_name) { var c_value = document.cookie; var c_start = c_value.indexOf(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexOf(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexOf("=", c_start) + 1; var c_end = c_value.indexOf(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start, c_end)); } return c_value; } $(document).ready(function () { $("#btnSave").click(SavePuzzle); $("#btnLoad").click(LoadPuzzle); }); function SavePuzzle() { //set your cookie var puzzle = $("#frame").html(); puzzle = puzzle.replace(/(
|
|)/gm, ""); setCookie('puzzle', puzzle, 3); // upto 3 days } function LoadPuzzle() { //get your cookie var cookie = getCookie('puzzle'); if (cookie != null) { $("#frame").html(cookie); } } function clearPuzzle() { $("#frame").html(''); } //you can do same for object. Hope this helps Cheers, Raj

Raj Bandi · Answer

where is your button element, Ok, if the button id 'btnSave' then in document ready , add click event to btnSave $("#btnSave").click(SavePuzzle); or add button onclick attribute with SavePuzzle function SavePuzzle() { //set your cookie var puzzle = $("#frame").html(); puzzle = puzzle.replace(/(
|
|)/gm, ""); setCookie('puzzle', puzzle, 3); // upto 3 days } function LoadPuzzle() { //get your cookie var cookie = getCookie('puzzle'); if (cookie != null) { $("#frame").html(cookie); } } function clearPuzzle() { $("#frame").html(''); } Hope this helps Cheers, Raj

Raj Bandi · Answer

Yes, So you are dragging all the letter divs into Frame div. I guess you are dragging div's with id drag1, drag2 ... so on in the frame div. So frame div can contain more than one div element with the same id, Say , from drag1 set, you are dragging two divs to frame, then two divs with same id will end up in frame. I suggest you make distinct id's for each letter, if possible use custom data attribute to group them into category instead of using id's, A B C D E so in this way, u can easily find group of letters, by data-group attribute. Use this code to set and get the cookie //set your cookie var puzzle = $("#frame").html(); puzzle = puzzle.replace(/(
|
|)/gm, ""); setCookie('puzzle', puzzle, 3); // upto 3 days //read your cookie var cookie = getCookie('puzzle'); if (cookie != null) { cookie = cookie.replace(/["']/g, ""); //replace iframe div with cookie value $("#frame").html(cookie); } Note: you can store cookie value upto 4k only , this is the combined size of all the cookies for a particular domain. if exceeds we can go for html5 storage. Cheers, Raj

Saritha · Answer

Raj Garu, now u understand my requirement...

Saritha · Answer

Here is my example... http://teluguone.com/games/crossword/ h ere the leftside of the page is the final puzzle...once i click on save whatever i filled in puzzle that and all saved....and after that if i will open browser i want to see my filled puzzle...

Saritha · Answer

Id is 'frame'

Raj Bandi · Answer

Code too long, just a quick question to which div you are holding final puzzle characters (i mean the id), I wrapper or words, tabcontent, I dont want other characters, Just the final puzzle container that is holding your characters,

Saritha · Answer

Here,i am using telugu letters...instead of using telugu letters u assume english letters...and the puzzle is an image..

Raj Bandi · Answer

Copy all the letters to an array. are you using a table in show puzzle characters? , paste you puzzle html code here, I'll write a function for you Cheers, Raj

Saritha · Answer

I want to save all the letters when i click on save button...that means each and every letter in a cell...

Raj Bandi · Answer

Hi Saritha, Please see below Client Side ---------------------------- I'm assuming you are using a javascript array to store your puzzle. Copy getCookie and setCookie functions from http://www.w3schools.com/js/js_cookies.asp //Use this function instead of JSON.stringify //for function ToJson(obj) { var jsonArray = []; if (obj instanceof Array) { for (var i in obj) { jsonArray.push('{' + i + ':\"' + obj[i] + '\"}'); } return '['+jsonArray.join()+']'; } return ''; } //your puzzle array var puzzle = ["Value1","Value2","Value3"]; //serialize to json , use ToJSON in older browsers like IE var json = JSON.stringify(puzzle); //Set cookie setCookie('puzzle', json, 3); //get your cookie var cookie = getCookie('puzzle'); //deserialize to javascript var value = JSON.parse(cookie); // or use eval(cookie) alert(value[0]); // Value1 is printed //you can do same for object. Server Side ---------------------- //Serialize var ser = new System.Web.Script.Serialization.JavaScriptSerializer(); var puzzle = new string[] {"Value1", "Value2", "Value3"}; var json = ser.Serialize(puzzle); Response.Cookies.Add(new HttpCookie("puzzle", json)); //Deserialize var deser = new System.Web.Script.Serialization.JavaScriptSerializer(); var cookie = Request.Cookies["puzzle"]; if(cookie != null && !String.IsNullOrWhiteSpace(cookie.Value)) { var puzzle = deser.Deserialize (cookie.Value); } Hope this helps Cheers, Raj Cheers, Raj

Saritha · Answer

Hi Raj Garu, I just want example code.....

Raj Bandi · Answer

Convert your puzzle to json string and store it in cookie. If you want to set or read puzzle cookie on the client side --------------------- in modern browsers, use JSON.stringify and JSON.parse to serialize and deserialize. in older browsers, use https://github.com/douglascrockford/JSON-js on the server side, ------------------ use JavascriptSerializer class to serialize and deserialize to/from Json. Hope this helps. Let me know if you need example code for this. Cheers Raj

How to Save the puzzle in cookie?

Answers (31)