Missing Task? Chore Door : Please Help!

lanajames · 2018-09-09 03:34:14 UTC

Hello!!

I’m not exactly sure how to ask this question and couldn’t find it upon searching.

Here’s the issue:

I’ve completed every task on Chore Door up until number 58. My code isn’t the problem…the task is what has me stumped.

I will quote it:

You’ve written a function to determine if a door’s src contains the game-ending ChoreBot image. Now you must apply this logic into currently existing JavaScript functions.

The playOver() function now needs a door argument. After the if statement in this function, add an else if condition that checks if the isBot() will equate to true if you pass the door as the isBot() argument.

Now here is where I’m confused…there was no previous task relating to writing a playOver() function or what if/else statement to place inside of it.

Am I supposed to figure this out myself? And if so, how? Can someone give me a nudge in the right direction or at least quell my confusion?

As I said before, my code isn’t the issue, I’ve got that part. But if you need the code anyway for reference:


 let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg"; let startButton = document.getElementById('start');
 
 //Global variables for doors 1-4
 let doorImage1 = document.getElementById('door1');
 let doorImage2 = document.getElementById('door2');
 let doorImage3 = document.getElementById('door3');
 let doorImage4 = document.getElementById('door4');
 let botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
 let beachDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";
 let spaceDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg";
 let loveDoorPath = "https://cq3qna.dm.files.1drv.com/y4mTV0VNAOSTaP28o3ufnSfUj3yzheK_ZO598yGChoqE-bOVWLLe9uO2jFmfJAFsXXOYncta9laeG0xTiP2A-y6ABmVGZncOkaSr1I6ArZFWvSePGjwryHMqHDrfnuSS4Bi8yYqgb1oHfv0UE6SzyKNspmqCLzvSgCuLaVHN8U44wL8kZh_1WHZJPFyebFAQLvRbueLoMhW18ydMm8ND4hzXQ?width=140&height=256&cropmode=none";

 //Global Variables for randomDoor
 let numClosedDoors = 4;
 let openDoor1;
 let openDoor2;
 let openDoor3;
 let openDoor4;
 
 const playOver = (door) => {
   if (door === )
 }
 
 const isLove = (door) => {
   if (door.src === loveDoorPath) {
     return true;
   } else {
     return false;
   }
 }
 
 //Preventing the "cheaters"
 const isClicked = (door) => {
   if (door.src === closedDoorPath) {
     return false;
   } else {
     return true;
   }
 }
 
 //playDoor Functions
 const playDoor = () => {
   numClosedDoors--;
   if (numClosedDoors === 0) {
     gameOver('win');
   }
 }
 
 //Random door generator for game
 const randomDoorGen = () => {
   let choreDoor = Math.floor(Math.random() * numClosedDoors);
   if (choreDoor === 0) {
     openDoor1 = loveDoorPath;
     openDoor2 = beachDoorPath;
     openDoor3 = spaceDoorPath;
     openDoor4 = botDoorPath;
   } else if (choreDoor === 1) {
     openDoor4 = loveDoorPath;
     openDoor2 = botDoorPath;
     openDoor3 = beachDoorPath;
     openDoor1 = spaceDoorPath;
   } else if (choreDoor === 2) {
     openDoor3 = loveDoorPath;
     openDoor1 = spaceDoorPath;
     openDoor2 = botDoorPath;
     openDoor4 = beachDoorPath
   } else {
     openDoor2 = loveDoorPath;
     openDoor1 = beachDoorPath;
     openDoor3 = botDoorPath;
     openDoor4 = spaceDoorPath;
   }
 }
 
 
 //Functions for opening doors
 door1.onclick = () => {
   doorImage1.src = openDoor1;
   playDoor();
 }
 
 door2.onclick = () => {
   doorImage2.src = openDoor2;
   playDoor();
 }
 
 door3.onclick = () => {
   doorImage3.src = openDoor3;
   playDoor();
 }
 
 door4.onclick = () => {
   doorImage4.src = openDoor4;
   playDoor();
 }
 
 const gameOver = (str) => {
   if (str === 'win') {
     startButton.innerHTML = "You win! Wanna play again?";
   }
 }
 
 
 console.log(randomDoorGen());



https://www.codecademy.com/paths/web-development/tracks/building-interactive-javascript-websites/modules/web-dev-interactive-websites/projects/chore-door

mtf · 2018-09-09 19:42:51 UTC

First question… Do your click event handlers work? I had no success with,

doorImage1.onclick = () => {
  doorImage1.src = botDoorPath;
});

and opted to use the standard function expression, which does work…

doorImage1.onclick = function() {
  this.src = botDoorPath;
};

Earlier (in a topic on this same project) I made a statement which needs to be walked back, something to effect that there is no event, onclick. However a little digging and what do you know, there is one, a global event. Will need to track down that topic and amend my statement.

GlobalEventHandlers - onclick

It follows that the more widely used element.addEventListener() method will work as expected…

doorImage1.addEventListener('click', function() {
  this.src = botDoorPath;
});

I have yet to find why the arrow function does work as a handler, and actually breaks the other working handlers, as well.

How much of your program is working as expected? I know this does not address your question, as such, but hopefully we’re getting there and will have a working version soon to compare to yours. Bear with me, please/thanks.

lanajames · 2018-09-09 22:23:02 UTC

The program works to the extent where each function operates normally. I changed the onclick function to the shorthand expression because it’s easier for me to remember. I don’t know what code to place inside of the
playOver() function. That’s where I’m stumped.

mtf · 2018-09-09 22:47:31 UTC

I’ve been preoccupied with other things and have been popping back in periodically to keep plugging away at the project. Should get enough time tonight to finish it up and get caught up to where you are.

I’m assuming there is a reset of variables and closing of all doors before restarting another game.

lanajames · 2018-09-09 22:51:29 UTC

Okay, thank you for helping me!

lanajames · 2018-09-09 23:15:02 UTC

You know what? I might be mistaken, I am still going to patiently wait for you to check, but I think this might be a spelling error on part of the task. If I’m correct, that is supposed to be playDoor() not playOver() function. Either that or the playDoor() function is supposed to be a playOver() function instead. I’m going to try completing with this newfound knowledge and see if the game works properly.

mtf · 2018-09-09 23:47:58 UTC

Just getting started on making the game after fussing over the earlier stuff. Will keep you posted.

lanajames · 2018-09-10 00:05:56 UTC

I’m working on it now, you were right, my doors aren’t clickable. I don’t remember what changes I made to make that happen. I’m pouring over the code on my own personal text editor to see where I went wrong.

mtf · 2018-09-10 21:39:23 UTC

I’ve finally completed and refactored this project. Have you got yours up and running now?

lanajames · 2018-09-10 22:39:13 UTC

No. I’m stuck again at the playOver() function. I have no idea where to go from task 58. So frustrating.

lanajames · 2018-09-10 22:54:50 UTC

I DID IT!! I DID IT, IT WORKS YAYYYY!!!

mtf · 2018-09-10 23:04:04 UTC

Are you interested in refactoring your code now that it’s running? Refactoring is the process of simplifying functions and statements, minimizing listener/handlers, using viable data structures as opposed to lots of loose variables, and so on. The program runs fine out of the box but it can be simplified, and the HTML made less obtrusive.

lanajames · 2018-09-10 23:06:58 UTC

I am interested. How do I do that? I know how refactoring works but I haven’t completely grasped remembering all the details without assistance.

mtf · 2018-09-11 00:42:35 UTC

We need to first come up with a list of concerns, and then look into ways each can be addressed. That’s the theory side, which stems from a number of practical and style concerns, not least of which are accesibility and readability.

Looking at the HTML, how many img tags are there? How many are window dressing? How many have repeated attribute values? This is a concern for a number of reasons, but the above two mentioned are enough to justify taking a second look.

This is what we are after in terms of unobtrusive HTML…

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Chore Door!</title>
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
    <link href="./style.css" rel="stylesheet">
  </head>

  <body>
    <div id="header"></div>
    <div class="title-row">
      <p class="instructions-title">Instructions</p>
    </div>
    <table class="instructions-row">
      <tr>
        <td class="instructions-number">1</td>
        <td class="instructions-text">Hiding behind one of these doors is the ChoreBot.</td>
      </tr>
      <tr>
        <td class="instructions-number">2</td>
        <td class="instructions-text">Your mission is to open all of the doors without running into the ChoreBot.</td>
      </tr>
      <tr>
        <td class="instructions-number">3</td>
        <td class="instructions-text">If you manage to avoid the ChoreBot until you open the very last door, you win!</td>
      </tr>
      <tr>
        <td class="instructions-number">4</td>
        <td class="instructions-text">See if you can score a winning streak!</td>
      </tr>
    </table>
    <div id="doors" class="door-row">
      <img class="door-frame" src="#" title="0">
      <img class="door-frame" src="#" title="1">
      <img class="door-frame" src="#" title="2">
    </div>
    <div id="start" class="start-row"></div>
    <script src="./script.js"></script>
  </body>
</html>

Getting there is the refactoring part. It’s involved so buckle up.

Visually, we have this…

lanajames · 2018-09-11 14:32:41 UTC

Okay, I ran into another issue while celebrating the functions working. Now I’m trying to figure out where to place the if statement in the door.onclick functions. so that the game wont default win when you open all of the doors.

mtf · 2018-09-11 14:37:32 UTC

Which task are you working on? No. 65?

lanajames · 2018-09-11 14:54:06 UTC

lol yes. That’s the exact task I am working on and stuck on.

mtf · 2018-09-11 14:55:53 UTC

The code will be the same for all three handlers, so post the code you have for the doorImage1.onclick and we can go from there.

lanajames · 2018-09-11 14:59:29 UTC

door1.onclick = () => {
if (!currentlyPlaying === )
 doorImg1.src = open1;
  playDoor(door1);
}

That is the doorImage1.onclick method. Did you want the rest of them too or just the one?

mtf · 2018-09-11 15:03:07 UTC

The rest will have the same if statement, so we just need to fix this one and you will be able to do the other two.

As a rule I always write the syntax first, then fill in the bits.

if () {

}

That way nothing is left out.

!currentlyPlaying

is a boolean so no comparison needed. However, it won’t be a NOT conditional, just a test of the variable.

if (currerntlyPlaying) {

But No. 65 wants both conditions. Have you taken up logical operators?