Prototype

Creation

Version 1.1 - Groundwork

To begin working on this project, I started by looking over what Luke had created. I then took his code and placed it in an environment on my computer that allowed me to tweak things locally. This means that a local URL named "localhost" was where I could see what the website looked like and VSCode was where I could code the website. Not only did this allow me to learn and understand PHP at a much faster rate, but I also was able to understand the way that each page of the website was working.

For this first iteration of building my website, my main goal was to get the core functionality of my website running. This included pulling my classes from separate Google Sheets as well as pushing them into the correct JSON files of my actual website. In the screenshot to the left, you can see how I was printing the information that was being pushed into the JSON file on the screen. This would allow me to easily understand if elements in the Google sheet were correctly being passed to the JSON files. For this iteration of the project, I was also running the code that pulled the classes from the Google Sheet in index.php. This meant that any time I opened the website, it would re-pull all of the classes.

On the second page of the website, nothing was changing yet. I was mostly just trying to lay the groundwork for what was to come. In this case, the only thing that I still had printing was some leftover pieces of Luke's original code.

Version 1.2 - Making it Work

Here, my next goal was to get the percentage of each pathway to display accurately. For that to work correctly, I needed to obtain the number of classes that were completed in both the foundation classes and supporting classes category. That way I can calculate the total percentage for each category and then the total percentage of the pathway. In the picture to the left, it can be seen where I was printing out the "creditType" key for each class in a pathway. This was so that I could verify that the program was obtaining the correct values from the Google Sheet.

Here is what the search bar for this iteration of the project looks like. It can be understood from this screenshot that the "All Classes" sheet is the file that populates the search bar, while the supplementary sheets are the ones giving the classes required for each pathway. These classes that are placed below the search bar are then transferred to the next page of the site. For this iteration, it is still set up that all of the classes are being pulled from each Google Sheet as soon as someone opens the site.

Here, to the left, is a screenshot of the second page of the site during this iteration. It can be seen here that a percentage is now set up to be calculated based on what classes are selected. These percentages are calculated by counting the number of total class credits of the selected classes, sorting them into foundation or supporting variables, and then dividing them by the total number of required foundation and supporting classes combined. There is, however, no contingency set up at this point if a pathway goes over 100%. Also, at this point, the site only works with one pathway, but others can easily be created after creating this first one.

Version 1.3 - Touching Up

For the third iteration of this website, I planned to touch everything up and make it look pretty. I first created a new logo for the branding of the website and I entered it above the search bar, where the old logo used to be. Next, I finished adding all of the additional pathways in all 4 of the academies, as well as adding their Google Sheets to the main Google Sheet. Furthermore, I added the Foundation classes percentage as well as the Supporting classes percentage as well as corrected the previous overdraw on the 100% completion, so the user has a better understanding of where they are in terms of pathway completion. Finally, I created a WIKI page at the bottom of the main home page so that a user has someplace to go if they need help.

Version 1.4 - Ease of Use

For this final iteration of my project, I added a couple more things to make my website easier to navigate. First, I updated the search bar to be able to find any class in the list of available classes based on the word that you are typing, as opposed to looking at the first character that you type. I also added a "hot-icon" on the second page of the website that allows you to go back to the home page, as opposed to clicking the tiny arrow on the chrome tab. Finally, I added a "recommended classes" drop down tab in the each pathway. This allows the user to understand which classes to register for if they are looking to complete a certain pathway.

Version 1.5 - Post Pilot Testing Adaptations

After completing the first pilot tests of my project, a couple of necessary changes became apparent. The main things that I was trying to fix were clearer directions, as well as allowing people to remove already entered classes. In this new final iteration of my prototype, I have done just that. From the pictures shown above, it can be seen that next to each class that you enter there is a "remove" button. Clicking this button will remove that specific class from the list of selected classes, and should prevent people from having to completely restart entering their classes if they make a mistake. In addition to removing specific classes, it can also be seen in the surrounding pictures that I highlighted the directions just above the search bar so that hopefully people will read them, as opposed to just skipping over them and continuing to enter classes. Overall, both of these improvements should allow people to save time while completing the website method, and help me reach my goal of 50% of the total time to complete the website method when compared to the original document method.

Mentor / Important Meetings

In Person Meeting with Mrs.Tiwari (Friday, August, 25th)
- Obtained quotes for background research paper
- Discussed why academies were originally created (GMHS is an academy school)
  - Need for something in between IB and GT programs at other schools

Virtual Meeting with Luke (Saturday, August, 26th)
- Discussed the code of the website and the logic behind how it works
- Obtained quotes for background research paper
- Discussed possible ways to go about efficiently building it
  - Infinity free
  - Coding locally on computer
  - Pushing to GitHub and infinity free when big progress is made

Virtual Meeting with Zach (Sunday, August, 27th)
- Discussed in more detail the process of Lukes code
- Obtained quotes for background research paper
- Explained timeline and goals of my project
- Explained in detail some of the necessary parts to my project
  - Type of computer I will need
  - What I should complete in addition to the code of the project
    - Documentation

In-Person Meeting with Zach (Saturday, September, 2nd)
- Got setup with laptop
  - Code locally on machine
  - Ability to push saved code to github
  - Extensions were installed in VSCode to help me better understand what’s going on
- Discussed how local websites actually work
  - Using apache to run locally on machine
  - Using Vim to assign a file for apache to pull from

Virtual Meeting with Luke (Sometime in September)
- Discussed website deployment options
  - Cloudflare pages
  - His current iteration of the website runs through cloudflare

Virtual Meeting with Zach (Monday, October, 16th)
- Discussed website deployment
  - Used fly.io
  - Current website is deployed on gmhspathwayprecheck.fly.dev
- Discussed options on how to improve website
- I learned about a better way to pull classes from google sheets
  - Place the code in a separate php file so it’s not running every time someone opens the website

In Person Meeting with Mrs.Ketchum (Friday, November, 3rd)
- Discussed percentage of people who complete pathway pre-check at GMHS
  - 40% or less of freshmen, sophomores, and juniors complete the google sheet in the first place
- Explained where I am in the process of building my website

In Person Meetup with Zach (Sunday, November, 5th)
- Setup website to update classes in JSON files on a time schedule
  - Updates every sunday at 1am
- Implemented GitHub automation to allow the website to automatically deploy every time a commit is made to the fork of the program.
- Fixed search bar to populate results base on a key word, not base on the first keyword that is typed
- Discussed options on how to create a drop-down (collapsable list) in html
  - To provide “recommended classes” idea

In Person Meetup with Mrs.Tiwari (Wednesday, Novemver, 29th)
- Data was collected using Google Form, and screenshots were also collected of people’s results, after completing website.
- Main Complaints people had with the website were:
  - No easy way to adjust list if accidental class is selected, or if you need to go back and add a class
  - No IDS pathway is listed, if time permits, add it
  - Fix Arts and Humanities pathways, should only be three, not four
  - Adjust text above each pathway and add borders around pathway images for better clarity and understanding
- Create a mini video to explain how to fill out my website, by the end of winter break.
- Meeting with Tiwari next week for new teachers to introduce academies and show off website.

In Person Meetup with Mrs.Gese (Tuesday, December, 13th)
- Discussed plan for my staff meeting on Thursday
- Discussed ideas on how to incentivise teachers to participate in test

In Person Staff Meeting with the entire GMHS Staff (Thursday, December, 15th)
- Proposed my entire idea and website to the staff
- Discussed plan for my big test #2 that I plan to complete with the staff

Virtual Meeting with Zach Flower (Thursday, December, 21st)
- Discussed website to make sure that it will work on a scale of 1000+ people
- Added the ability to remove classes from the selected list of classes

In-person meeting Luke Pisano (Friday, January 5th)
- Discussed options for fixing "history.back()" function not working
- Created a way to save classes locally on devices automatically

Virtual meeting with Luke Pisano (Saturday, January 6th)
- Finished creating a way to save classes locally through "local-storage" function in JavaScript

Tools Used

Apache2

This was the software I used to code my website locally on my computer before pushing it to a public website.

fly.io

This was the web server that I used to host my website. Using their "hobby" plan, I was able to push the website and have it run for free.

Visual Studio Code

This was the code editor that I used to actually write the HTML and PHP files for my website. VSCode also ties in really nicely with Github and Apache2, which overall makes for a very efficient building process.

Github

This is where all of my code is currently backed up. In addition to backing up my code, Github allows me to automatically push and changes that I commit to the live website, which means any time I backup my code, the most recent version of the website is pushed to fly.io.

Page updated

Google Sites

Report abuse