HTML5 Workshop Survey

dabblet.css

/**
 * HTML5 Workshop Survey
 */
 
/* Here is some CSS to get your started */
input {
  margin: 0 1em;
}
label {
  display: inline-block;
  margin: 0.2em 0;
}
textarea {
  width: 30em;
  height: 5em;
}
fieldset {
  border: none;
}
fieldset legend {
  font-weight: bold;
}
fieldset label {
  display: block;
}
div.long-list {
  column-count: 2;  
}

dabblet.html

<h1>HTML5 Workshop Survey</h1>
<p>
  This series of workshops is for you.
  Let me know how we can make these workshops the best!
</p>
<ol>
  <li>Look through the code and try to fix the problems mentioned in the comments
      (Comments look like this: &lt;!--comment --&gt;)
  <li>Try adding some new fields and other HTML5 features
  <li>Try making the form pretty with some CSS
  <li>Save the form (use the cloud icon above)
  <li>Fill it out and send it!
</ol>
<p>
  Thanks and see you next time!
</p>
<form action="http://brian.mozlabs.jp/soi-1/survey" method="POST">
<!-- There are a number of sections in this form?
     Is there an HTML5 element for that? -->

  <h2>About you</h2>
  <!-- Should this be optional or required? -->
  <p><label>Name <input name=name></label></p>
  <!-- How can we make this validate the email address? -->
  <!-- (Note, this field is optional! I don't need your
       email address if you don't want to send it.
       This field is just here to practice using HTML5 input types!) -->
  <p><label>Email <input name=email></label></p>
  <!-- Could we set up a list of universities
       participating in SOI for autocomplete?
       Perhaps a <datalist>? -->
  <p><label>University <input name=university></label></p>
  <p><label>What experience do you have with Web technologies?<br>
     <textarea name=experience></textarea></label></p>
  
  <h2>About the workshop</h2>
  <p><label>Why did you decide to participate in this workshop?<br>
     <textarea name=why-participate></textarea></label></p>
  <p><label>Which parts were most/least interesting to you?<br>
     <textarea name=pres-content></textarea></label></p>
  <p><label>How easy/difficult was the presentation to understand?<br>
     (e.g. Did the presenter speak too fast? Use too few slides?)<br>
     <textarea name=pres-manner></textarea></label></p>
  <p><label>Other comments<br>
     <textarea name=other-comments></textarea></label></p>

  <h2>Project</h2>
  <p>
    At the end of the series of workshops,
    you should be able to produce a simple application that you can share
    with your friends and perhaps even sell in a Web marketplace.
    So, what kind of application would you like to make?
  </p>
  <p>
    Some ideas
  </p>
  <ul>
    <li>Calorie counter&mdash;adds calories for meals, subtracts for exercise
    <li>An app to interpret the meaning of emoji
    <li>Recipe finder&mdash;enter 3 or 4 ingredients and it will find something to cook
    <li>An app to find the nearest postbox
    <li>An app to tell you about nearby shops you like
  </ul>
  <p><label>Your idea<br>
     <textarea name=project-idea></textarea><br>
     (Of course you can work on a project together as a group!)</p>
  <p>Which technologies do you think you will be able to use to build this application?</p>
  <div class="long-list">
    <fieldset>
      <legend>Workshop 1: What's new in HTML5?</legend>
      <label><input type=checkbox name="project-tech[]" value=HTMLForms> Form controls</label>
      <label><input type=checkbox name="project-tech[]" value=EditingAPI> Editing API</label>
      <label><input type=checkbox name="project-tech[]" value=classList> classList</label>
    </fieldset>
    <fieldset>
      <legend>Workshop 2: CSS3 and beyond</legend>
      <label><input type=checkbox name="project-tech[]" value=CSSAnim> CSS Animations / Transitions</label>
      <label><input type=checkbox name="project-tech[]" value=CSSTransforms> CSS Transforms</label>
    </fieldset>
    <fieldset>
      <legend>Workshop 3: Multimedia</legend>
      <label><input type=checkbox name="project-tech[]" value=Canvas> Canvas</label>
      <label><input type=checkbox name="project-tech[]" value=SVG> SVG</label>
      <label><input type=checkbox name="project-tech[]" value=HTMLMedia> &lt;audio&gt;, &lt;video&gt;</label>
      <label><input type=checkbox name="project-tech[]" value=WebGL> WebGL</label>
    </fieldset>
    <fieldset>
      <legend>Workshop 4: Mobile</legend>
      <label><input type=checkbox name="project-tech[]" value=MediaQuery> Media queries</label>
      <label><input type=checkbox name="project-tech[]" value=Touch> Touch events</label>
      <label><input type=checkbox name="project-tech[]" value=Geo> Geolocation</label>
    </fieldset>
    <fieldset>
      <legend>Workshop 5: Applications</legend>
      <label><input type=checkbox name="project-tech[]" value=History> History API</label>
      <label><input type=checkbox name="project-tech[]" value=Offline> Offline API / local storage</label>
      <label><input type=checkbox name="project-tech[]" value=XHR> XMLHttpRequest (AJAX)</label>
    </fieldset>
  </div>
  
  <h2>This task</h2>
  <p>Which browsers did you use to test this form?</p>
  <p>
     <label><input type=checkbox name="tested-browsers[]" value=Firefox> Firefox</label>,
       <label>versions <input name=firefox-versions></label><br>
     <label><input type=checkbox name="tested-browsers[]" value=IE> Internet Explorer</label>,
       <label>versions <input name=ie-versions></label><br>
     <label><input type=checkbox name="tested-browsers[]" value=Safari> Safari</label>,
       <label>versions <input name=safari-versions></label><br>
     <label><input type=checkbox name="tested-browsers[]" value=Chrome> Chrome</label>,
       <label>versions <input name=chrome-versions></label><br>
     <label><input type=checkbox name="tested-browsers[]" value=Opera> Opera</label>,
       <label>versions <input name=opera-versions></label><br>
     <label><input type=checkbox name="tested-browsers[]" value=Other> Other</label>,
       <label>please specify <input name=other-browsers></label><br>
  </p>

  <p><label>What problems did you discover when testing? What changes did you make?<br>
     <textarea name=crossbrowser-issues></textarea></label></p>
  
  <p><label>Address of this form:
     <input type=hidden name=url id="url-field">
     <span id="url-text"></span></label>
     <script>
        document.getElementById('url-field').value = document.location.href;
        document.getElementById('url-text').innerHTML = document.location.href;
     </script>
   </p>
   
   <!-- In the next workshop we'll be looking at CSS.
        Why not open the "CSS & Result" tab and try improving
        the presentation of this form with some CSS?
   -->
   <input type=submit>
   
   <p>
   	 If you have any trouble with sending this form, please <a href="mailto:bbirtles@mozilla.com">let Brian know</a>.
   </p>
</form>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}