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

live coder labels & accordion helper

Browse Source
This commit is contained in:
Mark Moser 2016-11-16 23:31:35 -06:00
parent 6ef65a2825
commit cb3042d258
3 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/assets/stylesheets/molecules/_accordions.scss Normal file
View File

@ -0,0 +1,54 @@
.accordion {
margin-bottom: 0.75em;
[type="checkbox"]:checked + label,
[type="checkbox"]:checked ~ label:after,
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:not(:checked) ~ label:after,
[type="radio"]:checked + label,
[type="radio"]:checked ~ label:after,
[type="radio"]:not(:checked) + label,
[type="radio"]:not(:checked) ~ label:after {
content: "";
border: 0;
background-color: transparent;
}
[type="checkbox"]:hover:not(:disabled) + label:before,
[type="radio"]:hover:not(:disabled) + label:before,
[type="radio"]:not(:checked) ~ label:before,
[type="checkbox"]:not(:checked) ~ label:before,
[type="radio"]:checked ~ label:before,
[type="checkbox"]:checked ~ label:before {
background-color: transparent;
border: 0;
content: "+";
font-size: 1.3em;
line-height: 1;
}
[type="checkbox"]:hover:checked + label:before,
[type="radio"]:hover:checked + label:before,
[type="radio"]:checked ~ label:before,
[type="checkbox"]:checked ~ label:before {
background-color: transparent;
content: "-";
}
[type="radio"]:not(:checked) + label,
[type="checkbox"]:not(:checked) + label,
[type="radio"]:checked + label,
[type="checkbox"]:checked + label {
padding-left: 20px;
}
.accordion__copy {
display: none;
margin-top: 0.75em;
}
.accordion__toggle:checked ~ .accordion__copy {
display: block;
}
}

9
app/assets/stylesheets/molecules/_livecoder.scss
View File

@ -31,8 +31,15 @@
background-color: #fff;
}
fieldset:disabled .results {
fieldset:disabled {
.results {
border-color: #bbb;
}
.code-results,
.code-input label {
display: block;
}
}
iframe {

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

@ -45,6 +45,17 @@
</noscript>
</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>
<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">Enter answer here</label>
<%= text_area_tag 'answer[answer_hash][text]', value_text, { disabled: true, data: {last: answers['text']}} %>
@ -64,6 +75,7 @@
<%= text_area_tag 'answer[answer_hash][js]', value_js, { disabled: true, data: {id: 'code-js', last: answers['js']}, class: 'code-answer code-js' } %>
</div>
<label class="code-results">Results</label>
<div class="results" data-id="results"></div>
</div>
@ -71,6 +83,7 @@
<% # 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");