Introduction

The following website is an exercise to practice the development of mobile applications using plain HTML, JavaScript, and CSS. The main capabilities are the use of HTML5 features and a responsive layout.

HTML5 Features

The following HTML5 are explicitly used.

• Geolocation API.
  The Geolocation API prompts the user to either allow or disallow the exposure of the device location. Within the scope of this website, the location is used to provide a local leaderboard. In this leaderboard, the distances to the other users that scored points are shown.
• Sensor API.
  The Sensor API provides an interface to the device sensors (e.g., ambient light sensor or gyroscope). This website uses the accelerator sensor, which reads the position of the device as a quaternion. After extracting the Euler roll and yaw as features, a sliding window with length 3 detects tilts in the directions up, down, left, and right.

Responsive Web Design

The development of the website does not follow the mobile-first approach in the first place. The implementation with HTML, JS, and CSS for the first time was rough enough. However, it has been taken care of the mobile version and small screens.
The following considerations were made:

• On desktop screens, the navigation bar is on the top to be easily accessible. On smaller screens, there is not enough space for the buttons. Therefore, the navigation bar on smaller screens is mapped to the left side. It can be toggled using the general-known three-stripes button on the upper left.
• The leaderboard is a table that shows the rank, username, points, date, and distance to the user in columns. When the screen gets smaller, the columns are more and more wrapped until they are no longer readable. To avoid this, the date is hidden on smaller screens. However, if the orientation of the device switches to landscape, the column is shown again (e.g., applies for smartphones).
• Two radio buttons are used to toggle between the global and local leaderboards. Although the selection is prone to error due to the "fat finger problem", selecting the wrong button has no effect since there are only two possibilities. However, a switch is used on smaller devices to combine the two buttons into one widget.
• By clicking on "Play now", the UI prompts the user to apply settings. The layout is inspired by common forms for personal information (e.g., invoices). On smaller screens, the input fields are wrapped below the corresponding labels.

Technical Insights

The website uses plain HTML, JavaScript, and CSS. It uses normalize.css to reset browser styles, proto.io for the switch, and jQuery for more straightforward queries and AJAX. AJAX is used to communicate with the backend https://api.imitation.paul-hoger.de.

Further Improvements

This website is a MVP to demonstrate HTML5 features and responsive design. It is not complete and has space for improvements.
For instance, the following issues can be tackled:

• Visualize the timer next to the current points.
• Add different difficulties that influence the time per round.
• Store the settings (i.e., username, control, location sharing) in the web storage for a better user experience.
• Store the control type at the end of the game and show it on the leaderboard.
• Handle more errors (e.g., backend not reachable or location request denied).