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)
 
(38 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 288: Line 340:
visibility:visible;
visibility:visible;
}
}
#tutorOrExamContainer{
background-color:#E3E5E5;
}
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
Line 359: 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);
$temp_str="<div id= 'examOptions'></div>";
var temp_str="<div id= 'examOptions'></div>";
$("#exam").append(temp_str);
//$("#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);
}


chooseExamOptions(event.data);
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) {
function chooseExamOptions(event) {
$("#chooseQBank").remove();//Once the QBank is picked, we'll remove the div that held it.
$("#chooseQBank").remove();//Once the QBank is picked, we'll remove the div that held it.
$("#exam").show();
$("#exam").show();
$("#examOptions").html(""+
$("#examOptions").append(""+
"<select id ='ToE' name='Exam Type'>" +
"<select id ='ToE' name='Exam Type'>" +
        "<option value='Tutor'>Tutor Mode</option>" +
        "<option value='Tutor'>Tutor Mode</option>" +
Line 378: Line 477:
"</select>" +
"</select>" +
"<select id ='catOrKey' name='Question Selection'>" +
"<select id ='catOrKey' name='Question Selection'>" +
        "<option value='Category'>Tutor Mode</option>" +
        "<option value='Category'>Category</option>" +
        "<option value='Keyword'>Exam Mode</option>" +
        "<option value='Keyword'>Keyword</option>" +
"</select>" +
"</select>" +
"<select id ='Timed' name='Timer'>" +
"<select id ='Timed' name='Timer'>" +
Line 385: Line 484:
        "<option value='Timed'>Timed</option>" +
        "<option value='Timed'>Timed</option>" +
"</select>");
"</select>");
$("#exam").append("<div id='displayVals'></div>");
//$("#exam").append("<div id='displayVals'></div>");
displayVals();
}
}


function displayVals() {
function displayVals() {
   var tutor_or_exam_val = $( "#ToE" ).val();
   var tutor_or_exam_val = $( "#ToE" ).val();
   var cat_or_key_val= $( "#catOrKey" ).val();
   var cat_or_key_val= $( "#catOrKey" ).val();
   $( "#displayVals" ).html( "<b>Tutor or Exam:</b> " + tutor_or_exam_val +
  var timerSetting=$("#Timed").val();
     " <b>Category or Keyword:</b> " + cat_or_key_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) {

Latest revision as of 00:56, 10 August 2014

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