Build an interactive student dicussion heatmap with the Canvas API

Welcome to the 7th UBC Learning Analytics hackathon. Although the spring 2020 hackathon was cancelled due to COVID-19, the fall 2020 hackathon has gone fully virtual! This hackathon is really a workshop, so we're going to be referring to it as a workshopathon from here on out.

This repo contains the basic backend and frontend components of the Student Dashboard application you will be building. By the end of this workshopathon, you should have a working web application that displays your own Canvas data using the Canvas API.

We will also provide other data sources that you are welcome to integrate to build more advanced tools and visualizations.

Due to the compressed nature of this workshopathon, we'll be covering a lot of ground in not a lot of time. You don't need to fully understand everything. There are lots of links to external readings and tutorials within Tasks that you're welcome to explore. And remember that this repo will always be a resource you can access in the future (so give it a star!)

Table of Contents

1. What You'll Learn
2. What You'll Build
3. Ask For Help
4. Schedule
5. Getting Started
6. Code Overview
7. Tasks
8. Project Showcase
9. Organizers
10. Contributors

📚 What You'll Learn

By completing this workshopathon, you'll learn to:

• use the Canvas API
• explore the data that Canvas collects from you
• write some code in JavaScript
• learn the difference between the backend and frontend
• clean data
• build your own API endpoints
• use React to build frontend components
• build a modern web application

🔨 What You'll Build

👉 Live demo

You'll be building a web application that displays a heatmap of what days of the week and what time of the day you and your peers (and your instructor) are most actively posting in the discussion forum of a course.

It should look something like this:

After you've completed the heatmap, you can either add more features to the heatmap or use the tons of data we provide to build entirely new tools and visualizations.

🤔 Ask For Help

We don't expect you to come into the workshopathon with any prior knowledge. You may never have coded before - that's okay! You're here to learn, and we're here to help.

Please connect to our Hackathon Zoom link (available from Canvas), where you can ask the volunteers for help.

📅 Schedule

Sunday, October 25th

• 9:00am - Hackathon welcome and orientation - we'll give you an overview of the tasks and get you set up with this repository.
• 9:20am - Start hacking! Solutions to each of the Tasks will be released at predetermined times.
• 11:00am - Check-in.
• 1:00pm - Check-in.
• 3:00pm - Check-in.
• 4:30pm - Optional: students who built some of the optional features in Task 6 can demo their work!
• 5:30pm - End of Workshopathon.

⚙️ Getting Started

These instructions will get you a copy of the project up and running on your local machine for use with your own Canvas API tokens.

Prerequisites

1. Install Node 12.0.0 or greater.
2. Install Git.
3. Install Latest Version of Zoom (5.3 or greater) (required, since this will allow you to move freely between the various Zoom breakout rooms).
4. Install Visual Studio Code (optional but recommended).
5. Install Brave or Firefox, since Chrome is spyware (optional but recommended; the volunteers are more familiar with using the devtools of Brave or Firefox).

Installation and setup

1. Fork this repo.
2. Copy clone link.
3. Open terminal on Mac or command line on Windows. We like to use VSCode's integrated terminal, as it works for both Mac and PC.
4. Clone repo. git clone {paste URL you copied}
5. Navigate into repo. cd student-dashboard

Backend

1. Navigate into backend repo. cd backend
2. Install required dependencies. npm install
3. Start server. npm start
4. In terminal, you should see Example app listening on port 4001!.

Frontend

1. Navigate into frontend repo. cd frontend
2. Install required dependencies. npm install
3. Start frontend application. npm start
4. Your browser should start. If not, navigate to http://localhost:3000/. You should see Welcome to the Workshopathon, attendee!.

💾 Code Overview

Dependencies

Backend

• nodejs - JavaScript runtime.
• expressjs - A framework for building our server's API endpoints.
• cors - A middleware to enable Cross-Origin Resource Sharing.
• node-canvas-api - Easy way to make calls to Canvas API using JavaScript.
• neat-csv - Simple way to read CSV files.

Frontend

• reactjs - JavaScript library for building user interfaces.
• Victory - React components for easily building data visualizations.
• D3.js - The de facto way to build data visualizations on the web, somewhat painfully.

Application Structure

Our web application will involve three autonomous entities (two of which we build):

• a frontend React application
• a backend Node.js/Express application
• the Canvas API (accessed through node-canvas-api)

These three entities run independently but communicate with one another by exchanging data via API endpoints. Our Node backend will be responsible for querying the Canvas API, processing the data returned, and hosting that data at API endpoints (that we create) for our frontend application to read and render to the browser.

Backend

• server.js - The entry point into our backend code. It starts the express server and is responsible for handling requests the frontend makes, making requests to the Canvas API, and reading/sending data to the frontend.
• canvasDiscussions.js - Exports two functions, getDiscussions and flattenTopicAndReplies. The first takes as input a Canvas course id and pulls discussions from that course in a way that preserves the threaded nature of replies to discussion topics. The second flattens the topics and replies to make it easier for generating the heatmap.
• readCSV.js - Simple utility for reading CSVs painlessly. Takes as input the path to the CSV.

Frontend

• App.js - The top-level React component that is responsible for rendering the Discussion and Heatmap components.
• Discussion.js - Discussion fetches discussion data, cleans it, and passes it down to the child component Heatmap.
• Heatmap.js - Renders the heatmap using D3.js.
• Welcome.js - Renders a simple welcome message with the Canvas user's name, if available.

✅ Tasks

1. Create a Canvas API token and make calls to the Canvas API
2. Create API endpoints in backend
3. Make API calls from frontend to frontend
4. Create data visualization dashboard
5. Create a dropdown to switch between classes
6. Create more advanced data visualizations/tools
7. Share your work
8. Feedback and thanks

Project Showcase

At the end of the workshopathon, you can put a link to your work here!

Organizers

This hackathon is a collaborative effort by the UBC Learning Analytics project, LAVA (Learning Analytics, Visual Analytics), and Sauder Learning Services, with staff volunteers from Faculty of Arts, Faculty of Education, Sauder School of Business, and the Centre for Teaching, Learning and Technology.

A big thank you to Sauder Learning Labs for providing a space designed to facilitate teams in using critical thinking and analytical decision making to solve real-world problems.

Contributors ✨

And another big thank you to our volunteers and contributors.

Marko Prodanovic 📖 🤔 💻 📋 👀	Justin Lee 📖 🤔 💻 📋 👀	alisonmyers 📖 🤔 📋 👀	Craig Thompson 📖 🤔 💻 📋 👀	Stoo Sepp 🤔 📋	willengle 🤔 📋	sanamsh 🤔 📋
Vineet Deo 💻	Jason Doo 💻	Chris Li 💻	jcoblin 💻 📖	Ria Nicole Carmin 💻	Shirley Yin 💻	Quinn Hou 💻
Carolina Pinzón 💻

This project follows the all-contributors specification. Contributions of any kind welcome!