SuperTutor
$15/per page/Negotiable
MP4 is a continuation of MP3
You will need to continue working with the same files in the same folder that you created for MP3. If you no longer have those files, you can redownload your submission from last weekhere.
Create the Javascript file
Use Notepad++ to create a new file and save it asmp4.js.
Make sure your HTML and JavaScript files are connected.
This simple piece of HTML will take care of that. Put it at the beginning of the
<body>
section of yourindex.htmlpage!
<script src="/mp4.js"></script>
Import one more JavaScript file the same way
In order to figure out what word the nine letters can build, you need a dictionary of nine letter words. By importing thewords.jsfile, you are getting exactly that. Feel free to take a look at the super simple JavaScript in that file. It creates an array calledwordsfor you that contains most of the nine letter words in the English language.
<script src="https://courses.engr.illinois.edu/cs105/mps/words.js"></script>
Upload your changed HTML file
Now that you have linked your HTML and JavaScript files, you need toresubmit your HTML file under MP3. Don't worry about the deadline.
Build your decode function
decode() takes no arguments. It will pull the
value
property from each
<input>
element in the HTML file.
ï‚·Â Create a new array calledletters
ï‚·Â Usedocument.getElementByIdto retrieve each input element.
ï‚·Â Each such element has thevalueproperty that contains the text in the input field
ï‚·Â Add ("push") each letter from the input fields to the end of thelettersarray.
ï‚·Â We need to make sure that all characters are lower case since we want to compare them later. So when you push the letter to the end of the array, call it'stoLowerCase()method like so:array.push(theLetter.toLowerCase());. Obviously youmustreplace theArray and theLetter with the appropriate variable names.
Make sure to frequently save your work and open it in Chrome or Firefox. Open the Console in the browser to catch potential bugs early! You will seriously hate yourself later if you just wing it at this point!
We're continuing the decode() function
ï‚·Â We have an array calledletterscontaining the letters from the grid
ï‚·Â We also have a second array calledwordsthat contains a lot of nine letter words
Â
There are several ways of approaching this problem. We need to design an algorithm to find a matching word. Yes, an algorithm. As you will see that's not particularly scary, but when yuo're done, you can officially say that you have developed an algorithm!
One Possible Algorithm
Make sure you read and understand these steps one by one. Then implement them one by one as well!
ï‚·Â Let us first sort the letters array. Happily, arrays provide a method (you have seen that word in the lecture about objects) that will sort them. You can callletters.sort();and magically your letters will be arranged in alphabetical order.
ï‚·Â If you iterate over (thinkforloop!) thewordsarray, then you can look at every word individually. It is a really good idea to store the word you are currently (in this iteration of the for loop) looking at into a separate variable. For example, tryvar [q]assuming that you are usingqas a counter variable in your for loop.
ï‚·Â The dictionary we are providing for you should be all lower case already. But for good measure, you should use thetoLowerCase()method to "cast" (that's what we call it) the string to all lower case letters.
ï‚·Â Sincelettersis an array, we can make our lives much easier if we convertthisWordto an array as well. Nobody likes to compare apples and oranges, right? Arrays compare very nicely. You can achieve this conversion using the string'ssplitmethod like so:var .split(''). Make sure you haveno spacebetween the single quotes!
ï‚·Â We also wantthisArrayto be sorted. Once again, use the array'ssortmethod for this!
Test your work. Use the console. And if you don't yet fully understand what we have done above, go back and read it again. Ask questions. You will get lost if you don't!
Â
Are we done yet?
Are we done yet?
Not quite, but we're getting close!
ï‚·Â At this point we are working inside your for loop
ï‚·Â We have two sorted arrays (thisArray and letters) that need to be compared
But how?
Well, we need another for loop for that. Yes, inside the one we are working in.
ï‚·Â You want to iterate over the entirethisArrayarray. It should contain nine elements, but you better usethisArray.lengthin your terminating condition.
ï‚·Â If you useras your counter variable, then you need to compare the letter at positionrduring each iteration of this loop.
ï‚·Â IfthisArray[r]is equal toletters[r], then everything is fine. This word can still be a match for our nine characters. You will need to write an if statement for this case, because we need to add something in here later!
ï‚·Â IfthisArray[r]is not equal toletters[r], then we have a mismatch. This word cannot be the right one. In this situation we need to skip this word and go to the next one. We do this by callingbreak;inside the inner loop (the one comparing the letters between the two arrays).
ï‚·Â break;will exit the current for loop and continue inside the parent loop (the outer loop cycling through the possible words) and go to the next word. If there are no more words, the parent loop will also terminate.
So what does this mean?
Well, if we get to the ninth letter (so when r=) and the letters match, then we have a perfect match.
ï‚·Â Remember that a few lines above we told you we'd have to add something? That time has come. Because we have actually found a matching word! So let's tell the world!alert(thisWord);
ï‚·Â On the other hand, if we did not find a matching word, all the for loops will terminate and we should probably tell the user that our code is done.
ï‚·Â Right after the end of the outer for loop, issue an alertalert("The word matching algorithm has displayed all possible matches and will now terminate. Goodbye!");
MP3: Letter Sorting GameType in letters and click on "solve puzzle"Solve the Puzzle!