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.
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.
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.
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.
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:
If you hide animals, the playable screen slowly shrinks. I would fix this by adding a 104px 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”?
Finally, the sample code itself:
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.”
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.
.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:
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.
@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 ;).
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.
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”
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.
