Help creating a scratch card simulation

[jonathan (Jonathan Deutsch)]

If you look at the console, you’ll find there is an error in Chrome:

under.jpg%22:1 GET http://ioimedia.com//test/index.hyperesources/under.jpg%22 404 (Not Found)

The %22 is the culprit; it thinks there should be a quote after under.jpg -> under.jpg" (which is not the valid URL). This causes your javascript to stop working.

The root of the problem comes from the line containing:

piece1.style.backgroundImage

On Safari the URL is not quoted, on Chrome it is. You’ll need to revise your parsing to handle this.

[Eden]

Hi,

Thank you for your comment…

The question is how do I deal with this …?

I will be happy if you can send me an example.

Thank you

[jonathan (Jonathan Deutsch)]

Properly parsing backgroundImage CSS isn’t trivial but there are some solutions online (I can’t really recommend them because I haven’t used them nor are familiar enough with the spec). In your case it might be easy enough just to look at the last character and strip off a quote if it is found. Or you could use a different technique for looking up image names to supply them to your card function.

[Eden]

Hey, unfortunately I could not find a solution. ):index.hype.zip (374.4 KB)

[MarkHunte]

The problem is in the two lines:

var piece1lastPart = piece1lastPart.substring(0,piece1lastPart.length - 1);

var piece2lastPart = piece2lastPart.substring(0,piece2lastPart.length - 1);

Chrome wants -2 Safari wants -1.

The simplest thing to do is just get rid of the extra quote if it exists by adding these two lines

piece1lastPart = piece1lastPart.replace('"','');
piece2lastPart = piece2lastPart.replace('"','');

After this line TheContainer.style.height=piece1.style.height;

[Eden]

@MarkHunte

replace

Hi Thank you for the comment ...

It is indeed a problem there but this change you recommend does not work!

You know another way to make them both work simultaneously ..?

index-2.hype.zip (375.6 KB)

[MarkHunte]

Cannot look at it at the mo. But it worked on my tests. !

[Eden]

@Eden

Thank you

Thank you

[MarkHunte]

@Eden

It is indeed a problem there but this change you recommend does not work!

You know another way to make them both work simultaneously ..?

In the example of your last post you have not changed anything???

code should be :

//MOVE ALONG//
var piece1 = hypeDocument.getElementById('over'); 
var piece1lastPart = piece1.style.backgroundImage.split("/").pop();
var piece1lastPart = piece1lastPart.substring(0,piece1lastPart.length - 1);
var piece2 = hypeDocument.getElementById('under');
var piece2lastPart = piece2.style.backgroundImage.split("/").pop();
var piece2lastPart = piece2lastPart.substring(0,piece2lastPart.length - 1);
var TheContainer= hypeDocument.getElementById("Container");
TheContainer.style.width=piece1.style.width;
TheContainer.style.height=piece1.style.height;

piece1lastPart = piece1lastPart.replace('"',''); //--NEW CODE REMOVE QUOTES
piece2lastPart = piece2lastPart.replace('"','');//--NEW CODE REMOVE QUOTES
//MOVE ALONG//
			createScratchCard({
  'container':hypeDocument.getElementById("Container"), 
  'background':"${resourcesFolderName}/"+ piece2lastPart,
  'foreground':"${resourcesFolderName}/"+piece1lastPart, 
   //STOP// 
  //amount to be rubbed out before it gets fully revealed
  'percent':90, 
  //finger thickness
  'thickness':86,
	"counter":"percent",
	"callback":"callback"
  
});
piece1.style.display = "none";
piece2.style.display = "none";

[Eden]

That’s exactly what I did and it did not work!

[MarkHunte]

I am pretty sure thats exactly not what you did. I placed the code in a specific spot.

The code in the image looks nothing like your original code and has the new code in place of other code.
Thats not what I suggested you do.

Also you should note, looking at a screen grab of code especially the jumbled view presented is not very helpful.

[Eden]

@MarkHunte

('"','');

I did exactly what you said ... the original source file out of work with a number one it's only good on safari
If you look carefully you will see that for me no numbers at all.
its only ('"','');
If you can take a look at the job file sent to you.
Look maybe you can not find another solution ... because it sure is not working.
And I hope I'm wrong.

[MarkHunte]

Can you post the code you are now using, so I can see that. I cannot easily read the image.

[Eden]

@MarkHunte

Can you post the code you are now using, so I can see that. I cannot easily read the image.

Also attached video of the action.

IoiMedia.com is for sale | HugeDomains

// HYPE.documents["ScratchCard-3"]

(function(){(function k(){var f="ScratchCard-3.hyperesources",d="ScratchCard-3",c="scratchcard3_hype_container";if(false==!1)try{for(var g=document.getElementsByTagName("script"),a=0;a<g.length;a++){var b=g[a].src;if(null!=b&&-1!=b.indexOf("scratchcard3_hype_generated_script.js")){f=b.substr(0,b.lastIndexOf("/"));break}}}catch(m){}if(false==!1&&null==window.HYPE_466)null==window.HYPE_dtl_466?(window.HYPE_dtl_466=,window.HYPE_dtl_466.push(k),d=document.getElementsByTagName("head")[0],c=document.createElement("script"),
a=navigator.userAgent.match(/MSIE (\d+.\d+)/),a=parseFloat(a&&a[1])||null,c.type="text/javascript",c.src=f+"/"+(!0==(null!=a&&10>a||false==!0)?"HYPE-466.full.min.js":"HYPE-466.thin.min.js"),d.appendChild(c)):window.HYPE_dtl_466.push(k);else{window.HYPE_dtl_466=;g=window.HYPE.documents;if(null!=g[d]){b=1;a=d;do d=""+a+"-"+b++;while(null!=g[d]);for(var e=document.getElementsByTagName("div"),b=!1,a=0;a<e.length;a++)if(e[a].id==c&&null==e[a].getAttribute("HYP_dn")){var b=
1,h=c;do c=""+h+"-"+b++;while(null!=document.getElementById(c));e[a].id=c;b=!0;break}if(!1==b)return}b=;b=[{name:"ScratchPad",source:"function(hypeDocument, element, event) {\t\n\r\n\t//MOVE ALONG//\n\n\tvar piece1 = hypeDocument.getElementById('over'); \n\tvar piece1lastPart = piece1.style.backgroundImage.split("/").pop();\n\tvar piece1lastPart = piece1lastPart.replace('"','');\n\tvar piece2 = hypeDocument.getElementById('under');\n\tvar piece2lastPart = piece2.style.backgroundImage.split("/").pop();\n\tvar piece2lastPart = piece2lastPart.replace('"','');\n\tvar TheContainer= hypeDocument.getElementById("Container");\n\tTheContainer.style.width=piece1.style.width;\n\tTheContainer.style.height=piece1.style.height;\n\t//MOVE ALONG//\r\n\t\t\t\tcreateScratchCard({\r\n 'container':hypeDocument.getElementById("Container"), \n 'background':"index.hyperesources/"+ piece2lastPart,\n 'foreground':"index.hyperesources/"+piece1lastPart, \n\t //STOP// \n //amount to be rubbed out before it gets fully revealed\n 'percent':90, \n //finger thickness\n 'thickness':86,\n\t\t"counter":"percent",\r\n\t\t"callback":"callback"\r\n \n\t});\r\n piece1.style.display = "none";\n\tpiece2.style.display = "none";\n\t\n\n\t\n}",identifier:"8"},{name:"dothings",source:"function(hypeDocument, element, event) { function callback(d) { hypeDocument.showNextScene(hypeDocument.kSceneTransitionInstant, 0)\n console.log('f') }\n \n}",identifier:"23"}];e={};h={};for(a=0;a<b.length;a++)try{h[b[a].identifier]=b[a].name,e[b[a].name]=eval("(function(){return "+b[a].source+"})();")}catch(l){window.console&&window.console.log(l),e[b[a].name]=function(){}}f=new HYPE_466(d,c,{"0":{p:1,n:"over.jpg",g:"6",t:"@1x"},"1":{p:1,n:"under.jpg",g:"4",t:"@1x"},"2":{n:"scratch.min.js"}},f,,e,[{n:"ScratchScene",o:"1",X:[0]},{n:"Complete",o:"12",X:[1]}],[{o:"3",p:"600px",x:0,cA:false,Z:670,Y:980,c:"#FFFFFF",L:,bY:1,d:980,U:{},T:{kTimelineDefaultIdentifier:{i:"kTimelineDefaultIdentifier",n:"Main Timeline",z:0,b:,a:[{f:"c",p:2,y:0,z:0,i:"ActionHandler",s:{a:[{p:4,h:"8"}]},o:"kTimelineDefaultIdentifier"}],f:30}},bZ:180,O:["24","25","26"],v:{"26":{c:439,d:252,I:"None",J:"None",K:"None",g:"#E8EBED",L:"None",M:0,i:"Container",N:0,A:"#D8DDE4",x:"visible",j:"absolute",B:"#D8DDE4",k:"div",O:0,C:"#D8DDE4",z:1,P:0,D:"#D8DDE4",a:0,b:0},"25":{h:"4",p:"no-repeat",x:"visible",i:"under",q:"100% 100%",a:0,j:"absolute",b:0,c:980,k:"div",z:2,d:670,r:"inline"},"24":{h:"6",p:"no-repeat",x:"visible",i:"over",q:"100% 100%",a:0,j:"absolute",b:0,c:980,k:"div",z:4,d:670,r:"inline"}}},{o:"14",p:"600px",x:1,cA:false,Z:670,Y:980,c:"#FFFFFF",L:,bY:1,d:980,U:{},T:{kTimelineDefaultIdentifier:{i:"kTimelineDefaultIdentifier",n:"Main Timeline",z:0,b:,a:[{f:"c",p:2,y:0,z:0,i:"ActionHandler",s:{a:[{p:4,h:"23"}]},o:"kTimelineDefaultIdentifier"}],f:30}},bZ:180,O:["28","27"],v:{"28":{aV:8,w:"DONE!",x:"visible",a:393,Z:"break-word",b:248,y:"preserve",j:"absolute",z:2,yy:"nowrap",s:"Helvetica,Arial,Sans-Serif",aT:8,k:"div",aS:8,t:56,r:"inline",aU:8,G:"#000000",bD:"none"},"27":{h:"4",p:"no-repeat",x:"visible",a:0,q:"100% 100%",b:0,j:"absolute",r:"inline",c:980,k:"div",z:1,d:670}}}],{},h,{},
0,false,false,true,-1,true,true,true);g[d]=f.API;document.getElementById(c).setAttribute("HYP_dn",d);f.z_o(this.body)}})();})();

This is the link:

IoiMedia.com is for sale | HugeDomains

[MarkHunte]

Ok. So it is as I said you have changed your code. I am not sure why you have done that.!!
Thats why the new code does not work because you now are getting a bracket “)” on the end which needs removing.

Also looking at your the code I am not sure why you are going to all this trouble getting image names when you know what they are already and using ‘"${resourcesFolderName}’ in the scratch card code, are they going to be changed dynamically some how?

[Eden]

@MarkHunte

Ok. So it is as I said you have changed your code. I am not sure why you have done that.!!Thats why the new code does not work because you now are getting a bracket ")" on the end which needs removing.

Also looking at your the code I am not sure why you are going to all this trouble getting image names when you know what they are already and using '"${resourcesFolderName}' in the scratch card code, are they going to be changed dynamically some how?

I know it worked ... until probably before Google made a change Nftaom it stopped working.

Honestly, I can not really understand what you're saying ... because you told me to change the code to create my own work file. The code that you gave me.

So what do you recommend now to do ...?

[DBear]

Let's step back and take a breath, yes?

@MarkHunte

I am pretty sure thats exactly not what you did.

I concur with @MarkHunte on this.

According to your screen shot you have put the code in a different place to where Mark was saying to put it. This is where you should put it and not change anything else.

This is how it should be

index-2v2.hype.zip (345.2 KB)

[MarkHunte]

Thanks @DBear,

This is exactly what I am saying but also that you also changed the original code you posted in your zip file.

This means that the new code will not work. If you leave your original code alone and just add the new code it will work.

[Eden]

Awesome (
Sorry Apparently the mistake was mine): I understand, I have to replace the file.
Well done to all of you.

Thank you DBear

Thank you Mark

Thank you Jonathan

[EmZparis]

Thx !!! @averyone you rock my day too

Help creating a scratch card simulation

Let’s step back and take a breath, yes? I concur with @MarkHunte on this. According to your screen shot you have put the code in a different place to where Mark was saying to put it. This is where you should put it and not change anything else. [image] This is how it should be index-2v2.hype.zip (345.2 KB)