Skip to content

Instantly share code, notes, and snippets.

@dustinboston

dustinboston/story_time.html

Last active December 19, 2015 00:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dustinboston/5872260 to your computer and use it in GitHub Desktop.
Save dustinboston/5872260 to your computer and use it in GitHub Desktop.
Download ZIP
The definitive format for user stories. Add as many scenarios as needed.
Raw
story_time.html
<!DOCTYPE html>
<html ng-app="storyTime">
<head>
<title>Story time</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>body {padding: 50px;} .navbar .brand {margin-left: 0;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var storyTimeModule;
storyTimeModule = angular.module('storyTime', []);
storyTimeModule.factory('scenariosService', function() {
var scenarios, scenariosService;
scenarios = [];
scenariosService = {};
scenariosService.addScenario = function(scenario) {
scenarios.push(scenario);
};
scenariosService.getScenarios = function() {
return scenarios;
};
return scenariosService;
});
function ScenarioViewCtrl($scope, scenariosService) {
$scope.getScenarios = scenariosService.getScenarios;
}
function ScenarioFormCtrl($scope, scenariosService) {
$scope.getScenarios = scenariosService.getScenarios;
$scope.addScenario = function() {
scenariosService.addScenario({
scenarioTitle: $scope.scenarioTitle,
scenarioGiven: $scope.scenarioGiven,
scenarioEvent: $scope.scenarioEvent,
scenarioOutcome: $scope.scenarioOutcome
});
$scope.scenarioTitle = '';
$scope.scenarioGiven = '';
$scope.scenarioEvent = '';
$scope.scenarioOutcome = '';
};
}
</script>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Story Time</a>
</div>
</div>
<div class="row">
<form class="form-horizontal span4">
<fieldset>
<legend>Story</legend>
<div class="control-group">
<label for="story-title">Title</label>
<input ng-model="storyTitle" id="story-title" type="text" class="input-block-level" placeholder="e.g. Account Holder withdraws cash" />
</div>
</fieldset>
<fieldset>
<legend>Narrative</legend>
<div class="control-group">
<label for="narrative-role">As a/an</label>
<input ng-model="narrativeRole" id="narrative-role" type="text" class="input-block-level" placeholder="e.g. Account Holder" />
</div>
<div class="control-group">
<label for="narrative-feature">I want to</label>
<input ng-model="narrativeFeature" id="narrative-feature" type="text" class="input-block-level" placeholder="e.g. Withdraw cash from an ATM" />
</div>
<div class="control-group">
<label for="narrative-benefit">So that I can</label>
<input ng-model="narrativeBenefit" id="narrative-benefit" type="text" class="input-block-level" placeholder="e.g. Get money when the bank is closed" />
</div>
</fieldset>
<div ng-controller="ScenarioFormCtrl">
<div ng-repeat="scenario in getScenarios()">
<fieldset>
<legend>Scenario</legend>
<div class="control-group">
<label>Title</label>
<input ng-model="scenario.scenarioTitle" type="text" class="input-block-level" placeholder="e.g. Account has sufficient funds" />
</div>
<div class="control-group">
<label>Given</label>
<input ng-model="scenario.scenarioGiven" type="text" class="input-block-level" placeholder="e.g. The account balance is $100" />
</div>
<div class="control-group">
<label>When</label>
<input ng-model="scenario.scenarioEvent" type="text" class="input-block-level" placeholder="e.g. The Account Holder requests $20" />
</div>
<div class="control-group">
<label>Then</label>
<input ng-model="scenario.scenarioOutcome" type="text" class="input-block-level" placeholder="e.g. The ATM should dispense $20" />
</div>
</fieldset>
</div>
<fieldset>
<legend>Scenario</legend>
<div class="control-group">
<label>Title</label>
<input ng-model="scenarioTitle" type="text" class="input-block-level" placeholder="e.g. Account has sufficient funds" />
</div>
<div class="control-group">
<label>Given</label>
<input ng-model="scenarioGiven" type="text" class="input-block-level" placeholder="e.g. The account balance is $100" />
</div>
<div class="control-group">
<label>When</label>
<input ng-model="scenarioEvent" type="text" class="input-block-level" placeholder="e.g. The Account Holder requests $20" />
</div>
<div class="control-group">
<label>Then</label>
<input ng-model="scenarioOutcome" type="text" class="input-block-level" placeholder="e.g. The ATM should dispense $20" />
</div>
<button ng-click="addScenario()" class="btn" type="button"><i class="icon-plus"></i> Add Scenario</button>
</fieldset>
</div>
</form>
<div class="span8 offset4 affix">
<h2>{{storyTitle}}</h2>
<p>As a/an <em>{{narrativeRole}}</em>, I want to {{narrativeFeature}} so that I can {{narrativeBenefit}}.</p>
<div ng-controller="ScenarioViewCtrl">
<div ng-repeat="scenario in getScenarios()">
<h3>{{scenario.scenarioTitle}}</h3>
<p>Given {{scenario.scenarioGiven}}, when {{scenario.scenarioEvent}}, then {{scenario.scenarioOutcome}}.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment