live coder refactor fixes #36 and #50

app/assets/javascripts/application.js

@@ -15,9 +15,9 @@
 //= require turbolinks
 //= require modernizr-lite/modernizr
 //= require jquery-linedtextarea-moser
+
 //= require button-group
 //= require form-animation
 //= require summary-edit
-//= require test-builder
 //= require textarea-limit
 //= require live-coder

app/assets/javascripts/live-coder.js.erb

@@ -1,5 +1,4 @@
-function updateResults(elem) {
+function updateResults(elem) {  var resultsContainer = $(elem).find('[data-id="results"]')[0];
-  var resultsContainer = $(elem).find('[data-id="results"]')[0];
   var codeHtml = $(elem).find('.code-html')[0].value.trim();
   var codeCss = $(elem).find('.code-css')[0].value.trim();
   var codeJs = $(elem).find('.code-js')[0].value.trim();
@@ -92,22 +91,8 @@ function indentSelection(e){
   }
 }
 
-function loadLiveCoders(){
-  $.each($('.answer-sec.live_code-type, .answer-sec.live_code_text-type'), function(index, elem){
-    var qid = $(elem).data('qid');
-    $(elem).find("[data-id='live-coder-answer']").load("/live-coder-entry/" + qid, function(){
-      $(elem).find('.js-error').addClass('hidden');
-      $(elem).find(".code-input textarea").linedtextarea();
-      if(window.location.href.indexOf("summary") > -1) {
-        $(elem).find(".code-input textarea").attr('disabled', true);
-      }
-      updateResults(this);
-    });
-  });
-}
 
 timer = 0;
-
 $(function(){
   // wait a half second before updating results
   // restart the timer if they resume typing
@@ -117,14 +102,13 @@ $(function(){
     timer = setTimeout(updateResults(elem), 500);
   });
 
+  $("[data-id=live-coder-answer]").each(function(){
+    updateResults(this);
+  });
+
   $("html").on('keydown', "textarea[data-id^=code-]", function(e){
     indentSelection(e);
   });
 
-  $.when(loadLiveCoders()).done(function(){
+  $(".code-input textarea").linedtextarea();
-    //simple live coder for summary page
-    $("[data-id=live-coder-no-js], [data-id=live-coder-finish-later]").addClass('hidden');
-    $("[data-id=live-coder]").removeClass('hidden');
-  });
-
 });

app/assets/javascripts/summary-edit.js

@@ -177,16 +177,6 @@ $('.answer-block').prop('disabled', true);
 // Question events
 $('.answer-sec')
   .find('.button-cancel, .button-save').hide().end()
-  // delegating events
   .on('click', '.button-edit', editClickHandler)
   .on('click', '.button-cancel', cancelClickHandler)
   .on('click', '.button-save', saveClickHandler);
-
-  // Dynamically load in coders
-$.each($('.answer-sec.live_code-type, .answer-sec.live_code_text-type'), function(index, elem){
-  var qid = $(elem).data('qid');
-  $(elem).find("[data-id='live-coder-answer']").load("/live-coder-entry/" + qid, function(){
-    $(elem).find('.js-error').addClass('hidden');
-    $(elem).find(".code-input textarea").linedtextarea();
-  });
-});

app/assets/javascripts/test-builder.js

@@ -1,66 +0,0 @@
-$(document).ready(function() {
-  //$(".answer_container").hide();
-  //$(".test-builder-success").hide();
-  //$(".question-edit-container").hide();
-  
-  $(".skills-app-form").each(function () { 
-    var thisQu = $(this),
-        questionOf = thisQu.find(".question-block").text();
-    
-    
-    thisQu.find(".testbuilderquestion").val(questionOf);
-    
-    thisQu.find(".answer_type").change(function(){
-      if ( $(this).val() == "1" ) { 
-        thisQu.find(".answer_container").hide();
-        thisQu.find(".answer_container.answer_text").show();
-      }
-      if ( $(this).val() == "2" ) {  
-        thisQu.find(".answer_container").hide();
-        thisQu.find(".answer_container.answer_multiple").show();
-      }
-      if ( $(this).val() == "3" ) {  
-        thisQu.find(".answer_container").hide();
-        thisQu.find(".answer_container.answer_multiple").show();
-      }
-    });
-    thisQu.find(".test-builder-edit").click(function(){
-      thisQu.find(".question-display").slideUp().fadeOut();
-      thisQu.find(".question-edit-container").slideDown().fadeIn();
-    });
-    thisQu.find(".btn-saveedit").click(function(){
-      if(thisQu.valid()) {
-        thisQu.find(".question-display").slideDown().fadeIn();
-        thisQu.find(".question-edit-container").slideUp().fadeOut();
-        thisQu.find(".test-builder-success").slideDown().fadeIn();
-        thisQu.find(".test-builder-success").delay(3000).slideUp().fadeOut();
-      }
-    });
-    thisQu.find(".btn-cancel-edit").click(function(){
-      thisQu.find(".question-display").slideDown().fadeIn();
-      thisQu.find(".question-edit-container").slideUp().fadeOut();
-    });
-    thisQu.find(".btn-cancel").click(function(){
-      thisQu.find(".answer_container").hide();
-    });
-    thisQu.find(".skills-app-form").submit(function() {
-      return false;
-    });
-    thisQu.find(".test-builder-save").click(function(){
-      if(thisQu.valid()) {
-        thisQu.find(".answer_container").hide();
-        thisQu.find(".test-builder-success").slideDown();
-        thisQu.find(".test-builder-success").delay(3000).slideUp();
-      }
-      else {
-        thisQu.find(".form-validation-script:invalid").css("border-color", "red");
-      }
-    });
-    thisQu.find( ".btn-save" ).click(function() {
-      if(thisQu.valid()) {
-        window.location.href = "test-builder-success.html";
-      }
-    });
-  });
-  
-});

app/controllers/quiz_controller.rb

@@ -5,6 +5,7 @@ class QuizController < ApplicationController
     qid = prep_status.current_question_id || params[:question_id]
     redirect_to :summary and return if qid.nil?
     prep_question qid
+    @answer = prep_answer qid
     prep_instance_answer @question
   end
 
@@ -14,13 +15,6 @@ class QuizController < ApplicationController
     send "process_#{prep_question(qid).input_type}"
   end
 
-  def live_coder
-    prep_question params[:question_id]
-    prep_instance_answer @question
-    prep_answer params[:question_id]
-    render @question.input_type, layout: false
-  end
-
   def summary
     @quiz = current_candidate.my_quiz
     redirect_to :question and return unless prep_status.current_question_id.nil?

app/views/quiz/_checkbox.html.erb

@@ -7,6 +7,7 @@
                     name: "answer[checkbox][]",
                  checked: Array(question.answer).include?(option)
                   }
+  answers = answer.try(:answer) || answer
 %>
   <div class="form-group-multiples">
     <%= form.check_box(:answer, checkbox_html, option, '') %>
@@ -14,4 +15,4 @@
   </div>
 <% end %>
 
-<%= render partial: "quiz/answer_errors", locals: {question: question, answer: @answer} %>
+<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_live_code.html.erb

@@ -1,19 +1,17 @@
 <%
   option_id = "#{question.question_id}_finish-later"
-
   checkbox_html = {class: 'checkbox',
                       id: "answer_#{option_id}",
                     name: "answer[#{question.input_type}][later]",
                  checked: Array(question.answer).include?('finish-later')
                   }
+  disabled = local_assigns.fetch :disable_input, false
+  answers = answer.try(:answer) || answer
 %>
-<!-- <div class="js-error">
-  Please revisit this page with JavaScript enabled to modify your answer.
-</div> -->
 
-<%= render partial: "quiz/answer_errors", locals: {question: question, answer: @answer} %>
+<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>
 
-<div data-id="live-coder-finish-later">
+<div id="nojs<%= question.question_id %>" data-id="live-coder-finish-later">
   <p class="warning">
     This is a question where you will be asked to write code, and it utilizes a JavaScript-enabled
     environment. It looks like JavaScript is not loaded.
@@ -30,8 +28,27 @@
   <% end %>
 </div>
 
-<div data-id="live-coder-answer">
+<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
-  <%  # answers inserted dynamically via jQuery .load()
+  <div class="code-input">
-      # to check for JS capability/enabled
+    <label for="answer_live_code_html">HTML</label>
-  %>
+    <%= text_area_tag 'answer[live_code][html]', (answers['html']), { disabled: disabled, 'data-id' => 'code-html', class: 'code-answer code-html' } %>
+  </div>
+
+  <div class="code-input">
+    <label for="answer_live_code_css">CSS</label>
+    <%= text_area_tag 'answer[live_code][css]', (answers['css']), { disabled: disabled, 'data-id' => 'code-css', class: 'code-answer code-css' } %>
+  </div>
+
+  <div class="code-input">
+    <label for="answer_live_code_js">JS</label>
+    <%= text_area_tag 'answer[live_code][js]', (answers['js']), { disabled: disabled, 'data-id' => 'code-js', class: 'code-answer code-js' } %>
+  </div>
+
+  <div class="results" data-id="results"></div>
 </div>
+
+<script>
+  <% # removes the no-js message SUPER FAST %>
+  document.getElementById("nojs<%= question.question_id %>").style.display = "none";
+  document.getElementById("answer<%= question.question_id %>").style.display = "";
+</script>

app/views/quiz/_live_code_text.html.erb

@@ -1 +1,57 @@
-<%= render partial: "quiz/live_code", locals: {question: question, form: form} %>
+<%
+  option_id = "#{question.question_id}_finish-later"
+  checkbox_html = {class: 'checkbox',
+                      id: "answer_#{option_id}",
+                    name: "answer[#{question.input_type}][later]",
+                 checked: Array(question.answer).include?('finish-later')
+                  }
+  disabled = local_assigns.fetch :disable_input, false
+  answers = answer.try(:answer) || answer
+%>
+
+<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>
+
+<div id="nojs<%= question.question_id %>" data-id="live-coder-finish-later">
+  <p class="warning">
+    This is a question where you will be asked to write code, and it utilizes a JavaScript-enabled
+    environment. It looks like JavaScript is not loaded.
+    <% unless params[:action] == 'summary' %>
+      Please check the box below to acknowledge that you agree to come back at a later time to finish
+      answering this question before you can submit the test.
+    <% else %>
+      You will need to enable JavaScript and answer this question before you can submit the test.
+    <% end %>
+  </p>
+  <% unless params[:action] == 'summary' %>
+    <%= form.check_box(:answer, checkbox_html, true, '') %>
+    <%= form.label(option_id, 'I will come back later to finish this code question') %>
+  <% end %>
+</div>
+
+<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
+  <label for="answer_live_code_text">Reasoning</label>
+  <%= text_area_tag 'answer[live_code_text][text]', (answers['text']) %>
+
+  <div class="code-input">
+    <label for="answer_live_code_html">HTML</label>
+    <%= text_area_tag 'answer[live_code_text][html]', (answers['html']), { disabled: disabled, 'data-id' => 'code-html', class: 'code-answer code-html' } %>
+  </div>
+
+  <div class="code-input">
+    <label for="answer_live_code_css">CSS</label>
+    <%= text_area_tag 'answer[live_code_text][css]', (answers['css']), { disabled: disabled, 'data-id' => 'code-css', class: 'code-answer code-css' } %>
+  </div>
+
+  <div class="code-input">
+    <label for="answer_live_code_js">JS</label>
+    <%= text_area_tag 'answer[live_code_text][js]', (answers['js']), { disabled: disabled, 'data-id' => 'code-js', class: 'code-answer code-js' } %>
+  </div>
+
+  <div class="results" data-id="results"></div>
+</div>
+
+<script>
+  <% # removes the no-js message SUPER FAST %>
+  document.getElementById("nojs<%= question.question_id %>").style.display = "none";
+  document.getElementById("answer<%= question.question_id %>").style.display = "";
+</script>

app/views/quiz/_radio.html.erb

@@ -2,6 +2,7 @@
   question.input_options.each do | option |
   option_id = "#{option.parameterize}_#{question.to_i}"
   radio_html = {class: 'radio', id: option_id}
+  answers = answer.try(:answer) || answer
 %>
   <div class="form-group-multiples">
     <%= radio_button_tag('answer[radio]', option, (question.answer == option), radio_html) %>
@@ -9,4 +10,4 @@
   </div>
 <% end %>
 
-<%= render partial: "quiz/answer_errors", locals: {question: question, answer: @answer} %>
+<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/_text.html.erb

@@ -1,8 +1,11 @@
-<% hidden = params[:action] == 'summary' ? 'hidden' : '' %>
+<%
+  hidden = params[:action] == 'summary' ? 'hidden' : ''
+  answers = answer.try(:answer) || answer
+%>
 
 <label for="answer_text">Enter answer here</label>
-<textarea id="answer_text" name="answer[text]" rows="10"><%= question.answer %></textarea>
+<textarea id="answer_text" name="answer[text]" rows="10"><%= answers %></textarea>
 
 <div class="chars <%= hidden %>">Characters remaining: <span></span></div>
 
-<%= render partial: "quiz/answer_errors", locals: {question: question, answer: @answer} %>
+<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

app/views/quiz/live_code.html.erb

@@ -1,18 +0,0 @@
-<% answer = @answer.answer || {} %>
-
-<div class="code-input">
-  <label for="answer_live_code_html">HTML</label>
-  <%= text_area_tag 'answer[live_code][html]', (answer['html']), { 'data-id' => 'code-html', class: 'code-answer code-html' } %>
-</div>
-
-<div class="code-input">
-  <label for="answer_live_code_css">CSS</label>
-  <%= text_area_tag 'answer[live_code][css]', (answer['css']), { 'data-id' => 'code-css', class: 'code-answer code-css' } %>
-</div>
-
-<div class="code-input">
-  <label for="answer_live_code_js">JS</label>
-  <%= text_area_tag 'answer[live_code][js]', (answer['js']), { 'data-id' => 'code-js', class: 'code-answer code-js' } %>
-</div>
-
-<div class="results" data-id="results"></div>

app/views/quiz/live_code_text.html.erb

@@ -1,21 +0,0 @@
-<% answer = @answer.answer || {} %>
-
-<label for="answer_live_code_text">Reasoning</label>
-<%= text_area_tag 'answer[live_code_text][text]', (answer['text']) %>
-
-<div class="code-input">
-  <label for="answer_live_code_html">HTML</label>
-  <%= text_area_tag 'answer[live_code_text][html]', (answer['html']), { 'data-id' => 'code-html', class: 'code-answer code-html' } %>
-</div>
-
-<div class="code-input">
-  <label for="answer_live_code_css">CSS</label>
-  <%= text_area_tag 'answer[live_code_text][css]', (answer['css']), { 'data-id' => 'code-css', class: 'code-answer code-css' } %>
-</div>
-
-<div class="code-input">
-  <label for="answer_live_code_js">JS</label>
-  <%= text_area_tag 'answer[live_code_text][js]', (answer['js']), { 'data-id' => 'code-js', class: 'code-answer code-js' } %>
-</div>
-
-<div class="results" data-id="results"></div>

app/views/quiz/question.html.erb

@@ -16,7 +16,7 @@
     <div class="content-well">
       <%= hidden_field_tag 'answer[question_id]', @question.question_id %>
       <%= hidden_field_tag 'answer[answer_id]', @question.answer_id %>
-      <%= render partial: @question.input_type, locals: {question: @question, form: form} %>
+      <%= render partial: @question.input_type, locals: {question: @question, form: form, answer: @answer } %>
     </div>
 
     <% if @status.on_summary %>

app/views/quiz/summary.html.erb

@@ -34,7 +34,8 @@
 
           <fieldset disabled class="answer-block">
             <%= hidden_field_tag 'answer[question_id]', question.question_id %>
-            <%= render partial: question.input_type, locals: {question: question, form: form} %>
+            <%= hidden_field_tag 'answer[answer_id]', question.answer_id %>
+            <%= render partial: question.input_type, locals: {question: question, form: form, answer: question.answer, disable_input: true} %>
           </fieldset>
         </div>
       </article>

app/views/review/view.html.erb

@@ -21,7 +21,7 @@
           <% end %>
           <fieldset disabled class="answer-block">
             <%= hidden_field_tag 'answer[question_id]', question.question_id %>
-            <%= render partial: "quiz/#{question.input_type}", locals: {question: question, form: form} %>
+            <%= render partial: "quiz/#{question.input_type}", locals: {question: question, answer: question.answer, form: form} %>
           </fieldset>
         </div>
       </article>

config/routes.rb

@@ -9,7 +9,6 @@ Rails.application.routes.draw do
 
   post "/question(/:answer_id)",         to: "quiz#update_answer",  as: :post_answer
    get "/question(/:question_id)",       to: "quiz#question",       as: :question
-   get "/live-coder-entry/:question_id", to: "quiz#live_coder",     as: :live_coder
   post "/summary",                       to: "quiz#update_summary", as: :post_summary
    get "/summary",                       to: "quiz#summary",        as: :summary
 

test/integration/question_live_coder_test.rb

@@ -15,4 +15,15 @@ class QuestionLiveCoderTest < ActionDispatch::IntegrationTest
     # TODO: add in capybara and test form post
     # assert_redirected summary_path
   end
+
+  test "can load a live coder TEXT question" do
+    setup_auth candidates(:dawn)
+    question = questions(:fed3)
+
+    get question_path(question.id)
+    assert_response :success
+    assert_select '.question-text', question.question
+    # TODO: add in capybara and test form post
+    # assert_redirected summary_path
+  end
 end