M5L10 question why index == selectedAnswerIndex

General Discussion
1

Anyone can explain this code for me? Thanks

ForEach (0..<model.currentQuestion!.answers.count, id: \.self) { index in
                            
                            Button {
                                // Track the selected index
                                selectedAnswerIndex = index
                                
                            } label: {
                                
                                ZStack {
                                
                                    if submitted == false {
                                        RectangleCard(color: index == selectedAnswerIndex ? .gray : .white )
                                            .frame(height: 48)
                                    }

I don’t understand why I need to do index == selectedAnswerIndex

2

Do you mean in this code?

RectangleCard(color: index == selectedAnswerIndex ? .gray : .white )

The reason is that the code you are looking at is a ternary operator decision making process.

It’s like an if, then, else statement on one line.

if condition then
    do this
else 
    do that

Looking at the statement in detail, the if is:

index == selectedAnswerIndex ?

the then is .gray

the else is the colon : .white

So putting that all together:

Screenshot 2023-09-19 at 19.19.24
Screenshot 2023-09-19 at 19.19.24940×284 22.1 KB

I hope that helps you understand what a ternary operator is.

3

My question is

why you need to check, index == selectedAnswerIndex

Thanks

4

If you are referring to this line of code:

RectangleCard(color: index == selectedAnswerIndex ? .gray : .white )

then the answer is that it determines the color applied to the foreground of the Rectangle.

5

what is the interaction of this code?
selectedAnswerIndex = index
index == selectedAnswerIndex

6

Chris Ching explains that starting at timestamp 3:50 in the lesson.

If you are not understanding that then I recommend you go back and watch that lesson again.

Each question generally has 4 possible answers and only one of them is correct. The first thing the user does is choose which answer they think is correct and when that occurs the code stores that as the selectedIndex. It then redraws the view and goes through the array of questions and changes the style of each question to reflect which one the user has selected. It sets the foreground color for the one that is selected to gray because in that case the index is in fact the same as the selectedIndex and the others to white because in each of those cases, the index is not the same as the selectedIndex.

7

The first one selectedAnswerIndex = index is what we call an assignment statement.

Basically it translates into English as:
“Assign the value of index to selectedAnswerIndex”

If the index has a value of 5 then it will assign the value 5 to selectedAnswerIndex.

The second one index == selectedAnswerIndex means you’re comparing both values for equality.

In plain English, we can say that this statement is a question and it means:
“Is the value of index equal to the value of selectedAnswerIndex?”

The only answer to this question is either true or false.

Let’s say that both index and selectedAnswerIndex have a value of 5, then the answer to this question is true.

If they have different values, then the answer to that question is false.

Going back to the code:

RectangleCard(color: index == selectedAnswerIndex ? .gray : .white )
                                            .frame(height: 48)

We can read this in plain English as:
"Show a RectangleCard here for each possible answer to the question above, and its colour depends on whether it is the selected answer or not. If it is the selected answer, show a RactangleCard with a gray colour; otherwise, show a RectangleCard with a white colour.

If you need to know what the code does when broken down into smaller parts, I would suggest you read @Chris_Parker answer above, as he did a very good job explaining what a ternary operator does.

Hope that helps!

1 Like
8

Thanks