[LON-CAPA-users] Calling the jsme editor from a customresponse problem

Thu May 5 13:41:54 EDT 2016

> I've done very very little with Javascript yet so here's a possible
> scenario that comes to mind:
>
> - I include the jsme editor in a stringresponse problem
> - the student draws the molecule
> - the student clicks on 'submit'
> - somehow a javascript of mine gets control and somehow gets the structure
> converted to a smiles string
> - the script then submits the smiles string to loncapa for evaluation like
> a normal stringresponse problem
>
> Is something like this possible?

I have not done it, and I would not call it simple, but I think it 
should be possible.
LON-CAPA is doing it by adding a button opening the editor in a new 
window, and copying the string when it is closed. See sub 
separate_jme_window in loncom/homework/chemresponse.pm.
It might be easier to include the editor directly in the response, and 
use a callback (.setCallBack()) to update the response field that 
LON-CAPA will use. The only issue is to get the reference to the input 
element. LON-CAPA creates an id based on other things. I am not sure how 
to best do that.
You can get the SMILES with .smiles() or the JME string with .jmeFile().
The JSME API is here: 
http://peter-ertl.com/jsme/JSME_2016-04-27/api_javadoc/index.html

Something like that (not tested!!):

<script src="jsme/jsme.nocache.js"></script>
<script>
     var jsmeApplet;
     function jsmeOnLoad() {
         jsmeApplet = new JSApplet.JSME("jsme_container", "380px", "340px");
         jsmeApplet.setCallBack('update_input', update_input);
     }
     function update_input(event) {
         // NOTE: getting a reference to the input field like that might 
not work in a future LON-CAPA version:
         var form = document.forms.lonhomework;
         var input = form['HWVAL_custom-jsme-response'];
         input.value = jsmeApplet.jmeFile();
     }
</script>
</head>

<body>
<div id="jsme_container"></div>
<stringresponse id="custom-jsme-response"><textline/></stringresponse>
</body>

Damien