GitHub Integration: Classrooms - source-academy/frontend GitHub Wiki

Introduction

Classrooms will be a lightweight replacement for the current assessments that does not require a backend to maintain. Instructors can make use of Source Academy and GitHub Classroom to post, receive and mark student assignments. This is achieved through the use of GitHub API to recognize and pull Source Academy relevant repositories and allowing the user to answer questions through the front-end.

Users

• Instructors
• Students

Features

Features from Source Academy

• Create and edit Assessments using template repositories (instructors)
• View and answer questions from cloned assignment repositories (students)

Features supported from GitHub Classroom

• Create, accept and attempt assignments
• Code is pushed directly to students' repositories
• Get students' code from cloned repositories

Enabling GitHub classroom integration

In order to enable GitHub classroom integration, open the .env file and set REACT_APP_ENABLE_GITHUB_ASSESSMENTS to be true.

Thereafter, the link to the Classroom page will appear in the Navigation Bar.

Flow of the application

Formatting example

Folder structure for assessment repositories:

RootFolder/
  Q1/
    Problem.md
    SavedCode.js
    StarterCode.js
  Q2/
    Problem.md
    SavedCode.js
    StarterCode.js
  Q3/
    Problem.md
    SavedCode.js
    StarterCode.js
  LICENSE
  README.md

If you need a Markdown cheatsheet, please click here!

Folder structure for course repositories:

Note that Course Repositories HAVE to be named 'course-info' to be located by Source Academy.

RootFolder/
  course-info.json

Formatting for course-info.json:

{
  "CourseName": "CS1101S",
  "assessmentCategories":
  [
    {
      "categoryDisplayName": "Mission",
      "assessments":
      [
        {
          "id": "M6A_v07",
          "title": "Curve Introduction",
          "openAt": "2020-01-01T-00:00+00",
          "closeAt": "2021-12-31T-23:59+00",
          "published": "yes",
          "coverImage": "https://imgur.com/r/cats/MHXp1kt",
          "shortSummary": "In this mission, you get introduced to visible functions, called Curves!",
          "acceptLink": "https://classroom.github.com/a/PyAUhdfe",
          "repoPrefix": "sa-mission-curves"
        },
        {
          "id": "M6B",
          "title": "Sorting Things Out",
          "openAt": "2020-01-01T-00:00+00",
          "closeAt": "2021-12-31T-23:59+00",
          "published": "yes",
          "coverImage": "",
          "shortSummary": "Quicksort assignment description!",
          "acceptLink": "",
          "repoPrefix": "sa-mission-quicksort"
        }
      ]
    },
    {
      "categoryDisplayName": "Quest",
      "assessments":
      [
        {
          "id": "P6_v03",
          "title": "Curves",
          "openAt": "2020-01-01T-00:00+00",
          "closeAt": "2021-12-31T-23:59+00",
          "published": "yes",
          "coverImage": "",
          "shortSummary": "The Path P6 covers Lecture L6 of SICP1101 Unit 1.",
          "acceptLink": "",
          "repoPrefix": "sa-quest-curves"
        }
      ]
    },
    {
      "categoryDisplayName":"Paths",
      "assessments":[]
    },
    {
      "categoryDisplayName":"Contests",
      "assessments":[]
    },
    {
      "categoryDisplayName":"Others",
      "assessments":[]
    }
  ]
}

The above example will display 2 Missions and 1 Quest on the student's Source Academy frontend.
The categoryDisplayName can be changed and affects the heading names shown. * openAt and closeAt should follow ISO 8601 standard for Date and Time.

acceptLink refers to the invitation link generated on GitHub Classroom.

repoPrefix will form the start of the repository name for the student's cloned repository.

Example assessment card seen by the student on Source Academy

Example view of Classroom page.

Note that the assessment category names have been replaced due to the course-info for that course.