Tag Archives: css

Javascript countdown

So I’ve created this little countdown tool.

This will count down to a specific date and time… and then display a specific message during and then after the specified time.

The tool being used to countdown to Earth Hour on the WWF website
The tool being used to countdown to Earth Hour on the WWF website

It’s pretty lightweight (and relies on JQuery – again)

The Countdown HTML:

<span class="lineOne">This is where the countdown goes </span>
<span class="subLine">until the event</span>

The Countdown Javascript:

You’ll see on line 8 and 9 there are timestamps – these are for the beginning and the end of the event – you’ll have to figure out what the timestamps for these dates and times are.

Line 44 and 49 are the messages that will come up during and after the event.

$(document).ready(function(){
		console.log("ping");
		var 	countSpeed = 2,
			dayLength = 86400000,
			hourLength = 3600000,
			minLength = 60000,
			secondLength = 1000,
			eventStamp = 1396125000000,
			eventOverStamp = 1396128600000;
			setInterval(countUp,1000 / countSpeed);

		function countUp(){

			var 	thisNow = jQuery.now(),
				eventDiff = eventStamp - thisNow,
				daysLeft = eventDiff / dayLength,
				daysLeft = Math.floor(daysLeft),
				hoursLeft = (eventDiff - (daysLeft * dayLength)) / hourLength,
				hoursLeft = Math.floor(hoursLeft),
				minsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength)) / minLength,
				minsLeft = Math.floor(minsLeft),
				secsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength)) / secondLength,
				secsLeft = Math.floor(secsLeft);
				millisLeft = eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength) - (secsLeft * secondLength);
				if(millisLeft > 99) { 
					millisLeft = ""+millisLeft;
					millisLeft = millisLeft.substring(0, millisLeft.length - 1);
				}
				if(secsLeft<10){ secsLeft = "0" + secsLeft; }
				if(minsLeft<10){ minsLeft = "0" + minsLeft; }
				if(hoursLeft<10){ hoursLeft = "0" + hoursLeft; }
				if(daysLeft<10){ daysLeft = "0" + daysLeft; }

			$(".lineOne").empty().append("00 days 00 hours 00 minutes 00 seconds ");
			$("#days").empty().append(daysLeft);
			$("#hours").empty().append(hoursLeft);
			$("#minutes").empty().append(minsLeft);
			$("#seconds").empty().append(secsLeft);
			$("#millis").empty().append(millisLeft);

			if(thisNow > eventStamp && thisNow < eventOverStamp){ 				$(".lineOne").empty().append("Earth Hour"); 				$(".subLine").empty().append("is currently underway").css("margin-top", "180px"); 				$("#heroSpace .wwf_button").empty().append("Find out what's happening"); 			} 			else if (thisNow > eventOverStamp){
				$(".lineOne").empty().append("Earth Hour");
				$(".subLine").empty().append("has been and gone").css("margin-top", "180px");
				$("#heroSpace .wwf_button").empty().append("Find out what happened");
			}

		};

	})

Obviously – please feel free to use as you wish. Let me know how you’ve found it in the comments.

Simple jquery quiz

So I was inspired by the BBC’s quiz of the year but thought – why do they use flash (eurgh)… so figured I’d see how difficult it might be to create a fully html version of it.

What I’ve ended up with is a simple-to-use bit of JS script – using jQuery – and some basic HTML and CSS mark up. It does most of the heavy lifting automatically (hopefully making it easy to implement for coders at any level).

Please note: this is my first ever tutorial so if this doesn’t make sense feel free to let me know in the comments so that I can update it accordingly.

This is (an largely un-styled) version of what you’ll end up with:

  • Q1:Is this question one?




    Next
  • Q2:Is this question two?




    Next
  • Q3:Is this question three?




    Next
  • You have scored

    Some summary text here to end the quiz

“How can I add this sexy quiz to my site?” I hear you ask. Well simply download the zip file and/or follow the steps outlined below.

HTML:
Basically to add a new question to your quiz you simply need to add a new list item (<li>) containing the question… copy & pasting might be the easiest way to do this.
Then all you need to do is update the labels, ids and values for the answers – e.g. the values for the fourth questions should be “answer4a”, “answer4b”, etc.

<ul class="theQuiz">
<li class="question q1 transition">
<form class="quizQ">
<h1>Q1:<span>Is this question one?</span></h1>
<label for="answer1a"><input class="answer" id="answer1a" type="radio" name="answer1" value="answer1a" />Yes</label>
<label for="answer1b"><input class="answer" id="answer1b" type="radio" name="answer1" value="answer1b" />No</label>
<label for="answer1c"><input class="answer" id="answer1c" type="radio" name="answer1" value="answer1c" />Nope</label>
<label for="answer1d"><input class="answer" id="answer1d" type="radio" name="answer1" value="answer1d" />Incorrect</label>
<div class="submit">Next</div>
</form>
</li>
<li class="question q2 transition">
<form class="quizQ">
<h1>Q2:<span>Is this question two?</span></h1>
<label for="answer2a">
<input class="answer" id="answer2a" type="radio" name="answer2" value="answer2a" />No</label>
<label for="answer2b"><input class="answer" id="answer2b" type="radio" name="answer2" value="answer2b" />You bet</label>
<label for="answer2c"><input class="answer" id="answer2c" type="radio" name="answer2" value="answer2c" />Nope</label>
<label for="answer2d"><input class="answer" id="answer2d" type="radio" name="answer2" value="answer2d" />Not at all</label>
<div class="submit">Next</div>
</form>
</li>
<li class="question q3 transition">
<form class="quizQ">
<h1>Q3:<span>Is this question three?</span></h1>
<label for="answer3a"><input class="answer" id="answer3a" type="radio" name="answer3" value="answer3a" />Not on your life</label>
<label for="answer3b"><input class="answer" id="answer3b" type="radio" name="answer3" value="answer3b" />No</label>
<label for="answer3c"><input class="answer" id="answer3c" type="radio" name="answer3" value="answer3c" />Indeed</label>
<label for="answer3d"><input class="answer" id="answer3d" type="radio" name="answer3" value="answer3d" />Never</label>
<div class="submit">Next</div>
</form>
</li>
<li class="finalPage">
<p class="yourScore">You have scored</p>
<p class="info">Some summary text here to end the quiz</p>

<div class="shareSpace">
<a class="nav-twitter transition" title="Tweet this page" href="http://twitter.com/home?status=[YOUR_DEFAULT_TWEET]" target=" _blank"><span class="share">Tweet your score</span></a>
<a class="nav-facebook transition" title="Share this page on Facebook" href="http://facebook.com/sharer/sharer.php?u=[URL_TO_SHARE]" target="_blank"><span class="share">Share on Facebook</span></a>
</div>
</li>
</ul>

JS:
The JS here automatically identifies how many questions you’ve added in the HTML.
It also figures out the score (and out of how many it’s from) and generates the tweet (that includes the correct score) at the end.
This does not need altering and should work automatically.
NB: The quiz uses jQuery – so it goes unsaid that this will need to be included on whichever page the quiz will sit. To keep things simple I tend to use the Google Library script.

$(document).ready (function(){
	$(".theQuiz").append('Score:  of ');
	var quizHeight = $(".theQuiz").height(),
		quizQuestionNos = $(".theQuiz li").size()-1,
		answers = [],
		submitted = 0;
	$( ".theQuiz li" ).each(function() {
		$( this ).css("height",quizHeight);
	});
	var thisID = $(this).closest(".quizQ").attr('id');
	$("input").change(function(){
		$(this).closest(".question").attr('id', 'checked');
		thisAnswer = $(this).val();
	});
	$(".submit").click(function(){
		if( $(this).closest(".question").attr('id') == "checked"){
			//pageTracker._trackEvent("Quiz", "question answered", quizName + " - " + thisAnswer);
			$(this).closest(".question").css({
				"position": "absolute",
				"top": "-" + quizHeight + "px",
				"height": quizHeight-10 + "px",
				"margin-bottom": "10px"
			});
			answers.push(thisAnswer);
			checkCorrects();
			submitted++;
			if(submitted>=quizQuestionNos){
				$(".theQuiz").addClass("finished");
				//pageTracker._trackEvent("Quiz", "completed", quizName + " - " + corrects);
				console.log(corrects);
			}
		} 
	});
	checkCorrects();
	function checkCorrects(){
		corrects = 0;
		for(var i=0; i<=(quizQuestionNos-1) && i<=answers.length; i++){
			if(answers[i] == correctAnswers[i]){
				corrects++;
			}
		}
		$("#correctAnswers").empty();
		$("#potentialAnswers").empty();
		$("#correctAnswers").append(corrects);
		$("#potentialAnswers").append(quizQuestionNos);
		var tidyName = quizName.replace(" ", "%20");
		$(".nav-twitter").attr("href", "http://twitter.com/home?status=I've%20scored%20" + corrects + "%20out%20of%20" + quizQuestionNos + "%20in%20" + tidyName + ".%20How%20will%20you%20do?%20" + window.location.href);
	};
})

CSS:
This is the bare-bones CSS. Add images, button styles (etc) to make it your own… knock yourself out.
Also – why not try messing with the transformations to affect how the questions disappear when they’ve been answered.

 .theQuiz {
	font-family: 'Open Sans', sans-serif;
	height:400px;
	list-style-type: none;
	margin:0;
	overflow: hidden;
	padding:0;
	position:relative;
	width:100%;

	background:white;
	background-size:cover;
	border: 1px solid #c4c4c4;
}

	 .theQuiz li {
	 	background:white;
		display: block;
		float:left;
		list-style-type: none;
		list-style: none;
		margin:0;
		padding:0;
		width:100%;

		background: white;
		border-bottom: solid black 1px;
		box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
	}

		li.q1, li.q2, li.q3 { background: #fff4dc;}

		 .theQuiz li form {
			background:white;
			background:rgba(255,255,255,0.8);
			float:left;
			margin:3.3em 0 0 1em;
			padding:10px;
			width:80%
		}

		 .theQuiz li h1 {
			float: left;
			font-family: 'Open Sans',Helvetica,Arial,sans-serif;
			font-size: 3em;
			font-weight: normal;
			line-height: 0.8em;
			position: relative;
			margin: 0 0 10px 0;
			padding: 0;
		}

			 .theQuiz li h1 span {
				clear:left;
				font-size: 0.7em;
				margin: 0 0 0 8px;
			}

			 .question input.answer {
				clear: left;
				float: left;
				margin: 3px 10px 0 10px;
			}

			 .question label {
				float:left;
				margin:10px 0 0 0;
				width:90%;
			}

			 .question .submit {
				clear:left;
				cursor: hand;
				float:right;
				margin:8px 10px 0 10px;
				opacity: 0.3;
			}

				 .question#checked .submit {
					opacity: 1;
				}

			/*.q1, .q2, .q3, .q4, .q5 {
				position:absolute;
					top:0;
					left:0;
			}*/

	 .finalPage {
		background:white;
		background: rgba(255,255,255,0.7);
		float:left;
		margin:1.6em 5%;
		width:90%;
	}

		 .finalPage .yourScore {
			font-size: 2.7em;
			text-align: center;
			margin:0.2em 0 3em 0;
			width:100%;
		}

		 .finalPage .info {
			margin:0 1.1em;
		}

	 .progress {
		background:white;
		background: rgba(255,255,255,0.7);
		font-size: 1em;
		line-height: 0.95em;
		margin: 0;
		padding: 0.4em;
		position: absolute;
			top:0;
			right:0;
		text-align: center;
	}

		 .progress span#correctAnswers,  .progress span#potentialAnswers {
			font-size: 1.4em;
		}

		 .finished .progress {
			background:none;
			font-size: 5em;
			text-align: center;
				top:0.9em;
				right:0;
			width:100%;
		}

			 .finished .progress span#score { display:none; }

	 .yourScore {
		font-size: 2.7em;
		text-align: center;
		margin:0.2em 0;
		width:100%;
	}

.transition {
	-moz-transition: all 600ms ease-out;
	-webkit-transition: all 600ms ease-out;
	-o-transition: all 600ms ease-out;
	transition: all 600ms ease-out;
}

FINALLY:
You will need to include this last bit of JS in your page (ideally somewhere separate within the head). This is the name of your quiz – this will be used in the automatically generated tweet at the end) and the answers.
The adding answers is pretty simple: you just need to add a correct answer for each question you’ve added to your quiz. The correct answer is identified with the value radio of the correct answer from that question. I use the format “answer[question_number][correct_answer_letter]” – e.g. “answer1c” or “answer6a”.
NOTE: these must be added in the correct order – i.e. answer1, answer2, answer3…

<script type="text/javascript">
var correctAnswers = ["answer1a","answer2b","answer3c"],
quizName = "my quiz name";
</script>

Should we be plagiarising layouts?

The curse of the digital world, if there is one, is the speed at which it changes and develops. Facebook releases a new layout ever year, Apple release a new device to view it on (and a new operating system to go with it) at the same speed and the digital world, in general, panders to the ever switching tides of change.

Don’t get me wrong…. this is great – it’s why I love digital and the reason I do what I do on a day to day basis.

However, for many, it creates an impression that they can be this wind of change. By many I don’t even mean just the individuals (like myself) who write part-time blogs or hobby sites… I also include large corporations and projects with hefty financial backing.

This, again, isn’t solely bad. I’ve written before about this pattern (in regards to Flash) and how now we have now have a subtle progression rather than designers spewing animated gifs left right and centre to dramatically transform the digital landscape. However, the issue is not ours (the visitor), but rather theirs.

Let me give you an example:

This morning I tied my shoe laces. I can’t remember doing it. I’ve tied them so many times it’s like second nature to me: the movement of my fingers, the feel of the laces, the sharp tug and pull that keeps them in place… I’ve performed this task on so many occasions I don’t even register it any longer.

But if someone were to change the way laces work tomorrow I would be lost. Recently I had to change my login for my work computer (we have to every few months for security reasons). Every morning I still input my old password… because that’s what I’m trained… neigh… conditioned to do.

This is why people complain so vigorously when Facebook alter their layout. Suddenly their whole (digital) world has been turned upside down (remember – people are, on average, spending between 18-30% of their time online on Facebook). Similarly, when new sites (and I’m including sites that have undergone redesign) are built that defy all previous conventions they better be prepared for users who don’t know where to click.

Time for another example? OK…

Recently a new site was made open to the public. You might have heard of it. It was called Google+. Now I actually rather like Google+ except for one thing… where you log out. (I’d like to point out at this stage that post Google+’s launch this has become standard across all Google products.) Along the top nav bar (when you are logged in) you are shown a picture of yourself (pretty much in the same place you are on Facebook) – this is where you click to logout. However, on Facebook, you are required to to use a menu two tabs to the right of the image to log out

Facebook’s site is the most used and so sets the standard.

Google’s sites confuse matters with their similar, but not identical, layout.

What’s the issue? You may be asking. Well not much. Except that every time I use the site I click in the wrong place. I have been conditioned to look to the right of my profile picture to log out. I have been accessing Facebook far longer… it has far more users world-wide and is, many believe, the most visited site on the web. As such it makes Google’s process seem… well… unnatural.

And I think that’s just it. We now have this sense that digital processes should be natural or innate. We live in a post iPhone world – a world that has been introduced to the concept that products should be intrinsic – you should just know how to use them. So this, I suppose, is the question… should we be copying other site’s layout when building our own?

I don’t think I have an answer to this one. It would be irresponsible to leave it to the industry giants to forge the paths of change. However it’s almost impossible for the ‘little guys’ to make themselves heard. (On a personal level I also hate the idea of fitting design to a pre-built structure or formula.)

The solution, I believe, may be to concede to our inadequacies. To admit that we don’t know… but we want to. If we know we want to take advantage of our users’ previous conditioning so that we might make our products intrinsic to use, but don’t know how we’re going to do it (bar copying someone else), we need to test. We need to trial ideas, pitch multiple wire frames, multi-variant test and bring in focus groups.

However, we would be foolish to forget where convention comes from and to ignore the best practice of others. The one question we should always be asking of our users is “where do you want to click?” Because if we know how our audience want to use our products they will be all that more likely to do so.

Let me know your thoughts using the comments section below.