What You'll Learn

• how to create and embed codelab-style tutorials
• how to create and embed repl.it IDEs
• how to create and configure GitHub Classroom
• how to set up an entry-level assignment

What you're seeing is a codelab style tutorial.

• Easy to create (just a Google Doc or Markdown)
• Easy to compile (I already have all the scripts you need)
• Easy to host (generates simple html/css/js)
• Easy to embed in OnQ (huzzah!)

Creating

1. Create folder XYZ with main.md markdown file and assets directory
2. Special syntax, like Duration: <min> for each subheading
3. Subheadings become pages
4. Images and other files go into an assets directory

Download this (CIST) tutorial [here].

Compiling

1. Put the claat binary and build script bash file in the parent directory
2. Run ./go.sh build XYZ to build

For those that don't want to use a Linux binary from some random faculty member (good security practice, perhaps!), you can find the releases to download or build claat yourself [here].

What go.sh does (just an excuse to show code):

#!/bin/bash

STYLE="#codelab-feedback, google-codelab div#codelab-nav-buttons, #done { display: none; } <\/style>"

# Actual code doesn't have spaces around '*'.
#  Bash scripts just render funny with '/*/'.

if [ "$1" = "build" ]
then
    ./claat export -o $2/build/ $2/main.md
    sed -i "s/<\/style>/$STYLE/g" $2/build/ * /index.html
    sed -i "s/>Download</><paper-button class=\"colored\" raised=\"\">Download<\/paper-button></g" $2/build/ * /index.html
    cp -rf $2/assets $2/build/ * /
elif [ "$1" = "serve" ]
then
    cd $2/build/
    ./../../claat serve
fi

Hosting

1. You can run ./go.sh serve XYZ to serve it locally
2. The XYZ/build/ directory is a simple html/css/js site that you can place anywhere.

Embedding

1. Zip up the build directory,
2. Upload it to OnQ.
3. Unzip in OnQ.
4. Profit!

Pre-configure and embed simple code IDEs

• Supports 55 different languages
• Can preconfigure / add packages
• Multi-user (multi-cursor) support
• Embeddable, and users view a clone

Setup

1. Create a repl (choosing language)
2. Set it up (installing packages / adding files)
3. Click "Share", and copy embed code
4. Profit!

General highlights:

1. Course corresponds to a GitHub organizaiton
2. Individual classrooms created for course
3. TA's and instructors are set as "owners"
4. Students are imported and connected to GitHub account
5. Submissions are individual repositories, and auto-grading feasible.

Demo

• Adding class
• Classroom settings
• Roster maintenance

Roster Strategy (optional)

I'd rather not expose student ID's, emails, etc., as the course may have hundreds of students. The following strategy will get around that.

1. Export your classlist from OnQ.
2. Add a column in excel with random strings to ID the students anonymously.
3. Export that list of random strings to seed GitHub Classroom roster.
4. Export the UserID, Rand columns as a csv (just two entries per line, and comma separated)
5. Give (4) to Doug to set up the server script.
6. Use the following in a starting quiz or assignment:

<p>For the GitHub Classroom question, please use the following code, unique to you:</p>

<p><iframe src="https://research.cs.queensu.ca/home/muise/204-f20/?id={UserId}" scrolling="no" frameborder="0" allowfullscreen="true"></iframe></p>

• Replace muise with your own username on innovate
• Replace 204-f20 with whatever directory name you want (and tell Doug)
• The {UserId} is a shortcode that means each student will see their own unique key.

Objective

Create an initial trivial assignment to make sure students can use the course software and submission platform.

Highlights

1. Create assignment, assign due date
2. Make repos private
3. Use template repository
4. Specify Repl.It as IDE (adds button to README.md)
5. Configure run command and language
6. Add tests / autograding
7. (optional) Enable a pull request for feedback. Info [here]
8. Share assignment link to all students

Settings for grading

What happens

• Students will "connect" their GitHub accounts to the classroom ID only once.
• A repo will be created for them, with access only given to the student and teaching staff
• If autograding is setup, summary statistics will be available to instructors

Happy curriculum construction!

This Tutorial