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

Good day I’m make a SignDict add new characteristic for studying ASL and JSL. Nevertheless, I’m studying Widget proper now. I resist to make use of AI the coding as a result of it will not assist.

Nevertheless I must learn to use interactive widget. So how I can I make tapped and subsequent query?

Array restored completely different of information identify "Dictionary"

import SwiftUI

struct HeaderData: Identifiable {
    let id = UUID()
    let title: String
    let shade: Coloration
}

struct ListOfLanguage: Identifiable, Hashable {
    var id = UUID()
    var headerTitle: String = ""
    var hiraganaText: String = ""
    // this backside 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 merchandise: ListOfLanguage
    let isJapanese: Bool
}

enum LanguageViewType { case EN, JP }

struct SignData {
    static let listing: [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’s time to create a brand new widget helps in goal.

Understood the Widget design and work means?

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

    }
    
    if let vary = full.vary(of: " in ASL?") {
        full[range].font = .system(measurement: 15, weight: .common)
        full[range].foregroundColor = .grey
    }
    
    return full
}


struct QuizWidgetView_JP: View {
    
    var physique: some View {
        
        VStack(spacing: 5) {
            
            // TOP
            HStack {
                Textual content("🇯🇵") // or Picture("JapanFlag")
                Textual content(styledQuestion)
                    .lineLimit(1)
                    .minimumScaleFactor(0.7)
                
                Spacer()
                
          
                Picture("Emblem") // "SignDict Emblem"
                    .resizable()
                    .body(width: 23, top: 23)
            }
            .padding(.high, -3)
            
            // BOTTOM
            HStack(alignment: .high, spacing: 10) {
                
                ZStack {
                    Picture("BG") // Background of picture
                        .resizable()
                        .scaledToFill()
                        .clipShape(RoundedRectangle(cornerRadius: 17))
                    
                    Picture("("jaImage")") // use jaImage to fetch from array picture
                        .resizable()
                        .scaledToFit()
                        .padding(10)
                }
                .aspectRatio(1, contentMode: .match)
                .padding(.main, -5)
                
                VStack(spacing: 8) {
                    // combined of Array of kanjiText, 2 Unsuitable and one kanjiText is appropriate to match tojaImage
                    QuizButton(title: "Meet")
                    QuizButton(title: "Eat")
                    QuizButton(title: "Love")
                }
            }
        }
        .body(maxHeight: .infinity, alignment: .middle)
        
        .containerBackground(for: .widget) {
            Coloration.clear
        }
        .contentMargins(.all, 6)
    }
}

// MARK: - Button
struct QuizButton: View {
    let title: String
    
    var physique: some View {
        Textual content(title)
            .font(.system(measurement: 13, weight: .semibold)) // 👈 stronger textual content
            .body(maxWidth: .infinity)
            .body(top: 32) // 👈 THIS is the important thing (larger faucet space)
            .background(
                RoundedRectangle(cornerRadius: 10)
                    .fill(Coloration.grey.opacity(0.18)) // 👈 extra seen
            )
    }
}

Widget Design outcomes: I put my code is for Japan Widget, however i simply present you two completely different of instance design between English and Japanese quiz UI for widget

Right here is my query:

How can I make it in order that after I faucet a button, the proper reply turns inexperienced, and if it’s mistaken, it turns pink whereas exhibiting the proper kanji in inexperienced, then routinely strikes to the subsequent quiz from array accessible?

That is inconceivable or attainable in SwiftUI to make quiz widget?