You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# DigitalBoneBox : A Web-Based Study Tool for Human Anatomy
2
+
2
3
This project is a Web App project aims to convert an existing PowerPoint-based educational tool into an interactive, mobile-friendly web application.
3
4
4
-
## How / why did we get here?
5
+
## How / why did we get here?
5
6
6
-
This project is based on the work of Prof. Brian Elliott, created during his final years of education.
7
-
In the human anatomy class, students must purchase a bone set to study the bones of the human body,
8
-
but they are not allowed to take these models out of the lab. Prof. Elliott observed that this
7
+
This project is based on the work of Prof. Brian Elliott, created during his final years of education.
8
+
In the human anatomy class, students must purchase a bone set to study the bones of the human body,
9
+
but they are not allowed to take these models out of the lab. Prof. Elliott observed that this
9
10
restriction could cause inconvenience for students who want to quickly review the bones before an exam. To address this, he created a PowerPoint presentation that includes images of the bones taken from different angles (with permission from the department), and he annotated these images to highlight the various bones in the set using different colors and filters. He utilized all available features to create an easily accessible presentation that students could use for quick revision or brief study sessions before tests.
10
11
11
-
However, he wanted to make this resource even more accessible. He envisioned offering students a
12
-
platform they could access on their iPads, or laptops—devices commonly used by students. This is
13
-
where the web application comes in. It is designed to be a quick and easy guide for students to use
14
-
for exams, to quiz themselves on essential knowledge, or to learn from material that is simple and
15
-
provides an overview of the human bones. This application is based on the information in the
12
+
However, he wanted to make this resource even more accessible. He envisioned offering students a
13
+
platform they could access on their iPads, or laptops—devices commonly used by students. This is
14
+
where the web application comes in. It is designed to be a quick and easy guide for students to use
15
+
for exams, to quiz themselves on essential knowledge, or to learn from material that is simple and
16
+
provides an overview of the human bones. This application is based on the information in the
16
17
presentations created by Prof. Brian Elliott.
17
18
18
19
## Tech Stack
20
+
19
21
This project was developed using the following technologies:
20
22
21
23
Node.js: Used for server-side development to handle requests and serve the application.
@@ -24,21 +26,23 @@ HTMX: A lightweight JavaScript library for enhancing interactivity by allowing p
24
26
CSS: For styling and layout of the web pages to ensure a clean and responsive design for users across devices.
25
27
26
28
## Features
29
+
27
30
Interactive and accessible web application for students to study human anatomy.
28
31
Quick revision tool with annotated images of bones.
29
32
Designed for use on iPads, laptops, or other devices commonly used by students.
33
+
30
34
-**Toggle Sidebar**:
31
35
- A collapsible sidebar that enhances navigation within the app.
32
36
- Includes **placeholder options** such as **Search**, **Contact**, **Recent**, and **Help**, which are non-functional and reserved for future implementation.
33
37
- Users can open and close the sidebar using the ☰ button on the top-left corner of the page.
0 commit comments