Issue with Scratch ad template

1

Hey guys!

I hope this note finds everyone well.

I’m having a bit of an issue with the scratch off. It works fine when using Mac devices (iPads) and viewing in Chrome on the desktop but when using an Android (Samsung) mobile devices, Firefox and Chrome on the desktop, the document does not display. It only displays a gray background.

The file works the same way even after I export it to HTML.

I tried to figure this out as much as I can. I’m thinking it has to be a js error so I used an on javascript tester. I did receive many warnings. Here are a few that were found in the _hype_generated_script.js and the scratch.min.js.

ScratchOff Hype Generated JS

Use ‘===‘ to compare with ‘null’.
Use ‘===‘ to compare with ‘false’.
Confussing use of ‘!’.
‘a’ used out of scope.
‘f’ used out of scope.
Don’t make functions within a loop.

ScratchOff JS

‘e’ is already defined.
‘f’ is already defined.
Missing radix parameter.
Use ‘!==’ to compare with ‘0’.
Use ‘!==’ to compare with ‘0’.
Missing ‘()’ invoking a constructor.
Unnecessary semicolon.

Any help or direction would be so much appreciated.
Thanks so much!
Marian

2

You said earlier it worked on Chrome, but then you said it doesn't work on Chrome? What version of browser are you using on the Android device?

For me it works on Chrome + Firefox on a Mac and on a Galaxy S8 / Chrome:

Screen Shot 2017-09-12 at 3.40.05 PM.png413×702 216 KB

The URL I tested: https://2give.s3.amazonaws.com/temp/2017/indexMR-vDBear-2-MR.html

3

Hi Daniel.
Thanks for getting back to me.
That scratch off you show here was something I did months ago, totally forgot about it but, I have been using it as a template for the new design which is not working in both Chrome and FF or the Samsungs.
I can revisit that document to see what broke with the design I’m working on now.

The one version of the Samsung is Android 5.1.1 and Chrome 60.0.3112.

Thanks for your help.
I’ll let you know how this works out for me.
Marian

4

Hi Daniel!

The file that was not working for me in FF or Chrome and the Samsung was because of different code used. The reason why I was using the second code so not to go into code when images were being replaced. At the time I was only testing in Safari with the second code.

This code works for all browsers:

createScratchCard({
      'container': document.getElementById('scratchcard'), 
      'background':"${resourcesFolderName}/bottom.png",
      'foreground':"${resourcesFolderName}/top.jpg", 
      'percent':90,
      'thickness':50,
      'callback': 'callback',
      "coin":""
	});

This code does not:

    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;
	TheContainer.style.opacity=100;
	//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':50,
		"counter":"percent",
		"callback":"callback"
      
	});
    piece1.style.display = "none";
	piece2.style.display = "none";

I would still like to get the above code working on all browsers and androids.
Thanks so much for your help and reminding me of the original code.

Marian

5

Can you share what you have so far?

6

Sure!
Here’s a copy for your review.
Marian482x768-ScratchOff-2.zip (1.2 MB)