Home > OS >  Update the same view with the next item of a list
Update the same view with the next item of a list

Time:08-09

I'm creating a quiz app in Swift. Each quiz has an array of question, which are represented in a QuestionView. A "next" button should take to the same view "QuestionView", but with the next question of the array. But instead, the QuestionView always shows the same question.

Here's the QuestionView :

struct QuestionView: View {

var quiz: Quiz
var question: Question

@State private var isFinished = false
@State private var success = true

var body: some View {
    VStack(spacing: 40) {
        VStack {
            Text(quiz.name)
                .font(.title3)
                .bold()
            
            HStack(spacing: 20) {
                ProgressBar(progress: 250 / CGFloat(quiz.questions.count) * CGFloat(quiz.progress))
                Text("\(quiz.progress   1)/\(quiz.questions.count)")
                    .bold()
            }
        }
        
        Text(question.questionText)
            .font(.title)
            .fontWeight(.semibold)
            .frame(width: 300)
        
        Spacer()
        
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 160, maximum: 240))], spacing: 10) {
            ForEach(question.answers) { index in
                AnswerRow(answer: index)
                    .onTapGesture {
                        if index.isCorrect && success == true {
                            self.quiz.score  = 1
                            self.quiz.progress  = 1
                            isFinished = true
                        } else if index.isCorrect {
                            self.quiz.progress  = 1
                            isFinished = true
                        } else {
                            success = false
                        }
                    }
            }
        }
        
        NavigationLink {
            QuestionView(quiz: quiz, question: quiz.questions[quiz.progress])
        } label: {
            PrimaryButton(text: "Continuer")
        }
        //.disabled(!isFinished)

    }
    .padding(.vertical, 60)
    .navigationBarHidden(true)
}
}

Here's the Quiz model :

class Quiz: Identifiable {
let id = UUID()
let name: String
let illustration: String
let difficulty: Difficulty
let questions: [Question]
var score: Int
var progress: Int

init(name: String, illustration: String, difficulty: Difficulty, questions: [Question], score: Int, progress: Int) {
    self.name = name
    self.illustration = illustration
    self.difficulty = difficulty
    self.questions = questions
    self.score = score
    self.progress = progress
}
}

extension Quiz {
static let examples: [Quiz] = [
    Quiz(
        name: "Quiz n°1",
        illustration: "Picture1",
        difficulty: .easy,
        questions: Question.allQuestions1,
        score: 0,
        progress: 0
    ),
    
    Quiz(
        name: "Quiz n°2",
        illustration: "Picture2",
        difficulty: .intermediate,
        questions: Question.allQuestions2,
        score: 0,
        progress: 0
    ),
    
    Quiz(
        name: "Quiz n°3",
        illustration: "Picture3",
        difficulty: .advanced,
        questions: Question.allQuestions3,
        score: 0,
        progress: 0
    )
]
}

CodePudding user response:

Maybe you could try using an array of questions. [Question]

Something like this:

var questions = [Question(questionText: "Some text",
                          possibleAnswers: ["Option 1", "Option 2", "Option 3"]
                          correctAnswer: "Option 2"),

                 Question(questionText: "Some other text",
                          possibleAnswers: ["Option 1", "Option 2", "Option 3"]
                          correctAnswer: "Option 1")]

And have a question number variable that increases every time the user goes to the next question

Something like:

@State private var questionNumber = 0

Then, to display the questions one at a time:

// The actual question
Text(questions[questionNumber].questionText)

// All the possible answers
ForEach(questions[questionNumber].possibleAnswers, id: \.self) { answer in 
        // Some view that takes in a string (the answer) and display it
        Text(answer)
}

Now all is left to do is to increment the question number (questionNumber = 1). I belive in your case it will be done with a "Next" button:

Button("Next") {
    questionNumber  = 1
}

Hope this helps you!

Note

I haven't tested the above code, it's just to help you figure things out

  • Related