I am making an online quiz application in which multiple choice questions are there. So I want to make if user has selected an option mistakenly, and now he/she want to change his/her option and selected another option. So how should I do that?
Below is my HTML for radio buttons:
<input class="form-check-input ans-radio" type="radio" name="option" id="exampleRadios1" value="1" onclick="selectedOpt();">
<label class="form-check-label ans-label" for="exampleRadios1" id="label1">Option A</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios2" value="2" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios2" id="label2">Option B</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios3" value="3" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios3" id="label3">Option C</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios4" value="4" onclick="selectedOpt();">
<label class="form-check-label" for="exampleRadios4" id="label4">Option D</label>
Below is my JavaScript function to handle user clicked option:
function selectedOpt(){
var selectedOption = [], selectedQuestion = [];
var useroptions = "", questionid = "";
$('[name="option"]').each(function(i,e){
if($(e).is(':checked')){
selectedOption.push(e.value);
}
});
document.querySelectorAll('input[name="question"]').forEach(function(elem){
selectedQuestion.push(elem.value);
});
useroptions = selectedOption.join();
questionid = selectedQuestion.join();
console.log("user options || "+useroptions);
console.log("question id || "+questionid);
}
Above function is storing user options in an array. So if a user has selected Option A and again selected Option A then in an array two similiar options get added and if user has changed option then that option also get added in Array. So by this, his/her total score and result may get affected. I want that if user has changed his option then previous option should be removed and new option should get added in array.
This is a very crude state management system: it's flexible enough to define your own functions when updating the selectedOption array: you can push any number of items in there, make them unique or have a function that actually removes the last selected and adds the new one. It can also handle any number of options.
const rBtns = document.querySelectorAll(".form-check-input")
const initState = () => {
let _selectedOption = []
return {
get selectedOption() {
return _selectedOption
},
set selectedOption(val) {
_selectedOption = val
},
}
}
const initActions = (state) => ({
addToSelected(payload) {
state.selectedOption = [...state.selectedOption, payload]
},
ensureLatest(fn) {
return (payload) => {
// ensures that the last item in the selectedOption is always
// the latest option selected
state.selectedOption = state.selectedOption.filter(e => e !== payload)
fn(payload)
}
},
addToSelectedUniq(payload) {
this.ensureLatest(this.addToSelected)(payload)
state.selectedOption = [...new Set(state.selectedOption)]
},
removeLastSelectedOption() {
state.selectedOption.pop()
}
})
const state = initState()
const actions = initActions(state)
// this function ensures that the previous choice is removed if
// a new one is picked; also ensures that the same value cannot
// be in the array twice (actually not needed, if the last is
// always removed)
const onSelect = (e) => {
actions.removeLastSelectedOption()
actions.addToSelectedUniq(e.target.value)
console.log(state)
}
rBtns.forEach(rBtn => {
rBtn.addEventListener('change', onSelect)
})<input class="form-check-input ans-radio" type="radio" name="option" id="exampleRadios1" value="1">
<label class="form-check-label ans-label" for="exampleRadios1" id="label1">Option A</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios2" value="2">
<label class="form-check-label" for="exampleRadios2" id="label2">Option B</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios3" value="3">
<label class="form-check-label" for="exampleRadios3" id="label3">Option C</label>
<input class="form-check-input" type="radio" name="option" id="exampleRadios4" value="4">
<label class="form-check-label" for="exampleRadios4" id="label4">Option D</label>