Author: Yuying Fan

Please leave feedback by posting on Ed or contacting the course staff.

Required Software: macOS Ventura, Xcode 15

Deadline: Thursday, 10/10 @ 11:59 PM

This assignment does not have any starter code -- you'll be creating your own project from scratch.

Introduction

In this assignment, you will create a trivia game application using SwiftUI. This project will consolidate your understanding of UI components, state management, navigation, and app design by applying them to a real-world interactive application. We have laid out some basic requirements and a high-level guide to get you started, but the design and implementation are up to you. Pick your favorite trivia topic and have fun!

Requirements

Your app should have at least three screens:

• Welcome Screen: Title, instructions, and a start button.
• Question Screen: Display the current question and the answer options.
• Score Screen: Show final score, a restart button, and a button to navigate back to the Welcome Screen.

Your game should have at least 5 questions, each with question text, an image, and 4 answer options. (The image can be an SF Symbols icon if you'd like.) The game should track the user's score as they progress through the questions (the exact scoring system is up to you, so long as each question affects it).

You should use the Model-View-ViewModel (MVVM) architecture to separate the game logic from the UI:

• Model: You should have a Question model that represents a single question.
• ViewModel: You should have a QuizViewModel that manages the game state.
• View: Multiple views that make up an interactive game UI.

You should also use these SwiftUI features:

• An ObservableObject for the view model (or @Observable)
• @Binding to pass simple data between views
• NavigationStack and NavigationLink for screen transitions

The above are simply some minimum requirements for us to grade your game. We encourage you to add more features and polish your game as much as you like!

Grading

This assignment is out of 100 points, with the following breakdown:

Screens (40 points)

Welcome Screen (5 points)

Note: The Welcome Screen can be split into two screens if you choose to have a separate instructions screen.

• Includes a title (1 point)
• Includes instructions (1 point)
• Includes a functional start button that navigates to the Question Screen (3 points)

Question Screen (25 points)

• Displays the current question's text, image, and answers (7 points)
• Allows user to select an answer (3 points)
• Correctly tracks the user's score (5 points)
• Moves to the next question after an answer is selected (5 points)
• Moves to the Score Screen after the last question (5 points)

Score Screen (10 points)

• Correctly displays the final score (1 point)
• Functional button to restart the game (3 points)
• Button resets the score and any related game state (2 points)
• Functional button to navigate back to the Welcome Screen (4 points)

Components & Layout (15 points)

• Effective use of Text, Image, Button, and layout components across all screens (3 points each, 12 points total)
• Consistent and appealing use of modifiers for styling, such as padding, colors, and font sizes (3 points)

State Management (20 points)

• Proper use of @Binding to pass data to a child or sibling view (5 points)

If you're using ObservableObject:

• Effective implementation of an ObservableObject for managing the game state, with @Published properties (10 points)
• Correct use of @StateObject and/or @ObservedObject (or @EnvironmentObject) in views to observe the game state changes (5 points)

If you're using @Observable:

• Effective implementation of an @Observable object for managing the game state (10 points)
• Correct use of @State or @Environment in views to observe the game state changes (5 points)

Navigation (5 points)

• Correct implementation of NavigationStack for smooth screen transitions (5 points)

Architecture (15 points)

• Model: Well-structured Question model representing each question (5 points)
• View Model: Robust QuizViewModel managing game logic and state, with appropriate encapsulation of game logic and separation of concerns (10 points)

Style (5 points)

• Code is readable and fits the code style guide (5 points)

Deductions

• Xcode project contains a broken file reference preventing compilation (-5 points)
• App crashes on launch (-10 points)
• App does not compile (-20 points)

Extra Credits

• Animations/Transitions (+2): Add at least two animations/transitions to your app to make it more interactive and engaging. For example, you can add a fade-in transition when the user navigates to the next question, or a shake animation when the user selects the wrong answer.
• Sound Effects (+2): Add sound effects to your app to make it more immersive. For example, you can play a "correct" sound when the user selects the right answer, or a "wrong" sound when they select the wrong answer.
• Advanced UI (+2): Explore at least one UI component not covered in class and incorporate it into your app. For example, a Picker to select the difficulty level of the quiz, or a Slider to adjust the volume of the sound effects.
• Timer (+5): Add a timer to your game to limit the time the user has to answer each question. When the timer runs out, the game should automatically move to the next question.

Instructions

The exact implementation is up to you, and we in fact recommend you take some time to sketch out how you personally might want to structure your app on paper or a whiteboard. This will help you more easily reason about your code later on.

We've provided a basic guide to get you started, but feel free to disregard it entirely:

View Guide →

Submission

To submit your homework, zip (or tar.gz) of your entire XCode project folder and upload it to Gradescope. Make sure that you've given the requirements another read before you do so.

Submit on Gradescope →