Quick-Quiz/index.html at master · zachlendon/Quick-Quiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
	<head>
	<!--***********************
			HEAD
	***********************-->
	<title>Quiz</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- jQuery Mobile css plus additional -->
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="style.css" />
	<!-- standard jQuery Mobile libary-->
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<!-- custom app functions -->
	<script src="js/quiz.js"></script>
	<!-- store.js library requirements for local storage -->
	<script src="js/json.js"></script>
	<script src="js/store.js"></script>
	<!-- end -->
</head>
<body>

<div data-role="page" data-theme="a">

	<div data-role="header" class='header-wrap'>
		<h1><span class='header-title'>SalesPartner </span> Property Quiz</h1>
	</div><!-- /header -->

	<div data-role="content" id='content'  class="ui-content">
		<!--***********************
			     HOME VIEWS
		***********************-->
		<div id='home-view'>

			<!-- list controls -->
			<div id='quiz-controls'>
			<div class='section'>
				<h3>New Quiz</h3>
				<label for="name">Name:</label>
				<input type="text" name="name" data-inline="true" id="new-quiz-name" data-mini="true" />
				<label for="question">Question:</label>
				<input type="text" name="question" data-inline="true" id="new-quiz-question" data-mini="true" />
				<a class='new' data-icon="plus" data-role="button" data-inline="true">New</a>
			</div>

			</div>

			<!-- list -->
			<div id='list-wrapper' class='section'>

			<h2>Quiz List</h2>
			<p>Select to continue / begin a quiz. Click the information icon to view the current results.
				Data is stored in the device's browser - to back up information click export.</p>
				<a class='clear' data-icon="delete" data-role="button" data-inline="true">Clear</a>
				<a  data-icon="left-arrow" data-role="button" data-inline="true">Import</a>
				<a  data-icon="star" data-role="button" data-inline="true">Export</a>

			<!-- list -->
			<ul data-role="listview" data-inset="true" id='quiz-list'>
			</ul>
			</div>
		</div>
		<!--***********************
			     QUIZ VIEWS
		***********************-->
		<div id="quiz-view">
			<div class='section'>
				<!-- quiz attributes -->
				<h2 id='live-name'></h2>
				<h3 id='live-question'></h3>
				<!-- inputs for answering questions-->
				<div id='live-inputs'>
				    <label for="name">Name:</label>
					<input type="text" name="name" data-inline="true" id="live-name-input" data-mini="true" />
					<label for="answer">Answer:</label>
					<input type="text" name="answer" data-inline="true" id="live-answer" data-mini="true" />
					<a id='live-submit' data-role="button" data-inline="true" data-theme="b">Submit</a>
				</div>
				<!-- hidden thankyou message -->
				<div id='live-thankyou'>
				<h3>Thank you, your answer has been saved.</h3>
				<a id='live-answer-button' data-role="button" data-inline="true" data-theme="b">Answer</a>
				</div>
			</div>

			<a id='live-finish-button' data-role="button" data-inline="true">Finish Quiz</a>
		</div>
	</div><!-- /content -->

</div><!-- /page -->

</body>
</html>