HTML Question Type


  • administrators

    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.

    Add a html response area

    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.
        */
        
        /*Your code starts from here:*/
    
    
        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'
            });
        });
    
        function initJSmol() {
    
            Info = {
                width: 400,
            height: 400,
            debug: false,
            j2sPath: 'https://someserver.com/dev/jsmol/j2s',
            color: '0xC0C0C0',
                disableJ2SLoadMonitor: true,
                disableInitialConsole: true,
            addSelectionOptions: true,
            serverURL: 'https://someserver.com/dev/jsmol/php/jsmol.php',
            use: "HTML5",
            readyFunction: null,
            script: 'load https://someserver.com/dev/jsmol/data/water.xyz.gz'
            };
    
            jQuery('#mydiv').html(Jmol.getAppletHtml('jmolApplet0',Info));
       
        };
    
    };
    

    The result is


  • administrators

    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.

  • Maple TA Interns 2016

    @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


  • administrators

    @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.


  • administrators

    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


Log in to reply