Final_individual_review_ipynb_2_
Project Overview
Our project is called ScholarSearch, and it is a program similar to Naviance that helps high school seniors navigate the college application process. Users can create an account, log in, search for colleges and add them to a list, and sort their colleges of interest into safety, match, and reach schools. On the homepage, there are reminders for college application deadlines, along with recommended articles based on a student’s interests. There is also a quiz that asks about a student’s preferences in a college and provides personalized recommendations for colleges.
List Page
This page is where students can sort their colleges of interest into safety, match, and reach schools. They can also delete schools from their lists and change their choices whenever necessary.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScholarSearch</title>
<link rel="stylesheet" href="css/style.css">
<style>
.selected {
background-color: yellow;
}
.delete-button {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="trifold">
<div class="column">
<h2><b>Safety Schools</b></h2>
<ul id="safety" class="category"></ul>
</div>
<div class="column">
<h2><b>Match Schools</b></h2>
<ul id="match" class="category"></ul>
</div>
<div class="column">
<h2><b>Reach Schools</b></h2>
<ul id="reach" class="category"></ul>
</div>
</div>
<footer>
<!-- Footer content goes here -->
</footer>
<div class="column">
<h2><b>Searched Colleges</b></h2>
<ul id="selected">
<script>
// Retrieve selected colleges from localStorage
var selectedColleges = JSON.parse(localStorage.getItem('selectedSchools')) || [];
var selectedList = document.getElementById('selected');
// Display selected colleges
selectedColleges.forEach(function(college) {
var listItem = document.createElement('li');
listItem.textContent = college;
listItem.onclick = function() {
toggleSelect(this);
};
selectedList.appendChild(listItem);
});
</script>
</ul>
<div class="buttons">
<button onclick="moveTo('Safety')">Move to Safety</button>
<button onclick="moveTo('Match')">Move to Match</button>
<button onclick="moveTo('Reach')">Move to Reach</button>
</div>
<div class="buttons">
<button onclick="deleteSelected()">Delete</button>
</div>
</div>
<script>
var selectedSchools = []; // Array to store selected schools
// Function to move schools between categories
function moveTo(category) {
if (selectedSchools.length === 0) {
alert('Please select at least one school first.');
return;
}
var destinationList = document.getElementById(category.toLowerCase());
selectedSchools.forEach(function (school) {
var listItem = document.createElement("li");
listItem.textContent = school;
destinationList.appendChild(listItem);
});
selectedSchools = []; // Clear the selected schools array
// Clear the visual indication of selection
var selectedListItems = document.querySelectorAll("#selected li");
selectedListItems.forEach(function(item) {
item.classList.remove('selected');
});
// Clear the selected colleges list
document.getElementById("selected").innerHTML = "";
}
// Function to toggle selection of schools
function toggleSelect(school) {
if (selectedSchools.includes(school.textContent)) {
selectedSchools = selectedSchools.filter(item => item !== school.textContent);
school.classList.remove('selected');
} else {
selectedSchools.push(school.textContent);
school.classList.add('selected');
}
}
// Function to remove school from the list
function removeFromList(schoolElement) {
var schoolName = schoolElement.textContent;
var index = selectedSchools.indexOf(schoolName);
if (index !== -1) {
selectedSchools.splice(index, 1);
}
schoolElement.remove();
}
// Function to delete selected colleges
function deleteSelected() {
var selectedListItems = document.querySelectorAll("#selected li");
selectedListItems.forEach(function(item) {
if (item.classList.contains('selected')) {
removeFromList(item);
}
});
}
</script>
</body>
</html>
This code provides the user with a trifold (three columns) which have safety, match, and reach options. Users can select schools from their “Selected Colleges” list, which highlights the name of the college, and the user can then sort them into each specific list with the click of a button. There is also a delete button that allows students to delete colleges from each list or from their “Selected Colleges” list. Schools selected from the search page are added to the ‘selectedSchools’ array and the user’s selections on their “Selected Colleges” list is saved using ‘localStorage’. This allows users to come back to the list page and their selections will be saved.
Search Page
This page is where users can search for any college in the United States, browse their locations, and choose whether or not to add them to their “Selected Colleges” list or not.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/common/css/style.css">
<style>
/* Search container */
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
overflow: hidden;
}
/* Search form */
#searchForm {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#searchInput {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#searchButton {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-left: 10px;
cursor: pointer;
}
#searchButton:hover {
background-color: #0056b3;
}
/* Search results */
#searchResults {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.searchResult {
margin-bottom: 10px;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.searchResult:last-child {
border-bottom: none;
}
.searchResult h3 {
margin: 0;
color: #007bff;
}
.searchResult p {
margin-top: 5px;
color: #666;
}
</style>
<title>College Search</title>
</head>
<body>
<div class="container">
<h1>College Search</h1>
<form id="searchForm">
<label for="searchInput">Search by College Name: </label>
<input type="text" id="searchInput" name="searchInput" placeholder="Enter college name">
<button id="searchButton" type="submit">Search</button>
</form>
<div id="searchResults">
<!-- Search results will be displayed here -->
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const requestOptions = {
method: "GET",
redirect: "follow"
};
fetch("http://127.0.0.1:8199/dataList", requestOptions)
.then((response) => response.json()) // Parse the response as JSON
.then((result) => {
colleges = result; // Assuming result is an array of colleges
updateSelectedColleges();
})
.catch((error) => console.error(error));
function addToList(college) {
var storedList = JSON.parse(localStorage.getItem('selectedSchools')) || [];
storedList.push(college);
localStorage.setItem('selectedSchools', JSON.stringify(storedList));
updateSelectedColleges();
}
function updateSelectedColleges() {
var selectedCollegesList = document.getElementById("selected");
if (!selectedCollegesList) return; // Check if the element exists
selectedCollegesList.innerHTML = ""; // Clear previous list
var storedList = JSON.parse(localStorage.getItem('selectedSchools')) || [];
storedList.forEach(function(college) {
var listItem = document.createElement("li");
listItem.textContent = college;
selectedCollegesList.appendChild(listItem);
});
}
var searchForm = document.getElementById("searchForm");
searchForm.addEventListener("submit", function(event) {
event.preventDefault(); // Prevent the form from submitting
var searchTerm = document.getElementById("searchInput").value.toLowerCase();
var filteredColleges = colleges.filter(function(college) {
return college.name.toLowerCase().includes(searchTerm);
});
displaySearchResults(filteredColleges);
});
function displaySearchResults(results) {
var searchResults = document.getElementById("searchResults");
searchResults.innerHTML = ""; // Clear previous search results
if (results.length === 0) {
searchResults.innerHTML = "<p>No results found</p>";
return;
}
results.forEach(function(college) {
var resultElement = document.createElement("div");
resultElement.classList.add("searchResult");
var heading = document.createElement("h3");
heading.textContent = college.name;
resultElement.appendChild(heading);
var location = document.createElement("p");
location.textContent = "Location: " + college.city + ", " + college.state;
resultElement.appendChild(location);
// Add button to add to list
var addButton = document.createElement("button");
addButton.textContent = "Add to List";
addButton.onclick = function() {
addToList(college.name); // Passing college name to addToList function
};
resultElement.appendChild(addButton);
searchResults.appendChild(resultElement);
});
}
});
</script>
</body>
</html>
This code allows for users to input a college name into the search input field, and upon hitting the “search” button, data is fetched from the backend server (“http://127.0.0.1:8199/dataList”). The search results are then displayed (or “No results found” if user input does not correspond with any college names). Each college that is displayed in the search results has the name of the college, location, and a button that says “Add to List”. When users click this button, the name of the corresponding college is added to their “Selected Colleges” list on the List page. The JavaScript code fetches data from the server, processes search queries, and updates the DOM with search results. Event listeners are used to handle form submissions and button clicks. The ‘addToList()’ function adds selected colleges to the local storage and updates the displayed list. The ‘displaySearchResults()’ function dynamically generates HTML elements to display search results.
Match Page
This page is where users can take a quiz regarding their college preferences, and a list of personalized recommendations will be generated for them.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/common/css/style.css">
<style>
/* Custom CSS for quiz page */
#question-container,
#button-container,
#recommendation-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
overflow: hidden;
}
/* Additional custom styles if needed */
#prevButton,
#nextButton,
#submitButton {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
}
#prevButton:hover,
#nextButton:hover,
#submitButton:hover {
background-color: #0056b3;
}
</style>
<title>ScholarSearch Quiz</title>
</head>
<body>
<div id="question-container">
<h2 id="question">Question</h2>
<div id="options"></div>
</div>
<div id="button-container">
<button id="prevButton" onclick="prevQuestion()">Previous</button>
<button id="nextButton" onclick="nextQuestion()">Next</button>
<button id="submitButton" onclick="submitAnswers()" style="display:none;">Submit</button>
</div>
<div id="recommendation-container" style="display:none;">
<h3>Recommendation:</h3>
<ul id="recommendation"></ul>
</div>
<script>
const quizData = [
{
question: "Preferred Location",
options: ["City", "Suburb", "Rural"]
},
{
question: "Weather Preference",
options: ["Sunny", "Snowy", "Mild"]
},
{
question: "Public or Private Institution Preference",
options: ["Public", "Private"]
},
{
question: "Population Size Preference",
options: ["Small", "Medium", "Large"]
},
{
question: "Tuition Preference",
options: ["Low", "Medium", "High"]
},
{
question: "STEM or Liberal Arts Oriented Preference",
options: ["STEM", "Liberal Arts"]
},
{
question: "Desired Student to Staff Ratio",
options: ["less students to teachers", "even ratio", "more students to teachers"]
}
];
let currentQuestion = 0;
let answers = [];
const questionElement = document.getElementById("question");
const optionsElement = document.getElementById("options");
const prevButton = document.getElementById("prevButton");
const nextButton = document.getElementById("nextButton");
const submitButton = document.getElementById("submitButton");
const recommendationContainer = document.getElementById("recommendation-container");
const recommendationList = document.getElementById("recommendation");
function showQuestion() {
const currentQuizData = quizData[currentQuestion];
questionElement.innerText = currentQuizData.question;
optionsElement.innerHTML = "";
currentQuizData.options.forEach((option, index) => {
const optionElement = document.createElement("div");
optionElement.innerHTML = `
<input type="radio" id="option${index}" name="question${currentQuestion}" value="${option}">
<label for="option${index}">${option}</label>
`;
optionsElement.appendChild(optionElement);
});
updateButtons();
}
function prevQuestion() {
currentQuestion--;
showQuestion();
}
function nextQuestion() {
currentQuestion++;
showQuestion();
}
function submitAnswers() {
recommendationList.innerHTML = "";
answers = [];
const radioButtons = document.querySelectorAll('input[type="radio"]:checked');
radioButtons.forEach((radioButton) => {
answers.push(radioButton.value);
});
console.log("User Answers:", answers); // Debugging statement
// Generate college recommendations based on user answers
const recommendedColleges = [];
}
This code generates a simple quiz for collecting user preferences regarding college selection. The quiz consists of multiple-choice questions with options presented one at a time. Users can navigate between questions using “Previous” and “Next” buttons. Upon completing the quiz, users can submit their answers, which are then used to generate college recommendations (recommendation generation logic not featured here).
JavaScript functions like ‘showQuestion()’, ‘prevQuestion()’, and ‘nextQuestion()’ dynamically update the displayed question and options based on the current state, facilitating smooth navigation through the quiz. Event listeners attached to navigation buttons like ‘prevButton’ and ‘nextButton’ trigger these functions upon user interaction. Additionally, the ‘submitAnswers()’ function collects user responses from radio buttons and stores them in the answers array, generating college recommendations.