Widget:WJG Sandbox: Difference between revisions

Jump to navigation Jump to search
← Older edit
VisualWikitext
No edit summary
Undo revision 1008029 by William J Gibson (talk)
 
(317 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly>
<includeonly>
<script src="http://wikidoc.org/includes/jquery.timer.js"></script>
<base target="_blank">
<script type="text/javascript" src="http://wikidoc.org/includes/raty/jquery.raty.js"></script>
<script src="http://www.wikidoc.org/includes/raty/jquery.timer.js"></script>
<script type="text/javascript" src="http://www.wikidoc.org/includes/raty/jquery.raty.js"></script>
 
 
<script src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script>
<script type="text/javascript" src="http://wikidoc.org/extensions/WGTextHighlight/jquery.textHighlighter.js"></script>
 
<head>
  <link rel="stylesheet" href="http://dl.dropboxusercontent.com/u/1874620/animate.css">
</head>
 
<style type="text/css">
<style type="text/css">
input[type=radio].css-checkbox {
    display:none;
}
input[type=radio].css-checkbox + label.css-label {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background: url(http://dl.dropboxusercontent.com/u/1874620/iCheck/flat/blue.png) no-repeat;
    border: none;
    cursor: pointer;
    background-position: -88px 0;
}
input[type=radio].css-checkbox:checked + label.css-label {
    background-position: -110px 0;
}
label.css-label {
    background-image:url(http://dl.dropboxusercontent.com/u/1874620/iCheck/flat/blue.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.examOptionButton {
    font:14px/20px'MontserratRegular', Helvetica, Arial, sans-serif;
    color: #444;
}
.examOptionTitle {
    font:24px'MontserratRegular', Helvetica, Arial, sans-serif;
    color:#222
}
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    input[type=radio].css-checkbox + label.css-label {
        background-image: url(http://dl.dropboxusercontent.com/u/1874620/iCheck/flat/blue@2x.png);
        -webkit-background-size: 176px 22px;
        background-size: 176px 22px;
    }
}
a{
target-name:new;
target-new:tab;
}
body{
width:100%;
margin:0;
background-color:#FFFFFF;
}
#details{
  position:absolute; background:white; border: 1px solid #D1C9C2; border-top: 0; width: 400px; margin: 0 auto; padding:  7px 15px; text-align: left; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;
}
#content.mw-body{
width:100%;
padding:0;
margin-left:0;
margin:0;
border:none;
}
#bodyContent{
width:100%;
height:90%;
margin:0;
}
#chooseQBank{
background-color:#0e83cd;
}
body{
width:100%;
margin:0;
}
/*Here's some css for the buttons used to select an exam. (.Curric buttons).
lines comment*/
.round-button {
width:100px;
display:inline-block;
cursor:pointer;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border:0px solid #cfdcec;
overflow:hidden;
opacity:50%;
   
    background: #3C9AD6;
}
.round-button p {
font-family: 'Lato', Calibri, Arial, sans-serif;
display:block;
float:left;
width:100%;
padding-top:50%;
    padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
   
text-align:center;
color:white;
    font-size:3.2em;
    text-decoration:none;
}
.round-button p:hover {
color:#0e83cd;
transition: background 0.2s, color 0.2s;
}
.round-button-circle:hover {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
border-spacing:5px;
border:3px solid #0e83cd;
overflow:hidden;
box-shadow: 0 0 0 4px #fff;
transition: background 0.2s, color 0.2s;
    background: white;
}
#spacer{
margin:10px
}
.container > header {
font-family: 'Lato', Calibri, Arial, sans-serif;
margin: 0 auto;
padding: 2em 1em 2em;
width: 100%;
text-align: center;
background: #fff;
z-index: 999999;
-webkit-backface-visibility: hidden;
border-bottom:none;
margin-bottom:20px;
}
.container > header h1 {
font-size: 3.625em;
line-height: 1.3;
margin: 0;
font-weight: 300;
color: #aaa;
background: #fff;
border-bottom:none;
}
.container > header span {
display: block;
font-size: 60%;
opacity: 0.6;
padding: 0 0 0.6em 0.1em;
border-bottom:none;
}
.examButtons {
text-align: center;
margin: 0 auto;
padding: 2em 0 3em; }
.boxed{
.boxed{
border:2px solid black !important;
border:0px solid black !important;
}
}
.redBoxed{
.redBoxed{
border:2px solid #F00 !important;
border:0px solid #F00 !important;
} 
.answer{display: inline}
.ans_text{
display: inline;
cursor: pointer;
}
.choice_elim{
opacity:0.9;
text-decoration:line-through;
}
.flagged{
color:#FF0000;
}
.labvalson{
display:visible;
}
}


.unboxed{
.unboxed{
Line 37: Line 247:
margin-right:10px;
margin-right:10px;
}
}
.WBRImgButton{
font-family:Arial;
float:left;
height:40px;
font-weight:bold;
width:100px;
display: table-cell;
cursor: pointer;
color:#FFFFFF;
text-align: center;
vertical-align: middle;
margin-right:10px;
}
.WBRImgButton img{
width:auto;
height:35px;
}
#globalWrapper{
#globalWrapper{
z-index:-1;
z-index:-1;
}
}
#content{
height:100%;}
#exam{
height:90%;
border:none;
padding:0;
}
#mw-content-text{
height:100%;}
#navPane{
#navPane{
position:relative;  
position:relative;  
float:left;
float:left;
width:5%;
width:5%;
height:100%;
overflow-y:scroll;
}
}
#examSpace{
#examSpace{
position:relative;
position:relative;
float:left;
float:right;
width:600px;
width:94%;
margin-left:20px
height:90%;
overflow-y:scroll;
}
}
#navBar{
#navBar{
position:relative;
position:relative;
float:right;
float:right;
width:94%;
width:95%;
background-color:#3366CC;
}
#bottomBar{
height:40px;
position:relative;
float:right;
width:100%;
background-color:#3366CC;
}
#pauseButton{
float:right;
margin-bottom:0px;
height:95%;
}
#stopButton{
float:right;
margin-right: 5%;
height=95%;
margin-bottom:0px;
}
}
.navPaneButton{
.navPaneButton{
Line 60: Line 323:
background-color:#D0D0D0;
background-color:#D0D0D0;
padding-top:5px;
padding-top:5px;
color:#FFFFFF;
font-weight:bold;
font-weight:bold;
text-align: center;
text-align: center;
}
}
div.answerNoBorder{
div.answerNoBorder{
border:5px solid #FFF;
border:0px solid #FFF;
}
}
div.answerBorder{
div.answerBorder{
border:5px solid #000;
border:0px solid #000;
}
}
div.explanationHide{
div.explanationHide{
Line 78: Line 340:
visibility:visible;
visibility:visible;
}
}
#tutorOrExamContainer{
background-color:#E3E5E5;
}
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
Line 84: Line 350:
if ($.isEmptyObject(wgUserName)) {
if ($.isEmptyObject(wgUserName)) {
alert("Please Log In To Continue.");
alert("Please Log In To Continue.");
window.location.replace("http://wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AMatt+Pijoan");
window.location.replace("http://www.wikidoc.org/index.php?title=Special:UserLogin&returnto=User%3AMatt+Pijoan");
} else {
} else {
curriculumType();
curriculumType();
Line 124: Line 390:
}
}
}
}
var stuffs = "<a href='#' class='Curric' id='USMLE Step 1'><img src='http://static.wikidoc.org/8/87/Step1.png' /></a>";
var background_html="<div class='container'><header><h1 class='animated bounceInDown'>Wikidoc Board Review </br> <span>Please select an exam below</span></h1></header></div>";
stuffs += "<a href='#' class='Curric' id='USMLE Step 2 CK'><img src='http://static.wikidoc.org/0/07/Step2CK.png' /></a>";
$("#chooseQBank").html(background_html);
stuffs += "<a href='#' class='Curric' id='USMLE Step 3'><img src='http://static.wikidoc.org/0/08/Step3.png' /></a>";
var bottom_html="<div id='bottomwelcome'></div>";
stuffs += "<a href='#' class='Curric' id='Board Review'><img src='http://static.wikidoc.org/7/75/Boardcertification.png' /></a>";
 
stuffs += "<a href='#' class='Curric' id='MCAT'><img src='http://static.wikidoc.org/4/4b/MCAT.png' /></a><br />";
var stuffs = "<div class='round-button Curric' id='MCAT'><div class='round-button-circle'><p class='round-button' style='font-size:2.5em;'>MCAT</p></div></div><div id='spacer'  style='display: inline'></div>";
$("#exam").html(stuffs);
stuffs += "<div class='round-button Curric' id='USMLE Step 1'><div class='round-button-circle'><p class='round-button'>1</p></div></div><div id='spacer'  style='display: inline'></div>";
stuffs += "<div class='round-button Curric' id='USMLE Step 2 CK'><div class='round-button-circle'><p class='round-button'>2</p></div></div><div id='spacer'  style='display: inline'></div>";
stuffs += "<div class='round-button Curric' id='USMLE Step 3'><div class='round-button-circle'><p class='round-button'>3</p></div></div><div id='spacer'  style='display: inline'></div>";
stuffs += "<div class='round-button Curric' id='Board Review'><div class='round-button-circle'><p class='round-button' style='font-size:2.5em;'>ABIM</p></div></div><div id='spacer'  style='display: inline'></div><br /><br />";
stuffs+="<div class='stepBar'><img src='http://static.wikidoc.org/f/f3/Step_bar_5_22_14.png' /></div>";
 
// $("#chooseQBank").hide();
$("#chooseQBank").html(background_html+"<div class='examButtons'>" + stuffs + "</div>");
 
// $("#chooseQBank").slideDown('slow');
 
$('.Curric').click(options, chooseQBank);
$('.Curric').click(options, chooseQBank);


}
}
function chooseQBank(event) {
function chooseQBank(event) {
event.data.examtype = $(this).attr('id');
event.data.examtype = $(this).attr('id');
$("#chooseQBank").remove();//Once the QBank is picked, we'll remove the div that held it.
$("#exam").show();
var divs = null;
var divs = null;
divs = "<center><h1>Build your own exam!</h1></center><div id='Pat' class='noSelect WBRButton stepTwo'><br />USMLE Format</div><div id='Flash' class='noSelect WBRButton stepTwo'><br />Flash Cards</div><br /><br /><br />";
divs = "<div class= 'container' id='optionScreenHeader' style='height:200px' ><header><h1>" +event.data.examtype+ " </br> <span> Select your options below</span></h1></header></div><div id='Pat' class='noSelect WBRButton stepTwo'><br />USMLE Format</div><div id='Flash' class='noSelect WBRButton stepTwo'><br />Flash Cards</div><br /><br /><br />";
$("#exam").html(divs);
$("#exam").html(divs);
var temp_str="<div id= 'examOptions'></div>";
//$("#exam").append(temp_str);
var tutorOrExam="<div class='container' id='tutorOrExamContainer' style='height:110px'>"+
"<div class='round-button Curric' id='tutorModeBigButton' style='margin-left:calc(50% - 100px); margin-top:5px'><div class='round-button-circle'><p class='round-button' style='font-size:1.5em;'>Tutor \n Mode</p></div></div><div id='spacer'  style='display: inline'></div>"+
"<div class='round-button Curric' id='examModeBigButton'><div class='round-button-circle'><p class='round-button' style='font-size:1.5em;'>Exam \n Mode</p></div></div><div id='spacer'  style='display: inline'></div>"+
"</div>"
$("#optionScreenHeader").after(tutorOrExam);
var examOptionButtons = "<div style='background:#fafafa; color:#222; padding:10px;'>"+
"    <h3 class='examOptionTitle'>Exam Mode</h3>"+
"  <form id='examModeForm'>"+
"      <input type='radio' name='examMode' value='exam' id='examModeButton' class='css-checkbox'  />"+
"      <label for='examModeButton' class='css-label cb0 radGroup2'></label>"+
"      <p class='examOptionButton' style='display:inline'>&nbsp Exam</p>"+
"      <br />"+
"      <input type='radio' name='examMode' value='tutor' id='tutor' class='css-checkbox' />"+
"      <label for='tutor' class='css-label cb0 radGroup2'></label>"+
"      <p class='examOptionButton' style='display:inline'>&nbsp Tutor</p>"+
"      <br />"+
"  </form>" +
"</div>"+
"<div style='background:#fafafa; color:#222; padding:10px;'>"+
"    <h3 class='examOptionTitle'>Question Selection</h3>"+
"  <form id='CatKeyForm'>"+
"      <input type='radio' name='CatKey' value='category' id='category' class='css-checkbox'  />"+
"      <label for='category' class='css-label cb0 radGroup2'></label>"+
"      <p class='examOptionButton' style='display:inline'>&nbsp Category</p>"+
"      <br />"+
"      <input type='radio' name='CatKey' value='keyword' id='keyword' class='css-checkbox' />"+
"      <label for='keyword' class='css-label cb0 radGroup2'></label>"+
"      <p class='examOptionButton' style='display:inline'>&nbsp Keyword</p>"+
"  </form>"+
"</div>";
$("#tutorOrExamContainer").after(examOptionButtons);
recordResponses()
$('.stepTwo').click(event.data, tutorOrExam);
$('.stepTwo').click(event.data, tutorOrExam);
}
function recordResponses(){
$("input:radio[name=examMode]").click(function() {
    var value = $(this).val();
    console.log(value)
});
$("input:radio[name=CatKey]").click(function() {
    var value = $(this).val();
    console.log(value)
});
}
function chooseExamOptions(event) {
$("#chooseQBank").remove();//Once the QBank is picked, we'll remove the div that held it.
$("#exam").show();
$("#examOptions").append(""+
"<select id ='ToE' name='Exam Type'>" +
        "<option value='Tutor'>Tutor Mode</option>" +
        "<option value='Exam'>Exam Mode</option>" +
"</select>" +
"<select id ='catOrKey' name='Question Selection'>" +
        "<option value='Category'>Category</option>" +
        "<option value='Keyword'>Keyword</option>" +
"</select>" +
"<select id ='Timed' name='Timer'>" +
        "<option value='Untimed'>Untimed</option>" +
        "<option value='Timed'>Timed</option>" +
"</select>");
//$("#exam").append("<div id='displayVals'></div>");
}
function displayVals() {
  var tutor_or_exam_val = $( "#ToE" ).val();
  var cat_or_key_val= $( "#catOrKey" ).val();
  var timerSetting=$("#Timed").val();
  $( "#displayVals" ).html( "<b>Tutor or Exam:</b> " + tutor_or_exam_val + "<br>" +
    " <b>Category or Keyword:</b> " + cat_or_key_val + "<br>" +
"<b> Timed or Untimed: </b>" + timerSetting);
}
}
function tutorOrExam(event) {
function tutorOrExam(event) {


Line 261: Line 622:
}
}
function removeDuplicates(obj) {
function removeDuplicates(obj) {
var output = "<div id='removeNum'><b>Choose the number of questions you would like to answer. The maximum number of questions you can select is <span id='countShow'>" + event.data.maxQ + "</span>.</b><br /><br /><br />Number of questions:<input type='text' id='numQues' /><br /><br /><div id='Go' class='noSelect WBRButton'>Click here to begin the exam</div></div>";
                if(res.Count > 45){
                        obj.maxQ = 45;
                } else {
                        obj.maxQ = res.Count;
                }
var output = "<div id='removeNum'><b>Choose the number of questions you would like to answer. The maximum number of questions you can select is <span id='countShow'>" + obj.maxQ + "</span>.</b><br /><br /><br />Number of questions:<input type='text' id='numQues' /><br /><br /><div id='Go' class='noSelect WBRButton'>Click here to begin the exam</div></div>";
if ($("#exam").find('#numQues').length == 0) {
if ($("#exam").find('#numQues').length == 0) {
$("#exam").append(output);
$("#exam").append(output);
Line 274: Line 640:
function TNG(event) {
function TNG(event) {
event.data.numQuestion = $("#numQues").val();
event.data.numQuestion = $("#numQues").val();
        if(event.data.numQuestion > 0 && event.data.numQuestion <= 45){
loadNextQuestion(event.data);
loadNextQuestion(event.data);
        } else {
        alert('Invalid number of questions entered.');
        }
}
}
function selectCats(exam) {
function selectCats(exam) {
Line 383: Line 753:
}, {
}, {
ok : function (res) {
ok : function (res) {
event.data.maxQ = res.Count;
                if( res.Count > 45){
                        event.data.maxQ = 45;
                } else {
                        event.data.maxQ = res.Count;
                }
var output = "<b>Choose the number of questions you would like to answer. The maximum number of questions you can select is <span id='countShow'>" + event.data.maxQ + "</span>.</b><br /><br /><br />Number of questions:<input type='text' id='numQues' /><br /><br /><div id='Go' class='noSelect WBRButton'>Click here to begin the exam</div>";
var output = "<b>Choose the number of questions you would like to answer. The maximum number of questions you can select is <span id='countShow'>" + event.data.maxQ + "</span>.</b><br /><br /><br />Number of questions:<input type='text' id='numQues' /><br /><br /><div id='Go' class='noSelect WBRButton'>Click here to begin the exam</div>";
if ($("#exam").find('#numQues').length == 0) {
if ($("#exam").find('#numQues').length == 0) {
Line 439: Line 813:
}
}
function loadNextQuestion(event) {
function loadNextQuestion(event) {
if(event.searchMethod === "Category"){
var api = new mw.Api(event);
var api = new mw.Api(event);
api.get({
api.get({
Line 459: Line 834:
}
}
});
});
} else if(event.searchMethod === "Keyword"){
var api = new mw.Api(event);
api.get({
action : 'load',
keywords : JSON.stringify(event.questionListAll),
num : event.numQuestion,
format : 'json'
}, {
ok : function (res) {
var i = 0;
event.currentQuestion = 0;
$.each(res.questions.list, function (key, element) {
element.PageName = key;
event.examQuestions[i] = element;
i++;
});
addToNavBar(event);
}
});
}
}
}
function addToNavBar(exam) {
function addToNavBar(exam) {
$("#exam").html("<div id='navBar'><div id='back' class='noSelect WBRButton'><br />Back</div><div id='next' class='noSelect WBRButton'><br />Next</div><div id='finish' class='noSelect WBRButton'><br />Finish</div></div><div id='navPane'></div><div id='examSpace'></div><span id='timeRem' style='height: 0px; visibility: hidden'>" + exam.timeAmt.toString() + "</span>");
$("#exam").html("<div id='navBar'><div id='flag' class='noSelect WBRImgButton'><img src='http://static.wikidoc.org/3/34/Flag_5_19_14.png' /></div><div id='back' class='noSelect WBRImgButton'><img src='http://static.wikidoc.org/f/f9/Leftarrow_3_29_b.png' /></div><div id='next' class='noSelect WBRImgButton'><img src='http://static.wikidoc.org/a/ae/Rightarrow_3_29_14_b.png' /></div><div id='lab_vals' class='noSelect WBRImgButton'><img src='http://static.wikidoc.org/8/8b/Lab_values_3_29_14.png' /></div><div id='notes' class='noSelect WBRImgButton'><img src='http://static.wikidoc.org/e/eb/Pencil_3_29_14_trimwspace.png' /></div><div id='finish' class='noSelect WBRButton'><br />Finish</div></div><div id='navPane'></div><div id='examSpace'></div><span id='timeRem' style='height: 0px; visibility: hidden'>" + exam.timeAmt.toString() + "</span>");
$("#back").click(exam, questionNavigation);
//$("#flag").click(function(){alert("Coming Soon!")});
$("<div id='bottomBar'><div id='stopButton' class= 'noSelect WBRImgButton'><img src='http://static.wikidoc.org/0/09/Stopbutton2.svg' ></div><div id='pauseButton' class= 'noSelect WBRImgButton'><img src='http://static.wikidoc.org/e/e3/Pausebutton6.svg' ></div></div>").insertAfter("#exam");
 
        $("#back").click(exam, questionNavigation);
$("#next").click(exam, questionNavigation);
$("#next").click(exam, questionNavigation);
$("#finish").click(exam, endExam);
$("#finish").click(exam, endExam);
$("#flag").click(exam, flagQ);
$("#lab_vals").click(exam, showLabs);
if (exam.timer) {
if (exam.timer) {
$("#bodyContent").append("<div style='position:absolute; z-index:1000; width:300px; height:50px; top:0px; right:0px; border: 1px solid #000; background-color:#EEE; float:right; visibility:hidden;' id='timerBox'>Testing.</div>");
$("#bodyContent").append("<div style='position:absolute; z-index:1000; width:300px; height:50px; top:0px; right:0px; border: 1px solid #000; background-color:#EEE; float:right; visibility:hidden;' id='timerBox'>Testing.</div>");
Line 474: Line 874:
$("#navPane").append("<div id='" + index + "' class='navPaneButton'> " + (index - -1) + "</div>");
$("#navPane").append("<div id='" + index + "' class='navPaneButton'> " + (index - -1) + "</div>");
});
});
// I think there might be a bug with this line.
        $(".navPaneButton").click(exam, questionNavigation);
$("#" + exam.currentQuestion).addClass("boxed");
$("#" + exam.currentQuestion).addClass("boxed");
       
$(".navPaneButton:odd").css("background-color", "#3338CC");
$(".navPaneButton:odd").css("background-color", "#3338CC");
$(".navPaneButton").click(exam, questionNavigation);
        $(".navPaneButton:odd").css("background-color", "#B0B0B0");
questionDisplay(exam);
questionDisplay(exam);
}
}
Line 486: Line 889:
parseQuestions(exam);
parseQuestions(exam);
} else {
} else {
var htmlStuff = "<b>Author:</b> " + obj.PageAuthor + "<br /><br /><b>Question " + (exam.currentQuestion - -1) + " / " + (exam.examQuestions.length) + "</b><br /><br />" + obj.Prompt + "<br />";
var htmlStuff = "<b>Question " + (exam.currentQuestion - -1) + " / " + (exam.examQuestions.length) + "</b><br /><br />" + "<div id='highlightable'>" + obj.Prompt +"</div>"+"<br />";
 
if (obj.AnswerA && obj.AnswerA.length > 0) {
if (obj.AnswerA && obj.AnswerA.length > 0) {
htmlStuff += "<div class='answer answerNoBorder' id='A'><input type='radio' value='A' id='Ar'>" + trimP(obj.AnswerA) + "</div>";
htmlStuff += "<div class='answer answerNoBorder' id='A'><input type='radio' value='A' id='Ar'>" +"</div>" + "<p class='ans_text'>" + trimP(obj.AnswerA)+ "</p>" ;
}
}
if (obj.AnswerAExp && obj.AnswerAExp.length > 0 && exam.examType === "Tutor") {
if (obj.AnswerAExp && obj.AnswerAExp.length > 0 && exam.examType === "Tutor") {
htmlStuff += "<div class='answerExp explanationHide' id='Ae'><i>&nbsp;&nbsp;&nbsp;&nbsp;" + obj.AnswerAExp + "</i></div>";
htmlStuff += "<div class='answerExp explanationHide' id='Ae'>" + trimP(obj.AnswerAExp) + "</div>";
}
}
if (obj.AnswerB && obj.AnswerB.length > 0) {
if (obj.AnswerB && obj.AnswerB.length > 0) {
htmlStuff += "<div class='answer answerNoBorder' id='B'><input type='radio' value='B' id='Ar' />" + trimP(obj.AnswerB) + "</div>";
htmlStuff += "<div class='answer answerNoBorder' id='B'><input type='radio' value='B' id='Ar' />" +"</div>" + "<p class='ans_text'>" + trimP(obj.AnswerB)+ "</p>";
}
}
if (obj.AnswerBExp && obj.AnswerBExp.length > 0 && exam.examType === "Tutor") {
if (obj.AnswerBExp && obj.AnswerBExp.length > 0 && exam.examType === "Tutor") {
htmlStuff += "<div class='answerExp explanationHide' id='Be'><i>&nbsp;&nbsp;&nbsp;&nbsp;" + obj.AnswerBExp + "</i></div>";
htmlStuff += "<div class='answerExp explanationHide' id='Be'>" + trimP(obj.AnswerBExp) + "</div>";
}
}
if (obj.AnswerC && obj.AnswerC.length > 0) {
if (obj.AnswerC && obj.AnswerC.length > 0) {
htmlStuff += "<div class='answer answerNoBorder' id='C'><input type='radio' value='C' id='Ar' />" + trimP(obj.AnswerC) + "</div>";
htmlStuff += "<div class='answer answerNoBorder' id='C'><input type='radio' value='C' id='Ar' />" +"</div>" + "<p class='ans_text'>" + trimP(obj.AnswerC)+ "</p>";
}
}
if (obj.AnswerCExp && obj.AnswerCExp.length > 0 && exam.examType === "Tutor") {
if (obj.AnswerCExp && obj.AnswerCExp.length > 0 && exam.examType === "Tutor") {
htmlStuff += "<div class='answerExp explanationHide' id='Ce'><i>&nbsp;&nbsp;&nbsp;&nbsp;" + obj.AnswerCExp + "</i></div>";
htmlStuff += "<div class='answerExp explanationHide' id='Ce'>" + trimP(obj.AnswerCExp) + "</div>";
}
}
if (obj.AnswerD && obj.AnswerD.length > 0) {
if (obj.AnswerD && obj.AnswerD.length > 0) {
htmlStuff += "<div class='answer answerNoBorder' id='D'><input type='radio' value='D' id='Ar'>" + trimP(obj.AnswerD) + "</div>";
htmlStuff += "<div class='answer answerNoBorder' id='D'><input type='radio' value='D' id='Ar'>" +"</div>" + "<p class='ans_text'>" + trimP(obj.AnswerD)+ "</p>";
}
}
if (obj.AnswerDExp && obj.AnswerDExp.length > 0 && exam.examType === "Tutor") {
if (obj.AnswerDExp && obj.AnswerDExp.length > 0 && exam.examType === "Tutor") {
htmlStuff += "<div class='answerExp explanationHide' id='De'><i>&nbsp;&nbsp;&nbsp;&nbsp;" + obj.AnswerDExp + "</i></div>";
htmlStuff += "<div class='answerExp explanationHide' id='De'>" + trimP(obj.AnswerDExp) + "</div>";
}
}
if (obj.AnswerEExp && obj.AnswerE.length > 0) {
if (obj.AnswerEExp && obj.AnswerE.length > 0) {
htmlStuff += "<div class='answer answerNoBorder' id='E'><input type='radio' value='E' id='Ar'>" + trimP(obj.AnswerE) + "</div>";
htmlStuff += "<div class='answer answerNoBorder' id='E'><input type='radio' value='E' id='Ar'>" +"</div>" + "<p class='ans_text'>" + trimP(obj.AnswerE)+ "</p>";
}
}
if (obj.AnswerEExp && obj.AnswerEExp.length > 0 && exam.examType === "Tutor") {
if (obj.AnswerEExp && obj.AnswerEExp.length > 0 && exam.examType === "Tutor") {
htmlStuff += "<div class='answerExp explanationHide' id='Ee'><i>&nbsp;&nbsp;&nbsp;&nbsp;" + obj.AnswerEExp + "</i></div>";
htmlStuff += "<div class='answerExp explanationHide' id='Ee'>" + trimP(obj.AnswerEExp) + "</div>";
}
}
$("#examSpace").html(htmlStuff);
$("#examSpace").html(htmlStuff);
$("#examSpace").prepend("<div id='details' style='display:none'> <table class='tg'>  <tr>    <th class='tg-031e'>Analyte</th>    <th class='tg-031e'>Reference Range</th>  </tr>  <tr>    <td class='tg-031e'>Sodium (Na+)</td>    <td class='tg-031e'>136-145 mEq/L</td>  </tr>  <tr>    <td class='tg-031e'>Potassium (K+)</td>    <td class='tg-031e'>3.5-5.0 mEq/L</td>  </tr>  <tr>    <td class='tg-031e'>Chloride (Cl-)</td>    <td class='tg-031e'>95-105 mEq/L</td>  </tr>  <tr>    <td class='tg-031e'>Bicarbonate (HCO3-)</td>    <td class='tg-031e'>22-28 mEq/L</td>  </tr>  <tr>    <td class='tg-031e'>Magnesium (Mg2+)</td>    <td class='tg-031e'>1.5-2.0mEq/L</td>  </tr>  <tr>    <td class='tg-031e'>Calcium (Ca2+)</td>    <td class='tg-031e'></td>  </tr></table></div>");
if (exam.examQuestions[exam.currentQuestion].selectedAnswer !== 'F') {
if (exam.examQuestions[exam.currentQuestion].selectedAnswer !== 'F') {
$("#" + exam.examQuestions[exam.currentQuestion].selectedAnswer).addClass("boxed");
$("#" + exam.examQuestions[exam.currentQuestion].selectedAnswer).addClass("boxed");
Line 523: Line 929:
$("div.answer").mouseover(function () {
$("div.answer").mouseover(function () {
$(this).css({
$(this).css({
'border' : '5px solid #000'
'border' : '0px solid #000'
})
})
}).mouseout(function () {
}).mouseout(function () {
$(this).css({
$(this).css({
'border' : '5px solid #FFF'
'border' : '0px solid #FFF'
})
})
});
});
$("div.answer").click(exam, answerClicked);
$("div.answer").click(exam, answerClicked);
$('p.ans_text').click(function(){
$(this).toggleClass('choice_elim')
});
$('#highlightable').textHighlighter({
              color: '#FFFF00'
          });
}
}
}
}
Line 588: Line 1,002:
$("#" + exam.examQuestions[exam.currentQuestion].selectedAnswer).removeClass("answerNoBorder");
$("#" + exam.examQuestions[exam.currentQuestion].selectedAnswer).removeClass("answerNoBorder");
}
}
$("#examSpace").append("<br /><br />The correct answer is: " + exam.examQuestions[exam.currentQuestion].RightAnswer + "<br /><br /><i>" + exam.examQuestions[exam.currentQuestion].Explanation + "</i><br />");
$("#examSpace").append("<br /><br />The correct answer is: " + exam.examQuestions[exam.currentQuestion].RightAnswer + "<br /><br /><b>" + exam.examQuestions[exam.currentQuestion].Explanation + "</b><br /><br />");
}
}
}
}
Line 594: Line 1,008:
var ratyLayers = "<center>Rate this question!</center><br /><span style='position:relative; float:left;'>Difficulty: <div id='star1'></div></span><span style='position:relative; float:left;left:33%;'>High Yield: <div id='star2'></div></span><span style='position:relative; float:left;left:66%'>Quality: <div id='star3'></div></span><br /><br /><br />"
var ratyLayers = "<center>Rate this question!</center><br /><span style='position:relative; float:left;'>Difficulty: <div id='star1'></div></span><span style='position:relative; float:left;left:33%;'>High Yield: <div id='star2'></div></span><span style='position:relative; float:left;left:66%'>Quality: <div id='star3'></div></span><br /><br /><br />"
$("#examSpace").prepend(ratyLayers);
$("#examSpace").prepend(ratyLayers);
getRating(exam.examQuestions[exam.currentQuestion].PageName, exam);
addFirstResponses();
}
function addFirstResponses(){
        var api = new mw.Api();
api.get({
                action : 'firstResponseQuery',
                question : window.exam.examQuestions[exam.currentQuestion].PageName,
format : 'json'
})
.done(function (data) {
                if(data.firstResponseQuery.A===null){
                      data.firstResponseQuery.A = 0;
                }
                if(data.firstResponseQuery.B===null){
                      data.firstResponseQuery.B = 0;
                }
                if(data.firstResponseQuery.C===null){
                      data.firstResponseQuery.C = 0;
                }
                if(data.firstResponseQuery.D===null){
                      data.firstResponseQuery.D = 0;
                }
                if(data.firstResponseQuery.E===null){
                      data.firstResponseQuery.E = 0;
                }
var sumFS=data.firstResponseQuery.A+data.firstResponseQuery.B+data.firstResponseQuery.C+data.firstResponseQuery.D+data.firstResponseQuery.E;
var firstResponses = "<table><th colspan='5'>First Responses</th><tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr><tr><td>" + data.firstResponseQuery.A + "</td><td>"+ data.firstResponseQuery.B + "</td><td>"+ data.firstResponseQuery.C + "</td><td>"+ data.firstResponseQuery.D + "</td><td>"+ data.firstResponseQuery.E + "</td><td></tr></table>";
                $("#examSpace").prepend(firstResponses);
});
}
function answerClicked(event){
$(".answer").removeClass("boxed");
$('input[type=radio]').prop('checked', function () {
    return this.getAttribute('checked') == 'checked';
});
$(this).addClass("boxed");
$(this).find("#Ar").prop("checked",true);
if($("#exam").find('#submit').length == 0){
$("#examSpace").append("<div class='noSelect WBRButton' id='submit'><br />Submit</div>");
                $("#submit").click(event.data, answerSubmitted);
}
}
function getRating(page, exam) {
var api = new mw.Api();
api.get({
action : 'wbrgetrating',
question : page,
format : 'json'
}, {
ok : function (res) {
$("#star1").raty({
$("#star1").raty({
path : 'http://www.wikidoc.org/includes/raty/img/',
path : 'http://www.wikidoc.org/includes/raty/img/',
click : function (score, event) {
click : function (score, event) {
submitRating("difficulty", score, "Buh")
submitRating("difficulty", score, exam.examQuestions[exam.currentQuestion].PageName)
},
score : function (event) {
getRating("difficulty", exam.examQuestions[exam.currentQuestion].PageName);
},
},
                score: res.wbrgetrating.difficulty,
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
});
});
        $("#star1").append("(Avg: " + res.wbrgetrating.difficulty + ", n=" + res.wbrgetrating.diffCount + ")" );
$("#star2").raty({
$("#star2").raty({
path : 'http://www.wikidoc.org/includes/raty/img/',
path : 'http://www.wikidoc.org/includes/raty/img/',
click : function (score, event) {
click : function (score, event) {
submitRating("yield", score, "Buh")
submitRating("yield", score, exam.examQuestions[exam.currentQuestion].PageName)
},
score : function (event) {
getRating("yield", exam.examQuestions[exam.currentQuestion].PageName);
},
},
score: res.wbrgetrating.yield,
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
});
});
        $("#star2").append("(Avg: " + res.wbrgetrating.yield + ", n=" + res.wbrgetrating.qualCount + ")" );
$("#star3").raty({
$("#star3").raty({
path : 'http://www.wikidoc.org/includes/raty/img/',
path : 'http://www.wikidoc.org/includes/raty/img/',
click : function (score, event) {
click : function (score, event) {
submitRating("quality", score, "Buh")
submitRating("quality", score, exam.examQuestions[exam.currentQuestion].PageName)
},
score : function (event) {
getRating("quality", exam.examQuestions[exam.currentQuestion].PageName);
},
},
score: res.wbrgetrating.quality,
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
hints : ['Very Poor', 'Poor', 'Average', 'Good', 'Very Good']
});
});
 
        $("#star3").append("(Avg: " + res.wbrgetrating.quality + ", n=" + res.wbrgetrating.yieldSum + ")" );
}
}
function answerClicked(event){
});}
$(".answer").removeClass("boxed");
$('input[type=radio]').prop('checked', function () {
    return this.getAttribute('checked') == 'checked';
});
$(this).addClass("boxed");
$(this).find("#Ar").prop("checked",true);
console.log($(this).children());         
if($("#exam").find('#submit').length == 0){
$("#examSpace").append("<div class='noSelect WBRButton' id='submit'><br />Submit</div>");
                $("#submit").click(event.data, answerSubmitted);
}
}
function answerSubmitted(event) {
function answerSubmitted(event) {
         $("#submit").remove();
         $("#submit").remove();
event.data.examQuestions[event.data.currentQuestion].selectedAnswer = $("div .boxed").attr("id");
event.data.examQuestions[event.data.currentQuestion].selectedAnswer = $(".answer.boxed").attr("id");
if (!event.data.examQuestions[event.data.currentQuestion].creditRecieved && event.data.examQuestions[event.data.currentQuestion].selectedAnswer === event.data.examQuestions[event.data.currentQuestion].RightAnswer) {
if (!event.data.examQuestions[event.data.currentQuestion].creditRecieved && event.data.examQuestions[event.data.currentQuestion].selectedAnswer === event.data.examQuestions[event.data.currentQuestion].RightAnswer) {
event.data.answeredRight += 1;
event.data.answeredRight += 1;
event.data.examQuestions[event.data.currentQuestion].creditRecieved = true;
event.data.examQuestions[event.data.currentQuestion].creditRecieved = true;
Line 649: Line 1,103:
$(".answerExp").css("height", "auto");
$(".answerExp").css("height", "auto");
$(".answerExp").css("visibility", "visible");
$(".answerExp").css("visibility", "visible");
                $(".answerExp").each(function(){
                              if($(this).attr('id') === event.data.examQuestions[event.data.currentQuestion].RightAnswer+"e"){
                                      $(this).prepend("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Correct:</b> ");
                              } else {
                                      $(this).prepend("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Incorrect:</b> ");
                              }
                });
}
}
$("div.answer").unbind('click');
$("div.answer").unbind('click');
Line 665: Line 1,127:
$("#" + event.data.examQuestions[event.data.currentQuestion].selectedAnswer).addClass("boxed");
$("#" + event.data.examQuestions[event.data.currentQuestion].selectedAnswer).addClass("boxed");
} else if (event.data.examType === "Tutor") {
} else if (event.data.examType === "Tutor") {
$("#examSpace").append("<br /><br />The correct answer is: " + event.data.examQuestions[event.data.currentQuestion].RightAnswer + "<br /><br /><i>" + event.data.examQuestions[event.data.currentQuestion].Explanation + "</i><br />");
$("#examSpace").append("<br /><br />The correct answer is: " + event.data.examQuestions[event.data.currentQuestion].RightAnswer + "<br /><br />" + event.data.examQuestions[event.data.currentQuestion].Explanation + "<br />");
                $("#examSpace").append("<b>Author:</b> " + event.data.examQuestions[event.data.currentQuestion].PageAuthor + "<br /><br /><b>Wiki Page:</b>" + event.data.examQuestions[event.data.currentQuestion].PageName + "<br /><br />Discuss this question <a href='http://www.wikidoc.org/index.php/Talk:" + event.data.examQuestions[event.data.currentQuestion].PageName + "'>Here</a>");
$("#" + event.data.examQuestions[event.data.currentQuestion].selectedAnswer).addClass("boxed");
$("#" + event.data.examQuestions[event.data.currentQuestion].selectedAnswer).addClass("boxed");
$("#" + event.data.examQuestions[event.data.currentQuestion].RightAnswer).addClass("redBoxed");
$("#" + event.data.examQuestions[event.data.currentQuestion].RightAnswer).addClass("redBoxed");
addRatyRating(event.data);
addRatyRating(event.data);
}
}
       
}
}
function questionNavigation(event) {
function questionNavigation(event) {
Line 695: Line 1,159:
questionReview(event.data);
questionReview(event.data);
}
}
// $('#flag').click(function(){
//var cur_q=exam.currentQuestion;
// var temp_flag_div_id='.navPaneButton#'+cur_q;
// $("#" + event.data.currentQuestion).toggleClass('flagged');
//alert("You clicked the flag!"+temp_flag_div_id);
// })
function flagQ(event) {
$("#" + event.data.currentQuestion).toggleClass("flagged");
}
function showLabs(event) {
$("#details").stop();
$("#details").slideToggle("slow");}
function convolve_bernouli(qprobs){
//takes in an array of probabilities of guessing questions correct
for (var counter = 0; counter < qprobs.length; counter++) {
//if the loop is in the first iteration, then initialize the array
if (counter==0){
    var pdfArray=[1-qprobs[0],qprobs[0]];
}else{
    //initialize new Array for pdfs
    var newpdfArray= [];
  for (var i = 0; i < pdfArray.length+1; i+=1) {
        newpdfArray[i]=0;
    }
    //multiply by ones first
  for (var i = 0; i < pdfArray.length; i+=1) {
        newpdfArray[i+1]+=pdfArray[i]*qprobs[counter]; //probability of adding a success
        newpdfArray[i]+=pdfArray[i]*(1-qprobs[counter]);
    }
   
    pdfArray=newpdfArray;
}
}
console.log(pdfArray);
return(pdfArray);
}//ends convolve_bernouli
function endExam(event) {
function endExam(event) {
if (event.data.timer) {
if (event.data.timer) {
Line 705: Line 1,210:
datas = "";
datas = "";
datas += "<br />You answered " + event.data.answeredRight + " out of " + event.data.examQuestions.length + " correctly.<br /> Your percentage score is: ";
datas += "<br />You answered " + event.data.answeredRight + " out of " + event.data.examQuestions.length + " correctly.<br /> Your percentage score is: ";
var percent = (event.data.answeredRight / event.data.numQuestion) * 100;
var percent = Math.round((event.data.answeredRight / event.data.examQuestions.length) * 100);
datas += percent + "%<br /><br />Click the Navigation Buttons on the left to review the questions you answered.";
testlength=event.data.examQuestions.length;
var question_probs=[];
for (var j = 0; j < testlength; j+=1){
    question_probs[j]=Math.random();
}
qdist=convolve_bernouli(question_probs);
 
var myTotal = 0; //Variable to hold your total
 
for(var i=0, len=event.data.answeredRight+1; i<len; i++){
    myTotal += qdist[i];  //Iterate over your first array and then grab the second element add the values up
}
 
 
datas += percent + "%<br /><br />Click the Navigation Buttons on the left to review the questions you answered.<br />";
datas += "<br />You scored in the " + Math.round(myTotal*100) + " percentile. <br /><br />";
 
datas += "<canvas id='simExams' width='600' height='400'></canvas>";
$("#examSpace").append(datas);
 
var api = new mw.Api();
var api = new mw.Api();


Line 719: Line 1,243:
console.log('API result:', data);
console.log('API result:', data);
});
});
           
// Here's some code to create the labels for the graph (recall that qdist is the distribution of points).
point_labels=[];
for (var j = 0; j < qdist.length; j+=1){
    point_labels[j]=j.toString();
}
var simExamData = {
                labels : point_labels,
                datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : qdist,
title: "Percent of test takers"
}
            ]
            }
var newopts = {
yAxisLabel : "Percent of test takers",
yAxisFontFamily : "'Arial'",
yAxisFontSize : 16,
yAxisFontStyle : "normal",
yAxisFontColor : "#666",
xAxisLabel : "Number of correct answers",
legend : false,
legendFontFamily : "'Arial'",
legendFontSize : 12,
legendFontStyle : "normal",
legendFontColor : "#666",
legendBlockSize : 15,
legendBorders : false,
legendBordersColor : "#666",
graphTitle : "Peer Performance",
graphTitleFontFamily : "'Arial'",
graphTitleFontSize : 24,
graphTitleFontStyle : "bold",
graphTitleFontColor : "#666",
}
            // get line chart canvas
            var simExams = document.getElementById('simExams').getContext('2d');
            // draw line chart
            new Chart(simExams).Line(simExamData,newopts);


$("#examSpace").append(datas);
$(".navPaneButton").unbind('click');
$(".navPaneButton").unbind('click');
$(".navPaneButton").click(event.data, questionReviewNavigation);
$(".navPaneButton").click(event.data, questionReviewNavigation);
}
}
function submitRating(type, score, page) {
function submitRating(ratingType, score, page) {
      if(ratingType === "difficulty"){
var api = new mw.Api();
api.get({
action : 'wbrinsertrating',
username : mw.user.getName(),
question : page,
difficulty : score,
format : 'json'
}, {
ok : function (res) {}
});
} else if (ratingType === "yield"){
var api = new mw.Api();
var api = new mw.Api();
api.get({
api.get({
Line 730: Line 1,322:
username : mw.user.getName(),
username : mw.user.getName(),
question : page,
question : page,
quality : 5,
yield : score,
format : 'json'
format : 'json'
}, {
}, {
Line 736: Line 1,328:
});
});
}
}
function getRating(type, page) {
else if (ratingType === "quality"){
var api = new mw.Api();
var api = new mw.Api();
api.get({
api.get({
action : 'wbrgetrating',
action : 'wbrinsertrating',
username : mw.user.getName(),
question : page,
question : page,
quality : score,
format : 'json'
format : 'json'
}, {
}, {
ok : function (res) {
ok : function (res) {}
if (type === "difficulty") {
return res.difficulty;
}
if (type === "quality") {
return res.quality;
}
if (type === "yield") {
return res.yield;
}
}
});
});
}
}
}
function parseQuestions(examObj) {
function parseQuestions(examObj) {
var tobeParsed = null;
var tobeParsed = null;
Line 893: Line 1,479:
}
}
$(document).ready(ensureLoggedIn);
$(document).ready(ensureLoggedIn);
$(document).ready(function(){
$("#testOptions").hide();
$("#exam").hide();
$("#footer").hide();
$("#mw-head").hide();
$("#mw-head-base").hide();
$("#mw-page-base").hide();
$("#searchbox").hide();
$("#firstHeading").after("<div class='show_wiki_button' style='font-family: Lato, Calibri, Arial, sans-serif; color:#aaa;font-size:0.5em;'>Wikiview</div>");
$("#firstHeading").hide();
$("#wikidocNav").hide();
$("#contentSub").hide();
$(".show_wiki_button").click(function(){
$("#footer").show();
$("#mw-head").show();
$("#mw-head-base").show();
$("#mw-page-base").show();
$("#searchbox").show();
$("#firstHeading").show();
$("#wikidocNav").show();
$("#contentSub").hide()
})
})
</script>
</script>
<div id="exam">pewp</div>
<div id="chooseQBank" style='height:100%;'></div>
<div id="testOptions" style='height:100%;'></div>
<div id="exam" style='height:100%;'></div>
</includeonly>
</includeonly>

Latest revision as of 00:56, 10 August 2014

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