Widget:WJG Sandbox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Undo revision 1008029 by William J Gibson (talk) |
||
(36 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); | ||
var 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'>  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'>  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'>  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'>  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) { | 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"). | $("#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 384: | Line 483: | ||
"<option value='Untimed'>Untimed</option>" + | "<option value='Untimed'>Untimed</option>" + | ||
"<option value='Timed'>Timed</option>" + | "<option value='Timed'>Timed</option>" + | ||
"</select>" | "</select>"); | ||
); | //$("#exam").append("<div id='displayVals'></div>"); | ||
displayVals | |||
} | } | ||
Line 399: | Line 496: | ||
"<b> Timed or Untimed: </b>" + timerSetting); | "<b> Timed or Untimed: </b>" + timerSetting); | ||
} | } | ||