New Web Development Level - Hidden and Seek

So I tried my hand at creating a level for the HTML jQuery course.

Hidden and Seek

It attempts to teach students how to use the .children() method as well as the CSS visibility:hidden by playing a game of count the Burls.

I have the HTML code working locally independent of the CodeCombat system, but I am not sure how to test this kind of level… I forked the level Disappearing Act to create it.

I was thinking perhaps it could be an additional level branching off at the road from the Toggulation level as shown below. It requires the toggle functions to further teach about hide and show techniques using visibility:hidden; as a class style.

I would welcome any pointers in how to test the level as well as how to clean it up so that the goals work and the Overview text is correctly formatted.

-HW

2 Likes

Wow, awesome! Currently there are few best practices for how to create good web-dev levels, so this’ll be very interesting to work on integrating into the game and having it match the style. Looks very cool already.

@Serg can you help with feedback and tips?

Hey Harry,

I took a look at your level. I even saved a change to it, just to help with formatting the sample code. The level editor is a fickle beast, so, it’s easy that something can go wrong.

  1. You had an extra space at the end of the first line of playercode. This caused you to lose the first character of every line after it… Weird, yes, and we made a bug for it. I fixed this.
  2. Your code was formatted with a mixture of spaces and tabs. This was causing a lot of your elements to not align correctly. Gotta use only tabs.

Now, for a bug:

  1. If you hide animals, the playable screen slowly shrinks. I would fix this by adding a 104px width and height to the .fieldCell class.
  2. I would try to be a bit more specific as to the goal of the level. Is it: “Reveal all, and only, the Burls so Senick can count them”?

Finally, the sample code itself:

  1. I would improve the language of the instructions in the script.
    “Create a variable to select each field cell” is still ambiguous. Try something like: “Create a variable and use jQuery to select all elements with the ‘fieldCell’ class.”
  2. As a direct contradiction to the one above it, we’re targeting low-end resolution machines, so… Try to keep comments under 59 characters.

For goals, we use CSS selectors to figure out how the resulting page has been formatted. The HTML goal group takes a CSS selector and some value checks. Value checks take an event property and a comparator. Event properties are methods and properties.

E.g.:
Selector: #hideButton
Value Check:
Event Property:
css(“background-color”)
!=
"rgb(25, 25, 25)

It’s not the most clear, but we haven’t had a chance to give the whole system a pass.

1 Like

[edited 8/27/2016 13:41EST ]
@Serg How would I test the HTML? I only see the Python screen:

I am using Safari browser on Mavericks if that matters.

The partial HTML screen loads after running the “test” twice. The first time I see the hero and grass screen.

1

2

3

.2. Your code was formatted with a mixture of spaces and tabs. This was causing a lot of your elements to not align correctly. Gotta use only tabs.

Should now be fixed. I turned on the show hidden characters in the editor and did my best to ensure tabs to indent and no rogue spaces after each line.

Now, for a bug:

  1. If you hide animals, the playable screen slowly shrinks. I would fix this by adding a 104px width and height to the .fieldCell class.

Should be fixed, I added width and height to the .fieldCell class

I would try to be a bit more specific as to the goal of the level. Is it: “Reveal all, and only, the Burls so Senick can count them”?

I have reworded the goal instructions a bit. Let me know if they sound more clear.

Children like to play hide and seek and so do Burls!
Help Senick count the Burls! Some of the Burls are hiding and you will need to uncover all of them.
There are also other creatures in the woods confusing Senick, make sure they are hidden so Senick correctly counts only the Burls.

Finally, the sample code itself:

.1. I would improve the language of the instructions in the script.“Create a variable to select each field cell” is still ambiguous. Try something like: “Create a variable and use jQuery to select all elements with the ‘fieldCell’ class.”

.2. As a direct contradiction to the one above it, we’re targeting low-end resolution machines, so… Try to keep comments under 59 characters.

I updated the instructions a little bit in the code and tried to place breaks when the lines would go on too long

Thanks for the advice so far. Its always good to have someone else look at the code.

@Serg Don’t we want to only use spaces, not tabs?

@Harry_the_Wanderer Previewing the level from the level editor doesn’t work for web-dev levels yet, but opening a new tab on http://direct.codecombat.com/play/level/hidden-and-seek?dev=true should let you preview it. (Unfortunately, you’ll have to reload every time you make a change in the level editor for now.)

Sadly that doesn’t seem to do the trick. What browsers do y’all use when developing? Would Safari be an issue?

There may be something else misconfigured about the level now. @Serg can you take a look?

@nick I use tabs in the sample code, it seems to auto-swap them to spaces. As long as you aren’t going and copy-pasting in tabs, it works fine.

@Harry_the_Wanderer Make sure you’re logged into direct, also make sure you refresh the page. Pressing the little play button in the top corner doesn’t work for web-dev levels unfortunately.

Also, we’re having a bit of server trouble this morning, so nothing might be working! And, because of that, I can’t check it just yet ;).

I have updated the goals with regex etc

@Serg I haven’t been able to test the level yet however so I don’t know if anything works correctly.

K, so, your playercode had another problem. Not sure why your code has extraneous U+0009 <control> character added to the start of your lines, but it was messing up the playercode parsing method.

You cannot apply a regex check to the user’s code, unfortunately. It’s a bit messy, and is usually hard to understand.

I would just keep in the Burl Goal Check, and add a goal check to check that each burl has been clicked (so players can’t just change all the hiddens to revealed to pass)

Edit: Also make sure the line indentations match where you expect the player to code. You did the comments correctly, but it is important to make the blank-line indentation matches so players don’t get bogged down in indentation troubles.

Good point. Thank your for fixing this

Updated with 3 goals.

  1. uncover burls
  2. hide creatures
  3. correct Senick’s count

I think the level works now. Let me know if there are any issues with it and/or things that could use improving

@nick I was finally able to get the level working. After loading it from the above link I used the “restart” button and it caused the HTML/Javascript code to change to the actual code.

I don’t know why it would have stored the code that did nothing but that finally allowed me to see the game code. Perhaps that is all that is necessary once you see the HTML/Javascript displayed in the upper right corner instead of “Python” or “Javascript”

Let me know what you think of the level.

No idea what might have caused this. I use a MAC and was writing code in TextWrangler. I am open to any suggestions on what to use to draft the code with.