Testing radians with HTML question type


  • administrators

    Here is a nice example of using the HTML question type with the the Two.js library to test student's understanding of radians. The app asks the student to move a slider and visually display an angle in radians.

    Here is a screen shot of the app at work.


    The HTML question type has a number of gotchas. See this post for more details.

    The easiest way to develop these apps is using the getScript function from jquery and storing the code in your public dropbox. After you have finished developing the app you can host the files on your TA server in the class file manager.

    How I built the app

    I have already built the app and it works outside of TA. You can see it here.

    To add this app to TA we basically have to make the index.html page that a web server would deliver but hook it into the script hosted in dropbox. I mostly do this with the jQuery.getScript function.

    Let's start by add the question text.

    Here is the question text. Do not add the HTML response area yet.


    The algorithm is very simple

    $a=switch(rint(3),1,2,3);
    $b=switch(rint(3),1,2);
    $TA="$a/$b*Pi";
    $TAD=mathml("$a/$b*Pi");
    


    As you can see from the question text, we have a HTML response area. Add this now.

    In the Answer put

    $TA
    

    For the grading code we enter

    evalb( abs(evalf($TA-($RESPONSE))) < 0.4 );
    


    For the Question HTML put

    <div id="canvasContainer"></div>
    


    Now we need to load the app. This is done by loading any libraries needed by the app and then loading the app itself. Put the following at the top of the Question javascript (before the initialize function)

    jQuery.getScript('https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.js', function () {
        jQuery.getScript('https://dl.dropboxusercontent.com/u/35301261/Radians/lib.js', function() {
            jQuery.getScript('https://dl.dropboxusercontent.com/u/35301261/Radians/app.js');
        });
    });
    

    We now need to make sure that we pull the angle from the app when the student pressing grade. I have already added a function to the add that returns the angle. All we have to do now is call it and return it in the getResponse function.

    Modify the getResponse function so that it looks like this.

    function getResponse(){
      return radians.getAngle();
    };

    Now if you run the app you can interact with and grade the app.



Log in to reply