# HTML Question Type browsing

• Some quick tips for writing the HTML question type and including js libraries

1. All lines must be terminated by semi-colons
2. You must use jQuery rather than \$
3. To load libraries it is best to use jQuery.ajax({ async:false,…) see below
4. In the question javascript you can only use block comments /* ... */ and NOT single line comments // ...

Here is an example where we load the jsmol library using the html question type. This example assumes that you have the jsmol library available on a https server.

Question html:

<div id="mydiv">Loading...</div>



Question javascript: (I have only added code to the initialize function for this example)

function initialize(interactiveMode){
/*Called when the question is being initialized.
interactiveMode:    if it is true, interaction is allowed on question.
*/

jQuery.ajax({
async:false,
type:'GET',
url:'https://someserver.com/dev/jsmol/JSmol.min.js',
data:null,
success:function (){
initJSmol();
},
dataType:'script'
});
});

function initJSmol() {

Info = {
width: 400,
height: 400,
debug: false,
j2sPath: 'https://someserver.com/dev/jsmol/j2s',
color: '0xC0C0C0',
disableInitialConsole: true,
serverURL: 'https://someserver.com/dev/jsmol/php/jsmol.php',
use: "HTML5",
};

jQuery('#mydiv').html(Jmol.getAppletHtml('jmolApplet0',Info));

};

};


The result is

• You can replace the block

 jQuery(document).ready(function() {
jQuery.ajax({
async:false,
type:'GET',
url:'https://someserver.com/dev/jsmol/JSmol.min.js',
data:null,
success:function (){
initJSmol();
},
dataType:'script'
});
});

with
jQuery.getScript('https://someserver.com/dev/jsmol/JSmol.min.js', initJSmol);


You don't need the jQuery(document).ready(...) when this is called from the initialize function, and getScript handles all the AJAX for you. If you need to pass arguments to the function, use

jQuery.getScript('https://someserver.com/dev/jsmol/JSmol.min.js', function(){initJSmol(arg1,...)});

On a related note, make sure you use a reliable CDN as someserver.com is down currently. Alternatively, upload the files to the MapleTA class the question is in and link to them there. You may not be able to upload .js files, but you can rename them to .txt and it will work fine.

• @Robert-Stanyon I think someserver.com was a placeholder for your own domain ;)

Here is a link to an easy to use CDN where you can find most popular libraries (couldn't find JSmol though) cdnjs

• @joebentley10 I had assumed that a working example had been provided. If it isn't intended to work, that should be clearly mentioned above or fixed so it can be copy+pasted to work.

• WIth regards to point 4, if you use a single line comment in the javascript box your question will be displayed in a small (300x150px) box