jQuery JSON loop
HTML
<body>
<div id="placeholder"></div>
</body>
CSS
#placeholder {
position: relative;
}
#placeholder .question {
position: absolute;
}
JavaScript
var xjson = {
"questions": [{
"q": "Question1...?",
"a": [
"Answer 1a",
"Answer 1b",
"Answer 1c",
"Answer 1d"
]
}, {
"q": "Question2...?",
"a": [
"Answer 2a",
"Answer 2b",
"Answer 2c",
"Answer 2d"
]
}]
};
$(document).ready(function() {
//$.getJSON(function (xjson) {
// compute total number of questions in JSON file
var totalQuestions = xjson.questions.length;
$.each(xjson.questions, function(i) {
var questionNumber = i + 1; // add one since indicies start at 0
var questionContent = xjson.questions[i]["q"];
var answerContent = '';
// generate questions progress HTML text
var questionHTML = '<div class="question" style="display:none;"><div class="questionCount">Question <span class="current">' + questionNumber + '</span> of <span class="total">' + totalQuestions + '</span>';
// generate question HTML text
questionHTML += '</div><h3>' + questionNumber + '. ' + questionContent + '</h3>';
var answersHTML = '<ul type="A" class="answers">';
$.each(xjson.questions[i]["a"], function(k) {
answerContent = xjson.questions[i]["a"][k];
answersHTML += '<li><input type="radio"><label>' + answerContent + '</label></li>';
});
answersHTML += '</ul></li></div>';
questionHTML += answersHTML;
$("#placeholder").append(questionHTML);
});
//});
animate();
});
function animate(current) {
var count = $('#placeholder .question').length;
if (isNaN(current)) { current = 0; }
console.log(current);
animateOne(
$('#placeholder...