Bootstrap Narrative Assignment

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/dist/typeahead.bundle.js "></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<body class="y-scrollable" data-final-grade-status="NOT_STARTED">
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div id="alertContainer"></div>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading clickable collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
                 <h4 class="panel-title">
                    <a class="accordion-toggle">
					  1st: Choose Assessment Purposes
				    
                <i class="indicator fa pull-right fa-chevron-right"></i>
                 </a>
                </h4>

            </div>
            <div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
                <div class="panel-body padded-panel">
                    <div class="row">
                        <div class="col-sm-5">
                            <div class="panel panel-primary" id="allLearningExperiencesContainer">
                                <div class="panel-heading">
                                    	<h3 class="panel-title">All Asssessment Purposes</h3>

                                </div>
                                <div class="panel-body">
                                    <ul class="list-group j-selectable" id="allLearningExperiences">
                              ...

CSS

.col-sm-3, .col-sm-4 {
    border: 1px solid #000;
}
.padding-top-5 {
    padding-top: 5px;
}
@media (min-width: 768px) {
    .pull-right-sm {
        float: right !important;
    }
    .pull-left-sm {
        float: left !important;
    }
}
@media (min-width: 992px) {
    .pull-right-md {
        float: right !important;
    }
    .pull-left-md {
        float: left !important;
    }
}
@media (min-width: 1200px) {
    .pull-right-lg {
        float: right !important;
    }
    .pull-left-lg {
        float: left !important;
    }
}
@media (max-width: 767px) {
    .text-center-xs {
        text-align: center;
    }
}
/* custom font! */

/* ------------ */
 @font-face {
    font-family: Prociono;
    src: url(../font/Prociono-Regular-webfont.ttf);
}
/* scaffolding */

/* ----------- */
 html {
    overflow-y: scroll;
    *overflow-x: hidden;
}
.container {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.tt-dropdown-menu, .gist {
    text-align: left;
}
/* base styles */

/* ----------- */
 html {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #333;
}
a {
    color: #03739c;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.table-of-contents li {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.table-of-contents li a {
    font-size: 16px;
    color: #999;
}
.title, .example-name {
    font-family: Prociono;
}
p + p {
    margin: 30px 0 0 0;
}
/* site theme */

/* ---------- */
 .title {
    margin: 20px 0 0 0;
    font-size: 64px;
}
.example {
    padding: 30px 0;
}
.example-name {
    margin: 20px 0;
    font-size: 32px;
}
.demo {
    position: relative;
    *z-index: 1;
    margin: 50px 0;
}
.typeahead, .tt-query, .tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:...

JavaScript

/* global Bloodhound:false, Handlebars:true */
$(document).ready(function () {
  'use strict';

  // remote
  // ------

  var bestPictures = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('display_name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'http://echo.jsontest.com/display_name/gorfFroptopit/uniqname/gorffrop/primary_job_description/Cool-Dude/token/gorf',
    remote: {
      url: 'http://api.themoviedb.org/3/search/movie?api_key=470fd2ec8853e25d2f8d86f685d2270e',
      replace: function (url, query) {
        var assessorPartialName = encodeURIComponent(query);
        var q ='';
        if ($('[name*="options"][checked*="checked"]').val()) {
          q += '&assessorType=' + encodeURIComponent($('[name*="options"][checked*="checked"]').val());
        }
        return url + '&query=' + encodeURIComponent(query) + q;
      },
      filter: function (movies) {
        // Map the remote source JSON array to a JavaScript object array
        return $.map(movies.results, function (movie) {
          return {
            display_name: movie.original_title,
            uniqname: movie.release_date,
            primary_job_description: movie.vote_average
          };
        });
      }
    }
  });
  bestPictures.clearPrefetchCache();
  bestPictures.initialize();



  // custom templates
  // ----------------

  $('#custom-templates .typeahead').typeahead(null, {
    name: 'best-pictures',
    displayKey: 'display_name',
    source: bestPictures.ttAdapter(),
    templates: {
      empty: [
        '<div class="empty-message">',
        'unable to find any Best Picture winners that match the current query',
        '</div>'
      ].join('\n'),
      suggestion: Handlebars.compile(
        '<p><strong>{{display_name}}</strong><br/>{{uniqname}}<br/>{{primary_job_description}}</p>')
    }
  });

});