This is the manual to help with first time users to our web applications. For instructions on setting up our development environment please check out the external code repository.
The user will need to create an account for the web application, using a email, username, and password.
This email and password will then be used to login in to the application through the sign in page.
Once logged into the application, you will be directed to the home page. From there you will see a navbar to the left with the following options: Home, Tasks, Add Task, Social, and Profile. This navbar will be the users tool for conviently switching from page-to-page at ease. Below is a screenshot of the homepage and the navbar with labels.
Desktop Mobile
The homepage allows the user to see their current tasks, which is sorted primarily by urgency (the difference between the current date and the due date) and secondarily by priority (a self assigned priority level: low, medium, or high). In the top left corner of the page, the users badge and score are displayed. At the right side, the users streak is displayed. This streak represents how many tasks in a row the user has completed ON TIME. At the far right side is the user and villains health bars. The users health bar represents their current weekly progress (the number of tasks completed out of the number of tasks due by sunday). The villains health represents the opposite (1 - the current weekly progress), the villain can be thought of as the numeric value to your procrastination!
When a user clicks on the complete task button (the check mark on the right side of each task) a few things can happen. The first thing is that the users score can either increase or decrease depending on the time they completed the task. To determine this increase or decrease, we get the quotient of the current date minus the task creation date and the due date minus the task creation date. Lets call this "p". "p" is then used to determine the multiplier for the added score, if p id greater than 1000, the multiplier is one plus the first digit of the quotient of tasks priority level (low is 1, medium is 2, high is 3) and p. If less than 1000 and greather than 0, the multiplier is just 1. If greater than -1000 and less than 0 the multiplier is -1. If less than -1000 the multiplier is the first digit of the quotient of tasks priority level (low is 1, medium is 2, high is 3) and p, minus 1. As you can see below, the user gained +12 points.
The user also gains back some of their progress, which depends on whether or not the task is due before the upcoming Sunday. If so, users weekly progress is increased by one, meaning the health increases by 1 over total number of tasks due by Sunday. The villains decreases by this much. If the user is able to get all the tasks done by Sunday and the villains health is at 0%, then they defeat the villain and it is unlocked as an achievement (similar to the one on the screen) and placed in their achievements table (on the profile page). The user then has to go against a new weekly villain, however, if they dont defeat the villain they have to compete the same villain for another week (or until they defeat them!).
When a task is completed on time, the completion streak is incremented. However, if the user does not complete a task on time the streak will go back to 0. The user will also gain achievements along the way, such as the one below titled "First Blood" for completing their first task. These achievements will be stored on their profile page. The users badge will also change as they complete more tasks, in fact, every 50 tasks they will be upgraded to a new badge that indicates their experience level.
After this is done, the tasks update. Showing the newly sorted lists of tasks.
Below is a representation of an advanced user. They have a large completion streak, a level four badge, obtained a high score, and are competing against the second villain. As you can see, the icon on the completion streak has changed. This is because it changes every ten streaks to indicate a hotter flame (red is hotter than orange, blue is hotter than red, green is hotter than blue).
The next option on the navbar is the Task Page. This page allows the user to add, edit, mark-off, and delete tasks. Using the form below, users enter the tasks title, a description, the date, and the priority level (low, medium or high). After this is entered, the user will add the task using the large plus sign button.
When tasks are added, they appear in the tasks list below. Here the items are sorted by closest due date (by default) but the user can also filter the items based on the priority as well. Each task has their own color border representing the priority level. Green is low priority, Yellow is medium priority, and Red is high priority.
When the user is finished with a task, they can mark the task as complete by clicking the check mark and then confirming their decision in the popup shown below.
If a user decides they want to edit their task in any way, they can select the edit button below and edit the desired feild belonging to the task. Once they submit their changes they will be present.
If the user decides they want to delete a task without affecting their score, they can delete the task through the trash can button depicted below and confirm their decision through the pop-up.
The add task component is accessible from any page and it is located in the middle of the navbar. Similar to the option to add a task on the task page, it allows the user to enter a title, description, due date, and priority level. Once they select the green plus sign button, their task will be added.
The social page allows you to connect with other users that use task hero. Encouraging motivation and competition through global and local leaderboards, visable scores and badges, as well as comparing achievements earned by others and yourself.
Below is the display of the following page, which shows all the users that you are currently following and sorts them based on their total score. This would be considered the local leaderboard.
Below is the display of the global page, which shows all the users that are on task hero and sorts them based on their total score. This would be considered the global leaderboard.
Below is the search tool, which allows the user to search for another user by their username. Allowing you to instantly connnect with friends.
When you click on a username displayed in either the global, local, or search page you will be redirected to that users profile. This is where you have the option to follow/unfollow a user, see their score and badge, view their achievements and their account stats.
The last option in the navbar is the user profile. This page displays all of your achievements/villains, your current score, and the number of people following you (if you click on the number is displays the users as a list). It also offers you the ability to change your username and password through the edit profile button or sign out of your account all together.
If you press the edit avatar button on the right hand side of the profile picture, you will be redirected to the page below where you are given the option to change your avatar. Some of the avatars are only available to users with a certain number of points to their name, otherwise they will be locked until your score has surppased that amount. Encouraging you to do better and get tasks done on time!
-
How do I create an account for the web application?
- To create an account, navigate to the sign-up page and provide your email, username, and password.
-
Why can't I login?
- Make sure your email and password are correct, and ensure that you already have an account. If you are new to Task Hero, click "Sign Up" instead to create a new account!
-
How do I navigate through the web application?
- After logging in, you'll be directed to the home page. Use the navbar to switch between pages such as Home, Tasks, Add Task, Social, and Profile.
-
What options are available on the navbar?
- The navbar options include Home, Tasks, Add Task, Social, and Profile. These options provide convenient navigation throughout the application.
-
What information is displayed on the home page?
- The home page displays your current tasks sorted first by urgency (due date) and second by priority. Additionally, you'll see your badge, score, streak, and progress bars.
-
How does completing tasks affect my score and progress?
- Completing tasks on time increases your score and progress, and decreases the progress of the villain. If you complete tasks after the due date, you score and progress will decrease!
-
Why did the villain's progress bar increase?
- When you add tasks, the villains progress bar increases. Complete tasks ON TIME in order to deplete the villain's progress bar.
-
How do I manage tasks on the Task Page?
- You can add, edit, mark-off, and delete tasks on the Task Page. Tasks are displayed with their titles, descriptions, due dates, and priority levels.
-
Can I customize the display of tasks?
- Yes, you can sort tasks by due date or priority using the filter dropdown at the top of the task list. Tasks are also color-coded based on priority for easier identification.
-
How is this component different from the Tasks Page and how do I use it?
- Use the Add Task component accessible from any page. The idea is to be able to "quick-add" tasks from anywhere at any time. Enter the task details such as title, description, due date, and priority level, then click the add button.
-
Are there any restrictions on adding tasks?
- No, you can add tasks freely. However, consider setting realistic due dates and priorities for effective task management.
-
What features are available on the Social Page?
- The Social Page allows you to connect with other users, view leaderboards, compare achievements, and search for specific users.
-
How do I interact with other users on the Social Page?
- You can follow/unfollow users, view their scores, achievements, and profiles. Use the search tool to find and connect with friends.
-
What information is displayed on the User Profile page?
- Your profile displays achievements, score, followers, and options to edit your profile, change your avatar, or sign out.
-
How can I customize my profile?
- You can change your username, password, and avatar from the User Profile page. Some avatars may be locked until you reach a certain score threshold.