Bootstrap Student Assessment Panel

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">Choose Assessment Purposes for Panel</div>

        <ul class="list-group">
            <li class="list-group-item disabled">Course Assessment Purposes</li>
            <li class="list-group-item">
                <div class="btn-group btn-group-lg btn-group-vertical" role="group" aria-label="..." data-toggle="buttons">
                    <label class="btn btn-primary active">
                        <input type="checkbox" autocomplete="off" checked="checked" value="hello">Checkbox 1 (pre-checked)</input></label>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" />Checkbox 2</label>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" />Checkbox 3</label>
                </div>
            </li>
            <li class="list-group-item disabled">Other Available Assessment Purposes</li>
            <li class="list-group-item">
                <div class="btn-group btn-group-lg btn-group-vertical" role="group" aria-label="..." data-toggle="buttons">
                    <label class="btn btn-primary active">
                        <input type="checkbox" autocomplete="off" checked="checked" />Checkbox 1 (pre-checked)</label>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" />Checkbox 2</label>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" />Checkbox 3</label>
                </div>
         ...

CSS

.col-sm-3, .col-sm-4 {
    border: 1px solid #000;
}
.padding-top-5 {
    padding-top: 5px;
}

JavaScript

/*! Selectonic - v0.6.1 - 2015-01-05
* https://github.com/anovi/selectonic
* Copyright (c) 2015 Alexey Novichkov; Licensed MIT */
(function($, window, undefined) {
  'use strict'; // remove this line, this script will be support running on IE6

  // Method for getting full elements height, jQuery's outerHeight is like Zepto's height
  var outerHeight = $.fn.outerHeight ? 'outerHeight' : 'height';
  if ( !$.fn.jquery && !$.fn.zepto ) { $.fn.zepto = true; }

  // From Underscore library - http://underscorejs.org/#throttle
  var _throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    var previous = 0;
    options = options || {};
    var later = function() {
      previous = options.leading === false ? 0 : new Date();
      timeout = null;
      result = func.apply(context, args);
    };
    return function() {
      var now = new Date();
      if (!previous && options.leading === false) { previous = now; }
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      if (remaining <= 0) {
        clearTimeout(timeout);
        timeout = null;
        previous = now;
        result = func.apply(context, args);
      } else if (!timeout && options.trailing !== false) {
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  },

  __indexOf = Array.prototype.indexOf || function(item) {
    for (var i = 0, l = this.length; i < l; i++) { if (this[i] === item) {return i;}  }
    return -1;
  },

  itContains = function( array, elem ) {
    if (array instanceof Array) { return __indexOf.call(array, elem) >= 0; }
    return false;
  },

  $document = $( window.document );

  /**
  * @class Options
  * @constructor
  * @for Selectonic
  * @param {Object} schema Options schema.
  * @param {Object} initial Initial options, will be mixed with schema's defaults.
  **/ 
  function Options ( schema, defaults, initial ) {
    this._schema    = schema;
    this._options...