skill-assessment-app/app/views/quiz/_live_code.html.erb

<%
  content_for_javascript_once 'live-coder' do
    javascript_include_tag "live-coder"
  end

  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')
                  }

  answers    = answer.try(:answer) || answer
  value_text = answers['text']     || question.input_options['text']
  value_html = answers['html']     || question.input_options['html']
  value_css  = answers['css']      || question.input_options['css']
  value_js   = answers['js']       || question.input_options['js']
%>

<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

<div id="nojs<%= question.question_id %>" data-id="live-coder-finish-later">
  <noscript>
    <p class="warning">
      <% unless params[:action] == 'summary' %>
        This is a question where you will be
      <% else %>
        This is a question where you were
      <% end %>

      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 %>
  </noscript>
</div>

<div class="accordion" id="accordion<%= question.question_id %>" style="display: none;">
  <input type="checkbox" class="accordion__toggle" id="accordion-toggle-live-coder_<%=question.question_id%>" />
  <label class="accordion__label" for="accordion-toggle-live-coder_<%=question.question_id%>">How to use the live coder</label>
  <p class="accordion__copy">
    This is our own nifty creation, and it works similarly to CodePen. To use: type any HTML, CSS,
    or JS inside their corresponding boxes, and watch the Results window below the boxes update
    with your changes. Once you’re happy with your code and how it renders in the Results window,
    move on to the next question!
  </p>
</div>

<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
  <label for="answer_answer_hash_text_<%= question.question_id %>">Enter answer here</label>
  <%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}, id: "answer_answer_hash_text_#{question.question_id}"} %>

  <div class="code-input">
    <label for="answer_answer_hash_html_<%= question.question_id %>">index.html</label>
    <%= text_area_tag 'answer[answer_hash][html]', value_html, { disabled: true, data: {id: 'code-html', last: answers['html']}, class: 'code-answer code-html', id: "answer_answer_hash_html_#{question.question_id}"} %>
  </div>

  <div class="code-input">
    <label for="answer_answer_hash_css_<%= question.question_id %>">styles.css</label>
    <%= text_area_tag 'answer[answer_hash][css]', value_css, { disabled: true, data: {id: 'code-css', last: answers['css']}, class: 'code-answer code-css', id: "answer_answer_hash_css_#{question.question_id}" } %>
  </div>

  <div class="code-input">
    <label for="answer_answer_hash_js_<%= question.question_id %>">main.js</label>
    <%= text_area_tag 'answer[answer_hash][js]', value_js, { disabled: true, data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js', id: "answer_answer_hash_js_#{question.question_id}" } %>
  </div>

  <label class="code-results">Results</label>
  <div class="results" data-id="results" data-qid="<%= question.question_id %>"></div>
</div>

<script>
  <% # removes the no-js message %>
  document.getElementById("nojs<%= question.question_id %>").style.display = "none";
  document.getElementById("answer<%= question.question_id %>").style.display = "";
  document.getElementById("accordion<%= question.question_id %>").style.display = "";

  <% # we want the coders disabled until JS is confirmed, so form post is easier to validate %>
  var coders = document.querySelectorAll("[data-id=live-coder-answer] textarea");
  for(i=0; i<coders.length; i++){ coders[i].disabled = false; }
</script>