Here you will find various insights from teachers and programmers on how to approach teaching in computer science and a project-based perspective. Borrow, adapt and curate the ideas presented to help you develop your unique approach. Don't hesitate asking question in Slack on any of these ideas.

Angela Jones

Angela is the CT Instructional Coach at Arsenal Tech High School in Indianapolis and an experienced Computing by Design teacher as part of the iDEW program.

On Enjoying the Journey

On the Trivia App Programming

Tinya Fisher

Trivia App - Crossing the Finish Line

Matthew Baron

On Programming and an Approach to the Trivia Project

On Scaffolding and Scrum

Luke Jones

On Developing Content Knowledge

On Managing Student Success

Travis Faas

On Practical Approaches to Programming for Beginners

Background and Recommended Classroom Approach

Background on Computing by Design Framework

This workshop is focused squarely on the programming component of a CxD Project. For a little bit of background, you will find that the Computing by Design framework is project-centric in the approach.

Each project has three phases, where programming is a very important component of all three. Our Innovation Workshop covers the breadth of the Computing by Design framework. We have found that the programming in any project presents a fine line between a wonderfully empowering experience (when students struggle and get things working) and a sometimes frustrating experience that becomes a missed opportunity. Therefore we are offering these programming workshops to provide a solid foundation on building the applications.

Learning to Program: A Two-Pronged Approach

We encourage you to offer students a two-pronged approach to learning to program. Computing by Design projects provide an "application first" approach to programming where students are provided direct guidance on creating a specific type of application through templates and tutorials -- like with trivia , a chatbot, IoT etc. This approach complements the many great tutorials available online that provide a "concept first" approach by stepping through concepts in programming. Facilitating both approaches for students provides a varied experience -- strengthening knowledge and offering more opportunities to ignite interests.

Getting Started with Slack

Slack will be our primary communication platform for the workshop. The video above provides a brief introduction on the features of Slack, but more help and tutorials can be found at https://slack.com/help.

Getting Started with Replit

Replit is the recommended programming environment for many of our projects. The video above provides a brief introduction on the features of Replit, but more help and tutorials can be found at https://docs.replit.com/.

For the programming workshops we simply request that you submit the following two items.

1. A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.

2. A summary of your classroom plan

   • Consider how you will approach classroom management when students are completing a tutorial like this one.

     • What will be your expectations?

     • How much will be individual work versus team work?

     • Will you assign any code champions to help you support students with questions?

   • How will you supplement it with other programming content or experiences?

     • Will you use any online tutorials?

     • Will you supplement with any CS unplugged activities?

     • Will you create any custom programming exercises yourself?

Submit using the link below...

Agenda (1 hour)

• Welcome

• Quick Survey

• Review Instructions for Final Deliverables

• Discuss Progress and Concerns Identified During the Week

  • TBD

  • TBD

• Open Discussion and Wrap Up

Agenda (1 hour)

• Welcome

• Quick Survey

• Introductions

• Review of Workshop Format and Sequence

• Key Pointers

  • Sharing Code via Slack

  • Feel Free to Use Video Too

  • Look for Patterns and Analogies You Can Identify With

• Information on School of Informatics and Computing Degrees

• Open Discussion and Wrap Up

The Big Picture

A program can be defined simply as a set of instructions that perform defined tasks, and we can use the diagram below to frame the major components of a program. A program can be written to accept particular inputs, like a mouse click, sound from a microphone, or a reading from a temperature sensor. The same program can handle the storage and retrieval of data, like to do items or historical temperature data. The same program can then output something useful, like a current to do list or move robot wheels. Multiple functions are written to control and process everything towards some useful end, each function handling a particular task.

Programming Languages

This exercise will use JavaScript, the primary programming language for web applications that work in a standard browser. There are many other popular programming languages. A particular language is chosen for implementation based on several factors related to the context of the need. Here are a few you may have heard of -- Python, Java (different from JavaScript!), Arduino, C++ and C#. Note: While HTML and CSS are languages with a defined syntax, they are usually distinguished from programming languages that provide computation and functions.

Let's Program: Variables, Functions, Conditionals, and Objects

This exercise takes a direct approach to prepare you for programming a CxD project by taking an "application first" perspective. We will frame this introduction by creating a simplified To Do Application using Javascript.

Declare Variables and Use a Built-in Function

First, in our script.js file, let's declare some variables of different data types and set their values.

• todo is a string

• time is a number

• isComplete is a boolean (true or false).

Then we use a built-in function console.log() to display the values.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//use a built-in function `console.log()` to output values
console.log(todo); 
console.log(time);
console.log(isComplete);

Define a Custom Function

Here we define a custom function displayTodos(). This allows us to call (or invoke) the function whenever we want.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//define a custom function to output to do's
function displayTodos() {
  console.log(todo);
  console.log(time);
  console.log(isComplete);
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Use a Conditional Statement

Here we use a conditional statement (using if/else) to customize the output.

//declare some variables for our data
var todo = "Walk the dog.";
var time = 30;
var isComplete = false;

//define a custom function to output to do's
function displayTodos() {
  console.log(todo);
  console.log(time);
  
  //customize the output based on whether it is complete
  if (isComplete) {
    console.log("This is complete.");
  }
  else {
    console.log("This is not complete");
  }
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Use an Object

Here we will use a single object variable to hold all the data for a particular to-do item.

//declare a variable for our data
var todo = {
  text: "Walk the dog.",
  time: 30,
  isComplete: false
};

//define a custom function to output to do's
function displayTodos() {
  console.log(todo.text);
  console.log(todo.time);
  
  //customize the output based on whether it is complete
  if (todo.isComplete) {
    console.log("This is complete.");
  }
  else {
    console.log("This is not complete");
  }
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

JavaScript Arrays

Make a List (or Array)

Here we will use an array and for-loop to list multiple to-do items. We will ignore the time and completion data for now.

//declare a variable
var todos = ["Walk the dog.","Go to grocery.","Call mom."];

//define a custom function to display to do's
function displayTodos() {
  todos.forEach(function(todo) {
    console.log(todo);
  })
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Make an Array of Objects

Here we will combine our use of an array with objects. This is the most difficult concept of this exercise and may take some time to digest. But it demonstrates a lot of powerful programming concepts in a very small program. 🚀🚀🚀🚀

//declare a variable
var todos = [
  {
    text: "Walk the dog.",
    time: 30
  },
  {
    text: "Go to grocery.",
    time: 60
  },
];

//define a custom function to display to do's
function displayTodos() {
  todos.forEach(function (todo) {
    console.log("---");
    console.log(todo.text);
    console.log(todo.time + " minutes");
  })
}

//call (or invoke) the displayTodos() function to actually run it
displayTodos();

Wrap-Up

That's our warm-up. Whether you found these concepts incredibly difficult or mostly review, please don't hesitate posting questions along with a link to your replit code in our Slack channel for the workshop.

Welcome 👋

Programming Workshop Sequence (June 7 - 11, 2021)

This workshop is largely asynchronous, providing you flexibility to complete things on a schedule that works for you. Below you will find the sequence of events and videos for the workshop. Notice the two live Zoom sessions on Monday at 1:00 pm and Wednesday at 11:30 am. Otherwise we will use Slack for discussions and impromptu Zoom meetings as needed. Please don't hesitate posting a message on Slack for help.

Workshop Resources

• Slack Channel: #ws-programming-trivia in the CxD 2021 Slack Workspace

• Zoom Video Conferences: Link will be provided on Slack

👉 As you work through the following activities don't hesitate posting questions on Slack (#ws-programming-trivia) and include a link to your replit when needed.

1 Complete the Template Build Tutorial

2 Create a Custom Question Database

3 Make Five Custom Modifications to Your Trivia Game

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?