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

<%
  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>