diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dcf76d3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+# Editor files
+*~
+
diff --git a/Examples/CTATDragNDrop.brd b/Examples/CTATDragNDrop.brd
new file mode 100644
index 0000000..0dd5894
--- /dev/null
+++ b/Examples/CTATDragNDrop.brd
@@ -0,0 +1,97 @@
+<?xml version="1.0" standalone="yes"?>
+
+<stateGraph firstCheckAllStates="true" caseInsensitive="true" unordered="false" lockWidget="true" hintPolicy="Use Both Kinds of Bias" version="4.0" suppressStudentFeedback="Show All Feedback" highlightRightSelection="true" startStateNodeName="%(startStateNodeName)%" tutorType="Example-tracing Tutor">
+    <startNodeMessages>
+        <message>
+            <verb>SendNoteProperty</verb>
+            <properties>
+                <MessageType>StartProblem</MessageType>
+                <ProblemName>CTATDragNDrop</ProblemName>
+            </properties>
+        </message>
+        <message>
+            <verb>SendNoteProperty</verb>
+            <properties>
+                <MessageType>StartStateEnd</MessageType>
+            </properties>
+        </message>
+    </startNodeMessages>
+    <node locked="false" doneState="false">
+        <text>CTATDragNDrop</text>
+        <uniqueID>1</uniqueID>
+        <dimension>
+            <x>606</x>
+            <y>30</y>
+        </dimension>
+    </node>
+    <node locked="false" doneState="false">
+        <text>state1</text>
+        <uniqueID>2</uniqueID>
+        <dimension>
+            <x>646</x>
+            <y>140</y>
+        </dimension>
+    </node>
+    <edge>
+        <actionLabel preferPathMark="true" minTraversals="1" maxTraversals="1">
+            <studentHintRequest></studentHintRequest>
+            <stepSuccessfulCompletion></stepSuccessfulCompletion>
+            <stepStudentError></stepStudentError>
+            <uniqueID>1</uniqueID>
+            <message>
+                <verb>SendNoteProperty</verb>
+                <properties>
+                    <MessageType>CorrectAction</MessageType>
+                    <Selection>
+                        <value>sink</value>
+                    </Selection>
+                    <Action>
+                        <value>SetChildren</value>
+                    </Action>
+                    <Input>
+                        <value>circle</value>
+                    </Input>
+                    <transaction_id>T20bfb39b-09d6-43ad-bb4f-7838cfb0f399</transaction_id>
+                </properties>
+            </message>
+            <buggyMessage>No, this is not correct.</buggyMessage>
+            <successMessage></successMessage>
+            <hintMessage>Please provide your answer 'No_Value' in the highlighted element.</hintMessage>
+            <callbackFn></callbackFn>
+            <actionType>Correct Action</actionType>
+            <oldActionType>Correct Action</oldActionType>
+            <checkedStatus>Never Checked</checkedStatus>
+            <matchers Concatenation="true">
+                <Selection>
+                    <matcher>
+                        <matcherType>ExactMatcher</matcherType>
+                        <matcherParameter name="single">sink</matcherParameter>
+                    </matcher>
+                </Selection>
+                <Action>
+                    <matcher>
+                        <matcherType>ExactMatcher</matcherType>
+                        <matcherParameter name="single">SetChildren</matcherParameter>
+                    </matcher>
+                </Action>
+                <Input>
+                    <matcher>
+                        <matcherType>ExactMatcher</matcherType>
+                        <matcherParameter name="single">dndcircle</matcherParameter>
+                    </matcher>
+                </Input>
+                <Actor linkTriggered="false">Student</Actor>
+            </matchers>
+        </actionLabel>
+        <preCheckedStatus>No-Applicable</preCheckedStatus>
+        <rule>
+            <text>unnamed</text>
+            <indicator>-1</indicator>
+        </rule>
+        <sourceID>1</sourceID>
+        <destID>2</destID>
+        <traversalCount>0</traversalCount>
+    </edge>
+    <EdgesGroups ordered="true"></EdgesGroups>
+</stateGraph>
+
diff --git a/Examples/CTATDragNDrop.html b/Examples/CTATDragNDrop.html
new file mode 100644
index 0000000..5ea011c
--- /dev/null
+++ b/Examples/CTATDragNDrop.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CTATDragNDrop Demo</title>
+
+<link rel="stylesheet" href="http://ctat.pact.cs.cmu.edu/html5releases/latest/CTAT.css"/>
+<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
+<script>
+	$(function() {
+		initTutor({"question_file":'CTATDragNDrop.brd'});
+	});
+</script>
+<style type="text/css">
+body {
+	background-color: lightgrey;
+}
+
+div.tutor_window {
+	position: relative;
+	background-color: white;
+	border: 1px solid black;
+	width: 80%;
+	margin: 0 auto;
+	box-shadow: 10px 10px 5px grey;
+}
+</style>
+</head>
+<body>
+  <div class="tutor_window">
+    <h1>CTATDragNDrop Demo</h1>
+    <p>A simple Drag-N-Drop example for testing some basic functionality.
+      As it is currently configured, Sink can only have a single item dragged to it.
+      The correct answer is the blue circle.
+      Use the submit button to submit Sink for grading.</p>
+    <div style="margin:5px;padding:5px;">
+      Source:
+      <div id="source" class="CTATDragNDrop" style="padding:5px;" data-ctat-tutor="false">
+	<div id="dndcircle" style="width:48px;height:48px;">
+	  <svg width="48" height="48"><circle cx="24" cy="24" r="20" stroke="darkblue" fill="blue" stroke-width="2px"/></svg>
+	</div>
+	<div id="dndtext">Square</div>
+	<div id="dndimg"><img src="../skindata/ctat-icon.gif"/></div>
+	<div>unnamed</div>
+      </div>
+    </div>
+    <div style="margin:5px;padding:5px;">
+      Sink:
+      <div id="sink" class="CTATDragNDrop" style="padding:5px;" data-ctat-max-cardinality="1" data-ctat-tutor="false">
+      </div>
+      <div id="submit" class="CTATSubmitButton" data-ctat-target="sink">Submit</div>
+    </div>
+    <div id="hint-box"
+	 style="float: right; position: absolute; bottom: 0; right: 0; margin: 3px;">
+      <div id="HintWindow" class="CTATHintWindow" style="display: inline-block;"></div>
+      <div style="float: right;">
+	<div id="hint-button" class="CTATHintButton" style="margin: 0 5px 5px 5px"></div>
+	<div id="done-button" class="CTATDoneButton" style="margin: 0 5px 0px 5px"></div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>