final-project-submission-webworm

.env

@@ -0,0 +1,5 @@
+ # Scrubbed by Glitch 2022-10-06T16:17:53+0000
+
+USER=sastrano
+PASS=kjalfiepass
+HOST=alfiesitecluster.6v353sx.mongodb.net/test

README.md

@@ -1,49 +1,63 @@
-# Final Project
-*Due before the start of class, October 13th (final day of the term)*
+# Final Project: WEBWORM: A web safety teaching tool!
 
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
+Owen Pfannenstiehl Natalie McClain, Charlie Snow, Sophia Strano
 
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
+## Webworm Teaches You Web Safety!
 
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
+https://webworm.glitch.me/
 
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
+https://youtu.be/jViNrUPsGEo
 
-### Deliverables
+Webworm is an important tool to help people understand how to be safe on the internet. This website walks you through informative graphics, texts, and a brief quiz
+to help ensure that people do not fall for scams or get viruses.
+We hope to attract users hoping to learn more about web safety to help reduce our overall vulnerability to cyber attacks and increase our technical literacy.
 
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
+Users are encouraged to navigate through our static informative content on the resources tab of the webworm site before proceeding to their quiz on web safety.
+The user can log in and store view their scores on the quiz so far. They can choose to utilize their skills in the user-safe "bad website" section.
 
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
+## Navigating our application
 
-#### Proposal (due 9/27) 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
+Please create a new account for webworm by visiting this link: https://webworm.glitch.me/create-user before logging in.
 
-There are no other scheduled checkpoints for your project. 
+You should be redirected to this page if you are not logged in.
+If you are unable to proceed after creating an account it likely means your username and password are already taken,
+and that you will need to select a different username and password. Kindly navigate between our introduction, resource,
+and quiz tabs to explore all features of our application. After taking the quiz, you can visit the large link on the bottom of the page to examine your previous quiz results.
 
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
+## Technologies and Design
 
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
+Our website displays dynamic behavior by:
 
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
+Using the server, after logging in, users can view their old quiz results.
 
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
+Server-side programming using Node.js. Typically this will take the form of some sort of persistent data
+(database), authentication, and possibly server-side computation.
 
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
+Technologies we used include Node.js, mongoDB, cookies-session, express middleware (including handlebars and session), and bootstrap.
 
-## FAQs
+## Challenges and Achievements
+
+One challenge we faced while completing our application was ensuring accessibility through our color scheme, as some adjustments to the level of contrast had to be made for this to reflect in our lighthouse scores.
+Another challenge we faced was incosistencies with Glitch and other services on multiple machines.
+
+We achieved lighthouse scores of 100 for all tests on desktop and above 90 on mobile.
+
+We also featured music on our website, and used sound effects to enhance the quiz taking experience.
+
+We utilized the CRAP principles by:
+
+Contrast - for color scheme to be readable, as well as the selected tab being a contrasting color to the unselected tabs.
+
+Repetition - same format for each question of quiz and format of tabs
+
+Alignment - In the resources tab, we have two columns, one of links to other resources and one with an example on the page.
+
+Proximity - tabs have the same level of information and are all next to each other to indicate that.
+
+## Contributions and Final Comments
+
+Sophie focused on the persistent data aspects of our application, mainly the create-user, login, and score display functionality, as well as the routing and login enforcement. 
+Natalie focused on the examples on the resources page, some of the quiz questions, and details of the design (including the favicon).
+Charlie focused on the format of the website with bootstrap. He added the tab strip, columns, and footer, and the backend of the quiz. He also wrote some of the email spiel on the resources page.
+Owen focused on making the website engaging, both visually and in terms of the content of the resources and quiz. Owen also added in all of the audio elements.
 
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.