<html>
<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>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js">
</script>
<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;}
@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="https://www.kwiklearners.com"
target="_blank" class="btn">Register Now</a>
</div>
<script type="text/javascript">
var promoCode = '';
var bg1 = '.jpeg';
var bg2 = '.jpeg';
var bg3 = '.jpeg';
var bg4 = '.jpeg';
var bgArray= [ bg1, bg2, bg3, bg4 ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
promoCode = 'SCRATCH400';
} else if (selectBG == bg2) {
promoCode = 'SCRATCH500';
}else if (selectBG == bg3) {
promoCode = 'SCRATCH500';
} if (selectBG == bg4) {
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://jennamolby.com/scratch-and-win/images/overlay.png',
// The cursor (coin) image
'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png")
scratchMove: function (e, 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>