I have a scratch card i'm creating using the jQuery and websanova/wScratchPad.
The scratch pad is working well, but it's supposed to pop up a new container and a button once 50% of the surface is revealed. It is not.
Here is the link to the glitch server https://best-gambler.glitch.me/
I've searched for a solution online, but haven't come up with one.
Here is the HTML file
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700" rel="stylesheet" type="text/css">
<title>Scratch Card</title>
<style type="text/css">
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.scratchpad{
width: 450px;
height: 445px;
border: solid 10px #FFFFFF;
margin:0 auto;
}
body {
background:#efefef;
}
.scratch-container {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width:100%;
}
@media only screen and (max-width : 480px) {
.scratchpad {width:400px;height:396px;}
.scratch-container {width:400px !important;}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
.scratchpad {width:290px;height:287px;}
.scratch-container {width:290px !important;}
}
.promo-container {
background:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:450px;
padding:20px;
margin:0 auto;
text-align:center;
font-family:'Open Sans', Arial,Sans-serif;
color:#333;
font-size:16px;
margin-top:20px;
}
.btn {
background:#56CFD2;
color:#FFF;
padding:10px 25px;
display:inline-block;
margin-top:15px;
text-decoration:none;
font-weight:600;
text-transform:uppercase;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radiuss:3px;
}
</style>
</head>
<body>
<div class="scratch-container">
<div id="promo" class="scratchpad"></div>
</div>
<div class="promo-container" style="display:none;">
<div class="promo-code"></div>
<a href="www.we-know-fun.com" target="_blank" class="btn">Register Now</a>
</div>
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="/wScratchPad.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var promoCode = '';
var bg1 = 'https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Farcher-slideGreen.png';
var bg2 = 'https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Farcher-slideGreen.png';
var bg3 = 'https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Farcher-slideGreen.png';
var bgArray= [ bg1, bg2, bg3 ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
promoCode = 'SCRATCH400';
} else if (selectBG == bg2) {
promoCode = 'SCRATCH500';
} if (selectBG == bg3) {
var promoCode = '';
}
$('#promo').wScratchPad({
// the size of the eraser
size : 70,
// the randomized scratch image
bg: selectBG,
// give real-time updates
realtime : true,
// The overlay image
fg: 'https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Foverlay.png',
// The cursor (coin) image
'cursor': 'url("https://cdn.glitch.com/2c225b7b-6134-4f2b-9842-1d5d060d9cd4%2Fcoin1.png") 5 5, default',
scratchMove: function (percent) {
// Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
if ((percent > 50) && (promoCode != '')) {
$('.promo-container').show();
$('body').removeClass('not-selectable');
$('.promo-code').html('Your code is: ' + promoCode);
}
}
});
</script>
</body>
</html>
What it should do is display a separate container with some text and a button once 50% or more of the surface is 'scratched' away.
Your
scratchMovefunction should be with an additional parameterethat represents the mouse move event. I think you missed that from the documentation. I just tested it locally and it works.Also, take care that you reinitialize the
promoCodevariable in that if-else statement:var promoCode = '';. If the images would have been different and promoCode would have beenbg3(which is true since bg1, bg2 and bg3 are equal), it wouldn't work.However, you can test it yourself and see the results :)
Cheers!
Later edit:
You said it does not work...but it does work very well even online. Please take a look at this jsfiddle. Sorry for the long js code at the end of the body, but I had no other option to include the custom library. I wanted to make a jsfiddle here or to use a link to the lib to show you that it works, but I did not find a CDN lib for scratchPad and StackOverflow doesn't allow including js files from github.
Anyway, I recommend you to pay attention to this section:
That was changed into this, by me:
I used 3 random pictures from the internet. Also, note that because of the condition
if ((percent > 50) && (promoCode != '')), if the generated image is the 3rd one, nothing will pop up. Why? Because you setpromoCodeto an empty string in the if-else statement above. I don't know if this is your desired behaviour or not.