Below are some steps to help you get started with HW2: Trivia Game. You are encouraged to deviate from these steps and add your own features, as long as you still satisfy the requirements listed in the assignment.

Step 1: Design Your App

1. Choose Your Topic: Pick a topic for your trivia game. This could be something broad like "World History" or more niche like "Penn CIS Faculties." Consider your interests or areas where you have special knowledge.
2. Sketch Your Screens: Draw the layout of your main screens (Welcome and Game screens) on paper or Figma (we'll talk about this more in our App Design week). Identify how you'll satisfy each of the requirements.
3. Plan Your Game Logic: Think about how the game will flow from one question to the next, how you'll store the questions and answers, and how the score will be calculated.
4. Storyboard Your Navigation: Plan how users will move from one screen to another. Will instructions appear as a separate screen? How will users get from the last question to the Welcome Screen?

Step 2: Set Up Your Project

1. Create a New SwiftUI Project:
   • Open Xcode and select "Create New Project..."
   • Select the iOS App template and fill in your project details. Make sure to select SwiftUI as the interface.
   • Choose a location to save your project in and create it.
2. Organize Your Files:
   • Create groups (File > New > Group) for your Views, Models, and ViewModels.
   • Inside the Views group, create new SwiftUI View files for your WelcomeView and GameView.
   • In the Models group, create a new Swift file for your Question data model.
   • In the ViewModels group, create a new Swift file for your QuizViewModel, which will manage the state of your quiz. This class is likely labelled with @Observable.

Step 3: Define Your Data Model

• Define a Question struct that represents a single question in your trivia game. It should have properties for the question text, question image, answer options, and the correct answer.

• Here's an example of what your Question struct might look like:

  struct Question {
    var text: String // The question text
    var imageName: String // Name of the local image file associated with the question
    var answers: [String] // The possible answers
    var correctAnswer: String // The correct answer
  }
  

Step 4: Create the UI

We now proceed to create the UI for the two main screens of your trivia game: the Welcome Screen and then Game Screen. Use dummy data for now to test your UI components.

1. Develop the Welcome Screen:

   • Layout: Use a VStack to vertically stack your Text and Button elements. This will be your welcome message and the button to start the game.
   • Text Elements: Create Text views for your game's title and brief instructions. Apply font modifiers to adjust the size and weight to make them stand out.
   • Highscore: Add a Text field to display the highscore value.
   • Start Button: Implement a Button that says "Start Quiz" or similar. Use this button to navigate to the Game Screen. Style the button with padding, background, and font modifiers to make it visually appealing.

2. Set Up Navigation:

   • NavigationStack: Wrap your Welcome Screen view in a NavigationStack. This enables navigation between screens in your app.
   • NavigationLink: Within your VStack on the Welcome Screen, add a NavigationLink that leads to the Game Screen. The destination should be your GameView. The NavigationLink should be the Start Button, providing a seamless transition to the quiz. Alternatively, you can push to a NavigationPath from a Button.

3. Design the Game Screen:

   • Question and Answers Layout: Use any single or combination of VStack, HStack, or ZStack to lay out your question and answer options. The question should be at the top, followed by the answer options listed below. Use a List to display the answer options.
   • Displaying Questions and Answers: Use Text views for displaying the question and each answer option. Ensure the text is legible and well-spaced for easy readability.
   • Answer Buttons: Convert each answer option into a Button. These buttons should have action handlers that determine what happens when an answer is selected (e.g., display the correct answer, update the score, move to the next question).
   • Display Score: Use a Text view to display the player's score somewhere on the screen.
   • Restart and Home Buttons: When done, either automatically go to the Welcome Screen, or provide some Button components for restarting the game or returning to the Welcome Screen.
   • Styling: Apply modifiers to your Text and Button components to align with your app's design theme.

4. Finish Basic Navigation:

   • Ensure your NavigationLinks are properly set up to move between the Welcome and Game Screens (going both ways). Test the flow to make sure buttons take you to the correct screens.

Step 5: Implement Game Logic and State Management

1. Set Up Your ViewModel:

   • Without diving deep into the logic, draft the structure of your QuizViewModel class. This class will manage the game state and logic, including the current question, selected answer, score, and highscore.
   • Initialize your QuizViewModel as @State in your main game view (typically the first screen of your game, such as the Welcome Screen). This ensures the state is retained throughout the lifecycle of the view.
   • Here is an example of what your QuizViewModel might look like:

   import Foundation
   import SwiftUI
   
   @Observable
   class QuizViewModel {
     // MARK: - Properties
     var questions: [Question] = [] // Array to store questions
     var currentQuestionIndex: Int = 0 // Index of the current question
     var selectedAnswer: String? = nil // The user's selected answer
     var score: Int = 0 // The user's score
     var highscore: Int = 0 // The user's highscore
     var quizFinished: Bool = false // Flag to determine if the quiz has finished
   
     // MARK: - Initialization
     init() {
       loadQuestions() // Call to load questions into the array
     }
   
     // MARK: - Methods
   
     /// Initializes questions array with data.
     func loadQuestions() {
       // Hard-coded questions with local images
       self.questions = [
         // Add questions here. Example:
           // Question(text: "What is not a valid source of images in SwiftUI?",
           //          imageName: "swift-image",
           //          answers: ["System Icon", "Image Name", "URL", "Doodle on My Desk"],
           //          correctAnswer: "Doodle on my desk")
       ]
     }
   
     /// Processes the selected answer, updates the score and advances to the next question.
     func submitAnswer() {
       // Functionality to be implemented: check the selected answer, update score, move to next question or finish quiz.
     }
   
     /// Resets the quiz to its initial state for a new game.
     func resetQuiz() {
       // Functionality to be implemented: reset current question index, score, and quiz finished status; reload questions.
     }
   }
   

2. Implement the Quiz Logic:

   • Load Questions: In your QuizViewModel, write a method to load questions into your questions array. This can be from a static array for now, but you may revisit the app later in the course to replace it with a method that fetches questions from an API or database.
   • Answer Submission: Create a function in the ViewModel to handle answer submission. This function should compare the selected answer with the correct answer, update the score accordingly, and potentially advance to the next question.
   • Progress Tracking: Use the currentQuestionIndex to keep track of which question the user is on. This will help you fetch the current question from the questions array and display it on the Game Screen.
   • Score Calculation: Every time an answer is submitted, calculate the score based on whether the answer was correct. Keep track of the total score within a score property.
   • Highscore Calculation: When the game is reset, make sure to set the highscore properly.

3. Bind ViewModel to Views:

   • In the Question Screen, use the current question index from your ViewModel to display the question text and answer choices.
   • Set up answer buttons in such a way that when clicked, they update the ViewModel's selectedAnswer and call the method to submit the answer.
   • Display the current score and question number in your UI, updating them as the game progresses.

4. Handle Game Completion:

   • The game should end when all questions have been answered. In your ViewModel, you can check if the currentQuestionIndex is equal to the length of your questions array minus one.
   • When the game ends, update a quizFinished boolean flag in your ViewModel to true (and the highscore!).
   • React to the quizFinished state in your views to navigate the user to the Welcome Screen when all questions have been answered (or to a separate Score Screen if you wish).

5. Resetting the Game:

   • In your QuizViewModel, implement a resetQuiz method that resets the currentQuestionIndex, score, and quizFinished status, and reloads the questions. This allows the user to start a new game once they have finished.
   • Make the "Restart" button in your Score Screen call this resetQuiz method to allow users to play again from the beginning without having to restart the app.

Step 6: Test and Debug

• As you implement the logic, test each functionality separately and together to ensure they work as expected.
• Click through your app to make sure the navigation works as expected.
• Check for common pitfalls like off-by-one errors, incorrect state updates, or UI elements not reacting to state changes.
• Use Xcode's debugger and print statements to help identify and fix issues.