Q:

how to use QUnit Callbacks api

I am in progress learning how to use QUnit and Javascript and html.  So far i only know how to use some of Qunit APIs like OK(), equal(), notequal(), test(), and expect(), but i have tough time to understand how to use the callbacks like qunit.done or qunit.log.  Can someone give me an example? i have some code below:
  <head>  
    <title>My Tests</title>  
    <script src="jquery/jquery-2.1.0.min.js" type="text/javascript"></script>  
    <script src="qunitsrc/qunit-1.14.0.js" type="text/javascript"></script>  
    <link rel="stylesheet" href="qunitsrc/qunit-1.14.0.css" type="text/css" media="screen">  

    <script src="tests/calculator.js" type="text/javascript"></script>      
    <script src="tests/calculatortests.js" type="text/javascript"></script>  
    </head>

<body>      
    <h1 id="qunit-header">My Tests</h1>     
    <h2 id="qunit-banner"></h2>     
    <div id="qunit-testrunner-toolbar"></div>       
    <h2 id="qunit-userAgent"></h2>      
    <ol id="qunit-tests"></ol>

calculator.js
 function MathOperations(){    
 }

MathOperations.prototype.add = function(num1,num2)
{
    var result = num1 + num2;   
    return result;
}

calculatortests.js
test("Add should add 2 items", function(){
    var math = new MathOperations();

    var result= math.add(1,2);  
    equal(result,3,"Result of 1+2 should be 3");
    });

A:

Basically, it sounds like you want to use these callbacks write a custom reporter.  There are several existing ones that you can base yours off of.  Here's an example for a JUnit compatible XML reporter:
https://github.com/jquery/qunit-reporter-junit

