Looking for guidance from an expert on how to accomplish this task. I have HTML code for a multiple choice question with options A to E:
<div id="correct-answer-XXXXX" style="display:none;"></div>
<div id="wrong-answer-XXXXX" style="display:none;"></div>
In addition, there is jQuery AJAX code that sends data to a remote URL (which I do not have access to) and manipulates the display of the divs based on whether the answer is correct or wrong.
var vector = new Array('A','B','C','D','E');
var i = 0;
function answerQuestion(XXXXX, choice){
$.ajax({
type:"POST",
dataType:'jsonp',
data:{choice},
url:"http://myremoteurl.com/"+XXXXX,
beforeSend:function(){
},
complete:function(){
var style = $("#correct-answer-"+XXXXX).css("display");
if (style == "block") {
// Do something with the correct answer
} else {
i++;
answerQuestion(XXXXX, vector[i]);
}
}
});
}
The above code works well for a single question, but I need to repeat this process sequentially 60 to 100 times. Once one question is answered, move on to the next.
I have a container filled with fields containing the data XXXXX, allowing me to iterate over them in a loop:
<div id="fieldscontainer">
<input type="hidden" name="111111" value="111111">
<input type="hidden" name="222222" value="222222">
<input type="hidden" name="333333" value="333333">
...
<input type="hidden" name="XXXXXX" value="XXXXXX">
</div>
To determine the correct answer, we must check the style of div correct-answer-XXXXX. A simple $.each loop won't suffice as the function needs to run multiple times until the right answer is found.
Illustration demonstrating the desired outcome: