convert strings to template strings

Author: davidbarna

src/index.js

@@ -1,6 +1,6 @@
 (function($, JSON, localStorage){
   const {url} = options = {
-    url: 'data/quiz.json?' + Date.now()
+    url: `data/quiz.json?${Date.now()}`
   }
 
   $.ajax({ url }).done(function(data) {
@@ -16,13 +16,13 @@
 
     // 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(`<h1 class="ui header">${data.title}</h1>`)
       .append('<form id="quiz-form" class="ui form"></form>')
 
     // For each question of the json,
@@ -43,59 +43,55 @@
             const {[j]:option} = options
             const checked = !!responses[i] && responses[i].includes(option.label) ? 'checked' : ''
 
-            inputHtml += '<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>'
+            inputHtml += `<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>`
           }
           inputHtml += '</div>'
           break
 
           // Set of inputs (composed response)
         case 'inputs':
           inputHtml = '<table>'
-          for (j = 0; j < options.length; j++) {
+          for (let j = 0; j < options.length; j++) {
             const {[j]:option} = options
             const value = responses[i] && responses[i][j] || ''
 
-            inputHtml += '<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>'
+            inputHtml += `<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>`
           }
           inputHtml += '</table>'
           break
 
           // Default: simple input
         default:
           const value = responses[i] || ''
-          inputHtml = '<div class="ui input fluid">' +
-            '<input type="text" placeholder="Response..." name="question_' + i + '" value="' + value + '" />' +
-            '</div>'
+          inputHtml = `<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">' + problem + '</div>' +
-        '</div>' +
-        '<div class="content">' +
-        inputHtml +
-        '</div>' +
-        '</div>'
+      $question = $(`<div id="question-${i}" class="ui card" style="width: 100%;">
+          <div class="content"><div class="header">${problem}</div></div>
+          <div class="content">${inputHtml}</div>
+        </div>`
       ).css('display', 'none')
 
       $('#quiz-form')
         .append($question)
 
       // Show current question
       $('#quiz-form')
-        .find('#question-' + currentQuestion)
+        .find(`#question-${currentQuestion}`)
         .css('display', 'block')
 
       // Update progress bar
@@ -124,7 +120,7 @@
 
     // Actions on every response submission
     $('#submit-response').on('click', function() {
-      const $inputs = $('[name^=question_' + currentQuestion + ']')
+      const $inputs = $(`[name^=question_${currentQuestion}`)
       const question = questions[currentQuestion]
       let response = responses[currentQuestion]
 
@@ -133,7 +129,7 @@
         case 'checkbox':
         case 'radio':
           response = []
-          $('[name=' + $inputs.attr('name') + ']:checked').each(function(i, input) {
+          $(`[name=${$inputs.attr('name')}]:checked`).each(function(i, input) {
             response.push(input.value)
           })
           response = response.length ? response : null
@@ -190,11 +186,11 @@
 
         // Display next question
         $('#quiz-form')
-          .find('#question-' + currentQuestion).css('display', 'none')
+          .find(`#question-${currentQuestion}`).css('display', 'none')
 
 
         $('#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) {
@@ -204,7 +200,6 @@
         }
       }
 
-
       // Save current state of the quiz
       localStorage.setItem('quiz', JSON.stringify({responses, responseCount, currentQuestion}))
     })