Initial Mastermind Solution

Aside

Reply 
<!doctype html>
<html lang="en">
<head>
 <title>Mastermind</title>
 <meta charset="utf-8">
 <script>
 var secret = "ABCDEF";
 function init() {
 var button = document.getElementById("startButton");
 button.onclick = myButtonClick;
 }

 function myButtonClick() {

 var ul = document.getElementById("guessList");
 var userInput = document.getElementById("userGuess");
 var userTry = userInput.value;
 var li = document.createElement("li");
 alert("Button was clicked! " + userTry);
 for (var i=0; i < secret.length; i++) {
 var found = false;
 if ((userTry.charAt(i))==(secret.charAt(i))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("green");
 found = true;
 }
 else {
 for (var j=0; j<secret.length; j++) {
 if ((userTry.charAt(i))==(secret.charAt(j))) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("red");
 found = true;
 }
 }
 }
 if (found == false) {
 li.innerHTML = li.innerHTML + userTry.charAt(i).fontcolor("black");
 found = true;
 }
 }

 ul.appendChild(li);
 }

 window.onload = init;
 </script>
</head>
<body>
 <form>
 <input type="text" id="userGuess" size="15" placeholder="Your Guess">
 <input type="button" id="startButton" value="Guess the Code">
 <ul id="guessList">
 </ul>
 </form>
</body>
</html>

“Interactive” Web Media

Posted on by
Reply

Class Discussion

  • Extending our work with user input
  • Adding elements to the DOM
  • Understanding Functions
  • Comparing two strings: mini-exercise

Mini-Project Two (Due February 27th!)

For project two, you’ll be working from the two examples we built in class to create a site that responds to user input. To get started, take a look at the rules of the game Mastermind: http://en.wikipedia.org/wiki/Mastermind_(board_game). Build a version of Mastermind that allows the user to guess at a combination, and keeps track of each previous guesses by displaying them on the page using visual cues (the color of text) to show a right letter in the wrong place or a right letter in the right place.

This project requires:

  • Generating the combination for the player to guess
  • Reading in the player’s guess and checking letter by letter (using loops to compare the character in each spot)
  • Outputting the guess to the browser (using an appended element, see pg 99)
  • Showing the player an alert message when they successfully win the game
For full credit, you need to attempt additional modifications. Here is the rubric for each grade:
  • A-Level Work: Build a working mastermind game that accurately responds to both a right letter in the wrong place and a right letter in the right place. Show the player’s guesses with clear visual cues, in some format appropriate to the game. End the game when the player guesses correctly. Handle inappropriate user guesses by prompting them to try again (if the guess is too long or has incorrect characters) Add  at least one extended functionality, such as: a high score table (based on number of guesses), the ability for the player to provide the code for someone else to guess (in imitation of a “two player” mode), or the option to play again without refreshing the browser.
  • B-Level Work: Build a working mastermind game that accurately responds to both a right letter in the wrong place and a right letter in the right place. Show the player’s guesses with clear visual cues, in some format appropriate to the game. Should respond to victory, but might not include the ability to reset without reloading the browser.
  • C-Level Work: Create a basic version of the game that is playable, but may not respond properly  to user hits or misses. Should successfully handle the victory condition.
  • D-Level Work: Mastermind is attempted but fails to compile due to errors in coding. The base of the scripting is present but not functional.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Challenge task: Keep track of the user’s high score using local storage. You can see the model for this type of code on page 105, and adapt it to this project. Remember to test your local storage on your server using Chrome or Firefox, and display the high score record somewhere on the page. 

Projects should be posted to your web server, and the link to the working project should be submitted by email by the start of class (5:30pm) on February 27th!

Countdown Class Exercise Solution

Aside

Reply 
<!doctype html>
<html lang="en">
<head>
 <title>Countdown</title>
 <meta charset="utf-8">
 <script>
 function init() {
 var button = document.getElementById("startButton");
 button.onclick = myButtonClick;
 }

 function myButtonClick() {
 var userInput = document.getElementById("numberInput");
 var userNumber = userInput.value;
 alert("Button was clicked! " + userNumber);
 userNumber = parseInt(userNumber);
 if ((!isNaN(userNumber)) == true) {
 while (userNumber > 0) {
 alert("Countdown: " + userNumber);
 userNumber = userNumber - 1;
 }
 }
 else
 {
 alert("That's not a number!");
 }
 }
 window.onload = init;
 </script>
</head>
<body>
 <form>
 <input type="text" id="numberInput" size="15" placeholder="#">
 <input type="button" id="startButton" value="Start Countdown">
 </form>
</body>
</html>

Getting Started with JavaScript

Posted on by
Reply

Mini-Project One

Remember, Mini-Project One is due before the start of class today. We need two volunteers to:

  • Share your solution for Mini-Project One
  • Walk through and explain your script
  • Describe any challenges or debugging tasks and how you resolved them

Everyone will have to present once this semester for participation credit.

JavaScript and the Document Object Model

In-Class Exercise: Map out the DOM for your solution to Mini-Project One using the structures on page 56 for reference. Hand-in your map (on paper) before the end of class.

Discussion and Practice:

  • The Document Object Model (55-57)
  • While Loops and For Loops (46-47)
  • If and Else If (49-50)

Making a Countdown: Create a website that uses a “for” loop to alert the user as it counts down from a number of the user’s choosing. We’ll start with pseudocode and progress to handling user input. This is not a full project–you will submit your code at the end of class, and we’ll use elements of it to continue towards mini-project two.

Homework:

Create a main page (using properly structured HTML5) for linking to all your projects this semester. Email me the URL and indicate whether you are comfortable having the link shared to your classmates as part of the class blogroll (a list to be maintained on this site).  Also, please indicate if you are interested in having links to your projects tweeted publicly.

Getting to Know HTML5

Posted on by
Reply

Class Discussion

  • Getting to know HTML5
  • Using F12 + Learning From Code
  • Combining HTML5 and JavaScript
  • Pseudocode and project planning

Mini-Project One (Due February 13th!)

For project one, you’ll be working from existing code and building upon it. This is an opportunity to get used to the elements of HTML5 and start working with simple JavaScript elements to create dynamic web experiences. We’ll be working with the Phrase-O-Matic on page 70 of your text (HeadFirst HTML5 Programming). The base project takes arrays of words and combines them to make a random phrase display on the page each time the page loads.

This project requires:

  • Creating at least 3 arrays and filling them with strings of text
  • Using the Math.random() function to choose words
  • Printing out chosen words to a specified paragraph in the document
  • Using the “onload” command to display a phrase
For full credit, you need to attempt additional modifications. Here is the rubric for each grade:
  • A-Level Work: Convert the phrase generator to a poetry generator, imposing a structure and style on the generated content. Modify the stylesheet so that elements display appropriately and add context to the work. A-Level work must be cleanly formatted, include commenting for scripting, and use HTML5 elements appropriately.
  • B-Level Work: Extend the body section to include multiple paragraphs, each with a different phrase. B-level work should be cleanly formatted, include commenting for scripting, and use HTML5 elements appropriately.
  • C-Level Work: Get the phrase-o-matic working with your own content and at least one change in style, length of phrase, or another variable. C-level work should show an attempt at clean formatting, commenting and use of HTML5 but may not succeed in all elements.
  • D-Level Work: Phrase-o-matic is attempted but fails to compile due to errors in coding. The base of the scripting is present but not functional.
  • Failing Work: Project is not submitted or demonstrates no attempt to complete the task.

Challenge task: Change the code so that the user has some level of control. This might include pressing a button to generate a new phrase or poem, submitting words for inclusion in the phrase, or choosing the style of poem. (Challenge tasks are optional, and require working ahead in the book to succeed.)

Projects should be posted to your SIAT server space or another web server, and the link to the working project should be submitted by email by the start of class (5:30pm) on February 13th!

Introduction: Structure, Style and Interaction on the Web

Posted on by
Reply

In-Class Discussion

Getting Started (Tools, Resources)

  • Notepad++ and using text editors
  • CSS3 for Web Designers, Dan Cederholm — An introduction to stylesheets for visual effects and manipulation of objects on the go–a good alternative to using static images for creating a visual feel, and very helpful for adding flexibility to your design process.
  • HTML5 for Web Designers, Jeremy Keith — A introduction to the HTML 5 standard, which is particularly useful if you are used to coding in previous HTML standards. Some of the HTML5 changes are particularly valuable for adapting to different devices and adding flexibility.
  • Supplemental JavaScript: Codecademy / Codeyear

Welcome!

Posted on by
Reply

Welcome to IDIA 619! This is the central hub where you’ll find all the course information, project assignments and files, and reading updates throughout the semester. All readings are listed on the schedule the day they are due. You’ll need to get started by:

  • Purchasing the required text (Head First HTML5 Programming)
  • Setting up Notepad++ or another enhanced text editor on your laptop
  • Familiarizing yourself with your IAT server space or another site for project uploads