Hello,

I was wondering if anyone could please help me..

I've manged to do the challenges for this and added my own extra animations to it, however the only problem I now seem to be facing is that the correct flag ALWAYS appears in the same place in the ForEach loop and my brain just doesn't have a clue ! I'm just over a month in to learning how to code so sorry it's probably something blindingly obvious but any help would be massively appreciated!

Here's my code:

import SwiftUI
​
//MARK: FLAGSTYLE
​
struct flagStyle: ViewModifier {

    func body (content:Content) -> some View {

        content

            .clipShape(Capsule())
            .overlay(Capsule().stroke(Color.white, lineWidth: 3))
            .shadow(color: .black, radius: 5)

    }
}
extension View {
    func flagCapsule() -> some View{
        self.modifier(flagStyle())
    }
}
//MARK: CONTENT
​
struct ContentView: View {

    //Properties
    @State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Monaco", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()

    @State private var correctAnswer = Int.random(in: 0...2)
    @State private var userScore = 0
    @State private var num1 = 0
    @State private var rotateflag = false
    @State private var showingScore = false
    @State private var scoreTitle = ""
    @State var animationAmount:Double = 0
    @State var scaleAmount: CGFloat = 1

    var body: some View {
        //View
        ZStack {
            LinearGradient(gradient: 
            Gradient(colors: !rotateflag ? [Color.blue, Color.black] : [Color.yellow, Color.yellow]), 
            startPoint: .top, endPoint: .bottom).ignoresSafeArea().animation(.easeIn)

            VStack (spacing: 30){

                Spacer()
                Group {
                    Text("Tap the flag of:").font(.title).underline()
                    Text(countries[correctAnswer]).font(.largeTitle).bold()
                }.foregroundColor(.white)

                //MARK: FLAGS

                ForEach(0..<3){number in

                    Button(action: {

                        if rotateflag
                        {return}

                        isTapped(number: number)
                        num1 = number
                        withAnimation((number == correctAnswer && rotateflag) ? .easeInOut: nil)
                            {animationAmount += 360}
                        withAnimation(.easeInOut(duration: 0.5))
                        {self.showingScore = true}

                    }, label: {
                        Image(self.countries[number])
                            .flagCapsule()
                            .opacity((number != correctAnswer && showingScore) ? 0.25 : 1)
                            .overlay(Color((number != correctAnswer && showingScore) ? .black: .clear).clipShape(Capsule()).opacity(0.25))
                            .animation(.easeInOut(duration: 0.5))
                            .rotation3DEffect(
                                .degrees((number == correctAnswer) && rotateflag ? animationAmount : 0),
                                axis: (x: 0.0, y: 1, z: 0))
                            .scaleEffect((number == correctAnswer && showingScore) ? (scaleAmount + 0.3) : scaleAmount)
                    })
                }
                //MARK: ALERT RESULT

                if showingScore {

                    VStack(spacing: 10){
                        Text(rotateflag ? "Correct! That's the flag of \(countries[num1])!" 
                        : "\(scoreTitle) THIS is the flag of \(countries[correctAnswer])!" )
                            .bold()

                        Button("OK!"){
                            withAnimation(.easeInOut(duration: 0.5)){
                                countries.shuffle()
                                self.showingScore = false
                                self.rotateflag = false
                            }}
                            .padding(.horizontal)
                            .foregroundColor(.white)
                            .overlay(Capsule().stroke(Color.white, lineWidth: 1).opacity(0.8))
                    }
                    .padding()
                    .foregroundColor(rotateflag ? .white : .red)
                    .background(Color.white.opacity(0.1))
                    .flagCapsule()
                    .transition(.scale)

                }
                // MARK: SCORE
                Group {
                    Text("Player Score:").font(.title)
                    Text("\(userScore)").font(.largeTitle).bold()
                }.foregroundColor(.white)

                Spacer()
            }
        }
    }

    //MARK: METHODS

    //Flag Tapped
    func isTapped (number: Int) {
        if number == correctAnswer{
            scoreTitle = "Correct!"
            userScore += 1
            rotateflag = true
        } else{
            scoreTitle = "Wrong!"
            rotateflag = false
        }
    }
}

​

Wow I am majorly kicking myself for this one I knew it would've been something simple like that haha!

It works now! THANK YOU SO MUCH! I really appreciate it!