title: Creating scratch card but container won't show at the end
body: <p>I have a scratch card i'm creating using the jQuery and websanova/wScratchPad.</p>
  
  <p>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. </p>
  
  <p>Here is the link to the glitch server <a href="https://best-gambler.glitch.me/" rel="nofollow noreferrer">https://best-gambler.glitch.me/</a></p>
  
  <p>I've searched for a solution online, but haven't come up with one.</p>
  
  <p>Here is the HTML file</p>
  
  <pre><code>
    &lt;html lang="en"&gt;&lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width"&gt;
  
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700" rel="stylesheet" type="text/css"&gt;
  
           &lt;title&gt;Scratch Card&lt;/title&gt;
    &lt;style type="text/css"&gt;
  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;
  }
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="scratch-container"&gt;
    &lt;div id="promo" class="scratchpad"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="promo-container" style="display:none;"&gt;
    &lt;div class="promo-code"&gt;&lt;/div&gt;
    &lt;a href="www.we-know-fun.com" target="_blank" class="btn"&gt;Register Now&lt;/a&gt;
  &lt;/div&gt;
  
  
   &lt;script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="/wScratchPad.min.js" type="text/javascript"&gt; &lt;/script&gt;
  
  
        &lt;script type="text/javascript"&gt;
  
  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 &gt; 50) &amp;&amp; (promoCode != '')) {
           $('.promo-container').show();
            $('body').removeClass('not-selectable');
            $('.promo-code').html('Your code is: ' + promoCode);
          }
        }
   });
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>