replace R graph with learning path

dlab-berkeley · Oct 31, 2023 · 3203cf2 · 3203cf2
1 parent 5aaa9b0
commit 3203cf2
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 3 deletions.
diff --git a/R.html b/R.html
@@ -416,7 +416,7 @@ <h4 class="card-title">R Geospatial Fundamentals</h4>
 		</div>
 
 
-	<a href="R_graph.html"><button type="button" class="btn btn-dark">View as graph</button></a>
+		<a href="R_path.html"><button type="button" class="btn btn-dark">View learning path</button></a>
 
 	</div>
 

diff --git a/R_path.html b/R_path.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Workshop Selector</title>
+	<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
+	<!-- Bootstrap CSS -->
+	<link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
+	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+	<!-- jQuery -->
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<!-- Fontawesome JS -->
+	<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
+
+	<!-- Custom CSS -->
+	<link rel="stylesheet" href="static/stylesheets/style.css">
+
+	<style>
+		#requirements-heading {
+			display: none;
+		}
+
+		.container-fluid {
+			margin: 20px;
+		}
+
+		.card {
+			margin-bottom: 20px;
+		}
+		.arrow span {
+			font-size: 2em;
+		}
+
+		.flex-nowrap {
+			flex-wrap: nowrap !important;
+		}
+
+		.overflow-auto {
+			overflow-x: auto;
+		}
+
+		.card {
+			margin-right: 20px;
+			margin-bottom: 20px;
+		}
+
+		.arrow span {
+			font-size: 2em;
+			margin-left: 20px;
+			margin-right: 20px;
+		}
+		</style>
+</head>
+<body>
+
+<!-- Navbar -->
+<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top borderless">
+	<a
+		class="navbar-brand"
+
+			href="index.html"
+		>
+		D-Lab Workshops
+	</a>
+	<button class="navbar-toggler borderless" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+		<span class="navbar-toggler-icon"></span>
+	</button>
+
+	<div class="collapse navbar-collapse" id="navbarColor01">
+		<ul class="navbar-nav ml-auto">
+
+				<li class="nav-item">
+                    <a class="nav-link active" href="python.html">Home</a>
+				<li class="nav-item">
+					<a class="nav-link" href="library.html">Library</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link" target="_blank" href="https://dlab.berkeley.edu/">About D-Lab</a>
+				</li>
+
+		</ul>
+	</div>
+</nav>
+<!-- End of Navbar -->
+
+<div class="container-fluid mt-5">
+
+	<div style="text-align: center; padding-top: 20px;">
+		<a href="python.html"><button type="button" class="btn btn-warning">Return to default view</button></a>
+		<a href="https://dlab.berkeley.edu/training/upcoming-workshops"><button type="button" class="btn btn-info">Book a workshop!</button></a>
+	</div>
+
+
+    <h1>Learning Pathways for R Workshops</h1>
+    <select id="r-workshop-dropdown" class="form-control mb-5">
+        <option value="" disabled selected>Select an R workshop</option>
+    </select>
+	<h3 id="requirements-heading" style="display:none;">Workshop Requirements</h3>
+
+	<div id="prerequisite-cards" class="row flex-nowrap overflow-auto">
+
+<script>
+// Fetch JSON data
+$.getJSON("data/workshop_list.json", function(data) {
+
+// Extract columns into separate variables
+var titles = data.Title;
+var descriptions = data.Description;
+var prerequisites = data.Prerequisites;
+var materials = data['Workshop Materials'];
+
+// Filter R workshops
+var RWorkshops = [];
+for (var id in titles) {
+	if (titles[id].includes("R")) {
+		RWorkshops.push({
+			'ID': id,
+			'Title': titles[id],
+			'Description': descriptions[id],
+			'Prerequisites': prerequisites[id],
+			'Workshop Materials': materials[id]
+		});
+	}
+}
+
+// Populate dropdown options
+$.each(RWorkshops, function(index, workshop) {
+	$('#r-workshop-dropdown').append(new Option(workshop.Title, workshop.ID));
+});
+
+// On dropdown change, populate cards
+$('#r-workshop-dropdown').change(function() {
+	var selectedID = $(this).val();
+	$("#requirements-heading").show();
+
+	// Clear existing cards
+	$('#prerequisite-cards').html('');
+
+	// Find the selected workshop data
+	var selectedWorkshop = RWorkshops.find(w => w.ID === selectedID);
+
+	// Handle the special case of "R Fundamentals"
+	if (selectedWorkshop && selectedWorkshop.Title === "R Fundamentals") {
+		var noneCard = `
+		<div class="card col-md-4">
+			<div class="card-body">
+				<h5 class="card-title">None!</h5>
+				<p class="card-text">You don't need any prerequisites for this workshop.</p>
+			</div>
+		</div>`;
+
+		$('#prerequisite-cards').append(noneCard);
+	} else {
+		// Filter prerequisites
+		var prereqTitles = selectedWorkshop.Prerequisites ? selectedWorkshop.Prerequisites.split(", ") : [];
+
+		// Generate cards for each prerequisite
+		$.each(prereqTitles, function(index, title) {
+			var prerequisiteData = RWorkshops.find(w => w.Title === title);
+
+			if (prerequisiteData) {
+				var card = `
+				<div class="card col-md-4" style="max-width: 350px;">
+					<div class="card-body">
+						<h5 class="card-title">${prerequisiteData.Title}</h5>
+						<p class="card-text">${prerequisiteData.Description}</p>
+						<a href="${prerequisiteData['Workshop Materials']}" class="btn btn-primary">Workshop Materials</a>
+					</div>
+				</div>`;
+
+				$('#prerequisite-cards').append(card);
+
+				// Add arrow after each card except the last one
+				if (index < prereqTitles.length) {
+					$('#prerequisite-cards').append('<div class="arrow col-auto d-flex align-items-center justify-content-center" style="margin-left: 5px; margin-right: 5px;"><span>&rarr;</span></div>');
+				}
+			}
+		});
+	}
+
+	// Add a card for the selected workshop at the end
+	var selectedCard = `
+	<div class="card col-md-4" style="max-width: 350px; background-color: #D7E3F0;">
+		<div class="card-body">
+			<h5 class="card-title">${selectedWorkshop.Title}</h5>
+			<p class="card-text">${selectedWorkshop.Description}</p>
+			<a href="${selectedWorkshop['Workshop Materials']}" class="btn btn-primary">Workshop Materials</a>
+		</div>
+	</div>`;
+	$('#prerequisite-cards').append(selectedCard);
+});
+});
+
+</script>
+
+</body>
+</html>