Merge pull request #1453 from MITx/victor/protex

Victor/protex

common/lib/capa/capa/templates/designprotein2dinput.html

 <section id="designprotein2dinput_${id}" class="designprotein2dinput">
+    <div class="script_placeholder" data-src="/static/js/capa/protex/protex.nocache.js"/>
     <div class="script_placeholder" data-src="${applet_loader}"/>
 
     % if status == 'unsubmitted':
@@ -8,16 +9,11 @@
     % elif status == 'incorrect':
     <div class="incorrect" id="status_${id}">
     % elif status == 'incomplete':
-    <div class="incorrect" id="status_${id}">
+    <div class="incomplete" id="status_${id}">
     % endif
     
-    <object type="application/x-java-applet" id="applet_${id}" class="applet" width="${width}" height="${height}">
-      <param name="archive" value="/static/applets/capa/Protex.jar" />
-      <param name="code" value="protex.ProtexApplet.class" />
-      <param name="TARGET_SHAPE" value="${target_shape}" />
-      Applet failed to run.  No Java plug-in was found.
-    </object>
-
+    <div id="protex_container"></div>
+    <input type="hidden" name="target_shape" id="target_shape" value ="${target_shape}"></input>
     <input type="hidden" name="input_${id}" id="input_${id}" value="${value|h}"/>
 
     <p class="status">

common/static/js/capa/design-protein-2d.js

 (function () {
     var timeout = 1000;
 
-    function initializeApplet(applet) {
-        console.log("Initializing " + applet);
-        waitForApplet(applet);
+    waitForProtex();
+
+    function waitForProtex() {
+        if (typeof(protex) !== "undefined" && protex) {
+            protex.onInjectionDone("protex");
+        }
+        /*if (typeof(protex) !== "undefined") {
+            //initializeProtex();    
+        }*/
+        else {
+            setTimeout(function() { waitForProtex(); }, timeout);
+        }
     }
     
-    function waitForApplet(applet) {
-        if (applet.isActive && applet.isActive()) {
-            console.log("Applet is ready.");
+    //NOTE:
+    // Protex uses three global functions:
+    // protexSetTargetShape (exported from GWT)
+    // exported protexCheckAnswer (exported from GWT)
+    // It calls protexIsReady with a deferred command when it has finished 
+    // initialization and has drawn itself
     
-            // FIXME: [rocha] This is a hack to capture the click on the check
-            // button and update the hidden field with the applet values
-            var input_field = $('.designprotein2dinput input');
+    protexIsReady = function() {
+        //Load target shape
+        var target_shape = $('#target_shape').val();
+        protexSetTargetShape(target_shape);
             
-            var problem = $(applet).parents('.problem');
+        //Get answer from protex and store it into the hidden input field
+        //when Check button is clicked
+        var problem = $('#protex_container').parents('.problem');
         var check_button = problem.find('input.check');
+        var input_field = problem.find('input[type=hidden]');
         check_button.on('click', function() {
-                var answerStr = applet.checkAnswer();
-                console.log(answerStr);
-                input_field.val(answerStr);
+            var protex_answer = protexCheckAnswer();
+            var value = {protex_answer: protex_answer};
+            input_field.val(JSON.stringify(value));
         });              
+    };
     
-        } else {
-            console.log("Waiting for applet...");
-            setTimeout(function() { waitForApplet(applet); }, timeout);
-        }
-    }
+    /*function initializeProtex() {
+        //Check to see if the two exported GWT functions protexSetTargetShape 
+        // and protexCheckAnswer have been appended to global scope -- this 
+        //happens at the end of onModuleLoad() in GWT
+        if (typeof(protexSetTargetShape) === "function" &&
+            typeof(protexCheckAnswer) === "function") {
+            
+            //Load target shape
+            var target_shape = $('#target_shape').val();
+            //protexSetTargetShape(target_shape);
             
-    var applets = $('.designprotein2dinput object');
-    applets.each(function(i, el) { initializeApplet(el); });
+            //Get answer from protex and store it into the hidden input field
+            //when Check button is clicked
+            var problem = $('#protex_container').parents('.problem');
+            var check_button = problem.find('input.check');
+        	var input_field = problem.find('input[type=hidden]');
+            check_button.on('click', function() {
+                var protex_answer = protexCheckAnswer();
+                var value = {protex_answer: protex_answer};
+                input_field.val(JSON.stringify(value));
+            });
             
+            //TO DO: Fix this, it works but is utterly ugly and unreliable
+            setTimeout(function() {
+              protexSetTargetShape(target_shape);}, 2000);
+
+        }
+        else {
+            setTimeout(function() {initializeProtex(); }, timeout);
+        }
+    }*/
 }).call(this);

common/static/js/capa/protex/protex.css

+.protex-absolute-panel {
+   background-color: #BBBBBB;
+}
+
+.protex-canvas {
+	outline: none;
+}
+
+.protex-caption-panel {
+	padding: 10px 10px 10px 10px;
+	margin: 0px 0px 0px 0px;
+	border:2px solid #4E4E4E;
+    font: normal normal normal 14pt/normal 'Open Sans', sans-serif;
+	background-color: #B2B2FF;
+}
+
+.protex-textbox {
+    font: normal normal normal 12pt/normal 'Open Sans', sans-serif !important;
+    padding: 2px 2px 2px 2px !important;
+}
+
+.protex-caption-panel-ss-bonds-on {
+    padding: 10px 10px 10px 10px;
+	margin: 0px 0px 0px 0px;
+	border:2px solid #4E4E4E;
+    font: normal normal normal 14pt/normal 'Open Sans', sans-serif;
+	background-color: #B2FFFF;	
+}
+
+.protex-button {
+    margin-right: 15px;
+}
+
+.protex-listbox {
+}
+
+.gwt-ProgressBar-shell {
+  border: 2px solid #faf9f7;
+  border-right: 2px solid #848280;
+  border-bottom: 2px solid #848280;
+  background-color: #AAAAAA;
+  height: 14pt;
+  width: 50%;
+  margin-left: 15px;
+}
+.gwt-ProgressBar-shell .gwt-ProgressBar-bar {
+  background-color: #67A7E3;
+}
+.gwt-ProgressBar-shell .gwt-ProgressBar-text {
+  padding: 0px;
+  margin: 0px;
+  color: white;
+}

common/static/js/capa/protex/protex.nocache.js

+function protex(){var P='',xb='" for "gwt:onLoadErrorFn"',vb='" for "gwt:onPropertyErrorFn"',ib='"><\/script>',Z='#',Xb='.cache.html',_='/',lb='//',Qb='39CC89519B0E1FCB47B935AC9FE13D7B',Rb='6E05B1CD5BFCAF7D53C7C64D84318178',Wb=':',pb='::',dc='<script defer="defer">protex.onInjectionDone(\'protex\')<\/script>',hb='<script id="',sb='=',$='?',ub='Bad handler "',Sb='C824A958AB642DC2213DFFDAC640BEAA',Tb='D9267DE8FB02F8B995B4A58C66C76E29',cc='DOMContentLoaded',Ub='F275492F7098103BCB05F4F86ABF6218',Vb='F3301B0E65F38C7FCF2EF3764B3BB0B6',jb='SCRIPT',gb='__gwt_marker_protex',kb='base',cb='baseUrl',T='begin',S='bootstrap',bb='clear.cache.gif',rb='content',Y='end',Kb='gecko',Lb='gecko1_8',U='gwt.codesvr=',V='gwt.hosted=',W='gwt.hybrid',wb='gwt:onLoadErrorFn',tb='gwt:onPropertyErrorFn',qb='gwt:property',bc='head',Ob='hosted.html?protex',ac='href',Jb='ie6',Ib='ie8',Hb='ie9',yb='iframe',ab='img',zb="javascript:''",Zb='link',Nb='loadExternalRefs',mb='meta',Bb='moduleRequested',X='moduleStartup',Gb='msie',nb='name',Db='opera',Ab='position:absolute;width:0;height:0;border:none',Q='protex',Yb='protex.css',eb='protex.nocache.js',ob='protex::',$b='rel',Fb='safari',db='script',Pb='selectingPermutation',R='startup',_b='stylesheet',fb='undefined',Mb='unknown',Cb='user.agent',Eb='webkit';var m=window,n=document,o=m.__gwtStatsEvent?function(a){return m.__gwtStatsEvent(a)}:null,p=m.__gwtStatsSessionId?m.__gwtStatsSessionId:null,q,r,s,t=P,u={},v=[],w=[],x=[],y=0,z,A;o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:S,millis:(new Date).getTime(),type:T});if(!m.__gwt_stylesLoaded){m.__gwt_stylesLoaded={}}if(!m.__gwt_scriptsLoaded){m.__gwt_scriptsLoaded={}}function B(){var b=false;try{var c=m.location.search;return (c.indexOf(U)!=-1||(c.indexOf(V)!=-1||m.external&&m.external.gwtOnLoad))&&c.indexOf(W)==-1}catch(a){}B=function(){return b};return b}
+function C(){if(q&&r){var b=n.getElementById(Q);var c=b.contentWindow;if(B()){c.__gwt_getProperty=function(a){return H(a)}}protex=null;c.gwtOnLoad(z,Q,t,y);o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:X,millis:(new Date).getTime(),type:Y})}}
+function D(){function e(a){var b=a.lastIndexOf(Z);if(b==-1){b=a.length}var c=a.indexOf($);if(c==-1){c=a.length}var d=a.lastIndexOf(_,Math.min(c,b));return d>=0?a.substring(0,d+1):P}
+function f(a){if(a.match(/^\w+:\/\//)){}else{var b=n.createElement(ab);b.src=a+bb;a=e(b.src)}return a}
+function g(){var a=F(cb);if(a!=null){return a}return P}
+function h(){var a=n.getElementsByTagName(db);for(var b=0;b<a.length;++b){if(a[b].src.indexOf(eb)!=-1){return e(a[b].src)}}return P}
+function i(){var a;if(typeof isBodyLoaded==fb||!isBodyLoaded()){var b=gb;var c;n.write(hb+b+ib);c=n.getElementById(b);a=c&&c.previousSibling;while(a&&a.tagName!=jb){a=a.previousSibling}if(c){c.parentNode.removeChild(c)}if(a&&a.src){return e(a.src)}}return P}
+function j(){var a=n.getElementsByTagName(kb);if(a.length>0){return a[a.length-1].href}return P}
+function k(){var a=n.location;return a.href==a.protocol+lb+a.host+a.pathname+a.search+a.hash}
+var l=g();if(l==P){l=h()}if(l==P){l=i()}if(l==P){l=j()}if(l==P&&k()){l=e(n.location.href)}l=f(l);t=l;return l}
+function E(){var b=document.getElementsByTagName(mb);for(var c=0,d=b.length;c<d;++c){var e=b[c],f=e.getAttribute(nb),g;if(f){f=f.replace(ob,P);if(f.indexOf(pb)>=0){continue}if(f==qb){g=e.getAttribute(rb);if(g){var h,i=g.indexOf(sb);if(i>=0){f=g.substring(0,i);h=g.substring(i+1)}else{f=g;h=P}u[f]=h}}else if(f==tb){g=e.getAttribute(rb);if(g){try{A=eval(g)}catch(a){alert(ub+g+vb)}}}else if(f==wb){g=e.getAttribute(rb);if(g){try{z=eval(g)}catch(a){alert(ub+g+xb)}}}}}}
+function F(a){var b=u[a];return b==null?null:b}
+function G(a,b){var c=x;for(var d=0,e=a.length-1;d<e;++d){c=c[a[d]]||(c[a[d]]=[])}c[a[e]]=b}
+function H(a){var b=w[a](),c=v[a];if(b in c){return b}var d=[];for(var e in c){d[c[e]]=e}if(A){A(a,d,b)}throw null}
+var I;function J(){if(!I){I=true;var a=n.createElement(yb);a.src=zb;a.id=Q;a.style.cssText=Ab;a.tabIndex=-1;n.body.appendChild(a);o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:X,millis:(new Date).getTime(),type:Bb});a.contentWindow.location.replace(t+L)}}
+w[Cb]=function(){var b=navigator.userAgent.toLowerCase();var c=function(a){return parseInt(a[1])*1000+parseInt(a[2])};if(function(){return b.indexOf(Db)!=-1}())return Db;if(function(){return b.indexOf(Eb)!=-1}())return Fb;if(function(){return b.indexOf(Gb)!=-1&&n.documentMode>=9}())return Hb;if(function(){return b.indexOf(Gb)!=-1&&n.documentMode>=8}())return Ib;if(function(){var a=/msie ([0-9]+)\.([0-9]+)/.exec(b);if(a&&a.length==3)return c(a)>=6000}())return Jb;if(function(){return b.indexOf(Kb)!=-1}())return Lb;return Mb};v[Cb]={gecko1_8:0,ie6:1,ie8:2,ie9:3,opera:4,safari:5};protex.onScriptLoad=function(){if(I){r=true;C()}};protex.onInjectionDone=function(){q=true;o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:Nb,millis:(new Date).getTime(),type:Y});C()};E();D();var K;var L;if(B()){if(m.external&&(m.external.initModule&&m.external.initModule(Q))){m.location.reload();return}L=Ob;K=P}o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:S,millis:(new Date).getTime(),type:Pb});if(!B()){try{G([Db],Qb);G([Ib],Rb);G([Fb],Sb);G([Hb],Tb);G([Jb],Ub);G([Lb],Vb);K=x[H(Cb)];var M=K.indexOf(Wb);if(M!=-1){y=Number(K.substring(M+1));K=K.substring(0,M)}L=K+Xb}catch(a){return}}var N;function O(){if(!s){s=true;if(!__gwt_stylesLoaded[Yb]){var a=n.createElement(Zb);__gwt_stylesLoaded[Yb]=a;a.setAttribute($b,_b);a.setAttribute(ac,t+Yb);n.getElementsByTagName(bc)[0].appendChild(a)}C();if(n.removeEventListener){n.removeEventListener(cc,O,false)}if(N){clearInterval(N)}}}
+if(n.addEventListener){n.addEventListener(cc,function(){J();O()},false)}var N=setInterval(function(){if(/loaded|complete/.test(n.readyState)){J();O()}},50);o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:S,millis:(new Date).getTime(),type:Y});o&&o({moduleName:Q,sessionId:p,subSystem:R,evtGroup:Nb,millis:(new Date).getTime(),type:T});n.write(dc)}
+protex();
\ No newline at end of file