Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@aida-mlscope
aida-mlscope authored Sep 9, 2024
1 parent cd5272d commit cbaf0f9
Show file tree
Hide file tree
Showing 3 changed files with 400 additions and 0 deletions.
Binary file added aida-logo.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
223 changes: 223 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Course Content</title>
<style>
:root {
--dark-blue: #1a365d;
--light-blue: #7db0e8;
--orange: #ff6b35;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: var(--dark-blue);
margin: 0;
padding: 0;
background-color: #f0f8ff;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
nav {
background-color: var(--dark-blue);
padding: 10px 0;
}
nav .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 50px;
height: 50px;
}
.nav-links a {
color: white;
text-decoration: none;
margin-left: 20px;
}
.nav-links a:hover {
color: var(--light-blue);
}
h1 {
text-align: center;
color: var(--dark-blue);
}
.week-container {
border: 1px solid var(--light-blue);
margin-bottom: 20px;
border-radius: 5px;
overflow: hidden;
background-color: white;
}
.week-header {
background-color: var(--light-blue);
padding: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.week-header:hover {
background-color: #6a9fd4;
}
.week-header h2 {
margin: 0;
color: var(--dark-blue);
}
.week-content {
display: none;
padding: 20px;
}
.week-content.active {
display: block;
}
.toggle-icon::after {
content: "\25BC";
color: var(--dark-blue);
}
.week-header.active .toggle-icon::after {
content: "\25B2";
}
a {
color: var(--orange);
text-decoration: none;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<div class="container">
<a href="index.html">
<img src="aida-logo.jpeg" alt="Logo" class="logo" />
</a>
<div class="nav-links">
<a href="index.html">Problems</a>
<a href="solutions.html">Solutions</a>
</div>
</div>
</nav>

<div class="container">
<h1>MLScope</h1>
<div id="content"></div>
</div>

<script>
const problemsData = [
{
week: 1,
title: "House Price Prediction",
content: `
<p>In this task, the goal is to predict house prices in King County using a regression model. Given features like square footage, number of bedrooms, and location, you will utilize models to accurately estimate house prices. This involves data cleaning, model training/utilization, and model performance evaluation.</p>
<h4>Dataset:</h4>
<p><a href="https://www.kaggle.com/datasets/harlfoxem/housesalesprediction" target="_blank" rel="noopener noreferrer">House Sales Prediction Dataset</a></p>
<p>The dataset contains house sales data from King County, Washington. It has 21,613 rows and 21 columns, covering features like price, sqft_living, bedrooms, bathrooms, waterfront, and zip code, among others. The price column is the target variable, and the other features are used to predict house prices.</p>
<h4>Starter Notebook (not required to use):</h4>
<p><a href="https://colab.research.google.com/drive/1yhrpIwnvJ7ExjYacx-ixmRcW09JPn2rX?usp=sharing" target="_blank" rel="noopener noreferrer">Make a Copy to Use</a></p>
<h4>Goals/tasks:</h4>
<ul>
<li>Clean dataset (remove unnecessary columns from the dataset to use it for regression)</li>
<li>Train/test split</li>
<li>Set up code for training model (using library of choice)</li>
<li>Train model with hyperparameters</li>
<li>Test model against test data</li>
</ul>
<h4>Potential Skills:</h4>
<h5>Starter</h5>
<ul>
<li>Linear Regression</li>
<li>scikit-learn</li>
</ul>
<h5>Bonus</h5>
<ul>
<li>Simple Decision Tree</li>
<li>Random Forest</li>
<li>PyTorch</li>
</ul>
<h4>Useful Package Documentation:</h4>
<ol>
<li><strong>NumPy</strong> (for numerical computations): <a href="https://numpy.org/doc/" target="_blank" rel="noopener noreferrer">NumPy Documentation</a></li>
<li><strong>pandas</strong> (for data manipulation): <a href="https://pandas.pydata.org/docs/" target="_blank" rel="noopener noreferrer">pandas Documentation</a></li>
<li><strong>scikit-learn</strong> (for model training and evaluation): <a href="https://scikit-learn.org/stable/documentation.html" target="_blank" rel="noopener noreferrer">scikit-learn Documentation</a></li>
<li><strong>matplotlib</strong> (for data visualization): <a href="https://matplotlib.org/stable/contents.html" target="_blank" rel="noopener noreferrer">matplotlib Documentation</a></li>
<li><strong>PyTorch</strong> (for deep learning-based models): <a href="https://pytorch.org/docs/stable/index.html" target="_blank" rel="noopener noreferrer">PyTorch Documentation</a></li>
</ol>
`,
},
// Add more weeks here as needed
];

const solutionsData = [
{
week: 1,
title: "House Price Prediction Solution",
content: `
<p>Solutions for Week 1 will be uploaded here after the submission deadline.</p>
`,
},
// Add more solution weeks here as needed
];

function createWeekElement(weekData) {
const weekElement = document.createElement("div");
weekElement.className = "week-container";
weekElement.innerHTML = `
<div class="week-header">
<h2>Week ${weekData.week}: ${weekData.title}</h2>
<span class="toggle-icon"></span>
</div>
<div class="week-content">
${weekData.content}
</div>
`;
return weekElement;
}

function toggleWeek(weekHeader) {
weekHeader.classList.toggle("active");
const content = weekHeader.nextElementSibling;
content.classList.toggle("active");
}

function loadContent(data) {
const contentDiv = document.getElementById("content");
contentDiv.innerHTML = "";
data.forEach((week) => {
const weekElement = createWeekElement(week);
contentDiv.appendChild(weekElement);

const weekHeader = weekElement.querySelector(".week-header");
weekHeader.addEventListener("click", () => toggleWeek(weekHeader));
});

// Open the first week by default
const firstWeekHeader = document.querySelector(".week-header");
if (firstWeekHeader) {
toggleWeek(firstWeekHeader);
}
}

// Determine which page to load based on the current URL
const currentPage = window.location.pathname.includes("solutions.html")
? "solutions"
: "problems";
loadContent(currentPage === "solutions" ? solutionsData : problemsData);
</script>
</body>
</html>
Loading

0 comments on commit cbaf0f9

Please sign in to comment.