Showing how to use elements for challenges

_episodes/04-divs.md

+---
+title: "Using Divs"
+teaching: 5
+exercises: 0
+questions:
+- "Should we use div instead of blockquote for challenge?"
+objectives:
+- "Show the differences between divs and blockquotes for challenges."
+keypoints:
+- "The CSS changes are surprisingly small."
+---
+This is a challenge formatted using a `div`:
+
+<div class="challenge" markdown="1">
+
+## Challenge Title as H2
+
+This is the text explaining the challenge.
+
+~~~
+this code
+is part of
+the challenge
+~~~
+{: .source}
+
+> ## Solution
+>
+> We can put the solution(s) in blockquotes inside the `div`.
+> Or we could define yet another `div`.
+{: .solution}
+
+</div>

assets/css/lesson.scss

@@ -75,6 +75,7 @@ $codeblock-padding: 5px !default;
 .keypoints{ @include bkSetup(#682047, "\e101"); }
 .objectives{ @include bkSetup(#667932, "\e085"); }
 .prereq{ @include bkSetup(#BD6F7A, "\e124"); }
+.solution{ @include bkSetup(#F5A9A9, "\e105"); }
 .testimonial{ @include bkSetup(#C0A92A, "\e143"); }
 
 //----------------------------------------