Fig 2
Fig 1
Ideation
transfering the ideas in my head to sketches on paper went really well
- i did the sketch up of the idea for a proper “Multi-Page” system to help me get a better idea of what sections will link to other section (fig 1)
- i did the sketch up of the idea for the course planner UX/UI to help me get a better idea of what i will need to have in the CSS and what kind of rendering processes i will need to program (fig 2)
Fig 2
Fig 1
photo of the basic local host version
I coded up the basics of the “multi-page” system and got it working great on a locally hosted copy og the site with some very basic CSS. Transferring some basic CSS from the old site (background color, font, lunch button etc) into the locally hosted home page to help get a general idea of what the final homepage could look like relative to my sketch.
I ran into some problems when trying to integrate SVG image files that are open to the public into the application but eventually found my own detailed work around that allowed them to display correctly.
I also ran into some problems with links and sub-urls but was able to fix after finding a thread discussing the common issue within the React library
photo of the basic hosted version
I worked hard on getting the system hosted, it initially didn’t work but after researching online i found out that due to using azure as the hosting system, i had to add both a web configuration file and a “staticwebapp.config.json” file on top of the BrowserRouter system for react. After making those changes the multipage system was properly hosted.
One thing that was really hard was finding and implementing a Drag and drop (DND) system. I eventually decided on DNDKIT due to the fact that it works well with React and has a lot of internal documentation from the organization that made it and external documentation and guides from the larger online community.
screenshot of the raw html
One thing that went really well was getting the raw HTML from the Skipper Log ( a site that contains all course information). I didn't have access to the backend of this website as it is controlled by the school. So I will need to get the Raw html and slowly turn it into a json class through a lot of python scripts that i will need to write .
Another thing I accomplished was getting a basic div sorting system working by following an online guide on how to do so. This allows for the next step of combining it with DND in order to get sortable objects that can be dragged and dropped with properties that I can sort by.
the page made for the sign as discussed
I also noticed that the school's library was displaying the site on one of the many sign TVs throughout the school. and noticed right away that the formatting looked wrong and it didn't display the lunch, after a 30 minute meeting with person running the TV sign system, I found out that it is using Raspberry Pi's running a Yo-Duck system. after the meeting he recommended that I use the new multipage system to create a much more basic subpage of the site specifically for the tv signs. That is exactly what I did over about a week. I'm happy with how it turned out
Image of the current Draggable Div Sort demo
As previously mentioned I started to combine the draggable system with sortable Divs alongside replaced the old JSON with the proper JSON of the courses. that I made from the skipper log I created using the data from the raw html of the skipper log. Still has a lot of bugs within the JSON and with the draggable system system interacting with the sorting system. Over time I believe I should be able to slowly fix all the bugs and get a reliable system
photo of the 3 sections that allow for touch controls
I researched online to find the correct way to add touch control for the drag and drop system. I then implemented it using the code shown here
I Booked the end of year for May 29 as the entire team was able to make it to the meeting. Though due to the date's proximity to the end of the year we were only able to get a 30 minute time slot. Fortunately we were able to cover everything on the meeting outline (in picture shown below).
Results of the meeting and general discussion:
- Discussed general ideas for the course planner and set out clear guidelines to ensure student privacy
- Plans for a mobile app version of the site that can be pushed to all student devices through the school
- Having all new students be instructed to add the app to their home-screen during freshman orientation
- Planned for a meeting during the summer to further discuss progress more towards the end of the school year
Group photo of: Me, Dris, Zeen and Ren
(left to right)
Me pictured in front of one of the school's TV signs now running the student assist tv sign software
screenshot of the full document I had made of what was to be discussed at the meeting
I used a lot of new updates to student assist for my end of year project for IB Computer science HL, it went very well and it was interesting to answer fellow student's questions and listen to their suggestions for further improvements. They also seemed to enjoy the demos I had created for testing the DND and sorting systems. Below is the slide deck I made and used for my presentation.
after reviewing a lot of the old bug reports i found out that the most common issue (which we had fixed) was not having the lunch period saved locally. the fix for this is to click on what lunch they have before they save to home-screen as that we mean they never have to reselect their lunch as it's saved in the url data. To Inform users of this product feature and increase usage overall, we integrated a popup for new users. We were able to this as a local device var displays the number of times the app has been used (displayed in part 1). Then we just apply the html popup when the Var is less than 3 sessions. This feature was coded up by Dris.
Screenshot of current version
After about a month of discussion and development with Ren over the summer, he built up a Frontend mockup of the skipper log based on my initial sketch and proposal. After that I converted it into a react function and then deployed it to the /planner of the site. Since them i have added new color scheme and a scroll bar so the mock courses can be scrolled through.
During the start of year meeting we discussed the start of year launch, work done regarding the course planner, and the possibility of using the Schoology API to safely leverage student data in the near future.
Page two: showing a data diagram for possible token system
Page one: showing of overview of the meeting topics
(same as to end of year meeting)
AI Website Generator
