I am using JSON data and using it to create HTML data that represents Question and MCQ. I have been able to load the data in HTML but now I want to capture the response of user in an array. I want to store which radio button user has checked after User presses the submit button.
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 Using materialize.css in my Code. My problem is after clicking the submit function nothing works.That is it goes into the function but doesn't checks if user has checked a radio button(I figured that it doesn't allows any jquery method to work.) But If I place my function in $(document).ready() method my function doesn't work but any single jQuery event placed in it will work.I am really confused please help me. Thanking you in advance.
