Skip to content

Instantly share code, notes, and snippets.

@kardeiz

kardeiz/gist:3006106

Created June 27, 2012 19:09
Show Gist options
  • Save kardeiz/3006106 to your computer and use it in GitHub Desktop.
Save kardeiz/3006106 to your computer and use it in GitHub Desktop.
Download ZIP
Generic user story collection tool using Twitter Bootstrap, Select2, and Google Forms
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>User story collection tool</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/select2/select2.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
input {max-width:100%;}
.select2-container {max-width:100%;}
.hero-unit p.btn { color: white; }
[class^="icon-"], [class*=" icon-"] {vertical-align:baseline;}
.control-label { font-weight:bolder; }
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<!-- <li><a href="#contact">Contact</a></li> -->
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>User story collection tool</h1>
<hr/>
<div class="row">
<div class="span9">
<div class="hero-unit">
<h1>Share your perspective</h1><br/>
<p>Select from the options below or add your own</p><hr/>
<div class="row-fluid" id="form-container">
<div class="span9 form-container-2">
<form class="form-horizontal user-story" action="https://docs.google.com/spreadsheet/formResponse?formkey=dFU4WmNJTVJueTRMU2dLaDMwYmxJV2c6MQ&ifq">
<!--<fieldset>-->
<input type="hidden" name="submit" value="Submit">
<div class="control-group">
<label class="control-label" for="entry_0">As a </label>
<div class="controls">
<input type="text" class="input-xlarge role" name="entry.0.single" id="entry_0">
</div>
</div>
<div class="control-group">
<label class="control-label" for="entry_1">I want </label>
<div class="controls">
<input type="text" class="input-xlarge goal" name="entry.1.single" id="entry_1">
</div>
</div>
<div class="control-group">
<label class="control-label" for="entry_2">so that </label>
<div class="controls">
<input type="text" class="input-xlarge benefit" name="entry.2.single" id="entry_2">
</div>
</div>
<!--</fieldset>-->
</form>
</div>
<div class="span3">
<p class="btn btn-primary btn-large form-submit">Submit <i class="icon-share icon-white"></i></p>
</div>
</div>
</div>
</div>
<div class="span3">
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery-1.7.2.min.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
<script src="../assets/js/select2.js"></script>
<script>
$(document).ready(function(){
var form_clone = $('#form-container form').clone();
$.ajax({
dataType: "jsonp",
async:false,
url: 'url',
success: function(data) {
var temparr = [];
$.each(data.feed.entry, function(i,v){
var tempobj = {};
$.each(v.content["$t"].split(","), function(j,w){
tempobj[$.trim(($.trim(w)).split(":")[0])] = $.trim(($.trim(w)).split(":")[1]);
});
temparr.push(tempobj);
});
var select_box_builder = function() {
var temp = function(input,placeholder,rgb) {
var data = []; var result = [];
$.each(temparr, function(i,v) {
if (($.inArray(v[rgb], result) == -1) && (typeof(v[rgb]) != 'undefined')) {
result.push(v[rgb]); data.push({id: v[rgb], text: v[rgb]});
}
});
input.select2({
data: data,
placeholder: placeholder,
createSearchChoice: function(term) { return {id:term, text:term}; },
allowClear: true,
multiple: true
});
}
temp($('form.user-story input.role'),"--role or user type--","role");
temp($('form.user-story input.goal'),"--goal or desired functionality--","goal");
temp($('form.user-story input.benefit'),"--benefit or end goal--","benefit");
};
select_box_builder();
$('#form-container .form-submit').click(function() {
$.ajax({
type: "POST",
url: $('#form-container form').attr("action"),
data: $('#form-container form').serialize()
});
$('#form-container form').fadeOut("slow", function(){
$('#form-container form').remove();
temp = '<div class="alert alert-success"><a class="close" data-dismiss="alert" href="#">&times;</a>'
temp += '<span>Thanks for your help!</span></div>'
if ($('#form-container .form-container-2 .alert').length == 0 ) { $('#form-container .form-container-2').append(temp); }
$('#form-container .form-container-2').append(form_clone.clone());
select_box_builder();
});
});
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment