Machine Problem Download the base ZIP file for MP2 here. Extract the ZIP file >

ID: 3671198 • Letter: M

Question

Machine Problem

Download the base ZIP file for MP2 here. Extract the ZIP file > https://courses.engr.illinois.edu/cs105/mps/numbers.zip

Completing the MP

Take a look

What's this game about?

Part 1: Creating a new function

In numbers.js, you will need to create a new function called processClick(). This function will take an argument that will allow you to tell it which tile was clicked, so it will need to look something like this function processClick(tileId){}. This will create a variable called tileId that you can use anywhere inside the function (within the curly braces), but not outside of it.

Part 2: Calling the function

Your new function will need to be called every time the player clicks a tile. You can achieve this by adding an event handler to each different cell in the keypad table. In HTML, a cell is defined by the <td> tag and since we are waiting for a click, we need to insert an onClick handler to each of those cells. In generic terms, this will look like this (You mustchange this code to fit your needs; Just copying and pasting this example will not do you any good) : <td id="myCell"> The this.id part forwards the id of the cell to the called function so it can properly process the click. By the way, this always refers to the object you are currently dealing with, so in this case the applicable <td>.

Part 3: Getting stuff from the keypad

You will need to read the content of each clicked cell so that you may swap them around. Once you get the hang of it, it is actually not that hard to get the content in Javascript. The entire page is considered a document and everything in the page lives under the document object. We can use document.getElementById(desiredId) to get any item (technically speaking any "object") from the page. You already know the id of the clicked tile as it was passed to the function from the event handler. So you could usedocument.getElementById(tileId). This will give you the <td> object for the clicked tile. This tile itself has a property (which is sort of like a variable) called innerHTML. Sodocument.getElementById(tileId).innerHTML will get you the number that is in the currently clicked cell.

Part 4: Writing stuff to the keypad

Now that you know how to read from innerHTML, writing to it won't a big deal. You can write "I love my cat" to a cell by just assigning that text to innerHTML, like so:document.getElementById(tileId).innerHTML="I love my cat";

Part 5: Remembering the tile

The only slightly tricky part is keeping track of the clicked tile. When the player clicks one, you need to know whether he already clicked one before (whether there is an orange tile). If so, you need to perform the swap and turn the tiles white again. If not, you need to turn the clikcked tile orange and somehow remember the fact that this tile was clicked.

You can do this in many ways. However, to make it a little easier for you, we have defined a global variable called clickedcell that initially holds an empty string "". You may use this variable to remember what tile the player has clicked (do not use var to recreate it). Obviously you need to also empty it out after each swap.

Part 6: Changing the color of an object

Each object has many properties and a <td> has things such as innerHTML and also one called style. This lets you change just about everything about how the object looks, including its style.backgroundColor which you can read and write the exact same way as innerHTML.

Oh, one more thing, colors are defined in hexadecimal RGB space. So orange is #D35400 and white is #FFFFFF. Play around with it a little and see what cool colors you can come up with.

Part 7: The winning condition

The last thing on your to-do list is the winning condition. Every time a user swaps two tiles, you must check whether all of them are in the right place. If so, you will need to congratulate the user by displaying an alert message.

Explanation / Answer

numbers.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="cs105.css">

<div class="cs105-mp-header" id="content">
   <div class="container">
       <a href="https://cs105.cs.illinois.edu/" target="_blank"><img src="https://cs105.cs.illinois.edu/res/cs105_80px.png" alt="CS 105 Logo" /></a>
       <h1>MP2: Number Sorting Game</h1>
       <p>Build a number puzzle from almost nothing to a full game!</p>
   </div>
</div>
<center>
   <p></p>

</center>
<script language="JavaScript">
// Do NOT edit this script. All your code needs to go into numbers.js!
setup();
clickedcell="";
</script>

numbers.js:

// CS 105: MP2 (Spring 2016)
// https://cs105.cs.illinois.edu/

// Enter your processClick() function here.
// You may want to define additional functions as well.

clickedcell="";
function processClick(tileId)
{

var tdvalue=document.getElementById(tileId).innerHTML="I love my cat";
tdvalue.style.backgroundColor="#D35400";
if(tdvalue == clickedcell)
tdvalue.style.backgroundColor="#FFFFFF";
else if(clickedcell!=" ")
{
var i=tileId.innerHTML;
tileId.innerHTML=clickedcell.innerHTML;
clickedcell.innerHTML=i;
tdvalue.style.backgroundColor="#FFFFFF";
clickedcell.style.backgroundColor="#FFFFFF";
clickedcell="";
}
else
clickedcell=tdvalue;

if(document.getElementById('topleft').innerHTML==1 &&
document.getElementById('topcenter').innerHTML==2 &&document.getElementById('topright').innerHTML==3
document.getElementById('centerleft').innerHTML==4 && document.getElementById('centercenter').innerHTML==5 && document.getElementById('centerright').innerHTML==6&& document.getElementById('bottomleft').innerHTML==7 && document.getElementById('bottomcenter').innerHTML==8 &&
document.getElementById('bottomright').innerHTML==9)

alert("well done congratulations");
}

scaffold.js:

// CS 105: MP2 (Spring 2016)
// https://cs105.cs.illinois.edu/

// Do NOT edit this JavaScript code. It is used to randomly fill out
// the number grid and should be left alone. All your code needs to
// go into the numbers.js file.

function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}

function setup(){
var numbers = shuffleArray(["1","2","3","4","5","6","7","8","9"]);
document.getElementById('topleft').innerHTML=numbers[0];
document.getElementById('topcenter').innerHTML=numbers[1];
document.getElementById('topright').innerHTML=numbers[2];
document.getElementById('centerleft').innerHTML=numbers[3];
document.getElementById('centercenter').innerHTML=numbers[4];
document.getElementById('centerright').innerHTML=numbers[5];
document.getElementById('bottomleft').innerHTML=numbers[6];
document.getElementById('bottomcenter').innerHTML=numbers[7];
document.getElementById('bottomright').innerHTML=numbers[8];
}

Navigate

Machine Problem 6 Stings and Enumerations --- TO BE COMPLETED IN C++ INFO TO BE

Machine Replacement Decision A company is considering replacing an old piece of

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Machine Problem Download the base ZIP file for MP2 here. Extract the ZIP file >

Question

Explanation / Answer

Related Questions

Navigate