Widget:WJG UserExamQuery: Difference between revisions

Jump to navigation Jump to search
VisualWikitext
Created page with "<includeonly> <style type="text/css"> #metrics{ width:80%; text-align: center; } .cell{ width:20%; text-align: center; display: inline-block; } span{ width:100%; } </style> <s..."
 
No edit summary
 
(60 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<script src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script>
<style type="text/css">
<style type="text/css">
        #wjgContainer { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
        #report { border-collapse:collapse;
width:90%}
        #report h4 { margin:0px; padding:0px;}
        #report img { float:right;}
        #report ul { margin:10px 0 10px 40px; padding:0px;}
        #report th { background:#7CB8E2 url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
        #report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
        #report tr.odd td { background:#fff url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
        #report div.arrow { background:transparent url(http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
        #report div.up { background-position:0px 0px;}
#tableContainer {
    overflow-y: scroll;
height: 300px;}
#metrics{
#metrics{
width:80%;
width:80%;
text-align: center;
text-align: center;
}
}
.cell{
#tableContainer .cell{
width:20%;
width:20%;
text-align: center;
text-align: center;
display: inline-block;
display: inline-block;
}
}
span{
#tableContainer span{
width:100%;
width:100%;
}
}
</style>
</style>
<script>
var testScores=[53.4,49.8,61.8,44.5,47.8,62.9,68.7,64.9,65.0,82.7,77.9,78.6,80.1,84.6];
// I define a function here that takes in an array of values, calculates the exponential moving average based on a certain half-life
// and returns an array with the exponential moving average at each point.
function calc_exp_moving_average(values,half_life){
var exp_avg_vals=new Array(values.length); //Initialize new array in which we'll put our calculated values
for (var i = values.length; i >(-1); i=i-1) {
exp_weights=[];
for (var j=0; j<i; j+=1){
var weight=Math.pow(half_life, i-j-1);
exp_weights[j]=weight;
};//Ends the calculation of the exponential weights for each timepoint.
var score_sum = 0;
var subvalues=values.slice(0,i+1);
var exp_weight_sum=0;
for(var i=0; i< exp_weights.length; i++) {
score_sum += exp_weights[i]*subvalues[i];
exp_weight_sum+=exp_weights[i];
}//Ends the multiplication of the weights by the scores.
var average_score=score_sum/exp_weight_sum;
if (i==0){average_score=values[i];}
exp_avg_vals[i]=average_score;
} //Ends the iteration through values.length
return exp_avg_vals.slice(1,exp_avg_vals.length+1);
}//Ends the function
exp_vals=calc_exp_moving_average(testScores,2/3);
</script>
<script type="text/javascript">
<script type="text/javascript">
function ensureLoggedIn() {
function ensureLoggedIn() {
Line 22: Line 73:
window.location.replace("http://wikidoc.org/index.php?title=Special:UserLogin&returnto=UserExamQuery");
window.location.replace("http://wikidoc.org/index.php?title=Special:UserLogin&returnto=UserExamQuery");
} else {
} else {
runQuery();
console.log('running query');
runQuery().done(addToggle);
console.log('finished running query');
}
}
});
});
         });
         });  
console.log('adding class odd to the odd numbered trs');
$("tr:odd").addClass("odd");
            $("tr:not(.odd)").hide();
            $("tr:first-child").show();
           
            $("tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
 
};
 
var addToggle = function(){
console.log('Now running function 2');
$("tr:odd").addClass("odd");
$("tr:not(.odd)").hide();
$("tr:first-child").show();
$("tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
 
}
 
 
var plotNewGraph = function(){
console.log('Now plotting a graph of the user test information');
$("tr:odd").addClass("odd");
$("tr:not(.odd)").hide();
$("tr:first-child").show();
$("tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
 
}
}
function runQuery() {
 
 
var runQuery= function() {
var r = $.Deferred();
var api = new mw.Api();
var api = new mw.Api();
api.get({
api.get({
Line 51: Line 142:
                 }
                 }
                 if($(value.questions).length > 0){
                 if($(value.questions).length > 0){
var wjg_string="<tr class='odd'>"+
            "<td>"+value.id +"</td>" +
            "<td>" + timeBegin + "</td>" +
            "<td>" + scoreString + "</td>" +
            "<td>" + timeEnd + "</td>" +
            "<td>" + value.type + "</td>" +
            '<td><div class="arrow"></div></td>' +
        "</tr>" +
        "<tr style='display:none'>" +
            '<td colspan="6">' +
                "<h4>Additional information</h4>" +
                "<ul>" +
                    "<li>Categories selected: Cardiology, Oncology</li>" +
                    "<li>Subcategories selected: Pharmacology</li>" +
                    "<li>Resume exam!</li>" +
                "</ul>" + 
            "</td>" +
        "</tr>";
$( "tbody" ).append( wjg_string );           
                 outstring += "<div id='"+value.id+"'><span class='cell'>"+value.id+"</span><span class='cell'>"+timeBegin+"</span><span class='cell'>"+scoreString+"</span><span class='cell'>"+timeEnd+"</span><span class='cell'>"+value.type+"</span>";
                 outstring += "<div id='"+value.id+"'><span class='cell'>"+value.id+"</span><span class='cell'>"+timeBegin+"</span><span class='cell'>"+scoreString+"</span><span class='cell'>"+timeEnd+"</span><span class='cell'>"+value.type+"</span>";
                 outstring += "<div>";
                 outstring += "<div>";
                $.each(value.questions, function(ind, val){
              // $.each(value.questions, function(ind, val){
                outstring += val.title+"<br />";
              // outstring += val.title+"<br />";
                });
              // });
                outstring += "</div>"
              // outstring += "</div>"
                outstring += "</div>";
              // outstring += "</div>";
                $("#metrics").append(outstring);
              // $("#metrics").append(outstring);
                $("#"+value.id).makeCollapsible();
              //  $("#"+value.id).makeCollapsible();
                 }
                 }
         });
         });
});
});
setTimeout(function (){ // and call `resolve` on the deferred object, once you're done
r.resolve();
}, 2500);
return r
$("tr:odd").addClass("odd");
$("tr:not(.odd)").hide();
$("tr:first-child").show();
           
$("tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
};
//$(document).ready(ensureLoggedIn);
$(document).ready(function(){
  // we call the function
console.log('about to run ensureLoggedIn');
  ensureLoggedIn();
console.log('finished running ensureLoggedIn');           
})
$(document).ready(function(){
$("tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
        });
});
</script>
    <div id="wjgChartArea">
        <!-- line chart canvas element -->
        <canvas id="buyers" width="600" height="400"></canvas>
        <canvas id="newGraph" width="600" height="400"></canvas>
        <script>
            // line chart data
            var buyerData = {
                labels : ["January 12","January 22","February 6","February 15","February 26","March 3","March 11","March 20","March 30","April 4","April 8","April 12","April 15","April 22"],
                datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : testScores,
title: "Individual tests"
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : exp_vals,
title: "Moving average"
}
            ]
            }
var newopts = {
yAxisLabel : "Percent Correct",
yAxisFontFamily : "'Arial'",
yAxisFontSize : 16,
yAxisFontStyle : "normal",
yAxisFontColor : "#666",
legend : true,
legendFontFamily : "'Arial'",
legendFontSize : 12,
legendFontStyle : "normal",
legendFontColor : "#666",
legendBlockSize : 15,
legendBorders : false,
legendBordersColor : "#666",
graphTitle : "My Performance",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
}
}
$(document).ready(ensureLoggedIn);


</script>
            // get line chart canvas
            var buyers = document.getElementById('buyers').getContext('2d');
            // draw line chart
            new Chart(buyers).Line(buyerData,newopts);
        </script>
    </div>
<div id="metrics"></div>
<div id="metrics"></div>
<div id="wjgContainer">
    <table id="report">
        <thead>
        <tr>
            <th>Exam ID</th>
            <th>Date started</th>
            <th>Performance</th>
            <th>Date Finished</th>
            <th>Exam Type</th>
            <th></th>
        </tr>
        </thead>
    </table>
    <div id="tableContainer">
        <table id="report">
        <tbody>
       
        </tbody>
    </table>
    </div>
</div>
</includeonly>
</includeonly>

Latest revision as of 01:11, 17 August 2014

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:WJG_UserExamQuery&oldid=1009210"