Code With Friends
Code With Friends was an interactive coding quiz built to teach HTML and CSS fundamentals through a drag-and-drop interface. The idea was simple: present a code template with blanks, give the user a set of answer labels, and let them drag the right ones into place.
How It Works
The quiz shows a snippet of HTML/CSS code with empty slots where key values belong. A set of draggable labels (some correct, some distractors) are displayed above the code. Users drag labels into the blanks to complete the code, then hit “Run” to check their work.
If all answers are correct, the completed HTML renders in a live preview iframe so you can see the result. If something is wrong, you get feedback to try again.
The original exercise teaches CSS background images: setting background-image, background-repeat, background-position, and margin-right on a page body.
Try It
The quiz has been rebuilt with vanilla JavaScript (no jQuery dependency) and is playable right here:
Original Implementation
The original version was built with jQuery and jQuery UI for drag-and-drop, running on a PHP site circa 2012. The question data was loaded from a separate JavaScript file, and the quiz engine supported multiple questions through a pluggable stubQuestion.js pattern.
The rebuild preserves the same quiz content and interaction model but uses the HTML5 Drag and Drop API and click-to-select as a mobile-friendly fallback. No external dependencies required.