Update template with classes in addition to ids.

Due to the constraints of perseus one (perseus 360?) (one-page-app stuff
- ask me if you're interested) I sometimes have to hide the page body
and show a perseus renderer. That renderer breaks because it gets
workarea, solutionarea, and hintsarea by id... but those ids already
exist on the page and they're not the elements we want.

But what if there was a way to name elements on the page in such a way
that there could be multiple elements with the same label? I scoured the
html spec and discovered a little-know but well supported feature called
[classes](http://www.w3.org/TR/html5/dom.html#classes).

It's risky, but my plan is to select dom nodes using these "classes"
instead of ids.

Test Plan:
Ack for workarea, solutionarea, and hintsarea - determine these class
names don't already exist.

Auditors: alpert
Cc: alex

Author: Joel Burget

exercises/khan-exercise.html

@@ -4,7 +4,7 @@
         o javascript/exercises-package/problem-template.handlebars
         o khan-exercises/exercises/khan-exercise.html
 
-    (these two files should simply be copies of each other)
+    (these two files should simply be copies of each other (this is a lie))
 
     TODO(eater): Make this simpler
 -->
@@ -20,15 +20,15 @@
     <form id="answerform" name="answerform">
         <div id="problemarea">
             <div id="scratchpad"><div></div></div>
-            <div id="workarea"></div>
-            <div id="hintsarea"></div>
+            <div id="workarea" class="workarea"></div>
+            <div id="hintsarea" class="hintsarea"></div>
         </div>
         <div id="answer_area_wrap"><div id="answer_area">
             <input style="position: absolute; left: -9999px; width: 1px; height: 1px" type="submit">
             <div class="info-box" id="answercontent">
                 <span id="examples-show">Acceptable formats</span>
                 <span class="info-box-header">Answer</span>
-                <div class="fancy-scrollbar" id="solutionarea"></div>
+                <div class="fancy-scrollbar solutionarea" id="solutionarea"></div>
                 <ul id="examples" style="display: none"></ul>
                 <div class="answer-buttons">
                 <div class="check-answer-wrapper">