1 of 8

Trivia App

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

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.

All posted times are Eastern Daylight Time (EDT)

Workshop Resources

Slack Channel: #programming-trivia-app in the CxD 2022 Slack Workspace
Zoom Video Conferences: Link will be provided on Slack

Workshop Prep

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.

Identify an online tutorial site that you can use in your classroom to supplement any project work. Over the course of the workshop try out a few basic online programming tutorials from popular sites to facilitate this "concept first" approach, and consider how you might manage a self-paced assignment based on milestones. How might you use these self-guided tutorials as "filler time" or dedicate scheduled time to their completion?

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/.

Live Zoom: Mon 1:00 pm ⏰

Agenda (1 hour)

Welcome and Introductions
Quick Survey
Review of Workshop Format and Sequence
Key Pointers
- Sharing Code via Slack
- Searching the Internet for Code Help
- Online Tutorials and Other Resources
- Look for Patterns and Analogies You Can Identify With
Information on School of Informatics and Computing Degrees
Open Discussion and Wrap Up

The Zoom link will be posted in Slack workshop channel.

Programming Warm-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.

Consider planning an in-class activity where students diagram a computing application (whether a social app, an AI driven tractor, or a video game console). Have them consider what inputs, data, and outputs the program includes. While the students will not know exactly how the engineers designed the application, they can come up with some specific function names to guess how the application processes the information. For example, a phone may have a function called "changeScreenBrightness" that takes the light sensor input to update the screen's brightness (output) based on a stored user preference (data).

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.

You are highly encouraged to build (and experiment with) the program as demonstrated in the video to get a feel for the programming. Also, remember to also try some online tutorials as a supplemental experience as explained in the Workshop Prep.

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.

Define a Custom Function

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

Use a Conditional Statement

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

Use an Object

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

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.

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. 🚀🚀🚀🚀

🎉Congratulations for making it through so many programming concepts in a short time!

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.

Teacher Insights

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

Program a Trivia App ⏱

Let's program a customized trivia app in three steps!

👉 As you work through the following activities don't hesitate posting questions on Slack 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?

Live Zoom: Wed 11:30 am ⏰

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

The Zoom link will be posted in Slack workshop channel.

Workshop Deliverables

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

A link to your working code (e.g. replit.com) that demonstrates completion and customization of tutorial material.
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?

Programming Warm-Up ⏱

The Big Picture

Programming Languages

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

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.

script.js

//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.

script.js

//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.

script.js

//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.

script.js

//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.

script.js

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

script.js

//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();

Trivia App

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

All posted times are Eastern Daylight Time (EDT)

Workshop Resources

Workshop Prep

Background and Recommended Classroom Approach

Background on Computing by Design Framework

Learning to Program: A Two-Pronged Approach

Getting Started with Slack

Getting Started with Replit

Live Zoom: Mon 1:00 pm ⏰

Agenda (1 hour)

Programming Warm-Up ⏱

The Big Picture

Programming Languages

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

Declare Variables and Use a Built-in Function

Define a Custom Function

Use a Conditional Statement

Use an Object

JavaScript Arrays

Make a List (or Array)

Make an Array of Objects

🎉Congratulations for making it through so many programming concepts in a short time!

Wrap-Up

Teacher Insights

Angela Jones

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

Program a Trivia App ⏱

👉 As you work through the following activities don't hesitate posting questions on Slack 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

🎉 Well done! Be sure to share what you created on Slack!

Planning for Student Success

Live Zoom: Wed 11:30 am ⏰

Agenda (1 hour)

Workshop Deliverables

Live Zoom: Mon 1:00 pm ⏰

Agenda (1 hour)

Workshop Prep

Background and Recommended Classroom Approach

Background on Computing by Design Framework

Learning to Program: A Two-Pronged Approach

Getting Started with Slack

Getting Started with Replit

Trivia App

Welcome and Getting Started

Programming Workshop Sequence (June 20 - 24, 2022)

All posted times are Eastern Daylight Time (EDT)

Workshop Resources

Program a Trivia App ⏱

👉 As you work through the following activities don't hesitate posting questions on Slack 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

🎉 Well done! Be sure to share what you created on Slack!

Planning for Student Success

Teacher Insights

Angela Jones

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