Creating scratch card but container won't show at the end

Question

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.

Adrian Pop · Accepted Answer · 2019-01-25T16:39:24.820

Your scratchMove function should be with an additional parameter e that 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 promoCode variable in that if-else statement: var promoCode = '';. If the images would have been different and promoCode would have been bg3 (which is true since bg1, bg2 and bg3 are equal), it wouldn't work.

scratchMove: function (e, percent) { 
    console.log(percent);

   if ((percent > 50) && (promoCode != '')) {
      $('.promo-container').show();
      $('body').removeClass('not-selectable');
      $('.promo-code').html('Your code is: ' + promoCode);
   }
}

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:

if (selectBG == bg1) {
    promoCode = 'SCRATCH400';
  } else if (selectBG == bg2) {
    promoCode = 'SCRATCH500';
  } if (selectBG == bg3) {
    var promoCode = '';
  }

That was changed into this, by me:

if (selectBG === bg1) {
  promoCode = 'SCRATCH400';
} else if (selectBG === bg2) {
  promoCode = 'SCRATCH500';
} else if (selectBG === bg3) {
  promoCode = '';
}

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 set promoCode to an empty string in the if-else statement above. I don't know if this is your desired behaviour or not.

Thanks for the suggestion! I upvoted, but it won't publicly display since i'm new. I originally had the ```e``` parameter in there, but it wasn't working then either. I updated it with your snippet and changed the images so we can see if that part is working. The container still won't pop up. Any other suggestions? — Mike Haskin, Jan 25 '19 at 15:34
@MikeHaskin please see my answer again, I added some extra info and an external jsfiddle for you to test. — Adrian Pop, Jan 25 '19 at 16:39
Adrian, you are the man! I made the minor tweaks to the script after checking your flawless test. It still wasn't working. I tried including the library internally like you did and everything started working! I'm just happy to see the container pop up like it should. Thanks again! — Mike Haskin, Jan 25 '19 at 17:52
@MikeHaskin Glad it helped! If you want to use it without including the entire library in the page, I suggest to put in the `head` of the html file the script for `jquery` (``) and then the one for the `scratchPad` (``), *in this order*. The script can be downloaded locally from github as you did before. On my system that works too! — Adrian Pop, Jan 25 '19 at 18:06
Thank you!! I will definitely do that so the document remains somewhat clean. — Mike Haskin, Jan 25 '19 at 23:01

Creating scratch card but container won't show at the end

1 Answers1