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?

Question

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"
)
}
)
)

Selvakumar Kumarasamy · Answer

Hi vikashk739 , 
 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"
 )
 }
 )
 )
)

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?

Top Replies