swiftui – How I make quiz in interactive widget for iOS 17 +?

Hello I am make a SignDict add new feature for learning ASL and JSL. However, I am learning Widget right now. I resist to use AI the coding because it won’t help.

However I need to learn how to use interactive widget. So how I can I make tapped and next question?

Array restored different of files name “Dictionary“

import SwiftUI

struct HeaderData: Identifiable {
    let id = UUID()
    let title: String
    let color: Color
}

struct ListOfLanguage: Identifiable, Hashable {
    var id = UUID()
    var headerTitle: String = ""
    var hiraganaText: String = ""
    // this bottom is for quiz widget
    var kanjiText: String = "" // Use for quiz
    var jaImage: String = "" // JSL
    var engTitle: String = "" // Use for quiz
    var engImage: String = "" // ASL
}

struct SelectedDetailItem {
    let item: ListOfLanguage
    let isJapanese: Bool
}

enum LanguageViewType { case EN, JP }

struct SignData {
    static let list: [ListOfLanguage] = [
        
        // MARK: A
        ListOfLanguage(headerTitle: "あ", hiraganaText: "あいすくりーむ", kanjiText: "アイスクリーム", jaImage: "あいすくりーむ", engTitle: "Ice Cream", engImage: "Ice Cream"),
        ListOfLanguage(headerTitle: "あ", hiraganaText: "あい", kanjiText: "愛", jaImage: "あい", engTitle: "Love", engImage: "Love"),
              
    ]
    
}

Okay I created the array. it is time to create a new widget supports in target.

Understood the Widget design and work means?

// Japanese Widget
var styledQuestion: AttributedString {
    var full = AttributedString("How do you sign \("kanjiText") in ASL?")
    // use kanjiText to fetch from array
    
    if let range = full.range(of: "How do you sign ") {
        full[range].font = .system(size: 15, weight: .regular)
        full[range].foregroundColor = .gray
    }
    
    if let range = full.range(of: "\("kanjiText")") {
        full[range].font = .system(size: 17, weight: .semibold)

    }
    
    if let range = full.range(of: " in ASL?") {
        full[range].font = .system(size: 15, weight: .regular)
        full[range].foregroundColor = .gray
    }
    
    return full
}


struct QuizWidgetView_JP: View {
    
    var body: some View {
        
        VStack(spacing: 5) {
            
            // TOP
            HStack {
                Text("🇯🇵") // or Image("JapanFlag")
                Text(styledQuestion)
                    .lineLimit(1)
                    .minimumScaleFactor(0.7)
                
                Spacer()
                
          
                Image("Logo") // "SignDict Logo"
                    .resizable()
                    .frame(width: 23, height: 23)
            }
            .padding(.top, -3)
            
            // BOTTOM
            HStack(alignment: .top, spacing: 10) {
                
                ZStack {
                    Image("BG") // Background of image
                        .resizable()
                        .scaledToFill()
                        .clipShape(RoundedRectangle(cornerRadius: 17))
                    
                    Image("\("jaImage")") // use jaImage to fetch from array image
                        .resizable()
                        .scaledToFit()
                        .padding(10)
                }
                .aspectRatio(1, contentMode: .fit)
                .padding(.leading, -5)
                
                VStack(spacing: 8) {
                    // mixed of Array of kanjiText, 2 Wrong and one kanjiText is correct to match tojaImage
                    QuizButton(title: "Meet")
                    QuizButton(title: "Eat")
                    QuizButton(title: "Love")
                }
            }
        }
        .frame(maxHeight: .infinity, alignment: .center)
        
        .containerBackground(for: .widget) {
            Color.clear
        }
        .contentMargins(.all, 6)
    }
}

// MARK: - Button
struct QuizButton: View {
    let title: String
    
    var body: some View {
        Text(title)
            .font(.system(size: 13, weight: .semibold)) // 👈 stronger text
            .frame(maxWidth: .infinity)
            .frame(height: 32) // 👈 THIS is the key (bigger tap area)
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .fill(Color.gray.opacity(0.18)) // 👈 more visible
            )
    }
}

Widget Design results: I put my code is for Japan Widget, but i just show you two different of example design between English and Japanese quiz UI for widget

Here is my question:

How can I make it so that when I tap a button, the correct answer turns green, and if it’s wrong, it turns red while showing the correct kanji in green, then automatically moves to the next quiz from array available?

That’s impossible or possible in SwiftUI to make quiz widget?