https://github.com/starksinclair/cs200_final_project
CS200 - Final Project
https://github.com/starksinclair/cs200_final_project
css html javascript twine
Last synced: about 1 month ago
JSON representation
CS200 - Final Project
- Host: GitHub
- URL: https://github.com/starksinclair/cs200_final_project
- Owner: starksinclair
- Created: 2024-12-09T01:28:03.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T03:20:05.000Z (10 months ago)
- Last Synced: 2025-08-01T13:42:29.772Z (2 months ago)
- Topics: css, html, javascript, twine
- Language: HTML
- Homepage: https://starksinclair.github.io/cs200_final_project/
- Size: 19.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Digital Privacy Museum
## Overview
Digital Privacy Explorer is an interactive web-based project designed to educate users about the concept of digital fingerprints. The project introduces users to the concept of a "digital fingerprint," how it is created, how it is used for tracking, privacy laws and which data is being collected during account creation.
This project was built using Twine with the Snowman story format, integrating JavaScript, FingerprintJS for generating digital fingerprints, and custom CSS for styling.
---
## Features
### Interactive Simulations
- **Account Creation Simulation**
- Hands-on experience with privacy choices during account setup
- Learn about data sharing implications
- Understand optional vs. necessary information sharing
- **Digital Fingerprint Simulation**
- Generate and analyze your unique digital fingerprint
- Visualize how browsers and devices create identifying patterns
- Interactive demonstration of tracking mechanisms
- **Privacy Laws Simulation**
- Explore real-world privacy regulations (GDPR, CCPA)
- Learn about user rights and company obligations
- Practice scenarios involving data breach responses
### User Experience
- **Intuitive Interface**
- Clean, modern design
- Easy navigation between modules
- Mobile-responsive layout
---
## Technologies & Resources
### Technologies Used
- **Twine:** Snowman story format for building interactive storytelling.
- **JavaScript:** For handling logic and fingerprint generation.
- **CSS:** Custom styles for an engaging UI/UX.
- **FingerprintJS:** Library for generating digital fingerprints.
### Resources
- [FingerprintJS Documentation](https://fingerprint.com)
- FontAwesome for icons: [https://fontawesome.com](https://fontawesome.com)
- Javascript History API [https://developer.mozilla.org/en-US/docs/Web/API/History_API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
- Assistance with Twine navigation logic and CSS: AI-based guidance.
- Twine Cookbook [https://twinery.org/cookbook/](https://twinery.org/cookbook/)
- Imgbb for free image hosting [https://imgbb.com/](https://imgbb.com/)
- Wikimedia for free licensed images [https://upload.wikimedia.org/wikipedia/commons/9/98/Labyrinth-W%C3%BCrfel_in_Blender-Cycles.png](https://upload.wikimedia.org/wikipedia/commons/9/98/Labyrinth-W%C3%BCrfel_in_Blender-Cycles.png)
- Freesound [https://freesound.org/people/josefpres/sounds/771869/](https://freesound.org/people/josefpres/sounds/771869/)
- Chrome Docs [https://developer.chrome.com/blog/autoplay/](https://developer.chrome.com/blog/autoplay/)
- Dr Andrew Harris CS200 class
---
## Challenges
1. **Story Format Transition:**
- Originally created in the Harlowe format but transitioned to Snowman for greater JavaScript flexibility.
- Required implementing custom navigation.
2. **Dynamic Back Navigation:**
- Snowman lacks built-in navigation controls, so had to default to javascript `history.back()` founction which is the browser default navigation for going back or forward.
3. **Fingerprint Generation:**
- Integrating FingerprintJS and managing API calls within Twine's environment.
4. **Audio Autoplay Implementation:**
- Modern browsers block automatic audio playback due to user experience policies. so I had to implement a custom play/pause button to comply with browser security features.
---
## Pseudocode
### Generate Digital Fingerprint
```plaintext
Define a function `generateFingerprint`
Get the display element for the fingerprint (`fingerprintDisplay`)
Clear the previous fingerprint result
Import FingerprintJS library
Load the FingerprintJS object
Generate the fingerprint
Extract the `visitorId` and confidence score from the result
Display the fingerprint and confidence score in the `fingerprintDisplay`
Handle errors
Display an error message if fingerprint generation fails
End function
```
---
## How to Run
1. Click on the link [https://starksinclair.github.io/cs200_final_project/](https://starksinclair.github.io/cs200_final_project/) to see the project
---
## Attributions
- **FingerprintJS**: For providing the digital fingerprint generation logic.
- **AI Assistance**: Leveraged for guidance on Twine navigation and css designs.
- **FontAwesome**: For icons enhancing the user interface.
- **CSS Design Inspiration**: Utilized guides and tutorials for styling the project.
- **Imgbb**: For free image hosting
---
## Future Improvements
- Add more scenarios for users to explore various aspects of digital privacy.
- Implement user progress tracking within the simulation.
- Expand educational content with quizzes or interactive Q&A.
---