Utilizing JSON data, I have successfully generated HTML content representing Questions and Multiple Choice Questions. My next goal is to capture user responses in an array after the submit button is clicked. This involves storing which radio button the user has selected.
var obj = JSON.parse(
'{"single": [{"id": 1,"question": "this is a question1?","option": ["option1","option2","option3","option4"]},{"id": 2,"question": "this is a question2?","option": ["option1","option2","option3","option4"]},{"id": 3,"question": "this is a question3?","option": ["option1","option2","option3","option4"]},{"id": 4,"question": "this is a question4?","option": ["optionu1","optionu2","optionu3","optionu4"]}],"multiple": [{"id": 1,"question": "this is a multiple question1?","option": ["optionm1","option2lj","option3","option4"]},{"id": 2,"question": "this is a multiple question2?","option": ["optionm1","option2j","option3","option4"]},{"id": 3,"question": "this is a multiple question3?","option": ["optionm1","option2gg","option3","option4"]},{"id": 4,"question": "this is a multiple question4?","option": ["optionm1","option2h","option3","option4"]}],"integer": [{"id": 1,"question": "this is a int question1?"},{"id": 2,"question": "this is a int question2?"},{"id": 3,"question": "this is a int question3?"},{"id": 4,"question": "this is a int question4?"}]}'
);
var s = [0, 0]; //only single correct;
var t = []; //only multiple choice
var u = []; //only numeric type
$(document).ready(function() {
});
function my(check, sub, err) {
console.log(check + " " + sub + " " + err);
var f = 0;
if (document.getElementById("test" + check - 3).checked) {
f = 1;
s[0] = 1;
} else if (document.getElementById("test" + check - 2).checked) {
f = 1;
s[0] = 2;
} else if (document.getElementById("test" + check - 1).checked) {
f = 1;
s[0] = 3;
} else if (document.getElementById("test" + check).checked) {
f = 1;
s[0] = 4;
} else {
$("#error" + err).show();
}
if(f===1){
document.getElementById("submit" + sub).disabled = true;
$("#error"+err)
.show()
.text("Your answer has been successfully submitted.");
}
}
function read() {
var pages = obj.single;
var x = 4; //for tests and creating new ID's
var sub = 1; //for submission
var err = 1; //for errors
pages.forEach(function(page) {
var test =
"<div class='row'>" +
"<div class='col s12 m12'>" +
"<div class='card teal accent-1 hoverable' id='car'>" +
"<div class='card-content center-align'>" +
"<span class='card-title'>" +
"Question " +
page.id +
"</span>" +
"<form action='#'>" +
"<p>" +
page.question +
"</p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 3) +
"'/>" +
"<label for='test" +
(x - 3) +
"'>" +
page.option[0] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 2) +
"'/>" +
"<label for='test" +
(x - 2) +
"'>" +
page.option[1] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
(x - 1) +
"'/>" +
"<label for='test" +
(x - 1) +
"'>" +
page.option[2] +
"</label></p>" +
"<p><input name='group1' type='radio' id='test" +
x +
"'/>" +
"<label for='test" +
x +
"'>" +
page.option[3] +
"</label></p>" +
"</form>" +
"<h6 id='error" +
err +
"'>Please select an option</h6>" +
"</div>" +
"<div class='card-action center'>" +
"<button class='btn' onclick='my(" +
x +
"," +
sub +
"," +
err +
")' id='submit" +
sub +
"'>Submit</button>" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
$(".container").append(test);
console.log(test);
x += 4;
sub++;
err++;
});
}
read();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>I am also implementing materialize.css in my project. However, I am encountering an issue where the submit function does not work as expected. It seems that the function executes but fails to verify whether the user has selected a radio button (possibly due to restrictions on jQuery methods). Placing the function inside $(document).ready() resolves this issue, but then the function itself stops working while other jQuery events within it function properly. This puzzling behavior has left me confused and seeking assistance. Any help would be greatly appreciated.