MVVM Review

In this exercise you will examine a small SwiftUI app built using the MVVM design pattern:

Working with a partner:

1. Read through the source code carefully.
2. Download a copy of the project and try it out together.
3. Then work together to respond to each question below on the paper provided.
4. Finally, check your responses by expanding the example solutions provided.

Source Code

import Foundation
import Observation
import SwiftUI
 
// MODEL
struct ChemistryTerm: Identifiable {
    
    // MARK: Stored properties
    let id = UUID()
    let term: String
    let definition: String
    var isRevealed: Bool = false
}
 
 
// VIEW MODEL
@Observable
class ChemistryTermViewModel {
 
    // MARK: Stored properties
    var terms: [ChemistryTerm] = [
        ChemistryTerm(
            term: "Atom",
            definition: "The smallest unit of an element that retains its chemical properties."
        ),
        ChemistryTerm(
            term: "Isotope",
            definition: "Atoms of the same element that have different numbers of neutrons."
        ),
        ChemistryTerm(
            term: "Mole",
            definition: "An SI unit representing 6.022 × 10²³ particles of a substance."
        ),
        ChemistryTerm(
            term: "Electronegativity",
            definition: "The tendency of an atom to attract shared electrons toward itself in a bond."
        ),
        ChemistryTerm(
            term: "Oxidation",
            definition: "A process in which an atom or ion loses one or more electrons."
        ),
        ChemistryTerm(
            term: "Catalyst",
            definition: "A substance that increases the rate of a reaction without being consumed."
        ),
        ChemistryTerm(
            term: "Enthalpy",
            definition: "The total heat content of a system measured at constant pressure."
        ),
        ChemistryTerm(
            term: "Molarity",
            definition: "A measure of concentration equal to moles of solute per litre of solution."
        ),
        ChemistryTerm(
            term: "Valence Electrons",
            definition: "Electrons occupying the outermost energy level of an atom."
        ),
        ChemistryTerm(
            term: "Le Chatelier's Principle",
            definition: "A system at equilibrium will shift to partially offset any stress applied to it."
        ),
    ]
 
    // MARK: Functions
    func reveal(termToReveal: ChemistryTerm) {
        for index in terms.indices {
            if terms[index].id == termToReveal.id {
                if terms[index].isRevealed == false {
                    terms[index].isRevealed = true
                } else {
                    terms[index].isRevealed = false
                }
            }
        }
    }
 
}
 
// VIEW
struct ContentView: View {
 
    // MARK: Stored properties
    @State var viewModel = ChemistryTermViewModel()
 
    // MARK: Computed properties
    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(spacing: 12) {
                    Text("Tap to toggle between each definition or term.")
                        .foregroundStyle(.secondary)
                    ForEach(viewModel.terms) { term in
                        Button {
                            viewModel.reveal(termToReveal: term)
                        } label: {
                            VStack(alignment: .leading, spacing: 6) {
                                if term.isRevealed {
                                    Text(term.term)
                                        .font(.headline)
                                        .foregroundStyle(.white)
                                } else {
                                    Text(term.definition)
                                        .font(.subheadline)
                                        .foregroundStyle(.white)
                                        .multilineTextAlignment(.leading)
                                }
                            }
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding()
                            .background(term.isRevealed ? Color.green.mix(with: .black, by: 0.2) : Color.blue.mix(with: .black, by: 0.2))
                            .clipShape(RoundedRectangle(cornerRadius: 12))
                        }
                    }
                }
                .padding()
            }
            .navigationTitle("Chemistry Review")
        }
    }
 
}
 
#Preview {
    ContentView()
}

Review Questions

Question 1

Describe the overall purpose of this program.

SOLUTION

The purpose of this program is to help users review Chemistry vocabulary. The app displays a list of definitions as buttons. When the user taps a button, the corresponding Chemistry term is revealed in its place, and tapping again returns the button to showing the definition. This allows a student to quiz themselves by reading a definition, recalling the term, and then checking their answer — and to hide the answer again if they want to re-test themselves.

Question 2

Describe where input and output occur in the running of the program. Identify the specific line(s) of code responsible for each.

SOLUTION

Input occurs when the user taps one of the buttons. On line 93, the Button action block captures this tap, and on line 94, viewModel.reveal(termToReveal: term) is called to pass the selected term to the view model.

Output occurs when the view displays either a definition or a revealed term for each button. On line 97, the if term.isRevealed condition determines what is shown: when false, line 102 displays Text(term.definition); when true, line 98 displays Text(term.term). Additionally, line 110 changes the button’s background colour between dark blue and dark green to visually indicate the current state of each card.

Question 3

Identify where data is first stored in an array. Reference the specific line(s) of code that accomplish this.

SOLUTION

Data is first stored in an array on line 21, where the terms property is declared and immediately initialized. Ten ChemistryTerm instances are created inline, beginning on line 22 with the entry for “Atom” and ending on line 61 with the closing of the last entry. Each instance is constructed using the ChemistryTerm struct’s initializer, providing a term string, a definition string, and relying on the default value of false for isRevealed as defined on line 12. This initialization happens as soon as a ChemistryTermViewModel object is created.

Question 4

What is the name of the chosen array?

SOLUTION

The array is named terms. It is declared as a stored property of the ChemistryTermViewModel class on line 21.

Question 5

Describe where the chosen array is used in the program — for example, where it is iterated over, where individual elements are accessed, or where existing data in the array is used to produce new data or drive behaviour.

SOLUTION

The array is used in two places. First, on line 92, ForEach(viewModel.terms) iterates over every element in the array to produce one button per term. For each element, the definition and isRevealed properties are read on lines 97–105 to determine what text and background colour to display.

Second, inside the reveal(termToReveal:) function, line 66 iterates over the array using for index in terms.indices. On line 67, each element’s id is compared to the tapped term’s id. When a match is found, lines 68–72 read the current value of isRevealed and toggle it to the opposite state. This represents the array being used to both read existing data and update a specific element’s state.

Question 6

What does the data stored in the array represent within the program? Describe the type of data stored and what role it plays.

SOLUTION

Each element of the terms array is an instance of the ChemistryTerm struct, defined on lines 6–13. Each instance represents one Chemistry vocabulary item, holding three pieces of data: the term itself (a String, line 10), its definition (a String, line 11), and whether the term is currently revealed (a Bool, line 12). Together, the elements of the array represent the complete set of flashcard-style content that the app presents to the user.

Question 7

Explain how the terms array manages complexity in this program. In your response, explain why the program could not be written — or how it would have to be written differently — if the array were not used.

SOLUTION

The terms array manages complexity by allowing all ten Chemistry vocabulary items to be stored, accessed, and updated through a single named collection rather than as ten separate variables. Without the array, each term would need its own individual variables (e.g., term1, definition1, isRevealed1, term2, definition2, isRevealed2, and so on), resulting in thirty separate variables to represent the same data.

The view code would also be far more complex without the array. The ForEach on line 92 depends on being able to iterate over a collection; without the array, each of the ten buttons would need to be written out individually, and any change to the layout or logic would need to be applied ten separate times. Similarly, the for loop on line 66 relies on being able to iterate through terms.indices to locate and toggle the correct element — without the array, a separate if-statement would be required for each of the ten terms. The array therefore makes the program significantly shorter, easier to read, and easier to maintain.

Question 8

Identify where a function is defined in the program. What is the function’s name? What is its return type, if any? What parameter(s) does it define, and how do they affect what happens inside the function?

SOLUTION

The function is defined on line 65. Its name is reveal. It has no return type — it performs an action rather than computing and returning a value, so its return type is implicitly Void.

The function defines one parameter: termToReveal of type ChemistryTerm. This parameter receives the specific term that the user tapped. Inside the function, the id of termToReveal is used on line 67 as the value to compare against when searching through the array, so the parameter directly determines which element will have its isRevealed property toggled.

Question 9

Where is this function called in the program?

SOLUTION

The function is called on line 94, inside the Button action block in ContentView. The call is written as viewModel.reveal(termToReveal: term), where term is the specific ChemistryTerm instance that the ForEach loop on line 92 is currently iterating over. This means the function is called once each time the user taps any of the ten buttons.

Question 10

What is the purpose of the reveal function, and how does it contribute to the overall functionality of the program?

SOLUTION

The purpose of the reveal function is to locate a specific ChemistryTerm in the terms array by matching unique identifiers, then toggle that term’s isRevealed property between true and false.

It contributes to the program’s overall functionality by connecting user input to a data change. When the user taps a button, the view calls reveal, the view model updates the array, and because terms is a tracked property under the @Observable macro, SwiftUI automatically re-renders the affected button — switching it between showing the definition on a blue background and showing the term on a green background.

Question 11

Explain in detailed steps how the reveal function uses sequence, selection, and/or iteration to accomplish its purpose. Your explanation should be detailed enough for someone else to reproduce the function.

SOLUTION

1. (Sequence) The function begins by receiving termToReveal, a ChemistryTerm value, as its input parameter.
2. (Iteration) On line 66, a for loop begins, iterating over every valid index in the terms array using terms.indices. The loop visits each index from the first element to the last, one at a time.
3. (Selection) On line 67, an outer if statement evaluates whether the id of the element at the current index — terms[index].id — equals the id of termToReveal. Because each ChemistryTerm is assigned a unique UUID on creation, this condition will be true for exactly one element in the array.
4. (Selection) If the outer condition is true, an inner if statement on line 68 checks whether terms[index].isRevealed is currently false.
5. (Sequence) If the inner condition is true (the term is not yet revealed), line 69 sets terms[index].isRevealed = true.
6. (Sequence) If the inner condition is false (the term is already revealed), the else branch on line 71 sets terms[index].isRevealed = false.
7. (Iteration continues) The loop does not exit early after finding a match — it continues through the remaining indices, though no further matches will be found.
8. (Sequence) Once all indices have been visited, the function ends and returns no value.

Question 12

Describe a scenario where two separate calls to the reveal function, at different points while the program is running, would result in different outcomes.

SOLUTION

Consider a user who first taps the “Atom” button, then taps the same “Atom” button a second time.

In the first call, reveal is called with the ChemistryTerm for “Atom”, whose isRevealed is currently false. The function finds the matching element, the inner if condition on line 68 is true, and line 69 sets isRevealed to true. The button updates to show the word “Atom” on a green background.

In the second call, reveal is called again with the same “Atom” term. The function finds the same matching element, but this time isRevealed is true. The inner if condition on line 68 is now false, so the else branch on line 71 executes instead, setting isRevealed back to false. The button returns to showing the definition on a blue background.

Question 13

Describe the condition tested by each of the two calls identified above.

SOLUTION

In both calls, the outer condition on line 67 — terms[index].id == termToReveal.id — is the same: it checks whether the current array element’s unique identifier matches the identifier of the term that was tapped. This condition evaluates to true for the “Atom” element in both calls.

The difference lies in the inner condition on line 68: terms[index].isRevealed == false. During the first call, isRevealed is false, so this condition is true and the if branch runs. During the second call, isRevealed is true, so this condition is false and the else branch runs instead.

Question 14

What will the result of the first call be? What will the result of the second call be?

SOLUTION

After the first call, the ChemistryTerm for “Atom” has its isRevealed property changed from false to true. SwiftUI detects the change to the terms array and re-renders that button: the definition text is replaced by the term “Atom” in a bold headline font, and the background colour changes from dark blue to dark green.

After the second call, isRevealed is changed back from true to false. SwiftUI re-renders the button again: the term is replaced by the definition in a smaller subheadline font, and the background colour returns to dark blue. The button is now in the same visual state it was in before the first tap.