Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE HTML>
<html>
<head>
<title>Asian Paint Survey Creative</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript" src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></script>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 16px;
color: #333;
width: 100%;
height: 100%;
margin: 0px;
}
a {
text-decoration: none;
}
.scene_bg {
padding: 5px 10px 0px;
background-color: #fff2cc;
width: 300px;
height: 250px;
padding: 7px 15px 2px;
box-sizing: border-box;
}
#thankyou .scene_bg {
padding: 5px 10px;
}
.scene_bg .optionBox, .scene_bg span.ans {
display: flex;
}
.scene_bg span.ans {width: 100%}
.scene_bg .optionBox tbody {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
flex-basis: 100%;
}
.scene_bg .optionBox tr {
flex-basis: 49%;
margin-bottom: 0.3em
}
.scene_bg .optionBox tr:nth-child(1) {
display: none;
}
.scene_bg span.ans img {
width: 4.3em;
height: auto;
}
.img-z0fv {
display: inline-block;
vertical-align: middle;
width: 20px; height: 20px;
}
.scene_bg h2 {
font-size: 15px;
font-weight: normal;
line-height: 18px;
text-align: left;
margin: 0 0 8px;
overflow: hidden;
min-height: 3.4em;
}
#thankyou h2 {
height: auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
text-align: left;
background: rgb(255, 255, 255, 80%);
border: 2px solid rgb(112,112,112,50%);
border-radius: 10px;
padding: 0.2em .5em;
cursor: pointer;
width: 230px;
/* height: 33px; */
color: #000000;
font-size: 12px; line-height: 11px;
font-weight: bold;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container:hover, .chkBoxCn.selected .container{
/* background: #fe017a; */
background: #eec349;
color: #ffffff;
}
#question2 .container {
display: flex;
align-items: center;
}
#question3 .container {
}
.chkBoxCn, label {
display: block;
position: relative;
}
.chkBoxCn {
overflow: hidden;
}
.chkBoxCn.selected, .chkBoxCn:hover {
}
.container input {
position: absolute;
top: 0;
opacity: 0;
cursor: pointer;
}
.number {
display: inline-block;
vertical-align: middle;
padding: 0.3em 0.3em;
background: #d9d2e9;
border-radius: 20px;
color: black;
margin: 0 0.5em 0 0;
font-weight: bold;
}
.gwd-div-3c61, .cta {
background: #ffffff;
border: 1px solid #eec349;
display: inline-block;
padding: 6px;
line-height: 0px;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
}
.gwd-div-3c61 .gwd-span-l1ff, .cta .gwd-span-l1ff {
display: inline-block;
vertical-align: middle;
color: #111;
font-weight: bold;
padding: 0.7em 1em;
font-size: 0.9em;
}
.gwd-div-3c61 img, .cta img {
}
#question2,
#question3,
#question4,
#question5,
#thankyou {
display: none;
}
#bg-exit {
cursor: pointer;
width: auto;
visibility: hidden;
opacity: 0;
height: auto;
z-index: 1;
}
.txt-cntr {
text-align: center;
}
.reloadr {
width: 20px; height: auto;
}
td.half {
width: 120px;
}
td.space {
width: 20px;
}
#question4 > tbody > tr > td > table > tbody > tr:nth-child(3) > td {
width: 207%
}
td.spacer-10, td.spacer-20 {
width: 10px; height: 10px; font-size: 10px; line-height: 1em;
}
td.spacer-20 {
height: 20px;
}
img.quizImg {
width: 42px; height: 40px; display: block; margin: 0 auto .2em;
}
</style>
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
</head>
<body>
<table id="question1" width="300" cellpadding="0" cellspacing="0" border="0" align="left" data-type="single-choice" class="scene">
<tr>
<td width="280" height="230" valign="top" align="left" class="scene_bg">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td valign="top" align="left" class="qes">
<h2>Q1. Which brand do you associate more with <b>"best salted chips</b>"?</h2>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="optionBox" >
<tr>
<td colspan="3" class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">A</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">B</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">C</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">D</span><span class="ans"></span>
</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" class="spacer-10" style=""> </td>
</tr>
<tr>
<td colspan="3" valign="top" align="center">
<a href="javascript:;" class="cta" id="answer1" data-style="background: linear-gradient(to right, rgb(205, 217, 85), rgb(116, 249, 242));"><span class="gwd-span-l1ff">NEXT</span>
<!-- <img id="arrow_2" src="assets/arrow.svg" scaling="stretch" class="img-z0fv"> -->
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="question2" width="300" cellpadding="0" cellspacing="0" border="0" align="left" data-type="single-choice" class="scene">
<tr>
<td width="280" height="230" valign="top" align="left" class="scene_bg">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td valign="top" align="left" class="qes" colspan="3">
<h2>Q2. Which brand do you think is more "<b>tastier</b>"?</h2>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="optionBox">
<tr>
<td colspan="3" class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">A</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">B</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">C</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">D</span><span class="ans"></span>
</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="center" colspan="3">
<a href="javascript:;" class="cta" id="answer2" data-style="background: linear-gradient(to right, rgb(205, 217, 85), rgb(116, 249, 242));">
<span class="gwd-span-l1ff">NEXT</span>
<!-- <img id="arrow_2" src="assets/arrow.svg" scaling="stretch" class="img-z0fv"> -->
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="question3" width="300" cellpadding="0" cellspacing="0" border="0" align="left" data-type="single-choice" class="scene">
<tr>
<td width="280" height="230" valign="top" align="left" class="scene_bg">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td valign="top" align="left" class="qes">
<h2>Q3. Which brand do you <b>prefer</b> the most? </h2>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="optionBox">
<tr>
<td colspan="3" class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">A</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">B</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">C</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">D</span><span class="ans"></span>
</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="center">
<a href="javascript:;" class="cta" id="answer3" data-style="background: linear-gradient(to right, rgb(205, 217, 85), rgb(116, 249, 242));"><span class="gwd-span-l1ff">Next</span>
<!-- <img id="arrow_2" src="assets/arrow.svg" scaling="stretch" class="img-z0fv"> -->
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="question4" width="300" cellpadding="0" cellspacing="0" border="0" align="left" data-type="single-choice" class="scene">
<tr>
<td width="280" height="230" valign="top" align="left" class="scene_bg">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td valign="top" align="left" class="qes">
<h2>Q4. Next time you <b>buy</b> from a brand, which one are you most likely to buy from? </h2>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" class="optionBox">
<tr>
<td colspan="3" class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">A</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">B</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">C</span><span class="ans"></span>
</label>
</td>
</tr>
<tr>
<td valign="top" align="left" class="chkBoxCn">
<label class="container" style="width:100%;">
<span class="number">D</span><span class="ans"></span>
</label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="spacer-10"> </td>
</tr>
<tr>
<td valign="top" align="center">
<a href="javascript:;" class="cta" id="submit" data-style="background: linear-gradient(to right, rgb(205, 217, 85), rgb(116, 249, 242));"><span class="gwd-span-l1ff">Submit</span>
<!-- <img id="arrow_2" src="assets/arrow.svg" scaling="stretch" class="img-z0fv"> -->
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="thankyou" width="300" cellpadding="0" cellspacing="0" border="0" align="left">
<tr>
<td valign="center" class="scene_bg">
<h2 class="gwd-span-sb4t">Thank you</h2>
<p class="txt-cntr" style="display: none;">
<img class="reloadr" src="assets/reaload.gif" scaling="stretch" />
</p>
<!-- new EXIT-BTN implementation; -->
<div id="bg-exit" class="cta"><span class="gwd-span-l1ff">Auto Trigger</span></div>
</td>
</tr>
</table>
<script>
if (!Enabler.isInitialized()) {
Enabler.addEventListener(
studio.events.StudioEvent.INIT,
enablerInitialized);
} else {
enablerInitialized();
}
function enablerInitialized() {
// Enabler initialized.
// In App ads are rendered offscreen so animation should wait for
// the visible event. These are simulated with delays in the local
// environment.
if (!Enabler.isVisible()) {
Enabler.addEventListener(
studio.events.StudioEvent.VISIBLE,
adVisible);
} else {
adVisible();
}
}
function adVisible() {
// Ad visible, start ad/animation.
}
</script>
<script type="text/javascript">
var Counters = []
Counters['Q1A1']=function(){Enabler.counter('Q1A1');}
Counters['Q1A2']=function(){Enabler.counter('Q1A2');}
Counters['Q1A3']=function(){Enabler.counter('Q1A3');}
Counters['Q1A4']=function(){Enabler.counter('Q1A4');}
Counters['Q2A1']=function(){Enabler.counter('Q2A1');}
Counters['Q2A2']=function(){Enabler.counter('Q2A2');}
Counters['Q2A3']=function(){Enabler.counter('Q2A3');}
Counters['Q2A4']=function(){Enabler.counter('Q2A4');}
Counters['Q3A1']=function(){Enabler.counter('Q3A1');}
Counters['Q3A2']=function(){Enabler.counter('Q3A2');}
Counters['Q3A3']=function(){Enabler.counter('Q3A3');}
Counters['Q3A4']=function(){Enabler.counter('Q3A4');}
Counters['Q4A1']=function(){Enabler.counter('Q4A1');}
Counters['Q4A2']=function(){Enabler.counter('Q4A2');}
Counters['Q4A3']=function(){Enabler.counter('Q4A3');}
Counters['Q4A4']=function(){Enabler.counter('Q4A4');}
function tabOneClickHandler1(e) {
var ele = document.getElementsByName('question1');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked) {
console.log('>> Clicked : '+ele[i].value);
Counters[ele[i].value]();
document.getElementById('question1').style.display = "none";
document.getElementById('question2').style.display = "block";
}
}
}
function tabOneClickHandler2(e) {
var ele = document.getElementsByName('question2');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked) {
console.log('>> Clicked : '+ele[i].value);
Counters[ele[i].value]();
document.getElementById('question2').style.display = "none";
document.getElementById('question3').style.display = "block";
}
}
}
function tabOneClickHandler3(e) {
var ele = document.getElementsByName('question3');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked) {
console.log('>> Clicked : '+ele[i].value);
Counters[ele[i].value]();
document.getElementById('question3').style.display = "none";
document.getElementById('question4').style.display = "block";
}
}
setTimeout(function(){
// bgExitHandler();
},1000);
}
function tabOneClickHandler4(e) {
var ele = document.getElementsByName('question4');
for (i = 0; i < ele.length; i++) {
if (ele[i].checked) {
console.log('>> Clicked : '+ele[i].value);
Counters[ele[i].value]();
document.getElementById('question4').style.display = "none";
document.getElementById('thankyou').style.display = "block";
}
}
}
document.getElementById('answer1').addEventListener('click', tabOneClickHandler1, false);
document.getElementById('answer2').addEventListener('click', tabOneClickHandler2, false);
document.getElementById('answer3').addEventListener('click', tabOneClickHandler3, false);
document.getElementById('submit').addEventListener('click', tabOneClickHandler4, false);
// new EXIT-BTN implementation;
// function bgExitHandler(e) {
// Enabler.exit('Background Exit');
// Enabler.exit(''); //enter URL here;
// }
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
//shuffleOptions;
let qaArr0 = ['<img src="logo-lays.png" alt="Lays Wafer Chips" /> <input type="radio" name="question1" id="q1a1" value="Q1A1" class="radio">','<img src="Haldiram\'s_2024_Logo.svg.png" alt="Haldiram" /> <input type="radio" name="question1" id="q1a2" value="Q1A2" class="radio"> ','<img src="BalajiWafersLogo.svg.png" alt="Balaji" /> <input type="radio" name="question1" id="q1a3" value="Q1A3" class="radio">','<img src="uncle-chips-logo.png" alt="Uncle Chipps" /> <input type="radio" name="question1" id="q1a4" value="Q1A4" class="radio">'];
qaArr0.sort((a, b) => 0.4 - Math.random());
let tb0 = document.getElementById('question1');
for (a=0; a < qaArr0.length; a++){
let ans = tb0.querySelectorAll('.ans');
// console.log('>> '+ans.length);
for(s=0; s < ans.length; s++){
console.log(ans[a].innerHTML);
if(a == 0){
ans[s].innerHTML = qaArr0[s];
// console.info(ans[s].parentElement.parentElement);
}
}
}
let qaArr1 = ['<img src="logo-lays.png" alt="Lays Wafer Chips" /> <input type="radio" name="question2" id="q2a1" value="Q2A1" class="radio">','<img src="Haldiram\'s_2024_Logo.svg.png" alt="Haldiram" /> <input type="radio" name="question2" id="q2a2" value="Q2A2" class="radio"> ','<img src="BalajiWafersLogo.svg.png" alt="Balaji" /> <input type="radio" name="question2" id="q2a3" value="Q2A3" class="radio">','<img src="uncle-chips-logo.png" alt="Uncle Chipps" /> <input type="radio" name="question2" id="q2a4" value="Q2A4" class="radio">'];
qaArr1.sort((a, b) => 0.4 - Math.random());
let tb1 = document.getElementById('question2');
for (a=0; a < qaArr1.length; a++){
let ans = tb1.querySelectorAll('.ans');
for(s=0; s < ans.length; s++){
if(a == 0){
ans[s].innerHTML = qaArr1[s];
}
}
}
let qaArr2 = ['<img src="logo-lays.png" alt="Lays Wafer Chips" /> <input type="radio" name="question3" id="q3a1" value="Q3A1" class="radio">','<img src="Haldiram\'s_2024_Logo.svg.png" alt="Haldiram" /> <input type="radio" name="question3" id="q3a2" value="Q3A2" class="radio"> ','<img src="BalajiWafersLogo.svg.png" alt="Balaji" /> <input type="radio" name="question3" id="q3a3" value="Q3A3" class="radio">','<img src="uncle-chips-logo.png" alt="Uncle Chipps" /> <input type="radio" name="question3" id="q3a4" value="Q3A4" class="radio">'];
qaArr2.sort((a, b) => 0.4 - Math.random());
let tb2 = document.getElementById('question3');
for (a=0; a < qaArr2.length; a++){
let ans = tb2.querySelectorAll('.ans');
for(s=0; s < ans.length; s++){
if(a == 0){
ans[s].innerHTML = qaArr2[s];
}
}
}
let qaArr3 = ['<img src="logo-lays.png" alt="Lays Wafer Chips" /> <input type="radio" name="question4" id="q4a1" value="Q4A1" class="radio">','<img src="Haldiram\'s_2024_Logo.svg.png" alt="Haldiram" /> <input type="radio" name="question4" id="q4a2" value="Q4A2" class="radio"> ','<img src="BalajiWafersLogo.svg.png" alt="Balaji" /> <input type="radio" name="question4" id="q4a3" value="Q4A3" class="radio">','<img src="uncle-chips-logo.png" alt="Uncle Chipps" /> <input type="radio" name="question4" id="q4a4" value="Q4A4" class="radio">'];
qaArr3.sort((a, b) => 0.4 - Math.random());
let tb3 = document.getElementById('question4');
for (a=0; a < qaArr3.length; a++){
let ans = tb3.querySelectorAll('.ans');
for(s=0; s < ans.length; s++){
if(a == 0){
ans[s].innerHTML = qaArr3[s];
}
}
}
//Handling Option Clicks;
var a = document.querySelectorAll('.radio');
for (let i = 0; i < a.length; i++) {
setTimeout(function(){
a[i].addEventListener('change',function(){
let aType = a[i].closest('.scene').getAttribute('data-type');
let sibLings = document.getElementsByName(a[i].getAttribute('name'));
for(let k = 0; k < sibLings.length; k++) {
switchClass(sibLings[k],false);
switchClass(this,true);
}
});
},1000);
}
function switchClass(a, s) {
if(s==true){
var thisParent = a.closest('.chkBoxCn');
thisParent.classList.add('selected');
}
if(s==false){
var thisParent = a.closest('.chkBoxCn');
thisParent.classList.remove('selected');
}
}
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
8
Requests
3
Domains
75KB
Transfer Size
175KB
Content Size
205.0ms
Dom Content Loaded
212.0ms
First Paint
219.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...