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)
 
(51 intermediate revisions by the same user not shown)
Line 3: Line 3:
<script src="http://www.wikidoc.org/includes/raty/jquery.timer.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 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 src='http://dl.dropboxusercontent.com/u/1874620/ChartNew.js'></script>
Line 12: Line 13:


<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{
a{
Line 102: Line 152:
     background: white;  
     background: white;  
}
}
#spacer{
#spacer{
margin:10px
margin:10px
Line 228: Line 280:
#mw-content-text{
#mw-content-text{
height:100%;}
height:100%;}
#navPane{
#navPane{
position:relative;  
position:relative;  
float:left;
float:left;
width:5%;
width:5%;
height:100%;
overflow-y:scroll;
}
}
#examSpace{
#examSpace{
Line 255: Line 310:
#pauseButton{
#pauseButton{
float:right;
float:right;
margin-bottom:0px;
height:95%;
}
}
#stopButton{
#stopButton{
float:right;
float:right;
margin-right: 5%;
margin-right: 5%;
height=95%;
margin-bottom:0px;
}
}
.navPaneButton{
.navPaneButton{
Line 281: Line 340:
visibility:visible;
visibility:visible;
}
}
#tutorOrExamContainer{
background-color:#E3E5E5;
}
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
Line 352: Line 415:
$("#exam").show();
$("#exam").show();
var divs = null;
var divs = null;
divs = "<div class= 'container'><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 />";
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 713: Line 858:
$("#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>");
$("#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>");
//$("#flag").click(function(){alert("Coming Soon!")});
//$("#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/4/4a/Pausebutton4.svg' ></div></div>").insertAfter("#exam");
$("<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);
         $("#back").click(exam, questionNavigation);

Latest revision as of 00:56, 10 August 2014

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