I am building a quiz like Interface. Out of four options one will be correct and when that is selected the color/that option should be highlighted. How can I store the response and refer in the interface?

A Score Level 1

a!formLayout(
label: "",
contents: {
a!sectionLayout(
contents: {
a!boxLayout(
label: "",
contents: {
a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: {
a!richTextItem(
text: {
"Q1. What is the capital of India?"
},
size: "LARGE",
style: {
"STRONG"
}
)
},
align: "LEFT"
)
},
style: "STANDARD",
marginBelow: "STANDARD"
)
}
),
a!sectionLayout(
label: "",
contents: {
a!cardLayout(
contents: {
a!cardLayout(
contents: {
a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!radioButtonField(
label: "",
labelPosition: "COLLAPSED",
choiceLabels: {
"Mumbai",
"Bengaluru"
},
choiceValues: {
True(),
false()
},
saveInto: {},
choiceLayout: "STACKED",
choiceStyle: "CARDS",
validations: {}
)
),
a!sideBySideItem(
item: a!radioButtonField(
label: "",
labelPosition: "ABOVE",
choiceLabels: {
"New Delhi",
"Chennai"
},
choiceValues: {
1,
2
},
saveInto: {},
choiceLayout: "STACKED",
choiceStyle: "CARDS",
validations: {}
)
)
}
)
},
height: "AUTO",
style: "NONE",
marginBelow: "NONE"
)
},
height: "AUTO",
style: "NONE",
marginBelow: "NONE"
)
}
)
},
buttons: a!buttonLayout(
primaryButtons: {
a!buttonWidget(
label: "Next",
submit: true,
style: "PRIMARY"
)
}
)
)

  Discussion posts and replies are publicly visible

  • Hi ,

    Please make use of the insert code option next time while pasting code.

    For storing the selected answer you can either use a local variable or a rule input. I'm just sharing a slightly modified version of your code by using local variables.

    a!localVariables(
      local!question: a!map(
        question: "Q1. What is the capital of India?",
        options: {
          "Mumbai",
          "Bengaluru",
          "New Delhi",
          "Chennai"
        },
        selectedAnswer: ""
      ),
      a!formLayout(
        label: "",
        contents: {
          a!forEach(
            items: local!question,
            expression: a!sectionLayout(
              contents: {
                a!boxLayout(
                  label: "",
                  contents: {
                    a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: fv!item.question,
                          size: "LARGE",
                          style: "STRONG"
                        )
                      },
                      align: "LEFT"
                    ),
                    a!richTextDisplayField(labelPosition: "COLLAPSED"),
                    a!cardLayout(
                      contents: {
                        a!forEach(
                          items: { 1, 2 },
                          expression: a!sideBySideLayout(
                            items: {
                              a!sideBySideItem(
                                item: a!radioButtonField(
                                  label: "",
                                  labelPosition: "COLLAPSED",
                                  choiceLabels: local!question.options[(fv!index * 2) - 1],
                                  choiceValues: local!question.options[(fv!index * 2) - 1],
                                  value: if(
                                    local!question.options[(fv!index * 2) - 1] = local!question.selectedAnswer,
                                    local!question.selectedAnswer,
                                    null()
                                  ),
                                  saveInto: {
                                    a!save(
                                      local!question.selectedAnswer,
                                      save!value
                                    )
                                  },
                                  choiceLayout: "STACKED",
                                  choiceStyle: "CARDS",
                                  validations: {}
                                )
                              ),
                              a!sideBySideItem(
                                item: a!radioButtonField(
                                  label: "",
                                  labelPosition: "COLLAPSED",
                                  choiceLabels: local!question.options[(fv!index * 2)],
                                  choiceValues: local!question.options[(fv!index * 2)],
                                  value: if(
                                    local!question.options[fv!index * 2] = local!question.selectedAnswer,
                                    local!question.selectedAnswer,
                                    null()
                                  ),
                                  saveInto: {
                                    a!save(
                                      local!question.selectedAnswer,
                                      save!value
                                    )
                                  },
                                  choiceLayout: "STACKED",
                                  choiceStyle: "CARDS",
                                  validations: {}
                                )
                              )
                            }
                          )
                        )
                      },
                      height: "AUTO",
                      style: "NONE",
                      marginBelow: "NONE"
                    )
                  },
                  style: "STANDARD",
                  marginBelow: "STANDARD"
                )
              }
            )
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: {
            a!buttonWidget(
              label: "Next",
              submit: true,
              style: "PRIMARY"
            )
          }
        )
      )
    )