From 9e7ff36f00b5ef62daa620fa7e8785e3f521e1b6 Mon Sep 17 00:00:00 2001
From: Edu <cortadaedu@gmail.com>
Date: Wed, 30 May 2018 22:42:52 +0200
Subject: [PATCH 1/2] refacor operators and closures

---
 src/index.js | 487 +++++++++++++++++++++++++--------------------------
 1 file changed, 238 insertions(+), 249 deletions(-)

diff --git a/src/index.js b/src/index.js
index 9258781..73c6dad 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,249 +1,238 @@
-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
-  }
-
-
-  // Append the progress bar to DOM
-  $('body')
-    .append('<div style="position: fixed; bottom: 0; background: #eee; width: 100%; height: 6px; ">' +
-      '<div id="progress" style="background: #1678c2; width: 1%;">&nbsp;</div>' +
-      '</div>')
-
-  // Append title and form to quiz
-  $('#quiz')
-    .append('<h1 class="ui header">' + data.title + '</h1>')
-    .append('<form id="quiz-form" class="ui form"></form>')
-
-  // For each question of the json,
-  for (var i = 0; i < data.questions.length; i++) {
-    question = data.questions[i]
-
-    if (question.input === undefined) {
-      question.input = {
-        type: 'input'
-      }
-    }
-
-    // Construct the input depending on question type
-    switch (question.input.type) {
-
-      // Multiple options
-      case 'checkbox':
-      case 'radio':
-        var input = '<div class="inline fields">'
-        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 = ''
-          }
-
-          input += '<div class="field">' +
-            '<div class="ui checkbox ' + type + '">' +
-            '<input type="' + type + '" ' + checked + ' name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + option.label + '">' +
-            '<label for="question_' + i + '_' + j + '">' + option.label + '</label>' +
-            '</div>' +
-            '</div>'
-        }
-        input += '</div>'
-        break
-
-        // Set of inputs (composed response)
-      case 'inputs':
-        var input = '<table>'
-        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 = ''
-          }
-
-          input += '<tr>' +
-            '<td><label for="question_' + i + '_' + j + '">' + option.label + '</label></td>' +
-            '<td width="15px"></td>' +
-            '<td><div class="ui input">' +
-            '<input type="text" placeholder="Response..." name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + value + '" />' +
-            '</div></td>' +
-            '</tr>' +
-            '<tr><td colspan="3">&nbsp;</tr></tr>'
-        }
-        input += '</table>'
-        break
-
-        // Default: simple input
-      default:
-        if (!!responses[i]) {
-          var value = responses[i]
-        } else {
-          var value = ''
-        }
-        var input = '<div class="ui input fluid">' +
-          '<input type="text" placeholder="Response..." name="question_' + i + '" value="' + value + '" />' +
-          '</div>'
-    }
-
-    $question = $('<div id="question-' + i + '" class="ui card" style="width: 100%;">' +
-      '<div class="content">' +
-      '<div class="header">' + question.problem + '</div>' +
-      '</div>' +
-      '<div class="content">' +
-      input +
-      '</div>' +
-      '</div>'
-    ).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) + '%')
-  }
-
-  // Add button to submit response
-  $('#quiz')
-    .append('<button id="submit-response" class="ui primary button">Submit response</button>')
-
-  // Is case all questions have been responded
-  if (responseCount === questions.length) {
-    $('#submit-response').css('display', 'none')
-    $('#quiz').append('<div>Thank you for your responses.<br /><br /> </div>')
-    $('#quiz').append('<button class="ui primary button" onclick="window.print()" >Print responses</button>')
-  }
-
-  // Add a reset button that will redirect to quiz start
-  $resetButton = $('<button class="ui button negative">Reset</button>')
-  $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()
-    }
-
-    // Set the current responses counter
-    var responseCount = 0
-    for (i = 0; i < responses.length; i++) {
-      question = questions[i]
-      switch (question.input.type) {
-        case 'checkbox':
-        case 'radio':
-        case 'inputs':
-          if (!!responses[i] && !!responses[i].join('')) {
-            responseCount++
-          }
-          break
-        default:
-          if (!!responses[i]) {
-            responseCount++
-          }
-      }
-    }
-
-    // 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
-        }
-      }
-    }
-
-    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')
-      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('<div>Thank you for your responses.<br /><br /> </div>')
-        $('#quiz').append('<button class="ui primary button" onclick="window.print()" >Print responses</button>')
-      }
-    }
-
-    // Save current state of the quiz
-    quizData.responses = responses
-    quizData.responseCount = responseCount
-    quizData.currentQuestion = currentQuestion
-    localStorage.setItem('quiz', JSON.stringify(quizData))
-  })
-})
+let options = {
+  url: 'data/quiz.json?' + Date.now()
+}
+
+$.ajax({
+  url: options.url
+}).done(function(data) {
+  const {questions, title} = data
+  let quizData
+  //let responses, responseCount, currentQuestion
+  //responseCount = currentQuestion = 0
+  
+  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
+  }
+
+  // Load data from past reponses
+  let {responses = [], currentQuestion = 0, responseCount = 0} = quizData
+
+
+  // Append the progress bar to DOM
+  $('body')
+    .append('<div style="position: fixed; bottom: 0; background: #eee; width: 100%; height: 6px; ">' +
+      '<div id="progress" style="background: #1678c2; width: 1%;">&nbsp;</div>' +
+      '</div>')
+
+  // Append title and form to quiz
+  $('#quiz')
+    .append('<h1 class="ui header">' + data.title + '</h1>')
+    .append('<form id="quiz-form" class="ui form"></form>')
+
+  // For each question of the json,
+  for (let i = 0; i < data.questions.length; i++) {
+    let question = data.questions[i]
+
+    if (question.input === undefined) {
+      question.input = {
+        type: 'input'
+      }
+    }
+
+    // Construct the input depending on question type
+    let input
+    switch (question.input.type) {
+      
+      // Multiple options
+      case 'checkbox':
+      case 'radio':
+        input = '<div class="inline fields">'
+        for (let j = 0; j < question.input.options.length; j++) {
+          let option = question.input.options[j]
+          let type = question.input.type
+
+          let checked = (!!responses[i] && responses[i].indexOf(option.label) !== -1) ? 'checked' : ''
+
+          input += '<div class="field">' +
+            '<div class="ui checkbox ' + type + '">' +
+            '<input type="' + type + '" ' + checked + ' name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + option.label + '">' +
+            '<label for="question_' + i + '_' + j + '">' + option.label + '</label>' +
+            '</div>' +
+            '</div>'
+        }
+        input += '</div>'
+        break
+
+        // Set of inputs (composed response)
+      case 'inputs':
+        input = '<table>'
+        for (let j = 0; j < question.input.options.length; j++) {
+          let option = question.input.options[j]
+          let type = 'checkbox'
+          let value = (!!responses[i]) ? responses[i][j] : ''
+
+          input += '<tr>' +
+            '<td><label for="question_' + i + '_' + j + '">' + option.label + '</label></td>' +
+            '<td width="15px"></td>' +
+            '<td><div class="ui input">' +
+            '<input type="text" placeholder="Response..." name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + value + '" />' +
+            '</div></td>' +
+            '</tr>' +
+            '<tr><td colspan="3">&nbsp;</tr></tr>'
+        }
+        input += '</table>'
+        break
+
+        // Default: simple input
+      default:
+        let value = (!!responses[i]) ? responses[i] : ''
+       
+        input = '<div class="ui input fluid">' +
+          '<input type="text" placeholder="Response..." name="question_' + i + '" value="' + value + '" />' +
+          '</div>'
+    }
+
+    let $question = $('<div id="question-' + i + '" class="ui card" style="width: 100%;">' +
+      '<div class="content">' +
+      '<div class="header">' + question.problem + '</div>' +
+      '</div>' +
+      '<div class="content">' +
+      input +
+      '</div>' +
+      '</div>'
+    ).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) + '%')
+  }
+
+  // Add button to submit response
+  $('#quiz')
+    .append('<button id="submit-response" class="ui primary button">Submit response</button>')
+
+  // Is case all questions have been responded
+  if (responseCount === questions.length) {
+    $('#submit-response').css('display', 'none')
+    $('#quiz').append('<div>Thank you for your responses.<br /><br /> </div>')
+    $('#quiz').append('<button class="ui primary button" onclick="window.print()" >Print responses</button>')
+  }
+
+  // Add a reset button that will redirect to quiz start
+  let $resetButton = $('<button class="ui button negative">Reset</button>')
+  $resetButton.on('click', function() {
+    localStorage.removeItem('quiz')
+    location.reload();
+  })
+  $('#quiz').append($resetButton)
+
+  // Actions on every response submission
+  $('#submit-response').on('click', function() {
+    let $inputs = $('[name^=question_' + currentQuestion + ']')
+    let 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()
+    }
+
+    // Set the current responses counter
+    let responseCount = 0
+    for (let i = 0; i < responses.length; i++) {
+      question = questions[i]
+      switch (question.input.type) {
+        case 'checkbox':
+        case 'radio':
+        case 'inputs':
+          if (!!responses[i] && !!responses[i].join('')) {
+            responseCount++
+          }
+          break
+        default:
+          if (!!responses[i]) {
+            responseCount++
+          }
+      }
+    }
+
+    // Update progress bar
+    $('#progress')
+      .css('width', (responseCount / questions.length * 100) + '%')
+
+    // Check if question had a valid answer
+    let isQuestionAnswered = true
+    if (!responses[currentQuestion]) {
+      isQuestionAnswered = false
+    }
+    if (!!responses[currentQuestion] && !!responses[currentQuestion].length) {
+      for (let j = 0; j < responses[currentQuestion].length; j++) {
+        if (!responses[currentQuestion][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')
+      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('<div>Thank you for your responses.<br /><br /> </div>')
+        $('#quiz').append('<button class="ui primary button" onclick="window.print()" >Print responses</button>')
+      }
+    }
+  
+    // Save current state of the quiz
+    quizData.responses = responses
+    quizData.responseCount = responseCount
+    quizData.currentQuestion = currentQuestion
+    localStorage.setItem('quiz', JSON.stringify(quizData))
+  })
+})

From a535478710c4ab3d4b3ebd494b3fa505c2d9270c Mon Sep 17 00:00:00 2001
From: Edu <cortadaedu@gmail.com>
Date: Sat, 2 Jun 2018 01:30:07 +0200
Subject: [PATCH 2/2] Convert strings to template strings.

---
 src/index.js | 74 +++++++++++++++++++++++++++-------------------------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/index.js b/src/index.js
index 73c6dad..0862c9c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 let options = {
-  url: 'data/quiz.json?' + Date.now()
+  url: `data/quiz.json?${Date.now()}`
 }
 
 $.ajax({
@@ -31,14 +31,14 @@ $.ajax({
 
   // Append the progress bar to DOM
   $('body')
-    .append('<div style="position: fixed; bottom: 0; background: #eee; width: 100%; height: 6px; ">' +
-      '<div id="progress" style="background: #1678c2; width: 1%;">&nbsp;</div>' +
-      '</div>')
+    .append(`<div style="position: fixed; bottom: 0; background: #eee; width: 100%; height: 6px; ">
+      <div id="progress" style="background: #1678c2; width: 1%;">&nbsp;</div>
+      </div>`)
 
   // Append title and form to quiz
   $('#quiz')
-    .append('<h1 class="ui header">' + data.title + '</h1>')
-    .append('<form id="quiz-form" class="ui form"></form>')
+    .append(`<h1 class="ui header"> ${data.title} </h1>`)
+    .append(`<form id="quiz-form" class="ui form"></form>`)
 
   // For each question of the json,
   for (let i = 0; i < data.questions.length; i++) {
@@ -63,13 +63,14 @@ $.ajax({
           let type = question.input.type
 
           let checked = (!!responses[i] && responses[i].indexOf(option.label) !== -1) ? 'checked' : ''
+                    
+          input += `<div class="field">
+            <div class="ui checkbox ${type} ">
+            <input type="${type}" ${checked} name="question_${i}" id="question_${i}_${j}" value="${option.label}">
+            <label for="question_${i}_${j}"> ${option.label} </label>
+            </div>
+            </div>`
 
-          input += '<div class="field">' +
-            '<div class="ui checkbox ' + type + '">' +
-            '<input type="' + type + '" ' + checked + ' name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + option.label + '">' +
-            '<label for="question_' + i + '_' + j + '">' + option.label + '</label>' +
-            '</div>' +
-            '</div>'
         }
         input += '</div>'
         break
@@ -82,14 +83,14 @@ $.ajax({
           let type = 'checkbox'
           let value = (!!responses[i]) ? responses[i][j] : ''
 
-          input += '<tr>' +
-            '<td><label for="question_' + i + '_' + j + '">' + option.label + '</label></td>' +
-            '<td width="15px"></td>' +
-            '<td><div class="ui input">' +
-            '<input type="text" placeholder="Response..." name="question_' + i + '" id="question_' + i + '_' + j + '" value="' + value + '" />' +
-            '</div></td>' +
-            '</tr>' +
-            '<tr><td colspan="3">&nbsp;</tr></tr>'
+          input += `<tr>
+            <td><label for="question_${i}_${j}"> ${option.label} </label></td>
+            <td width="15px"></td>
+            <td><div class="ui input">
+            <input type="text" placeholder="Response..." name="question_${i}" id="question_${i}_${j}" value="${value}" />
+            </div></td>
+            </tr>
+            <tr><td colspan="3">&nbsp;</tr></tr>`
         }
         input += '</table>'
         break
@@ -98,19 +99,19 @@ $.ajax({
       default:
         let value = (!!responses[i]) ? responses[i] : ''
        
-        input = '<div class="ui input fluid">' +
-          '<input type="text" placeholder="Response..." name="question_' + i + '" value="' + value + '" />' +
-          '</div>'
+        input = `<div class="ui input fluid">
+          <input type="text" placeholder="Response..." name="question_${i}" value="${value}" />
+          </div>`
     }
 
-    let $question = $('<div id="question-' + i + '" class="ui card" style="width: 100%;">' +
-      '<div class="content">' +
-      '<div class="header">' + question.problem + '</div>' +
-      '</div>' +
-      '<div class="content">' +
-      input +
-      '</div>' +
-      '</div>'
+    let $question = $(`<div id="question-${i}" class="ui card" style="width: 100%;">
+      <div class="content">
+      <div class="header">${question.problem}</div>
+      </div>
+      <div class="content">
+      ${input}
+      </div>
+      </div>`
     ).css('display', 'none')
 
     $('#quiz-form')
@@ -118,7 +119,7 @@ $.ajax({
 
     // Show current question
     $('#quiz-form')
-      .find('#question-' + currentQuestion)
+      .find(`#question-${currentQuestion}`)
       .css('display', 'block')
 
     // Update progress bar
@@ -147,7 +148,7 @@ $.ajax({
 
   // Actions on every response submission
   $('#submit-response').on('click', function() {
-    let $inputs = $('[name^=question_' + currentQuestion + ']')
+    let $inputs = $(`[name^=question_${currentQuestion}]`)
     let question = questions[currentQuestion]
 
     // Behavior for each question type to add response to array of responses
@@ -155,7 +156,8 @@ $.ajax({
       case 'checkbox':
       case 'radio':
         responses[currentQuestion] = []
-        $('[name=' + $inputs.attr('name') + ']:checked').each(function(i, input) {
+        
+        $(`[name=${$inputs.attr('name')}]:checked`).each(function(i, input) {
           responses[currentQuestion].push(input.value)
         })
         if (responses[currentQuestion].length === 0) {
@@ -215,11 +217,11 @@ $.ajax({
 
       // Display next question
       $('#quiz-form')
-        .find('#question-' + currentQuestion).css('display', 'none')
+        .find(`#question-${currentQuestion}`).css('display', 'none')
       currentQuestion = currentQuestion + 1
 
       $('#quiz-form')
-        .find('#question-' + currentQuestion).css('display', 'block')
+        .find(`#question-${currentQuestion}`).css('display', 'block')
 
       // If it was the las question, display final message
       if (responseCount === questions.length) {