Widget:WJG Sandbox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 17: | Line 17: | ||
<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(https://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(https://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(https://dl.dropboxusercontent.com/u/1874620/iCheck/flat/blue@2x.png); | |||
-webkit-background-size: 176px 22px; | |||
background-size: 176px 22px; | |||
} | |||
} | |||
a{ | a{ | ||
| Line 379: | Line 428: | ||
"/<div>"; | "/<div>"; | ||
//$("#exam").html(iCheckBox); | //$("#exam").html(iCheckBox); | ||
var examOptionButtons = "<div style='background:#fafafa; color:#222; padding:10px;'>"+ | |||
" <h3 class='examOptionTitle'>Exam Mode</h3>"+ | |||
" <form id='myForm'>"+ | |||
" <input type='radio' name='examMode' value='exam' id='exam' class='css-checkbox' />"+ | |||
" <label for='exam' 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='myForm'>"+ | |||
" <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>"; | |||
$("#exam").html(examOptionButtons); | |||
} | } | ||
| Line 410: | Line 488: | ||
"<b> Timed or Untimed: </b>" + timerSetting); | "<b> Timed or Untimed: </b>" + timerSetting); | ||
} | } | ||