Skip to content

Instantly share code, notes, and snippets.

@sankage

sankage/images_as_checkboxes.coffee

Last active December 28, 2015 08:38
Show Gist options
  • Save sankage/7472615 to your computer and use it in GitHub Desktop.
Save sankage/7472615 to your computer and use it in GitHub Desktop.
Download ZIP
images as checkboxes
Raw
images_as_checkboxes.coffee
class ImagesAsCheckboxes
constructor: (question_id, conditions = null) ->
@conditions =
debug: conditions && conditions['debug'] || false
exclusive: conditions && conditions['exclusive'] || false
randomize: conditions && conditions['randomize'] || false
grid: conditions && conditions['grid'] || false
static_last: conditions && conditions['static_last'] || false
selector = "span[id^=#{question_id}C]"
@question_id = question_id
@response_set = $("#{selector}:eq(0)").closest('div.response-set')
@overlays = []
@state = []
@option_details = @get_option_details(selector)
@conditions['grid'] = "3x#{Math.ceil(@option_details.length/3)}" unless @conditions['grid']
@randomize() if @conditions['randomize']
@grider()
@prepare_images()
@add_handlers()
$("##{@question_id}_loading").remove()
return
get_option_details: (selector) ->
result = []
set = $(selector)
set = set.filter ->
this.style.display isnt 'none'
set.each (index, option) =>
img = $(option).find('img')
inp = $(option).find('input')
index = result.length
result.push
span:
element: $(option)
id: option.id
image:
element: img
input:
element: inp
id: inp.attr('id')
result
randomize: ->
last = @option_details.pop() if @conditions['static_last']
int = @option_details.length
if int is 0 then return
while --int
j = Math.floor(Math.random() * (int + 1))
temp = @option_details[int]
@option_details[int] = @option_details[j]
@option_details[j] = temp
@option_details.push(last) if @conditions['static_last']
@option_details
prepare_images: ->
$(@option_details).each (index, option) =>
image = option.image.element
wrapper = $ '<div />',
id: "#{option.input.id}_image_wrapper"
css:
position: 'relative'
padding: 0
margin: 0
textAlign: 'center'
width: '100%'
height: '100%'
check = $ '<img />',
src: "//www2.infosurv.com/js/images_as_checkboxes/check.png"
overlay = $ '<div />',
id: "#{option.input.id}_image_overlay"
css:
position: 'absolute'
top: 0
left: 0
width: '100%'
height: '100%'
background: 'url(//www2.infosurv.com/js/images_as_checkboxes/darkness.png)'
textAlign: 'center'
display: 'none'
html: check
image.wrap wrapper
overlay.appendTo("##{option.input.id}_image_wrapper")
@option_details[index]['overlay'] = overlay
@overlays.push "##{option.input.id}_image_overlay"
option.span.element.css
margin: 0
padding: 0
option.input.element.hide() unless @conditions['debug']
return
return
grider: ->
regex = /(\d+)x(\d+)/i
[match, columns, rows] = regex.exec(@conditions['grid'])
rows = parseInt(rows, 10)
columns = parseInt(columns, 10)
@make_grid(rows, columns)
$(@option_details).each (index, option) =>
row = Math.floor(index/columns)
col = index % columns
$("##{@question_id}_#{row}x#{col}").append(option.span.element)
return
return
make_grid: (rows, columns) ->
table = '<table>'
for row in [0...rows]
table += '<tr>'
table += "<td id='#{@question_id}_#{row}x#{column}'></td>" for column in [0...columns]
table += '</tr>'
table += '</table>'
@response_set.append(table)
fix_check: (overlay) ->
height = overlay.parent().innerHeight()
overlay.find('img').css
marginTop: height / 2 - 32
add_handlers: ->
$(@option_details).each (index, option) =>
image = option.image.element
input = option.input.element
overlay = option.overlay
image.css 'cursor', 'pointer'
overlay.css 'cursor', 'pointer'
image.click (event) =>
event.preventDefault()
if @conditions['exclusive'] && option.input.id is @conditions['exclusive']
$(@overlays.join(', ')).hide()
else if @conditions['exclusive']
$("##{@conditions['exclusive']}_image_overlay").hide()
input.trigger('click')
@fix_check(overlay)
overlay.show()
overlay.click (event) ->
event.preventDefault()
input.trigger('click')
overlay.hide()
return
return
Raw
images_as_checkboxes.min.js
var ImagesAsCheckboxes;ImagesAsCheckboxes=function(){function a(a,b){var c;null==b&&(b=null),this.conditions={debug:b&&b.debug||!1,exclusive:b&&b.exclusive||!1,randomize:b&&b.randomize||!1,grid:b&&b.grid||!1,static_last:b&&b.static_last||!1},c="span[id^="+a+"C]",this.question_id=a,this.response_set=$(""+c+":eq(0)").closest("div.response-set"),this.overlays=[],this.state=[],this.option_details=this.get_option_details(c),this.conditions.grid||(this.conditions.grid="3x"+Math.ceil(this.option_details.length/3)),this.conditions.randomize&&this.randomize(),this.grider(),this.prepare_images(),this.add_handlers(),$("#"+this.question_id+"_loading").remove()}return a.prototype.get_option_details=function(a){var b,c;return b=[],c=$(a),c=c.filter(function(){return"none"!==this.style.display}),c.each(function(a,c){var d,e;return d=$(c).find("img"),e=$(c).find("input"),a=b.length,b.push({span:{element:$(c),id:c.id},image:{element:d},input:{element:e,id:e.attr("id")}})}),b},a.prototype.randomize=function(){var a,b,c,d;if(this.conditions.static_last&&(c=this.option_details.pop()),a=this.option_details.length,0!==a){for(;--a;)b=Math.floor(Math.random()*(a+1)),d=this.option_details[a],this.option_details[a]=this.option_details[b],this.option_details[b]=d;return this.conditions.static_last&&this.option_details.push(c),this.option_details}},a.prototype.prepare_images=function(){var a=this;$(this.option_details).each(function(b,c){var d,e,f,g;e=c.image.element,g=$("<div />",{id:""+c.input.id+"_image_wrapper",css:{position:"relative",padding:0,margin:0,textAlign:"center",width:"100%",height:"100%"}}),d=$("<img />",{src:"//www2.infosurv.com/js/images_as_checkboxes/check.png"}),f=$("<div />",{id:""+c.input.id+"_image_overlay",css:{position:"absolute",top:0,left:0,width:"100%",height:"100%",background:"url(//www2.infosurv.com/js/images_as_checkboxes/darkness.png)",textAlign:"center",display:"none"},html:d}),e.wrap(g),f.appendTo("#"+c.input.id+"_image_wrapper"),a.option_details[b].overlay=f,a.overlays.push("#"+c.input.id+"_image_overlay"),c.span.element.css({margin:0,padding:0}),a.conditions.debug||c.input.element.hide()})},a.prototype.grider=function(){var a,b,c,d,e,f=this;c=/(\d+)x(\d+)/i,e=c.exec(this.conditions.grid),b=e[0],a=e[1],d=e[2],d=parseInt(d,10),a=parseInt(a,10),this.make_grid(d,a),$(this.option_details).each(function(b,c){var d,e;e=Math.floor(b/a),d=b%a,$("#"+f.question_id+"_"+e+"x"+d).append(c.span.element)})},a.prototype.make_grid=function(a,b){var c,d,e,f,g;for(e="<table>",d=f=0;a>=0?a>f:f>a;d=a>=0?++f:--f){for(e+="<tr>",c=g=0;b>=0?b>g:g>b;c=b>=0?++g:--g)e+="<td id='"+this.question_id+"_"+d+"x"+c+"'></td>";e+="</tr>"}return e+="</table>",this.response_set.append(e)},a.prototype.fix_check=function(a){var b;return b=a.parent().innerHeight(),a.find("img").css({marginTop:b/2-32})},a.prototype.add_handlers=function(){var a=this;$(this.option_details).each(function(b,c){var d,e,f;d=c.image.element,e=c.input.element,f=c.overlay,d.css("cursor","pointer"),f.css("cursor","pointer"),d.click(function(b){return b.preventDefault(),a.conditions.exclusive&&c.input.id===a.conditions.exclusive?$(a.overlays.join(", ")).hide():a.conditions.exclusive&&$("#"+a.conditions.exclusive+"_image_overlay").hide(),e.trigger("click"),a.fix_check(f),f.show()}),f.click(function(a){return a.preventDefault(),e.trigger("click"),f.hide()})})},a}();
Raw
question.html
<!--Q7_START-->
<div id="Q7_WRAPPER" class="question choosemany list">
<div id="Q7REQANS" class="validation-error" style="display:none;">Please answer the question(s) below before continuing.</div>
<div id="Q7CHKMIN" class="validation-error" style="display:none;">Please select at least 1 choices for question 3.</div>
<a class="anchor" name="A7" id="A7"></a><span class="question-text">Which of the following TV shows have you ever heard of before? Please include any you already mentioned in the previous questions. (check all that apply)</span>
<div class="response-set">
<span id="Q7C1" class="response"><input type="checkbox" name="Q7_1" value="1" id="Q7_1" /> <label for="Q7_1"><span class="choice-text"><img src="lz2-LazyTown-logo.jpg"></span></label><br /></span>
<span id="Q7C2" class="response"><input type="checkbox" name="Q7_2" value="1" id="Q7_2" /> <label for="Q7_2"><span class="choice-text"><img src="lz2-LilE-logo.jpg"></span></label><br /></span>
<span id="Q7C3" class="response"><input type="checkbox" name="Q7_3" value="1" id="Q7_3" /> <label for="Q7_3"><span class="choice-text"><img src="lz2-Handy-logo.jpg"></span></label><br /></span>
<span id="Q7C4" class="response"><input type="checkbox" name="Q7_4" value="1" id="Q7_4" /> <label for="Q7_4"><span class="choice-text"><img src="lz2-Chug-logo.jpg"></span></label><br /></span>
<span id="Q7C5" class="response"><input type="checkbox" name="Q7_5" value="1" id="Q7_5" /> <label for="Q7_5"><span class="choice-text"><img src="lz2-PnF-logo.jpg"></span></label><br /></span>
<span id="Q7C6" class="response"><input type="checkbox" name="Q7_6" value="1" id="Q7_6" /> <label for="Q7_6"><span class="choice-text"><img src="lz2-Wiggles-logo.jpg"></span></label><br /></span>
<span id="Q7C7" class="response"><input type="checkbox" name="Q7_7" value="1" id="Q7_7" /> <label for="Q7_7"><span class="choice-text"><img src="lz2-Curious-logo.jpg"></span></label><br /></span>
<span id="Q7C8" class="response"><input type="checkbox" name="Q7_8" value="1" id="Q7_8" /> <label for="Q7_8"><span class="choice-text"><img src="lz2-Imagination-logo.jpg"></span></label><br /></span>
<span id="Q7C9" class="response"><input type="checkbox" name="Q7_9" value="1" id="Q7_9" /> <label for="Q7_9"><span class="choice-text"><img src="lz2-none.jpg"></span></label><br /></span>
</div>
<span class="text-block spacer"><br /></span>
</div>
<!--Q7_END-->
<script src="images_as_checkboxes.min.js"></script>
<script>
new ImagesAsCheckboxes('Q7', {randomize: true, static_last: true, exclusive: 'Q7_9'});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment