diff --git a/common/lib/capa/capa/templates/edit-a-molecule.html b/common/lib/capa/capa/templates/edit-a-molecule.html
new file mode 100644
index 0000000000..b63fafefdb
--- /dev/null
+++ b/common/lib/capa/capa/templates/edit-a-molecule.html
@@ -0,0 +1,33 @@
+
+
+
+ Edit A Molecule
+ Edit A Molecule
+ The molecule Dopamine is shown below. Dopamine is a neurotransmitter.
+
+
+
+
+
+
+ Update
+ Edit the molecule to complete each one of the following the tasks. Click the check button to check your answer for that. Click submit when you are done.
+
+
+
diff --git a/common/static/applets/JME.jar b/common/static/applets/JME.jar
new file mode 100644
index 0000000000..d571682d7e
Binary files /dev/null and b/common/static/applets/JME.jar differ
diff --git a/common/static/css/capa/edit-a-molecule.css b/common/static/css/capa/edit-a-molecule.css
new file mode 100644
index 0000000000..b641b80408
--- /dev/null
+++ b/common/static/css/capa/edit-a-molecule.css
@@ -0,0 +1,38 @@
+/** Add css rules here for your application. */
+
+
+/** Example rules used by the template application (remove for your app) */
+h1 {
+ font-size: 2em;
+ font-weight: bold;
+ color: #777777;
+ margin: 40px 0px 70px;
+}
+
+.calculateButton {
+ display: block;
+ font-size: 16pt;
+}
+
+.newMoleculeButton {
+ display: block;
+ font-size: 16pt;
+}
+
+/** Most GWT widgets already have a style name defined */
+.gwt-DialogBox {
+ width: 400px;
+}
+
+.dialogVPanel {
+ margin: 5px;
+}
+
+.serverResponseLabelError {
+ color: red;
+}
+
+/** Set ids using widget.getElement().setId("idOfElement") */
+#closeButton {
+ margin: 15px 6px 6px;
+}
diff --git a/common/static/js/capa/edit-a-molecule.js b/common/static/js/capa/edit-a-molecule.js
new file mode 100644
index 0000000000..9822c8ee15
--- /dev/null
+++ b/common/static/js/capa/edit-a-molecule.js
@@ -0,0 +1,87 @@
+$(document).ready(function(){
+ var applet = $("#JME")[0];
+ var template = _.template($("#task-template").text());
+ var timeout = 1000;
+
+ function waitForApplet() {
+ if (applet.isActive && applet.isActive()) {
+ console.log("Applet is ready.");
+ loadInitialData();
+ } else if (timeout > 30 * 1000) {
+ console.error("Applet did not load on time.");
+ } else {
+ console.log("Waiting for applet...");
+ setTimeout(waitForApplet, timeout);
+ }
+ }
+
+ function loadInitialData() {
+ console.log("Loading mol data...");
+ jQuery.ajax({
+ url: "dopamine.mol",
+ dataType: "text",
+ success: function(data) {
+ console.log("Done.");
+ setup(data);
+ },
+ error: function() {
+ console.error("Cannot load mol data.");
+ }
+ });
+ }
+
+ function setup(data) {
+ applet.readMolFile(data);
+
+ setupTasks();
+
+ $("#update").click(updateInfo);
+ updateInfo();
+ }
+
+ function setupTasks() {
+ console.log("Getting initial tasks...");
+
+ var tasks = getTasks();
+
+ jQuery.each(tasks, function(index, task) {
+ var value = task.toString();
+ var fragment = $(template({task:value}));
+ $("#tasks").append(fragment);
+ fragment.find("button").click(function() {
+ checkTask(task, index);
+ });
+ });
+ console.log("Done.");
+ }
+
+ function updateInfo() {
+ var info = getInfo();
+ $("#properties").html(info.toString());
+ return info;
+ }
+
+ function checkTask(task, index) {
+ var info = updateInfo();
+ var value = task.check(info);
+ $("#tasks li span.result").eq(index).html(value);
+ }
+
+ function getInfo() {
+ var mol = applet.molFile();
+ var smiles = applet.smiles();
+ var jme = applet.jmeFile();
+
+ return jsmol.API.getInfo(mol, smiles, jme);
+ }
+
+ function getTasks() {
+ var mol = applet.molFile();
+ var smiles = applet.smiles();
+ var jme = applet.jmeFile();
+
+ return jsmol.API.getTasks(mol, smiles, jme);
+ }
+
+ waitForApplet();
+});
diff --git a/common/static/js/capa/jsmolcalc/2264BD6A2D261E441E8A63207DEF3E41.cache.html b/common/static/js/capa/jsmolcalc/2264BD6A2D261E441E8A63207DEF3E41.cache.html
new file mode 100644
index 0000000000..82c128524e
--- /dev/null
+++ b/common/static/js/capa/jsmolcalc/2264BD6A2D261E441E8A63207DEF3E41.cache.html
@@ -0,0 +1,2900 @@
+
+This html file is for Development Mode support.
+
diff --git a/common/static/js/capa/jsmolcalc/jsmolcalc.nocache.js b/common/static/js/capa/jsmolcalc/jsmolcalc.nocache.js
new file mode 100644
index 0000000000..4f38a87161
--- /dev/null
+++ b/common/static/js/capa/jsmolcalc/jsmolcalc.nocache.js
@@ -0,0 +1,360 @@
+function jsmolcalc(){
+ var $wnd_0 = window, $doc_0 = document, $stats = $wnd_0.__gwtStatsEvent?function(a){
+ return $wnd_0.__gwtStatsEvent(a);
+ }
+ :null, $sessionId_0 = $wnd_0.__gwtStatsSessionId?$wnd_0.__gwtStatsSessionId:null, scriptsDone, loadDone, bodyDone, base = '', metaProps = {}, values = [], providers = [], answers = [], softPermutationId = 0, onLoadErrorFunc, propertyErrorFunc;
+ $stats && $stats({moduleName:'jsmolcalc', sessionId:$sessionId_0, subSystem:'startup', evtGroup:'bootstrap', millis:(new Date).getTime(), type:'begin'});
+ if (!$wnd_0.__gwt_stylesLoaded) {
+ $wnd_0.__gwt_stylesLoaded = {};
+ }
+ if (!$wnd_0.__gwt_scriptsLoaded) {
+ $wnd_0.__gwt_scriptsLoaded = {};
+ }
+ function isHostedMode(){
+ var result = false;
+ try {
+ var query = $wnd_0.location.search;
+ return (query.indexOf('gwt.codesvr=') != -1 || (query.indexOf('gwt.hosted=') != -1 || $wnd_0.external && $wnd_0.external.gwtOnLoad)) && query.indexOf('gwt.hybrid') == -1;
+ }
+ catch (e) {
+ }
+ isHostedMode = function(){
+ return result;
+ }
+ ;
+ return result;
+ }
+
+ function maybeStartModule(){
+ if (scriptsDone && loadDone) {
+ var iframe = $doc_0.getElementById('jsmolcalc');
+ var frameWnd = iframe.contentWindow;
+ if (isHostedMode()) {
+ frameWnd.__gwt_getProperty = function(name_0){
+ return computePropValue(name_0);
+ }
+ ;
+ }
+ jsmolcalc = null;
+ frameWnd.gwtOnLoad(onLoadErrorFunc, 'jsmolcalc', base, softPermutationId);
+ $stats && $stats({moduleName:'jsmolcalc', sessionId:$sessionId_0, subSystem:'startup', evtGroup:'moduleStartup', millis:(new Date).getTime(), type:'end'});
+ }
+ }
+
+ function computeScriptBase(){
+ function getDirectoryOfFile(path){
+ var hashIndex = path.lastIndexOf('#');
+ if (hashIndex == -1) {
+ hashIndex = path.length;
+ }
+ var queryIndex = path.indexOf('?');
+ if (queryIndex == -1) {
+ queryIndex = path.length;
+ }
+ var slashIndex = path.lastIndexOf('/', Math.min(queryIndex, hashIndex));
+ return slashIndex >= 0?path.substring(0, slashIndex + 1):'';
+ }
+
+ function ensureAbsoluteUrl(url){
+ if (url.match(/^\w+:\/\//)) {
+ }
+ else {
+ var img = $doc_0.createElement('img');
+ img.src = url + 'clear.cache.gif';
+ url = getDirectoryOfFile(img.src);
+ }
+ return url;
+ }
+
+ function tryMetaTag(){
+ var metaVal = __gwt_getMetaProperty('baseUrl');
+ if (metaVal != null) {
+ return metaVal;
+ }
+ return '';
+ }
+
+ function tryNocacheJsTag(){
+ var scriptTags = $doc_0.getElementsByTagName('script');
+ for (var i = 0; i < scriptTags.length; ++i) {
+ if (scriptTags[i].src.indexOf('jsmolcalc.nocache.js') != -1) {
+ return getDirectoryOfFile(scriptTags[i].src);
+ }
+ }
+ return '';
+ }
+
+ function tryMarkerScript(){
+ var thisScript;
+ if (typeof isBodyLoaded == 'undefined' || !isBodyLoaded()) {
+ var markerId = '__gwt_marker_jsmolcalc';
+ var markerScript;
+ $doc_0.write('