Home > Programming, Servers & Scripts >

Ready-To-Run Customisable Questions Script For Your Landers (26)

12-13-2013 12:10 PM #1 caurmen (Administrator)
Ready-To-Run Customisable Questions Script For Your Landers

Need to set yourself up a questionaire for a campaign?

It's pretty common. From "Are you worried about viruses?" to "Are you willing to have sex ON DEMAND with our members?", a lot of our campaigns are based on asking people questions.

So, here's a quick, usable way to set up a questionaire for your landing page.

Note: this is a version that uses JQuery, which might be a little too heavy for mobile: test it! I'll do a lighter version for bandwidth-limited mobiles in a follow-up post.



What You'll Need For This Tutorial

You'll need:



You won't need to understand Javascript: I'll talk you through that line by line.



Just Want The Code?

If you just want a simple bit of code to copy-paste, here's a working example you can copy the CSS, HTML and Javascript from:

Code:
<head>
<style>.secondquestion, .finaltext{display: none}</style>
</head>
<body>
<h2>This is a questionaire</h2>
    
<div class="firstquestion">
    <p>This is the first question</p>
    <p><a href="#" id="click1">Yes?</a></p>
</div>
    
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="finaltext">
    <p>ACTION! I CALLS YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});</script>
You can see it running live at http://jsfiddle.net/nqJ5L/ .

Want a bit more explanation? Read on to find out what's going on in there!




The HTML and CSS

You'll need a basic landing page to add this code to, including all the text and images you want for your questions and your call to action at the end. CSS should go in a <style></style> tag as normal inside the <head>, and everything else should go inside the <body>.

Firstly, we need to create some styles for our questions and buttons.

This is pretty simple: we just need to make sure that our follow-up questions and our and CTA are invisible when the user first loads the page.

We also need to make sure that we can reference each of the questions in our Javascript, by giving them a unique class.

So, if we're creating three questions, then a bit of text and a link to our offer, we'd use the following classes:

Code:
.secondquestion, .thirdquestion, .finaltext{display: none}
Note that we don't need to create a "firstquestion" class here, because it doesn't need any styles applied to it yet.

Now, add each of the sections you want to display into your HTML, right where they should display. Enclose each section in a DIV tag with the relevant class (see the code below) - so, "firstquestion" for the first question, "secondquestion" for the second question, and so on. We need to do this so that our Javascript can make each section visible or invisible on demand.

Make sure each element you want to be clickable has an <a href="#"></a> tag around it.

Like this:

Code:
<div class="firstquestion">
<p>Are you over 25 years old?</p>
<a href="#">Yes</a><a href="#">No</a>
</div>

<div class="secondquestion">
<p>Are you willing to have sex on demand with our members?</p>
<a href="#">Yes</a><a href="#">No</a>
</div>
When you load your page up in a browser at this stage, you should see the first element, and nothing else. That's because the subsequent elements are hidden for now: we'll use Javascript to unhide them and hide the first question at the appropriate time.




The Code

First of all, we need to load JQuery, the library that allows us to add a lot of pretty interactivity to our landing page.

The best way to do that is to load it from the Google repository, because the chances are that your visitor has Google's version cached already, and that speeds up loading time. So, add this line to the BOTTOM of your landing page, just above the closing </body> tag:

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Now we'll add some simple code to hide and show questions on demand.

Add the following code below your JQuery line and above the </body> tag, enclosed in a <script></script> tag pair (if you're confused, see the full example code above under "Just Want The Code?" to see how it goes):

Code:
$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});
Now reload the page. When you click the first question (yes or no) it should fade out, and the second question should fade in.

So what's going on here?

The first line tells the web browser to run the following two lines whenever anything with a "firstquestion" class is clicked: "$(".firstquestion")" means "anything on this page with a class of "firstquestion"".

The second line, which is the first one run whenever "firstquestion" is clicked, tells anything with a class of "firstquestion" - our first div, in this case - to fade out and vanish from the page. The (1000) bit is a duration in milliseconds - in other words, "fadeOut(1000)" means "fade out over 1 second".

And the third line does the opposite: it causes "secondquestion" classed items (our second div) to fade in over 1000 milliseconds. However, in order to make things neat, we need to make sure the first div has vanished first: so we tell the web browser to wait for a second first with "delay(1000)", which tells it "delay for a second before doing this".

Currently, if you click on the question in the "secondquestion" div, nothing will happen. To fix that, just put in another block of text below the first, identical to the first one except that "secondquestion" is now the clicked item and the item to fade out, and "finaltext" is the item to fade in:

Code:
$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
If you haven't added a div for your final text and CTA, you should add that too. Give that div a class of "finaltext". We've already added the div for the second question, of course!

And that's it! You now have a working, fading questionaire.




More Ways To Extend The Questionaire

There are a lot of things you can do with this questionaire code beyond the basics.

More questions

There's no limit to the number of questions you can run - just add each in a seperate div, then repeat the block of code for each one and change the div class names. You can also include text, images, gifs, even more code in each div tag - anything you like.

Timing

It's easy to mess with the timings: try faster or slower. Just remember to keep the timing of the fadeOut and the delay the same! Timing has a huge effect on peoples' perception of a landing page, so this is definitely worth testing.

Loading...

It's very easy to add a "loading" bar, or a "scanning" image, or anything else you like. Just show them and hide them as additional elements in your code block. For example, to add a "scanning in your area" message for 3 seconds, with an animated gif, you could simply set the message up in a div tag called "scanning", and then extend the relevant block of code to:

[code]
$(".secondquestion").click(function(){
$(".secondquestion").fadeOut(1000);
$(".scanning").delay(1000).fadeIn(1000);
$(".scanning").delay(3000).fadeOut(1000);
$(".finaltext").delay(7000).fadeIn(1000);
});

Note that your final delay has to be the total of all previous fades and delays.

Other Visual Effects

If you don't like the fade option, you can use other effects to make things vanish and appear.

By default, JQuery also includes the slideDown and slideUp effects, which will make the question appear to slide out rather than fading out.

However, if you really want to go crazy on effects, you can use an additional library like Scriptaculous, which gives you a whole load of visual effects to test.

And that's it! I hope that tutorial was useful: if you have any questions, would like to offer any additional tips or have any other comments, please do drop 'em in below!

12-13-2013 12:29 PM #2 dynamicsoul (Member)

Hmm. when I copied your code from first box, and added </body></html> after the last piece, and saved it as html file.. Doesn't work.. The last bit of javascript needs ending?

12-13-2013 02:32 PM #3 bbrock32 (Administrator)

First , great post as usual Caurmen!

Second , you need to place the code inside a proper html document which starts with <html><head><body> etc and closes these tags too.

Also last , this code here :

Code:
$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
needs to be put inside script tags like :

Code:
<script language="Javascript" type="text/javascript">

$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
</script>

12-13-2013 02:33 PM #4 theoptimist (Member)

This is the best Christmas present ever, Thanks Santa!

12-13-2013 03:39 PM #5 caurmen (Administrator)

@bbrock - good catch, I'll make those points clearer in the main tutorial!

@theoptimist - Ho, ho, ho...

12-15-2013 09:38 PM #6 dynamicsoul (Member)

Still doesn't work for me..?

I had it in an html document .. and closed up the javascript.. here's my code..

Code:
<html>
<head>
<style>.secondquestion, .finaltext{display: none}</style>
</head>
<body>
<h2>This is a questionaire</h2>
    
<div class="firstquestion">
    <p>This is the first question</p>
    <p><a href="#" id="click1">Yes?</a></p>
</div>
    
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="finaltext">
    <p>ACTION! I CALLS YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="Javascript" type="text/javascript">

$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
</script>

</body>
</html>

12-16-2013 09:34 AM #7 scitox ()

Quote Originally Posted by dynamicsoul View Post
Still doesn't work for me..?

I had it in an html document .. and closed up the javascript.. here's my code..

Code:
<html>
<head>
<style>.secondquestion, .finaltext{display: none}</style>
</head>
<body>
<h2>This is a questionaire</h2>
    
<div class="firstquestion">
    <p>This is the first question</p>
    <p><a href="#" id="click1">Yes?</a></p>
</div>
    
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="finaltext">
    <p>ACTION! I CALLS YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="Javascript" type="text/javascript">

$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
</script>

</body>
</html>
You need to add the jQuery library as well. Your code should work if you do it like this:

Code:
<html>
<head>
<style>.secondquestion, .finaltext{display: none}</style>
</head>
<body>
<h2>This is a questionaire</h2>
    
<div class="firstquestion">
    <p>This is the first question</p>
    <p><a href="#" id="click1">Yes?</a></p>
</div>
    
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="finaltext">
    <p>ACTION! I CALLS YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="Javascript" type="text/javascript">

$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>

12-16-2013 09:48 AM #8 dynamicsoul (Member)

Hmm, that hasn't worked either for me.. odd.

The jquery call was already in the code, but before the javascript fade/in out..?

12-16-2013 10:39 AM #9 caurmen (Administrator)

Are you running this on a remote server or on your local machine?

There are various permissions issues around running Javascript on your local machine that may interfere with it working unless you run it remotely.

I've just tested the code you posted on my remote box, and it's working fine - I think you'll just need to upload it somewhere!

12-29-2013 07:12 AM #10 kamaleon (Member)

It worked for me locally if you change this

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"

by this src="jquery.min.js"

Of course you should have the script jquery.min.js in your same folder.

My code

Code:
<html>

<head>
<style>.secondquestion, .finaltext{display: none}</style>
</head>

<body>

<h2>This is a questionaire</h2>
    
<div class="firstquestion">
    <p>This is the first question</p>
    <p><a href="#" id="click1">Yes?</a></p>
</div>
    
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="finaltext">
    <p>ACTION! I CALL YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>

<script src="jquery.min.js"></script>

<script language="Javascript" type="text/javascript">

$(".firstquestion").click(function(){
  $(".firstquestion").fadeOut(1000);
  $(".secondquestion").delay(1000).fadeIn(1000);
});

$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".finaltext").delay(1000).fadeIn(1000);
});
</script>

</body>
</html>

But how would you send the user to a different CTA link depending on his answers? For age segmentation for example?

12-29-2013 03:07 PM #11 bbrock32 (Administrator)

But how would you send the user to a different CTA link depending on his answers? For age segmentation for example?
That would require some more advanced javascript and also will depend on the type of answers ( answer 1 might be a number , age , answer 2 might be a string etc ).

This stuff however is super easy for a developer. I bet you can get it done for $5 or $10 on fiver. Also if you are not very technical , hiring a full time overseas coder for $300 would make your life much easier.

01-09-2014 11:56 AM #12 philme (Member)

I think the google jquery library link is not working properly. I used this library instead so now the javascript function works:

Code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
It doesn't work at all for me with the google version, but works for me with the jquery.com one.

EDIT: I just noticed why it wasn't working. Caurmen you forgot the http: in front of the link!!
code should be like this:
Code:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
@kamaleon: A basic method I would use is replace the # symbol in the no button for a different html page. So you can have the html page as the same layout or make it different. Then on the different html page you can just swap the offer link to something else.

For example:
Code:
<div class="firstquestion">
<p>Question 1: Are you over 24 years old?</p>
<a href="#" class="yesbutton">Yes</a>&nbsp; &nbsp;  <a href="differentpage.html" class="nobutton">No</a>
</div>

01-09-2014 01:09 PM #13 caurmen (Administrator)

@philme - no, believe it or not that's a correctly formatted URL for the Google Jquery library. I thought the same thing when I looked at the link, but it's actually correct: https://developers.google.com/speed/libraries/devguide

However, the JQuery hosted library will work too!

01-09-2014 02:49 PM #14 philme (Member)

@caurmen - That's bizarre. I don't know what I'm doing different but it doesn't work formatted like that for me. Maybe Google made a mistake on it haha. I just added the http: to the google one and it works whereas it didn't work following their formatting.

01-10-2014 06:13 PM #15 caurmen (Administrator)

@philme - OK, that's super-wierd! What browser are you using?

It's definitely the recommended Google way to link the darn thing, and it's compliant with the RFC on URL formatting, but I recall it doesn't work in a couple of older browsers?

01-10-2014 07:39 PM #16 larceny (Member)

lol that's not a mistake. You can put any url file call in like that. All that does (when you remove http: ) is use the appropriate http or https protocol when necessary.

In other words, if you are loading/hosting an https lander, its best to use //domain.com links - that way it will then utilize the https variant if possible. I use that for any external file call. That way you don't have to remember to add https when you need it (to avoid the issue of non-encrypted file loading and not giving a warning on some browsers or the "green pad lock" symbol).

There's two reasons it might not work for you.. basically, if you are using a https lander but calling http files like jquery or whatever, it might not load or work right. The other reason is that some jquery versions don't work with certain code. You have to use the same version that was originally coded for. And/or use the noconflict thing jquery has (for older versions, etc).

04-23-2014 08:12 PM #17 Ninja Hedgehog ()

Absolutely love this style of lander. Thanks for introducing it to me in a follow-able way.

04-24-2014 04:26 AM #18 johnny cash (Member)

Is there a tutorial on how to add this into DREAMWEAVER or MUSE ?

04-24-2014 11:29 AM #19 caurmen (Administrator)

@johnny cash - Sadly Muse isn't very code-friendly. The best way to do it is to do your design in Muse, then export as HTML, and add the Javascript afterward using a text editor.

(This is a big weakness for Muse, Macaw, and most of the visual HTML editors out there at the moment. It's very annoying!)

Dreamweaver I'm not so sure, I'm afraid. I know that it has capabilities to add Javascript at the editor stage - see this excerpt from an O'Reilly book.

05-18-2014 09:10 AM #20 lewis69 (Member)

Hey Caurmen, thanks for the great tutorial, its perfect for someone like me who is completely code illiterate

Just one question, when you talk about adding a div tag called "scanning" before finaltext can you show me an example of exactly how this would look and let me know where to place it? I definitely think this would be the icing on the cake to make my lander look perfect.

Cheers again for the great tutorial

05-18-2014 09:42 AM #21 zeno (Administrator)

Lots of ways you could do it. Basically you want to make a div with class as scanning like so:

<div class="scanning"></div>

Then put whatever you want in it and the javascript code will reveal/hid the entire div.

So something like:

<div class="scanning"><img src="scanbar.gif"></div>

05-19-2014 10:54 AM #22 caurmen (Administrator)

No worries! You'd add something like this:

Code:
<div class="secondquestion">
    <p>A second question goes here</p>
    <p><a href="#" id="click1">Yes?</a></p>
    </div>

<div class="scanning"><img src="scanning.gif"><p>Now scanning. Please wait a moment...</p></div>

<div class="finaltext">
    <p>ACTION! I CALLS YOU TO IT!</p>
    <p><a href="myoffer">CLICK HERE!</a></p>
    </div>
And in your Javascript you'd modify the final section to

Code:
$(".secondquestion").click(function(){
  $(".secondquestion").fadeOut(1000);
  $(".scanning").delay(1000).fadeIn(1000).delay(3000).fadeOut(1000);
  $(".finaltext").delay(6000).fadeIn(1000);
});

05-19-2014 09:36 PM #23 lewis69 (Member)

Nice one, cheers guys

05-07-2015 06:49 PM #24 ericchuawc (Member)

Hi everyone,

Anyone managed to get it working on zeptojs? Zeptojs has quite limited tutorial.

Code:
$(".firstquestion").on('click', function(e) {
	$(".firstquestion").fadeOut(1000, function() {
		$(this).css({'display': 'none', 'visibility': 
			'hidden'});
		$(".secondquestion").css({'display':'block', 'visibility': 'visible'}).fadeIn(1000);
		
	});
});
The fadeout works seamless. But when the fadeIn part looks not as smooth as the jquery version.

Anyone done it before? I am thinking to use zeptojs instead of jquery for faster loading.

05-08-2015 05:23 AM #25 zeno (Administrator)

So... is it working but doesn't look as nice as you want?

Test it in different browsers. Chrome and FF for example use different JS rendering engines.

05-08-2015 12:05 PM #26 ericchuawc (Member)

Looks the same at both browsers but is okay, i will try to optimize further :P

Home > Programming, Servers & Scripts >