mmoser/skill-assessment-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

a11y polish

Browse Source
This commit is contained in:
Mark Moser 2017-04-18 17:15:38 -05:00
parent 235b4314a4
commit d53d87f1bc
9 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/live-coder/editor.js.erb
View File

@ -12,6 +12,7 @@ function updateResults(elem) {
var iBody = document.createElement('body');
var codeFrame = document.createElement('iframe');
codeFrame.setAttribute("title", "live-code-results-" + resultsContainer.getAttribute("data-qid"));
codeFrame.setAttribute("width", "100%");
codeFrame.setAttribute("height", "100%");
resultsContainer.appendChild(codeFrame);
@ -27,6 +28,7 @@ function updateResults(elem) {
codeStyle.appendChild(rulesNode);
iHead.appendChild(codeStyle);
iDoc.setAttribute('lang', 'en');
iDoc.appendChild(iHead);
iBody.innerHTML = codeHtml;
iDoc.appendChild(iBody);

8
app/views/quiz/_checkbox.html.erb
View File

@ -1,14 +1,18 @@
<% answers = Array(question.answer) %>
<div role="group" aria-labelledby="<%= question.question_id %>">
<div id="<%= question.question_id %>">Check all that apply:</div>
<%= form.collection_check_boxes(:answer_array, question.input_options, :to_s, :to_s, {}, {class: ""}) do | option | %>
<%
option_id = "#{question.question_id}#{sanitize_to_id(option.value)}"
checked = answers.include?(option.value) ? 'checked' : ''
%>
<div class="">
<div>
<%= option.check_box( id: option_id, checked: checked, data: { last: checked } ) %>
<%= option.label(for: option_id) %>
<%= option.label( for: option_id, "aria-label" => option_id ) %>
</div>
<% end %>
</div>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

12
app/views/quiz/_checkbox_other.html.erb
View File

@ -1,19 +1,22 @@
<%
answers = question.answer.nil? ? [] : Array(question.answer['options'])
other_value = question.answer.nil? ? '' : question.answer['other']
%>
<div role="group" aria-labelledby="<%= question.question_id %>">
<div id="<%= question.question_id %>">Select all that apply:</div>
question.input_options.each do | option |
<% question.input_options.each do | option |
option_id = "#{option.parameterize}_#{question.to_i}"
checkbox_html = {class: "", id: option_id, data: { last: answers.include?(option) ? 'checked' : '' } }
%>
<div class="">
<div>
<%= check_box_tag('answer[answer_hash][options][]', option, answers.include?(option), checkbox_html) %>
<%= label_tag(option_id, option) %>
</div>
<%
end %>
<div class="">
<div>
<%
option_id = "other_#{question.to_i}"
checkbox_html = {class: "", id: option_id, data: { last: answers.include?('other') ? 'checked' : '' } }
@ -21,7 +24,8 @@
%>
<%= check_box_tag('answer[answer_hash][options][]', 'other', answers.include?('other'), checkbox_html) %>
<%= label_tag(option_id, 'Other') %>
<%= text_field_tag 'answer[answer_hash][other]', other_value, text_html %>
<%= text_field_tag 'answer[answer_hash][other]', other_value, text_html.merge(id: "#{option_id}_value") %>
</div>
</div>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

22
app/views/quiz/_live_code.html.erb
View File

@ -46,8 +46,8 @@
</div>
<div class="accordion" id="accordion<%= question.question_id %>" style="display: none;">
<input type="checkbox" class="accordion__toggle" id="accordion-toggle-live-coder" />
<label class="accordion__label" for="accordion-toggle-live-coder">How to use the live coder</label>
<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
@ -57,26 +57,26 @@
</div>
<div id="answer<%= question.question_id %>" data-id="live-coder-answer" style="display: none;">
<label for="answer_answer_hash_text">Enter answer here</label>
<%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}} %>
<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">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' } %>
<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">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' } %>
<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">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' } %>
<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"></div>
<div class="results" data-id="results" data-qid="<%= question.question_id %>"></div>
</div>
<script>

6
app/views/quiz/_radio.html.erb
View File

@ -1,15 +1,19 @@
<% answer_string = answer.try(:answer) || answer %>
<div role="group" aria-labelledby="<%= question.question_id %>">
<div id="<%= question.question_id %>">Select the best option:</div>
<%= form.collection_radio_buttons(:answer, question.input_options, :to_s, :to_s, {}, {class: ""}) do | option | %>
<%
option_id = "#{question.question_id}#{sanitize_to_id(option.value)}"
checked = answer_string == option.value ? 'checked' : ''
%>
<div class="">
<div>
<%= option.radio_button( id: option_id, checked: checked, data: { last: checked } ) %>
<%= option.label(for: option_id) %>
</div>
<% end %>
</div>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

13
app/views/quiz/_radio_other.html.erb
View File

@ -1,19 +1,23 @@
<%
answer_string = question.answer.nil? ? '' : Array(question.answer['options']).first
other_value = question.answer.nil? ? '' : question.answer['other']
%>
question.input_options.each do | option |
<div role="group" aria-labelledby="<%= question.question_id %>">
<div id="<%= question.question_id %>">Select the best option:</div>
<% question.input_options.each do | option |
option_id = "#{option.parameterize}_#{question.to_i}"
radio_html = {class: "", id: option_id, data: {last: (answer_string == option) ? 'checked' : '' }}
%>
<div class="">
<div>
<%= radio_button_tag('answer[answer_hash][options][]', option, (answer_string == option), radio_html) %>
<%= label_tag(option_id, option) %>
</div>
<%
end %>
<div class="">
<div>
<%
option_id = "other_#{question.to_i}"
radio_html = {class: "", id: option_id, data: { last: answer_string }}
@ -21,7 +25,8 @@
%>
<%= radio_button_tag('answer[answer_hash][options][]', 'other', (answer_string == 'other'), radio_html) %>
<%= label_tag option_id, 'Other' %>
<%= text_field_tag 'answer[answer_hash][other]', other_value, text_html %>
<%= text_field_tag 'answer[answer_hash][other]', other_value, text_html.merge(id: "value_#{option_id}") %>
</div>
</div>
<%= render partial: "quiz/answer_errors", locals: {question: question, answer: answer} %>

4
app/views/quiz/_text.html.erb
View File

@ -1,7 +1,7 @@
<% answer_string = answer.respond_to?(:answer) ? answer.answer : answer %>
<label for="answer_answer">Enter answer here</label>
<%= text_area_tag 'answer[answer]', answer_string, {rows: 10, data: { last: answer_string } } %>
<label for="answer_answer-<%= question.question_id %>">Enter answer here</label>
<%= text_area_tag 'answer[answer]', answer_string, {rows: 10, data: { last: answer_string }, id: "answer_answer-#{question.question_id}" } %>
<div class="<%= params[:action] == 'summary' ? 'hidden' : '' %>">
Max 1000 characters.

6
app/views/quiz/summary.html.erb
View File

@ -35,9 +35,9 @@
<li><button>Cancel</button></li>
</ul>
<%= hidden_field_tag 'answer[question_id]', question.question_id %>
<%= hidden_field_tag 'answer[answer_id]', question.answer_id %>
<%= hidden_field_tag 'submit', true %>
<%= hidden_field_tag 'answer[question_id]', question.question_id, id: "answer_question_id_#{question.question_id}" %>
<%= hidden_field_tag 'answer[answer_id]', question.answer_id, id: "answer_answer_id_#{question.question_id}" %>
<%= hidden_field_tag 'submit', true, id: "submit_#{question.question_id}"%>
<% end %>
<% end %>

2
test/integration/question_live_coder_test.rb
View File

@ -17,6 +17,6 @@ class QuestionLiveCoderTest < ActionDispatch::IntegrationTest
get question_path(question.id)
assert_response :success
assert_select '#answer_answer_hash_html', question.input_options['html']
assert_select "textarea", question.input_options['html']
end
end