---
tags: mstu5003, project, webapp, html, css, creativity, college counseling
---

# MSTU 5003: Final Project ~ Web Application
**Authors:** Paul Chioariu, Melissa Sweetwood, Alex Lester, & Courtney Cabot

**See project: https://codepen.io/pnc2118/pen/xxMovQB?editors=1010**

## Project Explanation

This project is a workable and interactive database that helps students get the major-specific admissions data they need when applying to The University of California Santa Cruz and The University of California Merced for undergraduate study.

## Problem
When working with high school students applying to the state school systems for undergraduate study in California, it is challenging to convey the rates of admission for the various major programs that they are considering applying to. There is a *significant* difference between a university's overall admission rate for the entire school and the rate of admission on a program-by-program basis to compare it to. An overall university rate of 54% tells a very different story than a 9% admission rate for the mechanical engineering program.

Experienced college counselors recognize the limited amount of time they have with a student for career and major exploration. The University of California's 9 campuses each house their own schools and colleges ~ each with their own departments, programs and rates of admission. This tool seeks to create an interactive user experience designed to easily guide students to explore and compare the different rates of admission for major programs to give them the data they need to make informed decisions.

## Research

"Objects" (computationally speaking) were considered to be "schools" that have their own properties, attributes, and values that include the name of the colleges and the separate programs they house. The number of applicants into the program, the number of students that earned admission, the % rate of admission and even the average GPA of admitted students.

To keep the arrays organzied and lean, we decided to narrow down the data we used to present to students. Surprisingly, there are not many resources available for students to locate this specific data from the public data these schools provide on their websites. We did like the clean look of the CSU system that simplay overlayes an outline of the state and drops pins for each campus as seen here:

<img src="https://assets.codepen.io/10914862/Untitled+2hackuc56.jpg" alt="" />

Here is the link to the CSU site:

[https://www.calstate.edu/attend/campuses](https://)

The University of California "UC" had something similiar with a clean UI/UX that had more of a "dark-mode" tone with deep blues and golds.

<img src="https://assets.codepen.io/10914862/UntitledUChackmad.jpg" alt="" />

## Aim
As we began our analysis, we first were clear with identifying the specific data we were going to collect and how we were going to present them as **objects** with **properties** and **values** in our arrays.

{ area: "Business & Economics", major: "Economics", acceptanceRate: "2%" },

The **object** is the School of Economics with a **property** of an economics major that has a **value** of 2%.

## Sketch/Plan
Courtney: One of our first group meetings was to discuss the page layout. Fortunately, Paul provided us with a variety of visuals to look at such as different maps of California, different ways to present data, and color schemes. We thought it would be fun to add each school's official colors to the modals. We kept the map of California relatively simple so as not take away from the other features on the page.

We started by looking for and identifying the right image of the state of California to use as our `<img>` element for our page. We wanted something clean and large enough that we could comfortably drop pins (with modals) for each of the nine (9) campuses of the University of California. We landed on this to start out...


As for the data, Paul was inspired to create this tool when receiving some precious admissions data from a colleague that had admission rates for each and every undergraduate program for FTF (First Time Freshman) for 2016 at California State University, San Luis Obispo. (Cal Poly FTF 2016)

| Engineering| # of Applicants | Admission Rate % |
| -------- | -------- | -------- |
| Aerospace Engineering | 1,193 | 16.8% |
Electrical Engineering | 997 | 38.5% |

Now, having this data is also critical when helping students compare the overall rate of admission for the entire university versus the rate of admission for their selected program.

So for Cal Poly San Luis Obispo, the overall rate of admission for the entire university hovers around 24.3% versus an admit rate 16.8% for aerospace engineering.

| Overall | Applicants | Selected |
| -------- | -------- | -------- |
| All | 42,309 | 24.3% |

## Solution

Alex: Our initial goal was to develop a functional database that visually presents students with school information in an engaging way. Although we started with a well-defined concept, a critical observation from Helen during a class meeting highlighted a significant issue. Our original design heavily relied on an extensive, hand-coded database, but this approach didn't align with the project's objective, which was to showcase the diverse range of skills we've honed throughout the semester. Consequently, we had to shift our strategy.

We decided to focus on two buttons/modals: one we had already developed that effectively displayed a substantial portion of our hand-coded data in a clear and organized format, and another we created to demonstrate a contrast in our techniques, showcasing our ability to replicate similar functionalities using HTML/CSS alone. The initial modal, though conceptually similar, was created using different methods, illustrating our proficiency in diverse web development techniques. We also decided to replicate and enhance what the actual Alma Mater website looks like, as it is the space where we plan to launch this project.Doing this allowed us to mock up a working prototype where we can help students access the data that can make the college admissions proccess smoother while showcasing our skillset in a wide variety of manners.

## Bootstrap & Modals

We found the preloaded design elements that the Bootstrap coding suite affords designers, in addition to the responsive-friendly design, that their container system is built on would work best for our purposes. For the modals, we want them to appear when a student points and clicks on the UC school that they want to find out more information on.

For use with students, it can be very helpful to draw their attention to when comparing rates of admission to the university *overall* to the percentage of admission for specific academic programs. In particular, the most popular programs that are impacted and have rates of admission far lower than the overall rate of admission for the university.

We had difficulty getting the modals to line up on the on the exact location of the campus on our map as seen below...


## Specifications

**HTML**

Courtney: The code is an example of the tables I was working on. I was excited to learn that I could put a table in the drown-down option and that I could add a link that would take the user to the program's website:

<tr>
<th scope="row"><a href="https://www.ucmerced.edu/majors-and-minors/applied-mathematical-sciences-bs" target="_blank">Applied Mathematical Sciences</a></th>
<td>20,758</td>
<td>5%</td>
</tr>
<tr>

**CSS**
Courtney: for styling, I wanted the content in the modal to look organized and to represent each school's colors. I researched the official colors for UC Merced and then used those throughout the modal:

.modal-title {
background-color: #0f2d52 !important;
color: #daa900 !important;
padding: 50px;
font-size: 20px;
}

## JS
## Looping the data

Our basic modal function structure was written to take the key data points we identified and placed into our arrays, and present them inside of the modals for a friendly UI/UX when the specific school is "clicked" on our map.

From there, we enable the student to drill down on the specific undergraduate degree programs offered at each college within the larger university. This can help them better appreciate the level of selectivity for each program while simlultaneously introducing them to other programs they may not have considered or known about.

In the UC Santa Cruz modal, we had our data living in the JS as planned initially. As an alternative, we designed the second modal entirely in HTML which is where the data lived instead of the JS. Before we implement modals accross the entire map for all of the UC's 9 campuses, we wanted to create these two prototypes to evaluate their practicality when using for the rest of the schools.

function showAreas() {
  // Get selected option
  const option = select.options[select.selectedIndex];

  // Filter majors by area
  const areaMajors = majorAreas.filter((m) => m.area === option.value);

  // Clear current list
  list.innerHTML = "";

  // Loop through majors
  areaMajors.forEach((major) => {
    // Create li
    const li = document.createElement("li");
    // Set text
    li.textContent = `${major.major}: ${major.acceptanceRate}`;
    li.style.fontWeight = "bold";

    // Append to list
    list.appendChild(li);
  });
}

## Interactivity & Data Collection

We will take the collected emails from the subscribe form we added below the map and directly connect them with the API from Mailchimp that houses all of Alma Mater's data for contact lists. Due to the highly sensitive nature of this data, great care will be taken when adding this functionality to the website.

<p><img src="https://i0.wp.com/www.almamater.net/wp-content/uploads/2023/04/cropped-Alma_Mater_Web_3.5.png?fit=300%2C86&amp;ssl=1" alt="Logo"><br>Join our Newsletter "The College Mechanic"</p>
<form id="newsletterForm">
<div class="row g-3 align-items-center">
<div class="col-auto">
<input type="email" id="inputEmail" class="form-control" aria-describedby="emailHelpInline" placeholder="[e-mail]" required>
</div>

## Accessibility & SEO

#### **Accessibility:**
###
Alex: First, I went section by section in the HTML, ensuring everything was clearly labeled. I was doing this throughout our design process to ensure we could keep track of things as the code grew. I then created an accessible header for the webpage so that screen readers would know what page they were on.

I ended up reflecting and changing certain code the group created. For example, I reworked the stylization of our featured video. The original code was simply:

<div class="video-container">
    <video autoplay muted loop>
        <source src="https://www.almamater.net/wp-content/uploads/2023/12/08238f5f-5892-409b-8e76-12263eb9bbee.mp4" type="video/mp4">
    </video>
</div>

To make it accessible I changed it to:

<div class="video-container">
    <video autoplay muted loop controls playsinline aria-describedby="videoDescription">
        <source src="https://www.almamater.net/wp-content/uploads/2023/12/08238f5f-5892-409b-8e76-12263eb9bbee.mp4" type="video/mp4">
        <!-- A track for captions is not available as there is no audio. -->
        <track src="path/to/captions.vtt" kind="captions" srclang="en" label="English">
    </video>
    <div id="videoDescription" style="display:none;">
        Video showing different college campuses, with text that says, 'We're all susceptible... to the incredible.' There is also a banner that reads 'University of California Alma Mater Educational Services.'
    </div>
</div>

Although the code should be set to disable auto-play due to standard accessibility practice, I decided to still have it play as it holds no audio and, therefore should not be a true distraction. That said, I made the controls viewable to stay in line with accessibility standards.

### **SEO:**
Alex: I went ahead and added the following code of Open Graph tags to help define how our content appears when shared on Facebook.

<meta property="og:type" content="website">
<meta property="og:url" content="https://www.almamater.net/">
<meta property="og:title" content="Alma Mater Educational Services">
<meta property="og:description" content="Expert educational services for students of all ages. Join us for tutoring, skill development, and more.">
<meta property="og:image" content="https://assets.codepen.io/10914862/Alma_Mater_Web_3.5.png">

This small move in search engine optimization will improve the visibility and presentation anytime it is shared on social media; ultimately making it more accessible.

## Discussion/Reflection

Paul: There is so much nesting and wrapping as the code becomes more sophiticated and interoperability with the arrays of data we are manipulating. It is as exciting as it is supremely frustrating at times. Even with the scaffolding of ChatGPT and Claude, I am still navigating my own understanding of the semantics of these new languages.

Courtney: Overall, I enjoyed working on this challenging project. At first I was intimidated because my coding skills are not as advanced as the members of my team. However, I was able to work on tasks that fit my current skill level and as I got more comfortable, I was able to contribute more. One of the highlights of this project for me, was to become proficient with making tables using HTML and CSS. I also learned how to combine items such as putting a table in the heading of a modal or putting a vertical drop-down accordion in a modal. Although coding was a big portion of this project, there were other important tasks that I was able to complete for the team. For example, to make things easier for my teammates, I compiled different types of data into Google docs so the team could find everything in one place. My experience was so positive due to the members of my group and I feel very fortunate to have had an opportunity to work with this same group of people on a few projects this semester.

Melissa: The hardest part for me was setting up the pins where the modals pop up. First, we created divs for each location. We tried using the class=“circle” but were unsuccessful with this. Then, we tried creating circles by manipulating the CSS properties of the divs we created (e.g., border-radius: 50%;). We inputted x and y coordinates that we found, but the circles were not matching up with where they needed to be. We ended up having to manipulate left and top in CSS with trial and error in order to correctly place our buttons. We also tried using the icon for a location pin. We found that the best way to achieve our goal of being able to select each location was to create modals (buttons) on top of each location label, position and size it properly and then make the whole thing transparent. We had to use !important to override some other properties in order to get them to be transparent.

Another issue we encountered was the responsive nature of our buttons/modals. When I placed the modal buttons correctly over their location labels on my computer, they were showing up in different places on my partners' screens due to our different window sizes. We thought position: absolute; would rectify this, but unfortunately it did not. We tried to research how to lock the modal and map background image together to recitfy this but could not do it successfully.

Alex: The significant time requirement was the most demanding yet rewarding element. Since Thanksgiving break, our team has been immersed in frequent Zoom meetings, meeting almost every other day. A major hurdle was our differing initial ideas, which changed repeatedly in recent weeks. We kept going back and forth with the expanding and shrinking of the project based on such amazing conversations and ideas because this will likely end up being reworked and implemented for Alma Mater; we wanted to do more but had to accept that for the assignment, we had to narrow the scope of the project. This led to what felt like countless revisions to our initial plan. However, the experience has been immensely beneficial for a few key reasons. Entering my final semester as an online student, I've struggled over the past two years to forge meaningful connections at Teacher's College, largely due to the lack of physical proximity, making interactions seem transient. This project, however, has significantly bridged this gap; our group has formed deep, genuine friendships and we enjoyed our collaborative time, which made the extensive hours worthwhile. We have coined ourselves the "Core Four." Technically/Skill-wise, I can say the project's dynamic nature demanded constant adaptation and enhancement of our skills in Java, CSS, HTML, and Bootstrap, greatly aiding my development as a coder. For example, I discovered a knack and enjoyment for debugging, especially in HTML and CSS. The hardest part I had was trying to mimic Paul's website. I did this with the header and footer. Paul's website was built in WordPress, and even with using inspector there was no easy way to figure out how to code the header and footer. It's also a pre-built feature in WordPress where you can not see the code, so when Paul signed in to see the code, he couldn't. So, I had to do this manually, trying to mimic features from the website. The header was largely reworked at the last minute with some design changes that the team decided to make, but the footer holds close to my original attempt to replicate his website's design.

## AI Statement

We consulted several artificial intelligence (AI) chatbots to debug our code. This offered insight into the evolving synergy between human and artificial intelligence in learning. When we asked something such as what area of Accessibility am I missing in my code, it would respond with guidance such as:

 Use of Semantic HTML Elements: Elements like <header>, <nav>, <main>, <section>, and <footer> provide semantic meaning and help screen readers navigate the page.
Descriptive Page Title and Headings: The <title> tag and headings like <h1>, <h2> describe the content of the page and its sections.

The process allowed us to get real-time feedback on problems we were having. It provided us a significant shift in how we could approach tasks we found challenging. Through this project, we regularly asked Chat GPT and Claude for help in understanding why something in our code wasn’t working. Most of the time, it was helpful. Sometimes, however, it failed and we had to spend a signifcant time solving the problem as a group. Through trial and error, the process of breaking the code and later fixing it, proved invaluable as a learning opportunity for further coding projects.

## Citations
Bootstrap Team. (n.d.). Accordion. Bootstrap. https://getbootstrap.com/docs/5.3/components/accordion/
Bootstrap Team. (n.d.). Carousel. Bootstrap. https://getbootstrap.com/docs/5.3/components/carousel/
Bootstrap Team. (n.d.). Modal. Bootstrap. https://getbootstrap.com/docs/5.3/components/modal/
California State University. (n.d.). Campuses. Retrieved from https://www.calstate.edu/attend/campuses
University of California. (n.d.). Retrieved December 19, 2023, from https://www.universityofcalifornia.edu/
ChatGPT 4 by OpenAI, November and December, 2023
Claude by Anthropic, November and December, 2023
Chioariu, P. (n.d.). Copy of "Map example" by Helen Song. CodePen. https://codepen.io/pnc2118/pen/MWLdzXm