Lab 18 - Extending the Bean Counter program

By now you have built the Bean Counter program in Chapter 18. From here we will add feedback for the program's users - the baristas.

To consider:

Adding feedback - letting the baristas know what they have entered

In this eighteenth lab, you'll follow the steps to extend the Bean Counter program to give the program's users feedback about what they are entering. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?

Learning more

  1. Before we get started, let's review the suggestion from the chapter about adding feedback:

    One problem with the design is that it doesn't give the barista any feedback about the current settings of the variables. One principle of user interfaces from Chapter 2 is that there should always be feedback for every operation. For some browsers there is a bit of feedback because buttons are automatically highlighted when they are clicked. But once another button is clicked, the automatic highlighting moves to that button. Adding feedback - for example, a window above each column of buttons that gives the current setting - might be better."
    We already have the inputs for this extension - the values are present in the current version of the program. What we need to add now are the windows (or text areas, like the Price text area) that will show the value associated with the buttons we've clicked. That means we'll need to add code to those buttons' onclick events, in addition to adding an new row of text areas.

  2. Try IT: Adding feedback
    Start by opening your bean.html file.

    1. Now let's add a table row above our existing form's first row. Use copy and paste to get the existing first row and copy it just above itself in the code. Once you have copied the code and saved the file, take a look at the new version of the page in your browser. You should see something like this:

      Now let's edit that row: <tr> <td> <input type="text" name="shotval" size= "2" onchange=' '/> </td> <td> <input type="text" name="ounceval" size= "2" onchange=' '/> </td> <td> <input type="text" name="drinkval" size= "13" onchange=' '/> </td> <td> </td> </tr>

      This gives us the text fields to put the appropriate values into - you should now see someting that looks like this:

    2. Next, we need to add code so that when the Bean Counter buttons are clicked, the value of the variable being set is displayed in the window above. Here's one way to do it, for the 1-shot button: <td> <input type="button" value="1" onclick = ' shots = 1; document.forms[0].shotval.value = shots + " s"; '/> </td>

      Notice that we're following the convention from the Total button code, using indented white space to help us see each line and ending lines with semicolons, just as we did when we were working inside <script> tags. We're using string concatenation (with the "'+" operator to add a space followed by the letter s to make the value in the window clear. We are also setting the value in the first window by using its name, shotval, just like we did with the code for the Clear and Total buttons.

    3. Next, follow that example for the remaining shot buttons, size buttons, and drink buttons, and test all of the combinations using the Total button. If you are having trouble getting the total to display correctly (the value for total if you enter a 2-shot, 16-oounce Americano should be 2.50, not 2.5), change the last line of the onclick code for the total button to: document.forms[0].price.value = (Math.round(price*100)/100).toFixed(2);. You may have to use CTRL+F5 to force a refresh of the browser window. You should get something like this:

    4. Finally, make the changes to the Clear button onclick code so that it also clears the new feedback windows. Make sure the value for the shots window is reset to 1. One way to do it is to use the document.forms[0].shotval.value syntax to set the value of the window to the reset value of the variable, like: document.forms[0].shotval.value = shots;

Moving on

Now the baristas can see what they are entering, and get totals or clear the form as necessary. But what if you had a barista that had a visual disability? He or she might need to use a screen reader to get the information about what can be entered into this form, as well as what has been entered. He or she may or may not be able to see the visual cues provided by the color on the page. And baristas with mobility issues or other disabilities may need to be able to select buttons without having to click directly on them. How can you help them get the same access to the program's functions?

WebAIM, a non-profit organization within the Center for Persons with Disabilities at Utah State University, sums up some key principles of accessible web design along with links to resources. WebAIM also makes WAVE, a web accessibility evaluation tool, available for your use at no charge. For this lab specifically, you'll want to look at WebAIM's Creating Accessible Forms.

If you'd like to go more in-depth, you can find out additional information about making the web accessible at W3C's Web Accessibility Initiative, or WAI. It's a lot to get through, but a good introduction can be found at their accessibility overview page. You can also review the current version of W3C's Web Content Accessibility Guidelines, or WCAG.

Finally, review the HTML source of these labs pages. Do you think any of the labs are more accessible than the others? Test the lab pages with one or more accessibility evaluation tools. Are there accessibility standards which are not met? If so, which ones? Are you surprised at any of the results? What would your next steps be to improve accessibility?