Synthesizing Simple Computational Thinking with Simple User Interface Development

One of the issues I have been trying to emphasize with my students is the connection between the development of user interfaces with Swift UI and the implementation of computational thinking and algorithms written in Swift. For context, I have a class of 20 high school students, who are dual enrolled in a college level app development course. For the vast majority, this is their first course in computer science.

There are some great activities to learn how to build user interfaces using Swift UI here:

https://developer.apple.com/tutorials/develop-in-swift/

Furthermore, there are some wonderful resources to get students using Swift to learn about tools of computer science like loops, conditionals, etc in the Apple Book entitled: Develop in Swift: Explorations. This course has the content of APCSP, without the expectations of completion of the AP Exam. I used both of these resources to precede the activity described here.

The issue I’ve had with these two resources is that for students at my level, they don’t do a great job synthesizing the development of algorithms with the unique and impressive user interface tools of Swift UI. Further, some of the resources require the use of Xcode, which my students do not have access too. There are lots of existing cool YouTube videos showing how to develop apps in Swift Playgrounds:

https://www.youtube.com/watch?v=i22WV9aRn58

https://youtu.be/EbBjeRqQpl0?si=MHbbPqabI1JXVBKn

But they often expect viewers to have a deep understanding of programming and don’t show simple algorithms working together with simple user interfaces.

So, I developed the lesson shown here. It is a development of a game where the user guesses a number between 1 and 100 which is randomly selected by the computer. The computer tells the user if their guess is too high or too low. The user keeps guessing the number until they get it correct. The program then displays how many guesses it took the user.

First, I have students play the game with one another. Then, I walk them through the development of a flowchart with the decision making associated with such an app. This requires students to understand loops, conditionals, and algorithms both of which are covered in the Develop in Swift: Explorations book.

By now, students also have basic familiarity with the simpler aspects of user interface construction from Swift UI. I then do two things: Model for them how to construct a program that plays the game, and then provide them with a video to follow along and make a replica of what I made. I made the video by screen recording on my iPad, and then uploaded it to their learning system. It is too big for here, but you can contact me at lapetiaj@udmercy.edu for a copy if you would like. Additionally, they are expected to modify the replica of the user interface to be more interesting and engaging.

For a final grade, I require students to write a reflection about the activity, specifically identifying where in their algorithm they used selection, iteration, and sequencing.

I also tried uploading my playground, but that does not seem to work here either. You can contact me for this as well.

The commands are here:

// This is a game where the user guesses a random number

// The user keeps guessing until they get it right.

// The computer tells them if the guess is too high or too low

import SwiftUI

import PlaygroundSupport

struct ContentView: View {

    //Declare Variables

    //Determine the number to guess

    @State var randomNumber = Int.random (in: 1...100) // random integer, 1 to 100

    @State var guessCount = 0 //number of guesses

    @State var userGuess: String = "" //Guess of the user

    @State var feedback: String = "Make your first guess" // Information on Guess

    var body: some View {

        VStack {

            //User Instructions

            Text ("Guess the Number Game")

                .padding ()

            //Spot to take in input

            TextField ("Enter a number between 1 and 100", text: $userGuess)

                .textFieldStyle(RoundedBorderTextFieldStyle())

                .padding ()

            //Algorithm to execute with their guess/input

            Button ("Submit Guess") {

                //put algorithm here

                //Filter out numbers not between 1 and 100

                if let guess = Int (userGuess), guess >= 1 && guess <= 100 {

                    guessCount = guessCount + 1 //Guess count goes up by 1

                    if (guess < randomNumber){

                        feedback = "Your guess is too low, try again."

                    }

                    else if (guess > randomNumber){

                        feedback = "Your guess is too high, try again."

                    }

                    else {

                        feedback = "Correct, you got it! It took you \(guessCount) guesses"

                    }

                }

                else {

                    feedback = "Please enter an integer between 1 and 100"

                }

            }

            .padding ()

            .background(Color.blue)

            .foregroundColor (.white)

            .cornerRadius (10)

            .padding ()

            //Output about last guess & whether they win

            Text (feedback)

        }

    }

}

Next steps from here include:

Ensuring students have an understanding of arrays, methods, and properties

Building in their skills designing and constructing user interfaces

Building an app which collects data from users, contains analysis, and produces different outputs dependent upon the data input.