-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
189 lines (173 loc) · 11 KB
/
test.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Set the character encoding for the page -->
<meta charset="UTF-8">
<!-- Set the viewport to be responsive for different screen sizes -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Set the page title -->
<title>Testing framework</title>
<!-- Link to the CSS stylesheet -->
<link rel="stylesheet" href="css/test_css.css"/>
</head>
<body>
<!-- Main heading -->
<h1 class="style-heading">Testing page</h1>
<!-- Subheading with a brief explanation of testing -->
<h4 class="style-subheading" style="text-align: center">This is the page describing how this app was tested. Testing usually comprises of <i>verification</i> and <i>validation</i>.</h4>
<!-- User Acceptance Plan section -->
<div class="style-div">
<h2 class="style-heading">User Acceptance Plan</h2>
<!-- Description of User Acceptance Plan -->
<h4 class="style-subheading">Our User Acceptance plan was designed to ensure that our Treasure Hunt web application meets the needs and expectations of our target users. The plan consisted of the following steps:</h4>
<!-- List of steps in the User Acceptance Plan -->
<ul class="style-list">
<li>Define user requirements: We gathered information about our target users and their needs, preferences, and expectations for a treasure hunt web application. This helped us to identify the key features and functionalities that our app should include.</li>
<li>Develop test scenarios: Based on the user requirements, we developed a set of test scenarios that covered all the key features and functionalities of our app. These scenarios were designed to simulate real-world usage of the app and to test its performance under various conditions.</li>
<li>Conduct user testing: We invited a group of target users to participate in the user testing process. They were asked to complete the test scenarios using our app and to provide feedback on their experience. This allowed us to identify any issues or areas for improvement in the app.</li>
<li>Analyse test results: We analysed the results of the user testing, including the feedback provided by the participants. This helped us to identify any patterns or trends in the issues encountered and to prioritize the areas for improvement.</li>
<li>Implement improvements: Based on the analysis of the test results, we made the necessary improvements to our app. This included fixing any bugs or issues, as well as making enhancements to the user interface and overall user experience.</li>
<li>Repeat testing and analysis: We conducted additional rounds of user testing and analysis to ensure that the improvements made to our app were effective and that no new issues had been introduced.</li>
<li>Finalize the app: Once we were satisfied that our app met the needs and expectations of our target users, we finalized the app and prepared it for release.</li>
</ul>
<br>
<br>
<h2 class="style-heading">User Acceptance Plan Template</h2>
<br>
<table>
<tr>
<th>TEST CASE</th>
<th>TEST NUMBER</th>
<th>TESTED BY</th>
<th>ROLE</th>
<th>DATE/TIME</th>
<th>RESULT</th>
<th>NOTES</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td>Mickael Scott</td>
<td>User</td>
<td>20/03/23 11:00</td>
<td>PASS</td>
<td>Every question was in the correct place and ordered perfectly</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
<td>Kyriakos Kambouridis</td>
<td>User</td>
<td>21/03/23 09:30</td>
<td>PASS</td>
<td>Leaderboard was updated correctly after completing the game</td>
</tr>
<tr>
<td>C</td>
<td>3</td>
<td>Lyna Hadjikyriakou</td>
<td>User</td>
<td>21/03/23 12:45</td>
<td>PASS</td>
<td>All Perfect</td>
</tr>
<tr>
<td>D</td>
<td>4</td>
<td>Andrei Pupkin</td>
<td>User</td>
<td>18/03/23 18:20</td>
<td>FAIL</td>
<td>Location didn't update sometimes and was inacurate</td>
</tr>
<tr>
<td>E</td>
<td>5</td>
<td>John Sarkisian</td>
<td>User</td>
<td>19/03/23 9:10</td>
<td>FAIL</td>
<td>Incorrect answer input</td>
</tr>
<tr>
<td>F</td>
<td>6</td>
<td>Alex Geis</td>
<td>User</td>
<td>17/03/23 14:00</td>
<td>PASS</td>
<td>Nice design and coll features were added like a map and correct answer notifications</td>
</tr>
<tr>
<td>G</td>
<td>7</td>
<td>Maria Mikulo</td>
<td>User</td>
<td>22/03/23 08:15</td>
<td>FAIL</td>
<td>Glitch which QR scanner. It showed a video like start button on screen</td>
</tr>
<tr>
<td>H</td>
<td>8</td>
<td>Andrei Durov</td>
<td>User</td>
<td>16/03/23 14:30</td>
<td>PASS</td>
<td>All social media links worked perfectly and the share button shared proper content</td>
</tr>
<tr>
<td>I</td>
<td>9</td>
<td>Vladimir Pulenski</td>
<td>User</td>
<td>22/03/23 10:00</td>
<td>PASS</td>
<td>The application correcty worked on different size devices</td>
</tr>
</table>
</div>
<!-- Usability Assessment section -->
<div class="style-div">
<h2 class="style-heading">Usability Assessment</h2>
<!-- Description of Usability Assessment -->
<h4 class="style-subheading">When assessed using Nielsen's Heuristics, our Treasure Hunt web application performed well in the following areas:</h4>
<!-- List of areas where the application performed well -->
<ul class="style-list">
<li>Visibility of system status: Our app provides clear feedback to users about the current status of the game, including their score, progress, and any messages or hints related to the current question.</li>
<li>Match between the system and the real world: The app uses familiar language and concepts that are easily understood by users, such as treasure hunts, questions, and answers.</li>
<li>User control and freedom: Users have the ability to skip questions if they are unable to answer them, and they can also choose to play again or view the leaderboard at the end of the game.</li>
<li>Consistency and standards: Our app follows consistent design patterns and conventions, making it easy for users to navigate and interact with the app.</li>
<li>Error prevention: The app includes input validation and error messages to help users avoid mistakes and to provide guidance on how to correct any errors.</li>
<li>Recognition rather than recall: The app provides hints and reminders to help users remember information and complete tasks more easily.</li>
<li>Flexibility and efficiency of use: Our app is designed to be easy to use for both novice and experienced users, with a simple interface and clear instructions.</li>
<li>Aesthetic and minimalist design: The app features a clean and visually appealing design that focuses on the essential elements of the game, without any unnecessary distractions.</li>
<li>Help and documentation: While our app is designed to be intuitive and easy to use, we could improve the help and documentation available to users.</li>
</ul>
<h4>Overall, our Treasure Hunt web application performed well in meeting the needs and expectations of our target users, as demonstrated by the positive feedback received during user testing. By addressing the areas for improvement identified through Nielsen's Heuristics, we can further enhance the user experience and ensure the continued success of our app.</h4>
<h4>The Treasure Hunt App uses the user's location, QR scanner, and map pathway to enhance the gameplay experience. Here's a brief overview of each feature:</h4>
<ul>
<li>Location: The app uses the user's geolocation to determine their position and provide location-based hints and challenges. This adds an element of exploration and adventure to the game, as users must physically visit specific locations to find clues and solve puzzles. The app uses the HTML5 Geolocation API to access the user's location data, and the Leaflet library to display the user's path on a map.</li>
<li>QR Scanner: The app includes a QR code scanner that allows users to scan QR codes to reveal hidden information or submit answers to questions. This adds an interactive element to the game, as users must search for and scan QR codes to progress through the treasure hunt. The app uses the Instascan library to implement the QR code scanner functionality. </li>
<li>Map Pathway: As users progress through the treasure hunt, their path is displayed on a map using the Leaflet library. This provides a visual representation of the user's journey and allows them to see the locations they have visited during the game. The map also displays markers for each location, with tooltips showing the order in which the locations were visited.</li>
</ul>
<h4>These features work together to create an engaging and immersive gameplay experience, encouraging users to explore their surroundings and solve challenging puzzles to complete the treasure hunt.</h4>
</div>
<!-- Features of the Treasure Hunt App -->
<div class="style-div">
<h2 class="style-heading">Unit Tests</h2>
<!-- Description of Unit Tests -->
<h4 class="style-subheading">The Unit Tests make use of the corresponding Testing API available at <a class="link-font" href="https://codecyprus.org/th/testing" target="_blank">https://codecyprus.org/th/testing</a>.</h4>
<!-- Loader element -->
<div id="loader" class="loader" hidden></div>
<br>
<h4 class="style-heading">Test App Functionality</h4>
<br>
<!-- Link to the Testing page -->
<a href="testing_navigator.html" class="link_buttons"><b>Testing</b></a>
</div>
<!--Load the API JavaScript-->
<!--<script src="th-api.js"></script>-->
<script src="js/th-test-api.js"></script>
</body>
</html>