'How to display list of questions fetched from database into HTML using Ajax and JavaScript?
I am working on school management system and using Spring Boot framework. I want to display all questions list when student click on start test button and would be able to see all questions and their options. I want to display question one by one in div container and when student clicks on next button then next question would be displayed. I want to display submit button when student reaches last question. And then when student clicks on submit button then his marked answers would get passed to spring rest controller to evaluate his overall score.
Below JavaScript function is to fetch all question from DB.
function gettest(){
var url = "api/gettest";
$.post(url, {
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1){
questiondata = data.response;
var questionList = "";
var listLength = questiondata.length;
if(listLength > 0){
for(var quesnum = 0; quesnum < 1; quesnum++){
optionc = questiondata[quesnum].optC;
optiond = questiondata[quesnum].optD;
optione = questiondata[quesnum].optE;
optionf = questiondata[quesnum].optF;
questionList = questionList + "<div class='question-head'>"
+"<input type='hidden' name='question' value='"+questiondata[quesnum].questionid+"'>"
+"<input type='hidden' id='corectans' value='"+questiondata[quesnum].answer+"'>"
+"<h6 id='question-title'>"+questiondata[quesnum].question+"</h6></div><div class='question-ans-wrap'><div class='ans-1' id='ans-div-opta'>"
+"<div class='form-check'>"
+"<input class='form-check-input ans-radio' type='radio' name='option_"+quesnum+"' id='exampleRadios1' value='"+questiondata[quesnum].optA+"' >"
+"<label class='form-check-label ans-label' for='exampleRadios1' id='label1'>"+questiondata[quesnum].optA+"</label></div></div>"
+"<div class='ans-1' id='ans-div-optb'>"
+"<div class='form-check'>"
+"<input class='form-check-input' type='radio' name='option_"+quesnum+"' id='exampleRadios2' value='"+questiondata[quesnum].optB+"' >"
+"<label class='form-check-label' for='exampleRadios2' id='label2'>"+questiondata[quesnum].optB+"</label></div></div>"
+"<div class='ans-1' id='ans-div-optc'>"
+"<div class='form-check'>"
+"<input class='form-check-input' type='radio' name='option_"+quesnum+"' id='exampleRadios3' value='"+optionc+"' >"
+"<label class='form-check-label' for='exampleRadios3' id='label3'>"+optionc+"</label></div></div>"
+"<div class='ans-1' id='ans-div-optd'>"
+"<div class='form-check'>"
+"<input class='form-check-input' type='radio' name='option_"+quesnum+"' id='exampleRadios4' value='"+optiond+"' >"
+"<label class='form-check-label' for='exampleRadios4' id='label4'>"+optiond+"</label></div></div>"
+"<div class='ans-1' id='ans-div-opte'>"
+"<div class='form-check'>"
+"<input class='form-check-input' type='radio' name='option_"+quesnum+"' id='exampleRadios5' value='"+optione+"' >"
+"<label class='form-check-label' for='exampleRadios5' id='label5'>"+optione+"</label></div></div>"
+"<div class='ans-1' id='ans-div-optf'>"
+"<div class='form-check'>"
+"<input class='form-check-input' type='radio' name='option_"+quesnum+"' id='exampleRadios6' value='"+optionf+"'>"
+"<label class='form-check-label' for='exampleRadios6' id='label6'>"+optionf+"</label></div></div>"
+"<div class='question-button'>"
+"<div class='d-flex justify-content-around'>"
+"<button type='button' class='btn btn-one' onclick=\"getnextquest();\" id='next-btn'>Next</button>"
+"<button type='button' class='btn btn-one' onclick=\"submittest();\" id='submit-test' style='visibility: hidden;'>Submit</button>"
+"</div></div>";
}
}
document.getElementById('question-div').style.display = "block";
document.getElementById('question-div').innerHTML = questionList;
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
}else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
}
Below is rest controller which is returning list of questions from DB:
@RequestMapping(value = "api/gettest" = { RequestMethod.POST, RequestMethod.GET }, produces = {MediaType.APPLICATION_JSON_VALUE })
public ResponseEntity<?> getTest(HttpServletRequest request) {
CustomResponse = ResponseFactory.getResponse(request);
try {
List<Questions> allQuestion = questionDao.findByStatus(1);
if (allQuestion != null) {
CustomResponse.setResponse(allQuestion);
CustomResponse.setStatus(CustomStatus.OK);
CustomResponse.setStatusCode(CustomStatus.OK_CODE);
}
} catch (Exception e) {
e.printStackTrace();
}
return new ResponseEntity<ResponseDao>(CustomResponse, HttpStatus.OK);
}
First question is displayed, now I having trouble in displaying next question when clicked on next button and want to store student options whatever he selected.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|