Check out the wireframes.

Part One: the HTML

A nested <ol>, input.submit, and p.feedback inside a div#quiz. The rel attribute of div#quiz is important, more on that later. The question <li>s have unique ids (q1, q2 etc) while the answer <li>s within each question have classes (a1, a2, etc) that are repeated per question.

<div id="quiz" rel="key">
  <ol>
    <li id="q1">At viverra sapien dignissim eget, vel tristique nibh posuere in? At viverra sapien dignissim eget, vel tristique nibh posuere in? At viverra sapien dignissim eget, vel tristique nibh posuere in?
      <ol>
        <li>
          <label>
            <input type="radio" name="q1">
            Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla Morbi rutrum tempor nulla</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q1">
            Donec congue accumsan turpis</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q1">
            Mauris fermentum elit et ipsum pellentesque mattis.</label>
        </li>
      </ol>
    </li>
    <li id="q2">At tempor eros, at dignissim risusvel urna fringilla varius?
      <ol>
        <li>
          <label>
            <input type="radio" name="q2">
            Proin at eros enim</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q2">
            Etiam eget diam odio</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q2">
            Vestibulum viverra leo</label>
        </li>
      </ol>
    </li>
    <li id="q3">Cursus ut hendrerit turpis suscipit risus imperdiet quis adipiscing dui porttitor est sagittis vel malesuada neque pretium?
      <ol>
        <li>
          <label>
            <input type="radio" name="q3">
            Sed nec mauris id elit condimentum</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q3">
            Praesent cursus lorem </label>
        </li>
        <li>
          <label>
            <input type="radio" name="q3">
            Nullam tempus velit quis</label>
        </li>
        <li>
          <label>
            <input type="radio" name="q3">
            Curabitur in tellus quis neque pulvinar faucibus.</label>
        </li>
      </ol>
    </li>
  </ol>
  <input type="button" value="Submit">
  <p class="feedback"></p>
</div>

Part Two: the JSON

Create a simple JSON file containing the answers to each question. Having this in a separate file makes the quiz scalable.

{
	"key": {
		"q1": "a3",
		"q2": "a2",
		"q3": "a1"
	}
}

Part Three: the JavaScript

First, let’s add our script tags. You can either put all your script in the HTML file or in a separate JS file.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
//Fun stuff goes here
</script>

Next, let’s set some variables. I find it’s a good idea to pull out the paths to file folders as variables, both because you might use them repeatedly, and because they might change during the course of development.

var imgpath = "images/";
var jsonpath = "json/";
var jsonfile = "";

Now we need to initialize some things in the $(document).ready() function. While creating the quiz, I soon remembered the browser’s tendency to remember the checked or disabled status of inputs even after a refresh, so let’s reset those to not checked or disabled. Let’s bind our checkQuiz() function to the click of the submit button (and prevent the default action, just in case). We’ll also grab the rel attribute value from div#quiz and put it in the jsonfile so we know we’re getting the right answer key for this particular quiz.

$(document).ready(function(){
	$("input[type='radio']").attr("disabled", false);
	$("input[type='radio']").attr("checked", false);
	$(".submit").click(function(e){
		e.preventDefault();
		checkQuiz();
	});
	jsonfile = $("#quiz").attr("rel")+".json";
});

We also need a function to get our answer key JSON file, and execute a callback once the file has finished loading (or throw an error if it fails to load). When we call the getData() function, we’ll execute all our quiz-checking logic in the callback — after all, we can’t check the quiz until we have all the answers.

function getData(update){
	$.getJSON(jsonpath+jsonfile, function(json){
		update(json);
	}).error(function(){alert("error");});
}

Now to the brains of the operation. In the checkQuiz() function, we first remove the submit button, so users don’t try to submit their answers twice. Then we call the getData() function and in the callback, execute the following:

1. Put the answer key object from the JSON into a new object called ans and create an empty result object.
2. Loop through the questions and populate the result object with the questions (key) and the corresponding answers the user selected (value).
3. Also in the questions loop, use the ans object to add circle images to indicate correct answers.
4. Still in the loop, compare the values from ans and result to see which questions were answered correctly and incorrectly and add respective classes.
5. After the loop, build the appropriate feedback message based on the number of correctly answered questions. Show the feedback message.

function checkQuiz(){
	$(".submit").remove();
	getData(function(data){
		var ans = data.key;
		var result = {};
		$(".question").each(function(){
			var _q = $(this).attr("id");
			var _a = $("#"+_q+" input:checked").closest("li").attr("class");
			result[_q] = _a;
			$("#"+_q+" ."+ans[_q]).append("<img src='"+imgpath+"circle.png' class='png_bg' alt='correct answer'>");
			if(ans[_q]==_a){
				$(this).addClass("correct");
			}else{
				$(this).addClass("wrong");
			}
		});
		var fdbck = "You got "+$(".correct").length+" out of "+$(".question").length+" correct. "
		if($(".correct").length==0){
			fdbck += "Better luck next time.";
		}else if($(".correct").length>$(".question").length/2){
			fdbck += "Good job!";
		}else{
			fdbck += "Not bad.";
		}
		$(".feedback").text(fdbck);
		$(".feedback").show();
	});
}

Part Four: the CSS

Just a little bit of formatting and we’re good to go. It’s probably best to remove the numbers on the nested <ol>s since they distract from the affordance of the inputs. Also we need to add our correct and wrong images as backgrounds on the .correct and .wrong <li>s. And some absolute positioning on the circle image helps us to display it right over the indicated radio button.

#quiz>ol {
	padding: 0 0 10px;
	margin: 0;
}
#quiz>ol>li {
	margin: 0 0 0 20px;
}
#quiz li img {
	vertical-align: middle;
}
#quiz ol ol {
	list-style-type: none;
	margin: 0;
	padding: 8px 15px 10px 0;
}
#quiz ol ol li {
	position: relative;
	margin: 0 0 0 -4px;
	padding: 2px 0 5px 4px;
	line-height: 18px;
	clear: left;
}
#quiz ol input {
	margin: 3px 4px;
}
#quiz ol ol li img {
	position: absolute;
	left: 0;
	top: 0;
}
.correct {
	background: url(images/right.png) right center no-repeat;
}
.wrong {
	background: url(images/wrong.png) right center no-repeat;
}
.feedback {
	font-weight: bold;
	color: #006600;
	display: none;
}

And that’s all! Here are the links to the demo and source files.

Searching for a workaround, I came across a few different posts that helped me understand the issue better, but didn’t quite work in the context of a Facebook app.

The heart of the issue is this: the parent frame will take on the EOT font when that EOT loads for the iframe, if the parent frame has not already finished loading at the time.

The solution needs to be this: load the EOT for the font after the parent frame has finished loading.

To do this, we need to perform a little bit of javascript trickery (I’m using jQuery and Facebook Javascript SDK here).

1. Remove any EOT fonts from the CSS properties for all elements in your (iframed) page, but keep the @font-face declaration in your CSS file. Create a unique class for each EOT font. For example:

   @font-face {
font-family: 'CairoRegular';
src: url('cairo-webfont.eot');
src: url('cairo-webfont.eot?#iefix') format('embedded-opentype'),
url('cairo-webfont.woff') format('woff'),
url('cairo-webfont.ttf') format('truetype'),
url('cairo-webfont.svg#CairoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

   .CairoRegular {
font-family: 'CairoRegular';
}

2. Next, create a function that adds this class to the elements that need it:

   function addfonts(){
$("#header h1,#content h3,#content h6,.cssbutton").addClass("CairoRegular");
$("#header h4,#header h2,#header h3").addClass("BallparkWeiner");
}

3. And finally, add the FB.Canvas.getPageInfo() function somewhere after your FB.init function and put your font function inside the callback:

   FB.Canvas.getPageInfo(function() {
addfonts();
});

   The getPageInfo() function was the closest thing I could find to a listener for the parent page load completion. If you can find something better, by all means use that.

FHP was looking for a design that was elegant and classy, yet simple. Since their letterhead was done in Bembo, I settled on Times New Roman as the closest/easiest match for a web font. I chose a blend of patterns, soft gradients, and subtle drop shadows to keep the eye moving around the page. In the development phase, my goal was to take advantage of the new capabilities of CSS3 as much as possible. I was very satisfied with the result in the modern browsers, but, of course, even IE9 left me disappointed. Someday.

Go-live was not, of course, without a few hitches. A few words to the wise:

• Before launching, check your server’s installed PHP version. If it’s less than 5, be prepared to turn off any fancy .htaccess tricks that your theme’s functions.php file contains. Otherwise you’ll get a 500 Internal Server Error.
• Stay away from Yahoo Small Business hosting if possible. They suck in the following ways:
• .htaccess file is not supported (no pretty permalinks)
  • Performance is poor
  • Mail can only be sent from the same domain (for Contact Form 7)
  • The MySQL database host is mysql instead of localhost as it appears to be
  • phpMyAdmin has to be installed in a directory within your site’s root. It is s-l-o-w

My role: Design — 100% Code — 100%

Visit site

The key steps in the conversion:

1. Instead of walking the character on an arrow button hover or arrow keydown, I used the accelerometer’s horizontal acceleration. Thus when the player tilts the device to the left or right, the character walks in that direction.
2. I converted most of the graphics from Flash vector drawings into PNGs. While a PC has the processor power to scale and move vector graphics quickly, phone processors are less beefy and have an easier time with bitmap graphics.
3. I downloaded the Adobe AIR SDK to compile the APK file and then downloaded the Android SDK to push the file to my DroidX for testing.

I haven’t published to the Android Market yet, but you can download and install the Cupcake Invaders app here.

This website echos the look and feel of the Dainese corporate site, but with a greater design emphasis on information and social networking. The site was built with WordPress.

My role: Design — 100% Code — 100%

Visit site

1. Find images on the web
2. Print the images
3. Trace the images on tracing paper with black ink
4. Scan the traced sketches into my computer
5. Print the traced sketches onto water-color paper
6. Add color to the sketches using paint
7. Scan the painted sketches into my computer
8. Arrange the scanned images for printing on perforated playing-card sheets
9. Print and detach the cards; smooth edges with sandpaper

To purchase a deck, please contact me.

The original script

My version:

$(function() {
    var options = {
		autoOpen: false,
		resizable: false,
		width: 462,
		height: 373,
		open: function() {
    		$(this).dialog("widget").find(".ui-dialog-titlebar").hide();
		}
    };
    var n = 1;
    $(".popup").each(function(i) {
        var dlg = $('#popup-' + n).dialog(options);
        $('.opener-' + n).click(function() {
            dlg.dialog("open");
            return false;
        });
        $('#closer-' + n).click(function() {
            dlg.dialog("close");
            return false;
        });
        n++;
    });
});

What I changed:

• In the options I added a function on open to remove the title bar.
• I used the a class on the dialog div instead of the opener link to run the each loop, because there would be multiple opener links for each dialog.
• I added a close function on a closer button.

With the use of some physics, I was able to get the frosting to follow a trajectory based on the angle of the mouse click in relation to the position of the pastry bag. The player gains points by frosting the cupcake on the correct side (top).

Read about how I converted the game to an Android app or download the app file itself.