Hour 1: Introduction to Computer Science

Overview

In this lesson, you will be introduced to the field of computer science. The focus is on the big picture, from what the field of study is, to some of the activities you might do as a participant in it. You will also engage with a programming language, the building block whereby any software is created.

Goals

You have the following goals for this lesson:

• Learn the basics of computer science and why learning about it can be helpful
• Learn about online code editors and how they can be used in instruction
• Practice online practice problems for the concept of output

Warm up

Consider all of the technologies that you use on a daily basis. Many of them today include some form of computer chip, which allows a device to work. This can include fridges, toasters, cars, gaming systems, televisions, phones, or any number of items. For some of these devices, adding chips has substantially changed how society uses them, while others less so. What kind of devices do you think have seen the most pros, and the most cons, from the addition of computers?

Vocabulary

You will be learning about the following vocabulary words:

Code

You will be using the following new pieces of code:

CSTA Standards

This lesson covers the following standards:

• 3A-CS-01: Explain how abstractions hide the underlying implementation details of computing systems embedded in everyday objects.
• 3A-CS-02: Compare levels of abstraction and interactions between application software, system software, and hardware layers.
• 3A-AP-17: Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects.

Explore

In this lesson, you are going to explore the field of computer science. Computers are part of your daily life in many ways, from cars, to tablets, or even refrigerators. These devices have hardware, like the car itself, and this hardware is built by electrical engineers, mechanical engineers, and others. You, however, will be focusing these lessons on the software, which is the piece that computer scientists create. This split, the hardware and the software, allows a physical device to stay the same, while meaningfully changing what it can do or how a user interacts with it.

One common misconception with computer science is that it is about using software. For example, you might turn on Microsoft Word and write an essay in it or type a piece of text into a search engine or AI prompt. Computer scientists generally want people to know about how to use such software and many do, but the big idea is how to invent software. Inventing software requires a very different way of thinking than using it does, because you need to learn one of the many languages that computers speak.

Fortunately, modern computer scientists do not start from scratch. They have invented software for, weirdly, inventing other software. Such environments come in many forms and are created by many manufacturers for many purposes. Generally, these come in two flavors: (1) desktop based editors called Integrated Development Environments (IDE), and (2) browser based online editors that do not have a single unified name but that might be called Online Code Editors. The use of one or another is subject to debate and both have utility. Commonly, desktop editors are used for large programs, in college, and by professionals. Online editors are the opposite, where only small programs are written and typically they are used in an educational setting like K-12.

The programming language Quorum has both types of programming environments. The Quorum Studio IDE offers a more advanced programming environment but will not be used in this course. You will be using the Online Code Editor called Quorum Blocks.

Quorum Blocks has a variety of functions you can use to create your software. Many of these functions you can learn as you go. You will briefly explore a few of these functions next.

Exploring Quorum Blocks

Throughout these lessons, you will be using Quorum Blocks to learn the fundamentals of computer science. Quorum Blocks has four main components::

1. The toolbar located at the top of the tool
2. The block tray in the middle on the left
3. The editor in the middle, and
4. The output at the bottom

You will use each of these components to make and run each of the programs you create. The idea is that Quorum blocks allows you to edit your code, run your code, and to observe the result automatically.

Toolbar

The toolbar in Quorum Blocks serves as a set of buttons that provide information, customization, and functionality you may need to make a program. From left to right, the buttons show or hide the tray, zoom in, zoom out, open a hotkeys menu, fullscreen the tool, run a program, or stop a program.

A table of the hotkeys is below:

The fifth button causes Quorum Blocks to go fullscreen. You can return the tool back to its original size by selecting the minimize button. The final two buttons, run and stop, do what they say and run or stop your program. The rightward triangle, called the run button, checks for errors and then runs your program. The red stop button stops a running program. If the program you are writing has an error in it, it will not run and the output window will show the error.

The Block Tray

Below the toolbar on the left hand side, available with the hotkey CTRL + 1 on Mac or ALT + 1 on Windows, is the block tray, zoomed in below.

The tray is where you'll find the code that is available for use in your program. In this course, you'll learn how to move and snap blocks together in a logical order to create different programs. In Quorum Blocks, the options for code blocks in each tray are limited on purpose, helping you stay focused on a few commands rather than overwhelming you with all possible blocks. Put another way, when using an online editor, the code is limited to thinking about three things:

• Which of a small set of blocks to choose
• Where to snap the block in place
• What to type, in rare cases where typing is needed

While the code is limited in each example on purpose, it is important to note that all of the code is real. What this means is that any code, or block, you use can be used in any program. You are always learning material that you could potentially use later.

The Editor

In the image of Quorum Blocks above, the code editor is the area located below the toolbar and to the right of the tray. It is where you create, manipulate, and adjust the software you are developing. The editor displays the blocks you've added, forming your program. You will learn how to use the editor to create programs in the next lesson. Editors in programming work similarly to using tools like text editors (e.g., Microsoft Word, Google Docs), except with a different purpose. While in text editors, the system might give hints about spelling or grammar, code editors tend to help find broken code or run your program.

Compare and contrast using an online and offline editor. In an online editor, you typically only write a few lines of code and in many environments what code to choose from is limited. In an offline editor like Quorum Studio or many others, you can still write small programs but are not limited to them. Both have value and are used for different purposes, including in and out of education. Both approaches can use accessible blocks and these can be accessible if designed as such. Although the graphical elements in the editor are visual, they provide reasonable messages to accessibility devices across multiple platforms.

Output

At the bottom of the environment is the output. This area displays textual information about the program being run and can take various forms, some of which we will explore later in the course. This output region displays only text. Graphical content, if any, will temporarily appear over the editor or if there is any sound, since it is not visual, will come out the speakers.

Start Coding

To begin writing code, you must know a little about how Quorum handles user output and text. Effective programs often output information to users through sounds, visuals, or touch. Quorum has two blocks of code that will be useful as you start your journey into programming. These include the commands say and output. Say, as you may have guessed, sends sound to the speakers. Output displays text visually on the screen. While that output is visual, if run in a browser, it is also made available to accessibility devices.

Both output and say use strings of text as a way to specify what each command will present to the user of a program. In Quorum, similar to many other programming languages, double quotation marks surround the string of text. In the following example, output will display the text Hello World in the output component when the program is run.

output "Hello World"

The say command is similar to the output command. The say command is followed by text within two double quotes.

say "Hello World"

Text values can also be combined and this has a technical name in computer science: concatenation. Concatenation joins together strings of text using the + symbol. This can be helpful when you want to format the text that is shown to a user. This concept will be far more useful when you learn about variables in a later lesson. For now you will practice using concatenation in its simplest form. As an example, the following Quorum code will display the text Hello World in the output window.

output "Hello" + " World"

You will now practice these concepts in a series of problems.

Engage

In this first part of the lesson problem sets, familiarize yourself with Quorum Blocks and create your very first series of small programs. Your tasks will be presented as a set of Parsons problems. The broad idea behind problems like these is to limit the number of programming options while learning, emphasizing where lines of code go in a program. In these Parsons problems, you will start outputting a funny phrase of your choosing either through text or through your computer’s audio system. You will be using Quorum’s commands such as output and say in order to successfully complete your task.

Directions

Before you begin the Parsons problems for this lesson, there is a set of optional additional problems you may use to learn the environment. If you have never programmed before or have never used Quorum Blocks, going through them may help introduce the tool. If you wish to see all the problems at once for every lesson, see the problems page.

Once you have optionally completed the tutorial problems, complete at least one series of Parsons problems in the Quorum Blocks editor by selecting the link to the problem set below. There are two different sets of Parsons problems that only differ by the command you will practice, either the command output or say. Given that output and say work nearly the same in programming, the problem sets are nearly identical, on purpose. As such, choose one, but do not feel obligated to do both.

Before you select which Parsons problems to select consider what the output and say commands accomplish. Computers often have multiple ways to output information to a user. There are graphics, like pictures on the screen, in addition to speech, text, or feel (e.g., vibration on a tablet). Assuming you have speakers and the volume is up, the say command takes in text and speaks the text out loud. Similarly the output command produces text displayed in the output component that matches the text typed into the output block.

1. Learn about Quorum Blocks
2. Learn about output statements
3. Learn about say statements

Next Tutorial

In the next tutorial, we will discuss Text and Booleans Online, which describes how to manage text and boolean variables.