live coder labels & accordion helper

app/assets/stylesheets/molecules/_accordions.scss

@@ -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;
+  }
+
+}

app/assets/stylesheets/molecules/_livecoder.scss

@@ -31,10 +31,17 @@
   background-color: #fff;
 }
 
-fieldset:disabled .results {
+fieldset:disabled {
+  .results {
     border-color: #bbb;
   }
 
+  .code-results,
+  .code-input label {
+    display: block;
+  }
+}
+
 iframe {
   border: 0;
   height: 100%;

app/views/quiz/_live_code.html.erb

@@ -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");