images as checkboxes

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

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}();

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>