kartuliflash.hbs

{{> header }}

<div class="container" id="kartuliflash">
	<h1>Georgian Letter Flashcards</h1>

	<div class="row">
		<div class="col-xs-12 col-sm-8">
			<div class="main">
				<h2>Play</h2>
				<form class="form-horizontal" id="flashcard">
					<div class="row">
						<div class="col-xs-12 col-sm-8">
							<div class="row">
								<div class="col-xs-4 col-sm-3">
									 <label>Georgian</label>
								</div>
								<div class="col-xs-8 col-sm-9">
										<span id="georgian"></span>
								</div>
							</div>

							<div class="row" id="guessrow">
								<div class="col-xs-4 col-sm-3">
										<label>English</label>
								</div>
								<div class="col-xs-8 col-sm-9">
										<input class="form-control" type="text" id="guess"  size="3"  maxlength="3" />
										<button class="btn btn-success" id="check">Check</button>
								</div>
							</div>
						</div>
					</div>
				</form>

				<div class="alert alert-warning" id="scoreboard">
					Score: <span id="score" rol="alert">0 / 0</span>
				</div>

				<div id="solution"></div>

				<div id="buttons">
					<button class="btn btn-default" id="new">New Card</button>
					<button class="btn btn-default" id="showtable">Show Table</button>
				</div>
				<table class="table table-striped table-bordered" id="letter-table">
					<tbody>
					</tbody>
				</table>
			</div><!-- main -->
		</div>

		<div class="col-xs-12 col-sm-4">
			<div class="sidebar">
				<h2>Hints</h2>
				<p>Type in the english equivalent to the georgian character displayed</p>
				<p>Test answer: <span class="btn btn-success">Check</span> or <kbd>Enter</kbd></p>
				<p>Deal new card: <span class="btn btn-default">New Card</span> or <kbd>Alt-n</kbd></p>
				<p>Reveal full character table via <span class="btn btn-default">Show Table</span></p>
			</div>
		</div>
	</div>

	<script src="/static/js/kartuliflash.js" type="text/javascript"></script>

</div><!-- kartuliflash -->


{{> footer }}