Janet Ingber
If you are interested in learning how to write computer code, Swift Playgrounds is an excellent place to begin. It was designed originally to teach young children, but many adults have used it. According to Apple, “Swift Playgrounds is a revolutionary app for iPad and Mac that makes learning Swift interactive and fun. It requires no coding knowledge, so it is perfect for students just starting out. Solve puzzles to master the basics using Swift — a powerful programming language created by Apple and used by the pros to build today’s most popular apps. Then take on a series of challenges and step up to more advanced playgrounds designed by Apple and other leading developers.”
There are free iPad and Mac versions of Swift Playgrounds available from their respective app stores. The iPad version was released in 2016 and the Mac version was released in early 2020. For this article, I used Playgrounds 5.1 on both the iPad and the Mac. Even if you are not using an iPad, I recommend reading the next section, since it will introduce you to terms and concepts that are used on the Mac. If you have both an iPad and a Mac, you can switch back and forth between the two devices.
Swift Playgrounds on the iPad
Once the app is installed, try navigating in both landscape and portrait mode. Landscape worked better for me. If you get confused or something does not seem right, open the App Switcher and take Swift Playgrounds out. Then re-launch the app. I needed to do this several times.
The Main Screen
At the top left of the screen is a Locations button. Once you have saved Playgrounds, the list of saved playgrounds will be located by activating this button. As with the Files app, there are two viewing options, Recent and Browse. The next control is a New Playground button.
Next is labeled My Playgrounds heading. Flicking right again will bring you to a Help button. The next control is a Select button. When the new screen loads, flick left to find options including Share and Reset. Flicking to the right brings you to a search box and options to sort your playgrounds by date or name. Flicking right again will land you on the first Playground. Next are options to get more playgrounds. At the bottom of the screen is a list of Playgrounds to start with including “Learn to Code 1,” the first one to try. Select it with a one-finger double tap.
The First Puzzle
This Playground has a character named Byte. Byte has to collect a gem. On the main screen is an Introduction button with Previous Page and Next Page buttons on either side. The introduction section is very short. At the end of the introduction is a Start Coding button.
Once this button is activated, a new screen will load. The screen is divided into two sections. On the left are instructions and on the right is the Playground puzzle. You can flick around the screen to get oriented.
You may start hearing background music and sound effects. If you want to turn either of them off, select the Sound button in the upper right corner. Options for turning these features off will appear. Your sound settings will carry over to all puzzles until you decide to change them.
The first control on the screen is a Previous Page button. Next is an Issuing Commands button. VoiceOver will also say “Table of Contents.” To the right of this control is a Next Page button. The table of contents has a great deal of information but do not let it overwhelm you. As you progress with Swift Playgrounds, you will learn about topics covered in the Table of Contents.
The next control is an Add from Library button. Activating it will bring up options that you can use in your coding. Next is a More button that has options including Help, Share, and Glossary. Next are instructions for having Byte collect gems. Keep flicking right to the Hints button. Selecting this button gives extra information. Next is a Goal Count where the number of gems collected is spoken. The final button is Sound.
Navigating the Puzzle Grid
On the right side of the screen is the puzzle grid. If you right flick past the Sound button, you will hear a brief description of the puzzle. Flick again and you will land on the puzzle grid and VoiceOver will speak your location within the grid. For this puzzle, the grid consists of five rows and five columns.
There are custom actions available and VoiceOver will say, “Swipe up or down to select a custom action.” Swipe up or down to find information about character locations, goal locations, character description, and Activate. When I selected character description, VoiceOver described what Byte looked like. The Activate option will describe the puzzle. You can tap anywhere on the puzzle grid to hear your location.
Swift Playgrounds uses map directions to navigate. Therefore, the top of the screen is north and the bottom is south. East is the right side of the iPad and west is the left. The puzzle area also has heights. Heights are essentially steps or levels. The puzzle has blocks for locations and VoiceOver will say which block you have located.
Moving through the grid is counterintuitive. When you flick right, you would expect to move by row, but you are actually moving up the column. Flicking left will move you down the column. Once you get to row 4 in a column, flicking right again will bring you to the next column and you will be on row 0. In other words, if you start on column 0, row 0 and flick right five times you will end up on column 1, row 0. Go in reverse by flicking left.
Make Byte Move
Codes are written in a specific format. For example, if I want Byte to move forward, my command would say: moveForward(). The word move is not capitalized, but the word Forward is. At the end of each command line are the symbols for left and right parentheses ().
The correct code needs to be entered for Byte to go to column 2, row 1, height 1, in order to collect a gem. Byte’s starting point is height 0, column 2, row 1. Byte is facing north. VoiceOver will speak Byte’s location as you move on the puzzle grid. In this puzzle, VoiceOver announces when you are on the gem.
On the left side of the screen, check out the instructions. First, locate the coordinates for the gem. You will need this to tell Byte where to go. You will be instructed to enter two different commands, moveForward() and collectGem(). Double tap on the Tap to Enter Code box.
Once the edit box is activated, below it will be options including Redo and Delete. There will also be the commands moveForward() and collectGem(). Select the moveForward() command three times to bring Byte to the gem. Then select collectGem() for Byte to get the gem. I found it better to flick to the commands rather than sliding my finger. When sliding, sometimes the wrong command was entered.
Next, select Run My Code. VoiceOver will read your code as it is being run. There is a Show Keyboard button should it be necessary to type code.
If the code was entered correctly, you will get a congratulations message. I accidentally had Byte move forward four times instead of three times. When VoiceOver read back my code, I was told that Byte almost fell off the grid but was able to collect the gem. Glad to hear Playgrounds has a sense of humor.
This puzzle needed only two commands and required four movements. As puzzles require more commands, you can use Run My Code anytime to check that your code is correct so far. If only some of the commands are entered, Playgrounds will inform you that the level is incomplete and Byte looks sad.
Adding a New Command
On the bottom of the screen is a link to go to the next page. Activating it brings you to the next puzzle. This puzzle is similar, but this time Byte also has to turn left. The Hint button tells you how many times Byte has to move forward and turn left. When you hear “actions available,” flick up and down until you find the information you want. You can also touch the puzzle grid or use the rotor to tell you where Byte and the gem are located.
For this puzzle, Byte is at column 4, row 0. The gem is at height 1, column 2, row 2. Byte needs to move forward two times, turn left, move forward two more times, and collect the gem.
Another Adventure using Four Commands
The next puzzle adds toggling a switch. Byte needs to collect a gem, then go to another location and toggle a switch. Now you will have four commands: moveForward(), turnLeft() collectGem(), and toggleSwitch(). You first must get to the gem and collect it. Then move from the gem to the switch. Here is a hint: Byte will need to make more than one left turn to solve the puzzle. Try this one on your own.
Swift Playgrounds on the Mac
When I opened Swift Playgrounds on the Mac, I landed on a toolbar with toolbars Close, Minimize, and Full Screen. Next was a heading called Playgrounds, followed by another toolbar with one item, Filter, with a search field. Moving right with VO + Right Arrow, there was an item labeled “New Learn to Code 1 Swift 5.1.” VoiceOver eventually said this was a button for opening the playground.
Further to the right of this puzzle were other playgrounds. The menu categories were File, Edit, Run, View, Window, and Help. The Run menu has commands related to the code you have written such as Run My Code and Stop. Many of the menu items have keyboard commands. If you have a Mac with a Touch Bar, there are several commands on it. The Help menu has options including Search, Playgrounds Help, and Show Glossary. The Playgrounds Help item did not work well at all. Most of the time, it would not open. Other times, although I tried to get back to the list of help topics by selecting a link, nothing happened. I tried this on two different Macs. With sighted assistance, I learned that the Help information was on the screen, but VoiceOver did not read it.
The First Puzzle
As with the iPad version, selecting “Learn to Code 1” opens a screen with the introduction and Previous and Next buttons. The introduction is very short. At the end of the introduction is a Start Coding button.
Turning Sounds Off
Once the Start Coding button is activated, a new screen will load, and you will hear sound effects and music. If you want to turn either of these off, use VO + Right Arrow until you land on a Sound button labeled. Just selecting the button will not do anything. VO + Right Arrow once more and you will hear VoiceOver say, “The World.” Interact with the group and go down until you encounter options to toggle either or both options off. Fortunately, once you make a decision, Playgrounds will remember your sounds settings.
Exploring the Screen
The easiest way to navigate the screen is VO + Left Arrow and VO + Right Arrow. Depending on your rotor setting, you can also flick left and right.
VO + Left Arrow until you hear VoiceOver say that you are on the left toolbar. This toolbar has two items: an option to close the program and an option to show the sidebar. For now, leave the sidebar hidden. It contains lessons that go with Playgrounds. These lessons are very useful so once you are familiar with the screen and Playgrounds, check out the information provided. Next is a right tool bar with options to Add from Library and Share.
The next controls are Previous Page and Next Page, followed by Source Editor. This is where you will start writing code. Next are Run Options, followed by Run My Code, and Hint. The final items are Code Completions, Goal Count, and the Sound button. These are followed by The World group. VO + Right Arrow once more and you will land on a description of the puzzle and what tasks the character Byte has to perform.
As with the iPad puzzle, Byte has to collect a gem. Byte’s starting point is height 0, column 2, row 1. Byte is facing north. The gem is at height 1, column 2, row 4.
Navigating the Puzzle
Moving around the puzzle is more intuitive on the Mac. North is at the top of the keyboard and south is toward the Trackpad. East is toward the right side of the Mac, and west is toward the left. Use the Up Arrow to move up and the Down Arrow to move down. The Left Arrow will move you toward the left and the Right Arrow will move you to the right. VoiceOver will speak your location.
The Mac version of Playgrounds does not provide custom actions or the ability to find locations and character descriptions. A context menu is available for some puzzles when entering code.
Entering Code
In this puzzle, Byte needs to move up to height 1, column 2, row 4. This requires that Byte move forward three times. As Byte moves up, VoiceOver will speak Byte’s location. VoiceOver will announce when Byte is on the gem. Next, Byte has to collect the gem.
Move left until you locate the Source Editor. Interacting with it will give you lists of tasks to complete to run your code. Using VO + Spacebar will let you type code into it. Start typing the first few letters of the code. Playgrounds will fill in the complete name. Once you hear it, press the Return key twice. The first time enters the code and the second time brings you to the next line for the next instructions. If after typing the first few letters of a command, Playgrounds does not add the entire command, there is something wrong. VoiceOver may say “issue.” Check your commands and delete the letters that you last typed. I had to delete commands because I accidentally typed the wrong letter for a code or I deleted only part of my error.
Playgrounds will lose focus if it is in the Source Editor when you go to another app. When I entered code, went to another app, and then returned, focus was on the World, rather than the Source Editor’s last line of code.
Use the Hint button for help with commands. Enter moveForward() three times. Then enter collectGem() once. Finally, choose Run My Code or just type Command-R. If your code is correct, you will get a congratulations message, followed by a link to the next page. This puzzle only needed two commands and required four movements. As puzzles require more commands, you can use Run My Code anytime to check that your code is correct so far.
Adding another Command
The next puzzle has Byte do an additional command: turnLeft(). For this puzzle, Byte is at column 4, row 0. The gem is at height 1, column 2, row 2. Byte needs to move forward two times, turn left, move forward two more times, and collect the gem.
Another Byte Adventure with Four Commands
The third puzzle adds the additional command toggleSwitch(). This is the third puzzle that was also discussed in the iPad section. I gave one hint for the puzzle: Byte has to make more than one turn.
Here is the solution: Byte has to first use the command moveForward() twice. Then Byte needs to make a left turn with the command turnLeft(). Next Byte has to use moveForward() once more and then collect the gem using collectGem().
Next, Byte needs to get to the switch and toggle it. Here is the code to solve the rest of the puzzle:
moveForward()
turnLeft()
moveForward()
moveForward()
toggleSwitch()
Conclusion
Swift Playgrounds is accessible with some patience and practice on both the Mac and iPad. However, inaccessibility of the Help menu on the Mac is a problem, as is Playgrounds’ propensity to crash on the Mac.
There are some things I prefer on the iPad vs the Mac, such as entering code and ease of moving around the screen. Though on the Mac, it is easier to navigate the rows and columns of the puzzle grid. Personally, I would choose the iPad app over the version on the Mac.
This article is made possible in part by generous funding from the James H. and Alice Teubert Charitable Trust, Huntington, West Virginia.
Related articles:
- Dolphin GuideConnect: Accessible Computing Made Simpler by Steve Kelley
- Solving the Great American Puzzle: A Review of the Crossword Web-based Game from APH by J.J. Meddaugh
More by this author:
