bvancil/studentPicker.html

## studentPicker.html
<!DOCTYPE html>
<html ng-app="studentPicker">
	<head>
		<meta charset="utf-8" />
		<title>Student Picker</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<script type="text/javascript">
		angular.module('studentPicker', [])
			.controller('StudentPickerController', function() {
				var sp = this;
				sp.studentsByClass = {
					"Period 1": ["Student 1", "Student 2", "Student 3"],
					"Period 2": ["Student 4", "Student 5", "Student 6", "Student 7"],
				};
				sp.onePickedRandomlyFrom = function(xs) { return xs[Math.floor(Math.random()*xs.length)]; };
				sp.classNames = function() { return Object.keys(sp.studentsByClass); };
				sp.currentClassName = "";
				sp.currentStudentNames = function() { return sp.studentsByClass[sp.currentClassName]; };
				sp.pickedStudent = "";
				sp.pick = function() { sp.pickedStudent = sp.onePickedRandomlyFrom(sp.currentStudentNames()); };
			});
		</script>
		<style type="text/css">
		header, section, footer, aside, nav, article, figure, audio, video, canvas  { display:block; }
		li {
			display:inline-block;
			list-style-type: none;
			/*padding-right: 20px;*/
		}
		li:before {
			content: '\00a0\00a7\00a0';
			color: #C0C0C0;
		}
		li:first-child:before {
			content: '';
		}
		</style>
	</head>
	<body>
		<div id="wrapper" ng-controller="StudentPickerController as sp">
			<nav>
				<select id="class" ng-model="sp.currentClassName"><option ng-repeat="cname in sp.classNames()">{{cname}}</option></select>
			</nav>
			<section id="content">
				<article>
					<ul><li ng-repeat="sname in sp.currentStudentNames()">{{sname}}</li></ul>
					<form ng-submit="sp.pick()">
						<input class="btn-primary" type="submit" value="pick"/>
					</form>
					<div id="output">
					{{sp.pickedStudent}}
					</div>
				</article>
			</section>
		</div>
	</body>
</html>
	<!DOCTYPE html>
	<html ng-app="studentPicker">
	<head>
	<meta charset="utf-8" />
	<title>Student Picker</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<script type="text/javascript">
	angular.module('studentPicker', [])
	.controller('StudentPickerController', function() {
	var sp = this;
	sp.studentsByClass = {
	"Period 1": ["Student 1", "Student 2", "Student 3"],
	"Period 2": ["Student 4", "Student 5", "Student 6", "Student 7"],
	};
	sp.onePickedRandomlyFrom = function(xs) { return xs[Math.floor(Math.random()*xs.length)]; };
	sp.classNames = function() { return Object.keys(sp.studentsByClass); };
	sp.currentClassName = "";
	sp.currentStudentNames = function() { return sp.studentsByClass[sp.currentClassName]; };
	sp.pickedStudent = "";
	sp.pick = function() { sp.pickedStudent = sp.onePickedRandomlyFrom(sp.currentStudentNames()); };
	});
	</script>
	<style type="text/css">
	header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
	li {
	display:inline-block;
	list-style-type: none;
	/padding-right: 20px;/
	}
	li:before {
	content: '\00a0\00a7\00a0';
	color: #C0C0C0;
	}
	li:first-child:before {
	content: '';
	}
	</style>
	</head>
	<body>
	<div id="wrapper" ng-controller="StudentPickerController as sp">
	<nav>
	<select id="class" ng-model="sp.currentClassName"><option ng-repeat="cname in sp.classNames()">{{cname}}</option></select>
	</nav>
	<section id="content">
	<article>
	<ul><li ng-repeat="sname in sp.currentStudentNames()">{{sname}}</li></ul>
	<form ng-submit="sp.pick()">
	<input class="btn-primary" type="submit" value="pick"/>
	</form>
	<div id="output">
	{{sp.pickedStudent}}
	</div>
	</article>
	</section>
	</div>
	</body>
	</html>