Screens

Below are the screens (pages) of our application.

Landing Page

This is the first page that is shown to the user when the website is visited. When the user clicks "PLAY NOW", the screen will change to "Consent Page"

Consent Page

This page asks the user for permission (data collection, etc.). When "I AGREE" is clicked, the user will be redirected to the "Instruction Page". If "NO, TAKE ME AWAY", the user will be alerted and will be redirected to back to the "Landing Page".

Instruction Page

This page shows basic instructions for the game. On this page, the user can select whether they are first time playing the game or not. Both buttons will take them to the "Game Page".

Game Page

On this page, the user will complete ONE game. One game consists of twenty rounds. In each round, the user will be given 15 seconds to find a hidden stick insect. In completion, the user will be redirected to the "Results Page".

Results Page

On this page, the user can see how he/she performed in the game. It will show the number of stick insects found in total and the average time taken. The user can supply an email address if he/she would like to be notified of the outcome of the research.

User Flow Diagram

Below describes the user flow of our application.

Game & Rounds

Game

• During one complete cycle (Welcome Page - Results Page) in the user-flow-diagram, the user will play ONE game.

• One game consists of TWENTY rounds.

Round

• In a round, the user will be given 15 seconds to spot the stick insect hidden in the background, if 15 seconds has been reached, that round is failed and the next round is started.

• In each round, a stick insect will be located randomly in the background, both the background image and the stick insect image is randomised.

Frontend - Server Communication

For detailed request/response structure, see REST API Document

Game Data

At the end of a single game, the frontend (React App) will send the game result to the server via HTTP request using REST API format.

Method	Endpoint
POST	/game

Email

If the user decides to supply an email address, the frontend will also need to send the email to the server.

Method	Endpoint
POST	/email