partial instructions for exercise 7

exercises/07_js_forms/README.md

@@ -0,0 +1,124 @@
+# Exercise 7: Javascript and Forms
+
+In this exercise, you will now take the form from Exercise 5 and make
+it respond to user input. This exercise will be a bit longer than the previous
+ones but it will be closer to the things that you will do in an actual
+experiment. Use the skeleton in `exercises/07_js_forms/exercise.html`.
+
+The page that you are building includes a form in which a user can provide some
+information and when the user clicks on the submit button, the page will show a
+response based on what the user entered.
+
+## Steps
+
+1. Setup the page by hiding all the elements that should be initially hidden.
+These include the error messages and the entire response container. As you can
+see, I put a `div` element around the response on the bottom of the page. A `div`
+is basically just a box that can encapsulate other elements and you can hide and
+make appear all of these elements but hiding or showing the containing `div`.
+
+  There are several ways of setting up the page. One method is to use CSS and
+  to hide elements by setting the `display` property to `none` as follows.
+
+  ```
+  .error {
+    display: none;
+  }
+  ```
+
+  This will hide all elements that have the `error` class, which in this case
+  are all error messages. Another way of hiding elements when the page is being
+  loaded is to use Javascript and to define a function that is being executed
+  when the page is being loaded. You can define such a function within any
+  Javascript file that you include as follows.
+
+  ```
+  $(document).ready(function() {
+      //do some things when the page is loading  
+  });
+  ```
+
+  As there is currently no CSS file included in the skeleton document, use
+  the second option (JS) to hide error messages and everything that is part of
+  the response. You should see only the form when you load the page.
+
+2. Make sure that the user actually enters a name and selects an age, and display
+   an error message otherwise.
+
+   To do this, you will have to write a function that gets executed when a user
+   clicks on the button. Let us call this function `handleButtonClick`. In this
+   function let us call another function called `validateForm`. You can call a
+   function from a function by using its name and adding parentheses after the
+   name, e.g, to call `validateForm` add the following to the function body of
+   `handleButtonClick`.
+
+   ```
+      validateForm()
+   ```
+
+   `validateForm` does not exist at this point, so you still have to define it
+   and add some code for doing the actual validation. The reason why we are adding
+   this code to the validation is simply readability. Try to keep your functions
+   short and have meaningful names. Then it will be much easier to reuse parts of
+   your code in different places and it will be much easier to read as compared to
+   putting all your code into one big function.
+
+   Inside `validateForm` you will have to write code that checks whether the user
+   entered text into the `name` field and whether the user checked a radio button.
+
+   If you want to check whether some condition is satisfied and if that is or is not
+   the case, execute some code, you can use `if`-statements:
+
+   ```
+      if (CONDITION) {
+        //execute this code only if CONDITION is true
+      } else {
+        //execute this code otherwise
+      }
+   ```
+
+   The `else` and the block after it is optional. Conditions in Javascript can
+   come in many different forms. For example, you can call a function that returns
+   either `true` or `false`. Or you can compare whether a variable has a certain
+   value (`variable == "VALUE"`). You will use the latter and compare what the user
+   has entered to the empty string `""`. If what the user entered is the empty string,
+   i.e., the user did not enter anything, then you want to show the error message
+   with the id `#name-error`. You can get the value of a text input with the id
+   `input-id` as following.
+
+   ```
+     $("#input-id").val()
+   ```
+
+   With all of this information you should now be able to write some code that checks
+   whether there is text in the name field and display the error message otherwise.
+   Also add `return false;` below the statement that displays the error message.
+   You will make use of this later.
+
+   Confirming that the user checked a radio button works similarly. Instead of
+   comparing the value of a text input, we want to check whether there is an element
+   with the right class name that has been checked. We can do that by retrieving all
+   these elements and then checking whether the number of elements is not `1`.
+
+   ```
+    $(".age-input:checked").length != 1
+   ```
+
+   This code retrieves all the elements that have the class name `age-input` and
+   which have been checked and then accesses the `length` property which tells us
+   how many elements match this expression. This entire statement will be true if
+   length does NOT equal 1 (`!=` means does not equal).
+
+   With this information, you should now also be able to display an error message
+   when a user does not check any of the radio buttons. Also in this case, add
+   `return false;` below the statement that displays the error message. Finally,
+   add `return true;` at the very bottom of the function body of `validateForm`.
+
+   The last step is now to make sure that `handleButtonClick` is run when you click
+   on the button. To do this, use again the `onclick` attribute of the button element.
+
+   Now it should display an error message if you click on the button without
+   entering anything.
+
+
+   3. 

exercises/07_js_forms/exercise.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="js/jquery.js" charset="utf-8"></script>
+    <script src="js/functions.js" charset="utf-8"></script>
+    <title>HTML Form</title>
+  </head>
+  <body>
+    <h1>A Form</h1>
+    <form action="#" onsubmit="return false;">
+      <p><label>Name*: <input type="text" name="name" id="name-input" /></label></p>
+      <p class="error" id="name-error">Please enter a name!</p>
+      <p>Age*:
+        <label><input type="radio" class="age-input" name="age" value="0-20" />0-20 yrs </label>
+        <label><input type="radio" class="age-input" name="age" value="21-40" />21-40 yrs </label>
+        <label><input type="radio" class="age-input" name="age" value="41-60" />41-60 yrs </label>
+        <label><input type="radio" class="age-input" name="age" value="61+" />61+ yrs </label>
+      </p>
+      <p class="error" id="age-error">Please select your age!</p>
+      <p>
+        <label>Your life story:<br/>
+          <textarea name="story" cols="60" rows="4" id="story-input"></textarea>
+        </label>
+      </p>
+      <p>Favorite colors:
+        <label><input type="checkbox" class="favorite-colors-input" name="likes-green" value="green" />green</label>
+        <label><input type="checkbox" class="favorite-colors-input" name="likes-blue" value="blue" />blue</label>
+        <label><input type="checkbox" class="favorite-colors-input" name="likes-red" value="red" />red</label>
+        <label><input type="checkbox" class="favorite-colors-input" name="likes-yellow" value="yellow" />yellow</label>
+      </p>
+      <p><label for="occupation-input">Occupation:</label>
+        <select name="occupation" id="occupation-input">
+          <option value="a student">student</option>
+          <option value="an employee">employed</option>
+          <option value="unemployed">unemployed</option>
+          <option value="a retiree">retired</option>
+        </select>
+
+      </p>
+
+      <input type="button" value="Submit" id="submit-button" onclick="submitForm();">
+
+    </form>
+
+
+    <div id="response">
+      <p>Hi <span id="response-name">###</span>,</p>
+
+      <p>I think it is great that <span id="response-story">###</span></p>
+      <p>Good luck with being <span id="response-occupation">###</span>! </p>
+    </div>
+  </body>
+</html>

exercises/07_js_forms/js/functions.js

@@ -0,0 +1,81 @@
+
+
+function validate() {
+
+  // hide all error messages
+  $(".error").hide();
+
+  //check whether the user entered a name
+  if ($("#name-input").val() == "") {
+    $("#name-error").show();
+    return false;
+  }
+
+  // check whether the user selected an age
+  if ($(".age-input:checked").length != 1) {
+    $("#age-error").show();
+    return false;
+  }
+  return true;
+}
+
+function clearForm() {
+    $("input[type=text]").val("");
+    $("textarea").val("");
+    $("input[type=radio]").attr("checked", null);
+    $("input[type=checkbox]").attr("checked", null);
+    $("select").val("");
+}
+
+function submitForm() {
+
+  //hide previous response (if it exists)
+  $("#response").hide();
+
+  //check whether a user entered a name and an age
+  if ( ! validate()) {
+    return false;
+  }
+
+  //set the name in the response to the value of the text field
+  //you can also use .html() instead of .text()
+  $("#response-name").text($("#name-input").val());
+
+  //set I think it is great that ... with contents of
+  //the text box or use the age.
+  if ($("#story-input").val() != "") {
+    //replace I with you
+    var story = $("#story-input").val().replace("I", "you");
+    $("#response-story").text(story);
+  } else {
+    var story = "you are " + $(".age-input:checked").val() + " years old";
+    $("#response-story").text(story);
+  }
+
+
+  if ($(".favorite-colors-input:checked").length > 0) {
+    favorite_cols = []
+    $(".favorite-colors-input:checked").each(function() {
+      favorite_cols.push($(this).val());
+    });
+
+    $("#favorite-colors-response").text(favorite_cols.join(" and "));
+    $("#favorite-colors-sentence").show();
+  } else {
+    $("#favorite-colors-sentence").hide();
+  }
+
+
+  $("#response-occupation").text($("#occupation-input").val());
+  $("#response").show();
+
+  clearForm();
+
+}
+
+
+$(document).ready(function() {
+
+  $(".error").hide();
+  $("#response").hide();
+});

solutions/07_js_forms/js/functions.js

@@ -27,7 +27,7 @@ function clearForm() {
     $("select").val("");
 }
 
-function submitForm() {
+function handleButtonClick() {
 
   //hide previous response (if it exists)
   $("#response").hide();

solutions/07_js_forms/solution.html

@@ -40,7 +40,7 @@ <h1>A Form</h1>
 
       </p>
 
-      <input type="button" value="Submit" id="submit-button" onclick="submitForm();">
+      <input type="button" value="Submit" id="submit-button" onclick="handleButtonClick();">
 
     </form>