92 lines
4.5 KiB
Plaintext
92 lines
4.5 KiB
Plaintext
<%
|
||
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>
|