I have implemented a list to allow users to select their top 3 choices, and I am using JavaScript to track these selections and change the background color accordingly.
1st selection -> Green background
2nd selection -> Yellow background
3rd selection -> Red background
JavaScript:
events: {
'tap #achieveList li': "makeSelection"
},
makeSelection: function(e) {
var radioBtn = e.target;
var selected = this.el.getElementsByClassName('selected');
if (radioBtn) {
if (radioBtn.classList.contains('selected')) {
radioBtn.classList.remove('selected');
} else if (selected.length < 3) {
radioBtn.classList.add('selected');
}
this.monitorSelections(selected);
}
},
monitorSelections: function(selected) {
if (!selected) return;
var selection = [];
for (var i = 0; i < selected.length; i++) {
selection.push(selected[i].innerHTML);
};
ag.submit.data({
label: "This is top 3",
category: "User input",
value: selection.join(','),
valueType: "list",
path: app.getPath(),
unique: true
});
}
HTML:
<div class="interactive-block">
<ul id="achieveList">
<li>More engagements</li>
<li>Cost efficiencies</li>
<li>Better access</li>
<li>Higher customer value/satisfaction</li>
<li>Become more digital</li>
<li>Better customer insights</li>
</ul>
</div>