Summary CRUD completed

app/assets/javascripts/live-coder.js

@@ -1,17 +1,8 @@
-function updateResults(includeJavascript) {
+function updateResults(elem) {
-  // var includeJavascript = includeJavascript;
+  var resultsContainer = $(elem).find('[data-id="results"]')[0];
-  //
+  var codeHtml = $(elem).find('.code-html')[0].value.trim();
-  // if (!(typeof(includeJavascript) != 'undefined' && includeJavascript == true)){
+  var codeCss = $(elem).find('.code-css')[0].value.trim();
-  //   includeJavascript = false;
+  var codeJs = $(elem).find('.code-js')[0].value.trim();
-  // }
-
-  var resultsContainer = document.querySelectorAll('[data-id="results"]')[0];
-  var codeHtml = document.querySelectorAll('[data-id="code-html"]')[0].value.trim();
-  var codeCss = document.querySelectorAll('[data-id="code-css"]')[0].value.trim();
-
-  // if(includeJavascript == true){
-    var codeJs = document.querySelectorAll('[data-id="code-js"]')[0].value.trim();
-  // }
 
   resultsContainer.innerHTML = "";
   var iDoc = document.createElement('html');
@@ -33,13 +24,11 @@ function updateResults(includeJavascript) {
   iBody.innerHTML = codeHtml;
   iDoc.appendChild(iBody);
 
-  // if(includeJavascript == true){
+  var codeScript = document.createElement("script");
-    var codeScript = document.createElement("script");
+  codeScript.setAttribute("type", "text/javascript");
-    codeScript.setAttribute("type", "text/javascript");
+  var scriptNode = document.createTextNode(codeJs);
-    var scriptNode = document.createTextNode(codeJs);
+  codeScript.appendChild(scriptNode);
-    codeScript.appendChild(scriptNode);
+  iDoc.appendChild(codeScript);
-    iDoc.appendChild(codeScript);
-  // }
 
   codeFrame.contentWindow.document.open();
   codeFrame.contentWindow.document.appendChild(iDoc);
@@ -98,39 +87,36 @@ function indentSelection(e){
   }
 }
 
+function loadLiveCoders(){
+  $.each($('.answer-sec.live_code-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();
+      updateResults(this);
+    });
+  });
+}
+
 timer = 0;
 
 $(function(){
   // wait a half second before updating results
   // restart the timer if they resume typing
   $('html').on('keyup', '.code-input textarea', function(){
+    var elem = $(this).closest('.answer-sec.live_code-type');
     if (timer) { clearTimeout(timer); }
-    timer = setTimeout(updateResults, 500);
+    timer = setTimeout(updateResults(elem), 500);
   });
 
   $("html").on('keydown', "textarea[data-id^=code-]", function(e){
     indentSelection(e);
   });
 
-  // If JavaScript is enabled, display the livecoder section dynamically
+  $.when(loadLiveCoders()).done(function(){
-  var qid = $('form#answer-form').data('qid');
+    //simple live coder for summary page
-  $("[data-id='live-coder-answer']").load("/live-coder-entry/" + qid, function(){
+    $("[data-id=live-coder-no-js], [data-id=live-coder-finish-later]").addClass('hidden');
-    // if it loads in,  and hide "finish later" checkbox
+    $("[data-id=live-coder]").removeClass('hidden');
-    $("[data-id='live-coder-finish-later']").addClass("hidden");
-    $('.js-error').addClass('hidden');
-    updateResults();
-	  $(".code-input textarea").linedtextarea();
   });
 
-  $("[data-id=live-coder]").each(function(){
-    updateResults();
-  });
-
-
-  //simple live coder for summary page
-  $("[data-id=live-coder-no-js]").addClass('hidden');
-  $("[data-id=live-coder]").removeClass('hidden');
-
-	$(".code-input textarea").linedtextarea();
-
 });

app/assets/javascripts/summary-edit.js

@@ -98,9 +98,11 @@ var saveClickHandler = function(e) {
     var cssAnswer = $(thisEd.find('textarea.code-css')[0]).val();
     var jsAnswer = $(thisEd.find('textarea.code-js')[0]).val();
     data = {
-      'html': htmlAnswer,
+      'live_code': {
-      'css': cssAnswer,
+        'html': htmlAnswer,
-      'js': jsAnswer
+        'css': cssAnswer,
+        'js': jsAnswer
+      }
     }
   } else if(thisEd.hasClass('radio-type')) {
     $(thisEd.find('input')).each(function() {
@@ -136,7 +138,6 @@ var saveClickHandler = function(e) {
       }),
       success: function(data){
         executeQuery = true;
-        //console.log(data);
       },
       error: function(data){
         executeQuery = false;

app/controllers/candidate_controller.rb

@@ -14,11 +14,9 @@ class CandidateController < ApplicationController
 
   def question
     qid = prep_status.current_question_id
-
     redirect_to :summary and return if qid.nil?
-
     prep_question qid
-    @answer = @question.answer.nil? ? Answer.new : Answer.find(@question.answer_id)
+    prep_instance_answer @question
   end
 
   def update_answer
@@ -28,13 +26,14 @@ class CandidateController < ApplicationController
   end
 
   def live_coder
-    question
+    prep_question params[:question_id]
+    prep_instance_answer @question
+    prep_answer params[:question_id]
     render layout: false
   end
 
   def summary
     @quiz = current_candidate.my_quiz
-
     redirect_to :question and return unless prep_status.current_question_id.nil?
   end
 
@@ -67,6 +66,10 @@ class CandidateController < ApplicationController
       @status ||= QuizStatus.new(current_candidate)
     end
 
+    def prep_instance_answer question
+      @answer = question.answer.nil? ? Answer.new : Answer.find(question.answer_id)
+    end
+
     def answer_params
       params.require(:answer).permit(
         :question_id, :answer_id,

app/views/candidate/question.html.erb

@@ -7,30 +7,32 @@
 
 <%= form_for(@answer, url: post_answer_path(@answer.id), html:{method: :post, id: 'answer-form', data: {qid: @question.question_id}}) do |form| %>
   <main class="questions_tpl">
-    <h2 class="question-text"><%= @question.question %></h2>
+    <article class="answer-sec <%= @question.input_type %>-type" data-qid="<%= @question.question_id %>">
+      <h2 class="question-text"><%= @question.question %></h2>
 
-    <div class="content-well">
+      <div class="content-well">
-      <%= hidden_field_tag 'answer[question_id]', @question.question_id %>
+        <%= hidden_field_tag 'answer[question_id]', @question.question_id %>
-      <%= hidden_field_tag 'answer[answer_id]', @question.answer_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} %>
-    </div>
-
-    <% if @status.on_summary %>
-
-      <div class="btn-container-summary">
-        <input type="submit" name="update" value="Save and return to summary">
       </div>
 
-    <% else %>
+      <% if @status.on_summary %>
 
-      <div class="btn-container-left">
+        <div class="btn-container-summary">
-        <input type="submit" name="save" value="Save">
+          <input type="submit" name="update" value="Save and return to summary">
-      </div>
+        </div>
-      <div class="btn-container-right">
-        <input type="submit" name="submit" value="Next">
-      </div>
 
-    <% end %>
+      <% else %>
+
+        <div class="btn-container-left">
+          <input type="submit" name="save" value="Save">
+        </div>
+        <div class="btn-container-right">
+          <input type="submit" name="submit" value="Next">
+        </div>
+
+      <% end %>
+    </article>
   </main>
 <% end %>