•   Course Home  
•   Information  
  • Syllabus
  • Roster
  • Instructor

  ---

  • Academic Calendar
•   Class Notes  
  • List of Current & Completed Classes
  • List of Future Classes

  ---

  • Class Videos
•   Assignments  
  • Assignment No. 1 — Thursday, September 3, 2015
  • Assignment No. 2 — Thursday, September 10, 2015
  • Assignment No. 3 — Tuesday, September 22, 2015
  • Assignment No. 4 — Tuesday, September 29, 2015
  • Assignment No. 5 — Tuesday, October 6, 2015
  • Assignment No. 6 — Tuesday, October 20, 2015
  • Assignment No. 7 — Thursday, November 5, 2015
  • Assignment No. 8 — Thursday, November 19, 2015
  • Assignment No. 9 — Wednesday, December 9, 2015

  ---

  • Assignment Submission Form
  • Complete List of Assignments
•   Resources  
  • Poll Everywhere

  ---

  • Textbooks
  • References & Tutorials
  • Cool Stuff
  • Twitter Tricks
  • Of Interest
  • Tools, Utilities, IDEs, & Test Environments
  • Writing Resources

  ---

  • Complete List of Resources

Notes for Class No. 25

Quiz on Validation and Discussions of Alternative Data Structures and Human Factors Considerations for Assignment No. 9

Tuesday, December 1, 2015

A video of this class is (or will be) posted at:   http://echo360.uml.edu/heines201516/guiprogramming1.html

Handouts and Materials

• Assignment No. 9: Implementing a Bit of Scrabble with Drag-and-Drop

Openings / Announcements / Reminders

Quiz on validation techniques today

For Thursday, December 3rd

Be prepared to show and discuss your preliminary implementation of Assignment No. 9

ES2015 Code School Video

“The Shape of JavaScript to Come”

Using let  (6:47)

Using let in for Loops  (3:54)

Using const  (4:09)

Class Notes

Working with Associative Arrays in JavaScript

Alternative data structure to the one originally posted on Piazza by Ramon Meza and corrected by Jason Downing

Working Web Page

The Associative Array

/* File: /~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse.js * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on November 21, 2015 at 10:27 AM * updated by JMH on November 25, 2015 at 10:58 AM to add the blank tile * updated by JMH on November 27, 2015 at 10:22 AM to add original-distribution */ var ScrabbleTiles = [] ; ScrabbleTiles["A"] = { "value" : 1, "original-distribution" : 9, "number-remaining" : 9 } ; ScrabbleTiles["B"] = { "value" : 3, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["C"] = { "value" : 3, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["D"] = { "value" : 2, "original-distribution" : 4, "number-remaining" : 4 } ; ScrabbleTiles["E"] = { "value" : 1, "original-distribution" : 12, "number-remaining" : 12 } ; ScrabbleTiles["F"] = { "value" : 4, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["G"] = { "value" : 2, "original-distribution" : 3, "number-remaining" : 3 } ; ScrabbleTiles["H"] = { "value" : 4, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["I"] = { "value" : 1, "original-distribution" : 9, "number-remaining" : 9 } ; ScrabbleTiles["J"] = { "value" : 8, "original-distribution" : 1, "number-remaining" : 1 } ; ScrabbleTiles["K"] = { "value" : 5, "original-distribution" : 1, "number-remaining" : 1 } ; ScrabbleTiles["L"] = { "value" : 1, "original-distribution" : 4, "number-remaining" : 4 } ; ScrabbleTiles["M"] = { "value" : 3, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["N"] = { "value" : 1, "original-distribution" : 6, "number-remaining" : 6 } ; ScrabbleTiles["O"] = { "value" : 1, "original-distribution" : 8, "number-remaining" : 8 } ; ScrabbleTiles["P"] = { "value" : 3, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["Q"] = { "value" : 10, "original-distribution" : 1, "number-remaining" : 1 } ; ScrabbleTiles["R"] = { "value" : 1, "original-distribution" : 6, "number-remaining" : 6 } ; ScrabbleTiles["S"] = { "value" : 1, "original-distribution" : 4, "number-remaining" : 4 } ; ScrabbleTiles["T"] = { "value" : 1, "original-distribution" : 6, "number-remaining" : 6 } ; ScrabbleTiles["U"] = { "value" : 1, "original-distribution" : 4, "number-remaining" : 4 } ; ScrabbleTiles["V"] = { "value" : 4, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["W"] = { "value" : 4, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["X"] = { "value" : 8, "original-distribution" : 1, "number-remaining" : 1 } ; ScrabbleTiles["Y"] = { "value" : 4, "original-distribution" : 2, "number-remaining" : 2 } ; ScrabbleTiles["Z"] = { "value" : 10, "original-distribution" : 1, "number-remaining" : 1 } ; ScrabbleTiles["_"] = { "value" : 0, "original-distribution" : 2, "number-remaining" : 2 } ;

The HTML file

<!DOCTYPE HTML> <html> <head> <title>Scrabble Associative Array Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- File: /~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse_Test_v2.html Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely copied or excerpted for educational purposes with credit to the author. updated by JMH on November 21, 2015 at 9:52 AM updated by JMH on November 25, 2015 at 10:15 AM to add the blank tile and other features updated by JMH on November 27, 2015 at 3:04 PM to add distribution as well as remaining column --> <meta name="description" content="For 91.461 Assignment No. 9" /> <link type="text/css" rel="stylesheet" href="/~heines/blueverdana08pt.css"></link> <link type="text/css" rel="stylesheet" href="Scrabble_Pieces_AssociativeArray_Jesse_Test.css"></link> <!-- include jQuery library --> <script type="text/javascript" src="/~heines/jQuery/jquery-2.1.4.min.js"></script> <!-- read associative array containing Scrabble pieces --> <script src="Scrabble_Pieces_AssociativeArray_Jesse.js"></script> <script> $(document).ready( function () { // define variables here to thwart hoisting var char ; // uppercase character indicated by the loop index var newTableRow ; // one row of the table var newTableCell ; // one cell in a table row var nTilesOriginal = 0 ; // number of tiles in original distribution // (to check that all 100 accounted for) var nTilesRemaining = 0 ; // number of tiles remaining during the game // populate table of tile values // note that an associative array is actually an object, so to get its length // we have to first reference its keys and count those for ( k = 0 ; k < Object.keys( ScrabbleTiles ).length + 1 ; k++ ) { // convert the integer loop index to an uppercase character, which the // subscript of the associative array of tile objects if ( k < Object.keys( ScrabbleTiles ).length - 1 ) { char = String.fromCharCode( 65 + k ) ; } else if ( k < Object.keys( ScrabbleTiles ).length ) { char = "_" ; } else { char = "Total" ; } // create a new table row to hold the info on one tile newTableRow = $("<tr></tr>" ) ; // create a new table cell to hold the letter of the tile we're looking at newTableCell = $("<td></td>" ) ; if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last if ( char !== "_" ) { // handle all tiles except the blank // put the letter of the tile into the new table cell newTableCell.text( char ) ; } else { // handle the blank newTableCell.text( "Blank" ) ; } } else { // handle the last row, which will contain the total number of tiles newTableCell.attr( "colspan", "2" ) ; // row title will span 2 columns newTableCell.css( { // format the last row as white text on black background "font-weight" : "bold", "font-style" : "italic", "background-color" : "black", "color" : "white", "text-align" : "right" } ) ; newTableCell.text( "Total Tiles:" ) ; // set title for last row } // append the new table cell to the new table row newTableRow.append( newTableCell ) ; // display letter tile values if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last // create a new table cell to hold the value of the tile we're looking at newTableCell = $("<td></td>" ) ; // put the letter of the tile into the new table cell // here we can use the dot syntax because "value" is a plain indentifier newTableCell.text( ScrabbleTiles[ char ].value ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // display original letter tile distribution if ( k < Object.keys( ScrabbleTiles ).length ) { // all rows except the last // create a new table cell to hold the value of the tile we're looking at newTableCell = $("<td></td>" ) ; // put the letter of the tile into the new table cell // here we can use the dot syntax because "value" is a plain indentifier newTableCell.text( ScrabbleTiles[ char ][ "original-distribution" ] ) ; // add number of tiles for this letter to the count of the total number of tiles nTilesOriginal += ScrabbleTiles[ char ][ "original-distribution" ] ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // create a new table cell to hold the number of tiles remaining of the tile // we're looking at newTableCell = $("<td></td>" ) ; if ( k < Object.keys( ScrabbleTiles ).length ) { // put the numer of tiles for the letter into the new table cell // here we must use the 2-D array syntax because "number-remaining" contains a hyphen newTableCell.text( ScrabbleTiles[ char ][ "number-remaining" ] ) ; // add number of tiles for this letter to the count of the total number of tiles nTilesRemaining += ScrabbleTiles[ char ][ "number-remaining" ] ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } else { // add cell for total number of letter tiles in original distribution newTableCell.css( { "font-weight" : "bold", "background-color" : "black", "color" : "white" } ) ; newTableCell.text( nTilesOriginal ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; newTableCell = $("<td></td>" ) ; // create another table cell // add cell for total number of letter tiles remaining newTableCell.css( { "font-weight" : "bold", "background-color" : "black", "color" : "white" } ) ; newTableCell.text( nTilesRemaining ) ; // append the new table cell to the new table row newTableRow.append( newTableCell ) ; } // append the complete table row to the table $("#tbl").append( newTableRow ) ; } } ) ; </script> <style> /* enhance CSS from version 1 */ /* make the table head column separators white */ /* (start with the 3rd column and go backwards) */ th:nth-child(-n+3) { border-right : 1px solid white ; } </style> </head> <body> <table id="tbl"> <tr> <th>Tile</th> <th>Value</th> <th>Orig.<br>Dist.</th> <th>No.<br>Left</th> </tr> </table> </body> </html>

The CSS File

/* File: * /~heines/91.461/91.461-2015-16f/461-assn/Scrabble_Pieces_AssociativeArray_Jesse_Test.css * Jesse M. Heines, UMass Lowell Computer Science, heines@cs.uml.edu * Copyright (c) 2015 by Jesse M. Heines. All rights reserved. May be freely * copied or excerpted for educational purposes with credit to the author. * updated by JMH on November 21, 2015 at 10:24 AM */ /* add borders to the table the CSS way */ table { border-spacing : 0 ; border-collapse : collapse ; } /* format the table cells the CSS way */ td, th { text-align : center ; border : 1px solid black ; padding : 0px 5px ; } /* format the table head cells the CSS way */ th { background-color : black ; color : white ; } /* make the table head column separators white */ /* (start with the 2nd column and go backwards) */ th:nth-child(-n+2) { border-right : 1px solid white ; }

Human Factors Considerations in Scrabble Implementation

Ideas from the class

---

This is document http://jesseheines.com:8080/~heines/91.461/91.461-2015-16f/461-lecs/lecture25.jsp.  It was last modified on Friday, August 26, 2022 at 4:09 PM.
Copyright © 2022 by Jesse M. Heines.  All rights reserved.  May be freely copied or excerpted for educational purposes with credit to the author.