summary: CIST Tutorial
id: cist-tutorial
categories: Sample
tags: medium
status: Published
authors: Christian Muise
Feedback Link: <http://www.haz.ca/>

# CIST Tutorial
<!-- ------------------------ -->
## Overview
Duration: 1

### 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

<!-- ------------------------ -->
## Codelab Tutorials
Duration: 4

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](assets/main.md)].

### Compiling

1. Put the [claat](assets/claat) binary and [build script](assets/go.sh) 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](https://github.com/googlecodelabs/tools/releases)].

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

```bash
#!/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!


<!-- ------------------------ -->
## Repl.It IDEs
Duration: 3

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!

## GitHub Classroom Setup
Duration: 10

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](https://classroom.github.com/classrooms)

- 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:

```html
<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_.

![onq-id](assets/onq-id.jpg)

## GitHub Classroom Initial Assignment
Duration: 15

### 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](https://classroom.github.com/help/leaving-feedback-in-github#:~:text=If%20you%20create%20an%20assignment,for%20students%20directly%20in%20GitHub.)]
8. Share assignment link to all students

### Settings for grading

Setting | Value
---|---
**Test name** | Check submission
**Setup command** | `sudo -H pip3 install pytest nnf`
**Run command** | `pytest test.py`
**Timeout** | -
**Points** | 1

### 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

## Fin
Duration: 1

Happy curriculum construction!

### [This Tutorial](https://research.cs.queensu.ca/home/muise/cist-tutorial/)