From 651a98a33e63514b3984021d8dd934b68d07d38d Mon Sep 17 00:00:00 2001 From: David Almeida Date: Wed, 1 Nov 2017 12:13:34 +0100 Subject: [PATCH 1/5] convert strings to template strings --- src/index.js | 386 +++++++++++++++++++++++---------------------------- 1 file changed, 172 insertions(+), 214 deletions(-) diff --git a/src/index.js b/src/index.js index 9258781..39f5398 100644 --- a/src/index.js +++ b/src/index.js @@ -1,249 +1,207 @@ -var responseCount, currentQuestion, options, -questions, responses, quizData, question, j, -$question, $resetButton, isQuestionAnswered - -responseCount = 0 -currentQuestion = 0 -options = { - url: 'data/quiz.json?' + Date.now() -} - -$.ajax({ - url: options.url -}).done(function(data) { - questions = data.questions - - // Load data from past reponses - try { - quizData = JSON.parse(localStorage.getItem('quiz')) - responses = quizData.responses || [] - currentQuestion = quizData.currentQuestion || -1 - responseCount = quizData.responseCount || -1 - } catch (e) {} - - if (quizData == null) { - quizData = { - responses: [] - } - responses = quizData.responses +(function($, JSON, localStorage){ + const {url} = options = { + url: `data/quiz.json?${Date.now()}` } + $.ajax({ url }).done(function(data) { + let {questions} = data + let quizData - // Append the progress bar to DOM - $('body') - .append('
' + - '
 
' + - '
') + // Load data from past reponses + try { + quizData = JSON.parse(localStorage.getItem('quiz')) || {} + } catch (e) {} + let {responses=[], currentQuestion=0, responseCount=0} = quizData - // Append title and form to quiz - $('#quiz') - .append('

' + data.title + '

') - .append('
') - // For each question of the json, - for (var i = 0; i < data.questions.length; i++) { - question = data.questions[i] + // Append the progress bar to DOM + $('body') + .append(`
+
 
+
`) - if (question.input === undefined) { - question.input = { - type: 'input' - } - } + // Append title and form to quiz + $('#quiz') + .append(`

${data.title}

`) + .append('
') + + // For each question of the json, + for (let i = 0; i < questions.length; i++) { + questions[i].input = questions[i].input || { type:'input' } + let {problem, input, input: {type, options}} = questions[i] + let inputHtml + + + // Construct the input depending on question type + switch (type) { - // Construct the input depending on question type - switch (question.input.type) { - - // Multiple options - case 'checkbox': - case 'radio': - var input = '
' - for (j = 0; j < question.input.options.length; j++) { - var option = question.input.options[j] - var type = question.input.type - - if (!!responses[i] && responses[i].indexOf(option.label) !== -1) { - var checked = 'checked' - } else { - var checked = '' + // Multiple options + case 'checkbox': + case 'radio': + inputHtml = '
' + for (j = 0; j < options.length; j++) { + const {[j]:option} = options + const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : '' + + inputHtml += `
+
+ + +
+
` } + inputHtml += '
' + break - input += '
' + - '
' + - '' + - '' + - '
' + - '
' - } - input += '
' - break - - // Set of inputs (composed response) - case 'inputs': - var input = '' - for (j = 0; j < question.input.options.length; j++) { - var option = question.input.options[j] - var type = 'checkbox' - - if (!!responses[i]) { - var value = responses[i][j] - } else { - var value = '' + // Set of inputs (composed response) + case 'inputs': + inputHtml = '
' + for (let j = 0; j < options.length; j++) { + const {[j]:option} = options + const value = responses[i] && responses[i][j] || '' + + inputHtml += ` + + + + + ` } + inputHtml += '
+ +
 
' + break - input += '' + - '' + - '' + - '
' + - '' + - '
' + - '' + - ' ' - } - input += '' - break - - // Default: simple input - default: - if (!!responses[i]) { - var value = responses[i] - } else { - var value = '' - } - var input = '
' + - '' + - '
' - } + // Default: simple input + default: + const value = responses[i] || '' + inputHtml = `
+ +
` + } - $question = $('
' + - '
' + - '
' + question.problem + '
' + - '
' + - '
' + - input + - '
' + - '
' - ).css('display', 'none') - - $('#quiz-form') - .append($question) - - // Show current question - $('#quiz-form') - .find('#question-' + currentQuestion) - .css('display', 'block') - - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') - } + $question = $(`
+
${problem}
+
${inputHtml}
+
` + ).css('display', 'none') - // Add button to submit response - $('#quiz') - .append('') + $('#quiz-form') + .append($question) - // Is case all questions have been responded - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') - } + // Show current question + $('#quiz-form') + .find(`#question-${currentQuestion}`) + .css('display', 'block') - // Add a reset button that will redirect to quiz start - $resetButton = $('') - $resetButton.on('click', function() { - localStorage.removeItem('quiz') - location.reload(); - }) - $('#quiz').append($resetButton) - - // Actions on every response submission - $('#submit-response').on('click', function() { - var $inputs = $('[name^=question_' + currentQuestion + ']') - var question = questions[currentQuestion] - - // Behavior for each question type to add response to array of responses - switch (question.input.type) { - case 'checkbox': - case 'radio': - responses[currentQuestion] = [] - $('[name=' + $inputs.attr('name') + ']:checked').each(function(i, input) { - responses[currentQuestion].push(input.value) - }) - if (responses[currentQuestion].length === 0) { - responses[currentQuestion] = null - } - break - case 'inputs': - responses[currentQuestion] = [] - $inputs.each(function(i, input) { - responses[currentQuestion].push(input.value) - }) - break - default: - responses[currentQuestion] = $inputs.val() + // Update progress bar + $('#progress') + .css('width', (responseCount / questions.length * 100) + '%') } - // Set the current responses counter - var responseCount = 0 - for (i = 0; i < responses.length; i++) { - question = questions[i] + // Add button to submit response + $('#quiz') + .append('') + + // Is case all questions have been responded + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append('
Thank you for your responses.

') + $('#quiz').append('') + } + + // Add a reset button that will redirect to quiz start + const $resetButton = $('') + $resetButton.on('click', function() { + localStorage.removeItem('quiz') + location.reload(); + }) + $('#quiz').append($resetButton) + + // Actions on every response submission + $('#submit-response').on('click', function() { + const $inputs = $(`[name^=question_${currentQuestion}`) + const question = questions[currentQuestion] + let response = responses[currentQuestion] + + // Behavior for each question type to add response to array of responses switch (question.input.type) { case 'checkbox': case 'radio': + response = [] + $(`[name=${$inputs.attr('name')}]:checked`).each(function(i, input) { + response.push(input.value) + }) + response = response.length ? response : null + break case 'inputs': - if (!!responses[i] && !!responses[i].join('')) { - responseCount++ - } + response = [] + $inputs.each(function(i, input) { + response.push(input.value) + }) break default: - if (!!responses[i]) { - responseCount++ - } + response = $inputs.val() } - } - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') - // Check if question had a valid answer - isQuestionAnswered = true - if (!responses[currentQuestion]) { - isQuestionAnswered = false - } - if (!!responses[currentQuestion] && !!responses[currentQuestion].length) { - for (j = 0; j < responses[currentQuestion].length; j++) { - if (!responses[currentQuestion][j]) { - isQuestionAnswered = false + + // Set the current responses counter + responses[currentQuestion] = response + let responseCount = 0 + for (let i = 0; i < responses.length; i++) { + let question = questions[i] + let response = responses[i] + switch (question.input.type) { + case 'checkbox': + case 'radio': + case 'inputs': + responseCount += !!response && !!response.join('') + break + default: + responseCount += !!response } } - } - if (!isQuestionAnswered) { - // Alert user of missing response - alert('You must give a response') - } else { + // Update progress bar + $('#progress') + .css('width', (responseCount / questions.length * 100) + '%') - // Display next question - $('#quiz-form') - .find('#question-' + currentQuestion).css('display', 'none') - currentQuestion = currentQuestion + 1 - $('#quiz-form') - .find('#question-' + currentQuestion).css('display', 'block') - // If it was the las question, display final message - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') + // Check if question had a valid answer + let isQuestionAnswered = !!response + if (response && response.length) { + for (let j = 0; j < response.length; j++) { + if (!response[j]) { + isQuestionAnswered = false + } + } + } + + if (!isQuestionAnswered) { + // Alert user of missing response + alert('You must give a response') + } else { + + // Display next question + $('#quiz-form') + .find(`#question-${currentQuestion}`).css('display', 'none') + + + $('#quiz-form') + .find(`#question-${++currentQuestion}`).css('display', 'block') + + // If it was the las question, display final message + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append('
Thank you for your responses.

') + $('#quiz').append('') + } } - } - // Save current state of the quiz - quizData.responses = responses - quizData.responseCount = responseCount - quizData.currentQuestion = currentQuestion - localStorage.setItem('quiz', JSON.stringify(quizData)) + // Save current state of the quiz + localStorage.setItem('quiz', JSON.stringify({responses, responseCount, currentQuestion})) + }) }) -}) +})($, JSON, localStorage) From 5d581e2424131e822783bc1310cf516b5c09aea1 Mon Sep 17 00:00:00 2001 From: David Almeida Date: Thu, 30 Nov 2017 13:37:02 +0100 Subject: [PATCH 2/5] define missing variables --- src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 39f5398..dad675b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ (function($, JSON, localStorage){ + let options const {url} = options = { url: `data/quiz.json?${Date.now()}` } @@ -39,7 +40,7 @@ case 'checkbox': case 'radio': inputHtml = '
' - for (j = 0; j < options.length; j++) { + for (let j = 0; j < options.length; j++) { const {[j]:option} = options const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : '' @@ -80,7 +81,7 @@
` } - $question = $(`
+ const $question = $(`
${problem}
${inputHtml}
` From 126ef24e26063d4c726c2bc016181fa62713674c Mon Sep 17 00:00:00 2001 From: David Almeida Date: Wed, 1 Nov 2017 12:13:34 +0100 Subject: [PATCH 3/5] convert strings to template strings --- src/index.js | 386 +++++++++++++++++++++++---------------------------- 1 file changed, 172 insertions(+), 214 deletions(-) diff --git a/src/index.js b/src/index.js index 9258781..39f5398 100644 --- a/src/index.js +++ b/src/index.js @@ -1,249 +1,207 @@ -var responseCount, currentQuestion, options, -questions, responses, quizData, question, j, -$question, $resetButton, isQuestionAnswered - -responseCount = 0 -currentQuestion = 0 -options = { - url: 'data/quiz.json?' + Date.now() -} - -$.ajax({ - url: options.url -}).done(function(data) { - questions = data.questions - - // Load data from past reponses - try { - quizData = JSON.parse(localStorage.getItem('quiz')) - responses = quizData.responses || [] - currentQuestion = quizData.currentQuestion || -1 - responseCount = quizData.responseCount || -1 - } catch (e) {} - - if (quizData == null) { - quizData = { - responses: [] - } - responses = quizData.responses +(function($, JSON, localStorage){ + const {url} = options = { + url: `data/quiz.json?${Date.now()}` } + $.ajax({ url }).done(function(data) { + let {questions} = data + let quizData - // Append the progress bar to DOM - $('body') - .append('
' + - '
 
' + - '
') + // Load data from past reponses + try { + quizData = JSON.parse(localStorage.getItem('quiz')) || {} + } catch (e) {} + let {responses=[], currentQuestion=0, responseCount=0} = quizData - // Append title and form to quiz - $('#quiz') - .append('

' + data.title + '

') - .append('
') - // For each question of the json, - for (var i = 0; i < data.questions.length; i++) { - question = data.questions[i] + // Append the progress bar to DOM + $('body') + .append(`
+
 
+
`) - if (question.input === undefined) { - question.input = { - type: 'input' - } - } + // Append title and form to quiz + $('#quiz') + .append(`

${data.title}

`) + .append('
') + + // For each question of the json, + for (let i = 0; i < questions.length; i++) { + questions[i].input = questions[i].input || { type:'input' } + let {problem, input, input: {type, options}} = questions[i] + let inputHtml + + + // Construct the input depending on question type + switch (type) { - // Construct the input depending on question type - switch (question.input.type) { - - // Multiple options - case 'checkbox': - case 'radio': - var input = '
' - for (j = 0; j < question.input.options.length; j++) { - var option = question.input.options[j] - var type = question.input.type - - if (!!responses[i] && responses[i].indexOf(option.label) !== -1) { - var checked = 'checked' - } else { - var checked = '' + // Multiple options + case 'checkbox': + case 'radio': + inputHtml = '
' + for (j = 0; j < options.length; j++) { + const {[j]:option} = options + const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : '' + + inputHtml += `
+
+ + +
+
` } + inputHtml += '
' + break - input += '
' + - '
' + - '' + - '' + - '
' + - '
' - } - input += '
' - break - - // Set of inputs (composed response) - case 'inputs': - var input = '' - for (j = 0; j < question.input.options.length; j++) { - var option = question.input.options[j] - var type = 'checkbox' - - if (!!responses[i]) { - var value = responses[i][j] - } else { - var value = '' + // Set of inputs (composed response) + case 'inputs': + inputHtml = '
' + for (let j = 0; j < options.length; j++) { + const {[j]:option} = options + const value = responses[i] && responses[i][j] || '' + + inputHtml += ` + + + + + ` } + inputHtml += '
+ +
 
' + break - input += '' + - '' + - '' + - '
' + - '' + - '
' + - '' + - ' ' - } - input += '' - break - - // Default: simple input - default: - if (!!responses[i]) { - var value = responses[i] - } else { - var value = '' - } - var input = '
' + - '' + - '
' - } + // Default: simple input + default: + const value = responses[i] || '' + inputHtml = `
+ +
` + } - $question = $('
' + - '
' + - '
' + question.problem + '
' + - '
' + - '
' + - input + - '
' + - '
' - ).css('display', 'none') - - $('#quiz-form') - .append($question) - - // Show current question - $('#quiz-form') - .find('#question-' + currentQuestion) - .css('display', 'block') - - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') - } + $question = $(`
+
${problem}
+
${inputHtml}
+
` + ).css('display', 'none') - // Add button to submit response - $('#quiz') - .append('') + $('#quiz-form') + .append($question) - // Is case all questions have been responded - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') - } + // Show current question + $('#quiz-form') + .find(`#question-${currentQuestion}`) + .css('display', 'block') - // Add a reset button that will redirect to quiz start - $resetButton = $('') - $resetButton.on('click', function() { - localStorage.removeItem('quiz') - location.reload(); - }) - $('#quiz').append($resetButton) - - // Actions on every response submission - $('#submit-response').on('click', function() { - var $inputs = $('[name^=question_' + currentQuestion + ']') - var question = questions[currentQuestion] - - // Behavior for each question type to add response to array of responses - switch (question.input.type) { - case 'checkbox': - case 'radio': - responses[currentQuestion] = [] - $('[name=' + $inputs.attr('name') + ']:checked').each(function(i, input) { - responses[currentQuestion].push(input.value) - }) - if (responses[currentQuestion].length === 0) { - responses[currentQuestion] = null - } - break - case 'inputs': - responses[currentQuestion] = [] - $inputs.each(function(i, input) { - responses[currentQuestion].push(input.value) - }) - break - default: - responses[currentQuestion] = $inputs.val() + // Update progress bar + $('#progress') + .css('width', (responseCount / questions.length * 100) + '%') } - // Set the current responses counter - var responseCount = 0 - for (i = 0; i < responses.length; i++) { - question = questions[i] + // Add button to submit response + $('#quiz') + .append('') + + // Is case all questions have been responded + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append('
Thank you for your responses.

') + $('#quiz').append('') + } + + // Add a reset button that will redirect to quiz start + const $resetButton = $('') + $resetButton.on('click', function() { + localStorage.removeItem('quiz') + location.reload(); + }) + $('#quiz').append($resetButton) + + // Actions on every response submission + $('#submit-response').on('click', function() { + const $inputs = $(`[name^=question_${currentQuestion}`) + const question = questions[currentQuestion] + let response = responses[currentQuestion] + + // Behavior for each question type to add response to array of responses switch (question.input.type) { case 'checkbox': case 'radio': + response = [] + $(`[name=${$inputs.attr('name')}]:checked`).each(function(i, input) { + response.push(input.value) + }) + response = response.length ? response : null + break case 'inputs': - if (!!responses[i] && !!responses[i].join('')) { - responseCount++ - } + response = [] + $inputs.each(function(i, input) { + response.push(input.value) + }) break default: - if (!!responses[i]) { - responseCount++ - } + response = $inputs.val() } - } - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') - // Check if question had a valid answer - isQuestionAnswered = true - if (!responses[currentQuestion]) { - isQuestionAnswered = false - } - if (!!responses[currentQuestion] && !!responses[currentQuestion].length) { - for (j = 0; j < responses[currentQuestion].length; j++) { - if (!responses[currentQuestion][j]) { - isQuestionAnswered = false + + // Set the current responses counter + responses[currentQuestion] = response + let responseCount = 0 + for (let i = 0; i < responses.length; i++) { + let question = questions[i] + let response = responses[i] + switch (question.input.type) { + case 'checkbox': + case 'radio': + case 'inputs': + responseCount += !!response && !!response.join('') + break + default: + responseCount += !!response } } - } - if (!isQuestionAnswered) { - // Alert user of missing response - alert('You must give a response') - } else { + // Update progress bar + $('#progress') + .css('width', (responseCount / questions.length * 100) + '%') - // Display next question - $('#quiz-form') - .find('#question-' + currentQuestion).css('display', 'none') - currentQuestion = currentQuestion + 1 - $('#quiz-form') - .find('#question-' + currentQuestion).css('display', 'block') - // If it was the las question, display final message - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') + // Check if question had a valid answer + let isQuestionAnswered = !!response + if (response && response.length) { + for (let j = 0; j < response.length; j++) { + if (!response[j]) { + isQuestionAnswered = false + } + } + } + + if (!isQuestionAnswered) { + // Alert user of missing response + alert('You must give a response') + } else { + + // Display next question + $('#quiz-form') + .find(`#question-${currentQuestion}`).css('display', 'none') + + + $('#quiz-form') + .find(`#question-${++currentQuestion}`).css('display', 'block') + + // If it was the las question, display final message + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append('
Thank you for your responses.

') + $('#quiz').append('') + } } - } - // Save current state of the quiz - quizData.responses = responses - quizData.responseCount = responseCount - quizData.currentQuestion = currentQuestion - localStorage.setItem('quiz', JSON.stringify(quizData)) + // Save current state of the quiz + localStorage.setItem('quiz', JSON.stringify({responses, responseCount, currentQuestion})) + }) }) -}) +})($, JSON, localStorage) From 9cc116b9051a1f33be0af1ddb805864c8d7fc92c Mon Sep 17 00:00:00 2001 From: David Almeida Date: Thu, 30 Nov 2017 13:37:02 +0100 Subject: [PATCH 4/5] define missing variables --- src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 39f5398..dad675b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,5 @@ (function($, JSON, localStorage){ + let options const {url} = options = { url: `data/quiz.json?${Date.now()}` } @@ -39,7 +40,7 @@ case 'checkbox': case 'radio': inputHtml = '
' - for (j = 0; j < options.length; j++) { + for (let j = 0; j < options.length; j++) { const {[j]:option} = options const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : '' @@ -80,7 +81,7 @@
` } - $question = $(`
+ const $question = $(`
${problem}
${inputHtml}
` From c3a737d92dd9b1d58b13d583c5bd7f4bb57e9812 Mon Sep 17 00:00:00 2001 From: "FUSION\\joseantonio.cortijo" Date: Fri, 22 Jun 2018 09:24:55 +0200 Subject: [PATCH 5/5] =?UTF-8?q?Refactorizar=20en=20peque=C3=B1as=20funcion?= =?UTF-8?q?es?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.js | 448 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 261 insertions(+), 187 deletions(-) diff --git a/src/index.js b/src/index.js index dad675b..3755ebf 100644 --- a/src/index.js +++ b/src/index.js @@ -1,208 +1,282 @@ -(function($, JSON, localStorage){ - let options - const {url} = options = { - url: `data/quiz.json?${Date.now()}` +let options = {url: `data/quiz.json? ${Date.now()}`} + +function loadResponses() { + let quizData + try { + quizData = JSON.parse(localStorage.getItem('quiz')) || {responses: [], responseCount: 0, currentQuestion: 0} + } catch (e) {} + return quizData +} + +function saveResponses(responses, responseCount, currentQuestion) { + let quizData = {responses, responseCount, currentQuestion} + localStorage.setItem('quiz', JSON.stringify(quizData)) +} + +function appendProgressBar() { + $('body') + .append(`
+
 
+
`) +} + +function appendTitle(title) { + $('#quiz') + .append(`

${title}

+
`) +} + +function buildInput(i, type, options, responses) { + let input + switch (type) { + + // Multiple options + case 'checkbox': + case 'radio': + input = '
' + options.forEach((option, j) => { + let checked = responses[i] && responses[i].indexOf(option.label) !== -1 ? 'checked' : '' + + input += `
+
+ + +
+
` + }) + input += '
' + break + + // Set of inputs (composed response) + case 'inputs': + input = '' + options.forEach((option, j) => { + let value = responses[i] ? responses[i][j] : '' + + input += ` + + + + + ` + }) + input += '
+ +
 
' + break + + // Default: simple input + default: + let value = responses[i] ? responses[i] : '' + + input = `
+ +
` + } + return input +} + +function appendQuestion(i, question, input) { + const $question = $(`
+
+
${question.problem}
+
+
+ ${input} +
+
` + ).css('display', 'none') + + $('#quiz-form') + .append($question) +} + +function showCurrentQuestion(currentQuestion) { + $('#quiz-form') + .find(`#question-${currentQuestion}`) + .css('display', 'block') +} + +function updateProgressBar(responseCount, questions) { + $('#progress') + .css('width', (responseCount / questions.length * 100) + '%') +} + +function checkAllQuestionsAnswered(responseCount, questions) { + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append('
Thank you for your responses.

') + $('#quiz').append('') } +} - $.ajax({ url }).done(function(data) { - let {questions} = data - let quizData - - // Load data from past reponses - try { - quizData = JSON.parse(localStorage.getItem('quiz')) || {} - } catch (e) {} - let {responses=[], currentQuestion=0, responseCount=0} = quizData - - - // Append the progress bar to DOM - $('body') - .append(`
-
 
-
`) - - // Append title and form to quiz - $('#quiz') - .append(`

${data.title}

`) - .append('
') - - // For each question of the json, - for (let i = 0; i < questions.length; i++) { - questions[i].input = questions[i].input || { type:'input' } - let {problem, input, input: {type, options}} = questions[i] - let inputHtml - - - // Construct the input depending on question type - switch (type) { - - // Multiple options - case 'checkbox': - case 'radio': - inputHtml = '
' - for (let j = 0; j < options.length; j++) { - const {[j]:option} = options - const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : '' - - inputHtml += `
-
- - -
-
` - } - inputHtml += '
' - break - - // Set of inputs (composed response) - case 'inputs': - inputHtml = '' - for (let j = 0; j < options.length; j++) { - const {[j]:option} = options - const value = responses[i] && responses[i][j] || '' - - inputHtml += ` - - - - - ` - } - inputHtml += '
- -
 
' - break - - // Default: simple input - default: - const value = responses[i] || '' - inputHtml = `
- -
` +function addResetButton() { + const $resetButton = $('') + $resetButton.on('click', function() { + localStorage.removeItem('quiz') + location.reload(); + }) + $('#quiz').append($resetButton) +} + +function putResponsesIntoArray(question, $inputs, responses, currentQuestion) { + let result = responses.map(item => item) + + switch (question.input.type) { + case 'checkbox': + case 'radio': + result[currentQuestion] = [] + $(`[name=${$inputs.attr('name')}]:checked`).each((i, input) =>{ + result[currentQuestion].push(input.value) + }) + if (result[currentQuestion].length === 0) { + result[currentQuestion] = null } - - const $question = $(`
-
${problem}
-
${inputHtml}
-
` - ).css('display', 'none') - - $('#quiz-form') - .append($question) - - // Show current question - $('#quiz-form') - .find(`#question-${currentQuestion}`) - .css('display', 'block') - - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') + break + case 'inputs': + result[currentQuestion] = [] + $inputs.each((i, input) => { + result[currentQuestion].push(input.value) + }) + break + default: + result[currentQuestion] = $inputs.val() + } + return result +} + +function getResponseCount(responses, questions) { + let responseCount = 0 + responses.forEach((response, i) => { + let question = questions[i] + switch (question.input.type) { + case 'checkbox': + case 'radio': + case 'inputs': + if (response && response.join('')) { + responseCount++ + } + break + default: + if (response) { + responseCount++ + } } + }) + return responseCount +} + +function isArray(obj) { + return Object.prototype.toString.call(obj) === '[object Array]' +} + +function checkIfQuestionAnswered(responses, currentQuestion) { + let isQuestionAnswered = !responses[currentQuestion] ? false : true + + if (responses[currentQuestion] && responses[currentQuestion].length && isArray(responses[currentQuestion])) { + responses[currentQuestion].forEach((response) => { + if (!response) { + isQuestionAnswered = false + } + }) + } + return isQuestionAnswered +} - // Add button to submit response - $('#quiz') - .append('') - - // Is case all questions have been responded - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') - } +function displayNextQuestion(currentQuestion) { + let result = currentQuestion + $('#quiz-form') + .find(`#question-${result}`).css('display', 'none') + result++ - // Add a reset button that will redirect to quiz start - const $resetButton = $('') - $resetButton.on('click', function() { - localStorage.removeItem('quiz') - location.reload(); - }) - $('#quiz').append($resetButton) - - // Actions on every response submission - $('#submit-response').on('click', function() { - const $inputs = $(`[name^=question_${currentQuestion}`) - const question = questions[currentQuestion] - let response = responses[currentQuestion] - - // Behavior for each question type to add response to array of responses - switch (question.input.type) { - case 'checkbox': - case 'radio': - response = [] - $(`[name=${$inputs.attr('name')}]:checked`).each(function(i, input) { - response.push(input.value) - }) - response = response.length ? response : null - break - case 'inputs': - response = [] - $inputs.each(function(i, input) { - response.push(input.value) - }) - break - default: - response = $inputs.val() + $('#quiz-form') + .find(`#question-${result}`).css('display', 'block') + return result +} + +function checkForFinalMessage(responseCount, questions) { + if (responseCount === questions.length) { + $('#submit-response').css('display', 'none') + $('#quiz').append(`
Thank you for your responses.

+ `) + } +} + +$.ajax({ + url: options.url +}).done((data) => { + const { questions , title} = data; + + // Load data from past reponses + let quizData = loadResponses() + let {currentQuestion=0, responseCount=0, responses=[]} = quizData + + // Append the progress bar to DOM + appendProgressBar() + + // Append title and form to quiz + appendTitle(title) + + // For each question of the json, + questions.forEach((question, i) => { + const {input: {type= 'input', options=[]} = {}, problem} = question + + if (question.input === undefined) { + question.input = { + type: 'input' } + } + // Construct the input depending on question type + let input = buildInput(i, type, options, responses) + appendQuestion(i, question, input) + // Show current question + showCurrentQuestion(currentQuestion) - // Set the current responses counter - responses[currentQuestion] = response - let responseCount = 0 - for (let i = 0; i < responses.length; i++) { - let question = questions[i] - let response = responses[i] - switch (question.input.type) { - case 'checkbox': - case 'radio': - case 'inputs': - responseCount += !!response && !!response.join('') - break - default: - responseCount += !!response - } - } + // Update progress bar + updateProgressBar(responseCount, questions) + }) - // Update progress bar - $('#progress') - .css('width', (responseCount / questions.length * 100) + '%') + // Add button to submit response + $('#quiz') + .append('') + // Is case all questions have been responded + checkAllQuestionsAnswered(responseCount, questions) + // Add a reset button that will redirect to quiz start + addResetButton() - // Check if question had a valid answer - let isQuestionAnswered = !!response - if (response && response.length) { - for (let j = 0; j < response.length; j++) { - if (!response[j]) { - isQuestionAnswered = false - } - } - } + // Actions on every response submission + $('#submit-response').on('click', () => { + + const $inputs = $(`[name^=question_${currentQuestion}]`) + let question = questions[currentQuestion] - if (!isQuestionAnswered) { - // Alert user of missing response - alert('You must give a response') - } else { + // Behavior for each question type to add response to array of responses + responses = putResponsesIntoArray(question, $inputs, responses, currentQuestion) - // Display next question - $('#quiz-form') - .find(`#question-${currentQuestion}`).css('display', 'none') + // Set the current responses counter + let responseCount = getResponseCount(responses, questions) + // Update progress bar + updateProgressBar(responseCount, questions) - $('#quiz-form') - .find(`#question-${++currentQuestion}`).css('display', 'block') + // Check if question had a valid answer + if (!checkIfQuestionAnswered(responses, currentQuestion)) { + // Alert user of missing response + alert('You must give a response') + } else { - // If it was the las question, display final message - if (responseCount === questions.length) { - $('#submit-response').css('display', 'none') - $('#quiz').append('
Thank you for your responses.

') - $('#quiz').append('') - } - } + // Display next question + currentQuestion = displayNextQuestion(currentQuestion) + + // If it was the las question, display final message + checkForFinalMessage(responseCount, questions) + } - // Save current state of the quiz - localStorage.setItem('quiz', JSON.stringify({responses, responseCount, currentQuestion})) - }) + // Save current state of the quiz + saveResponses(responses, responseCount, currentQuestion) }) -})($, JSON, localStorage) +}) \ No newline at end of file