Mercurial > open-web-challenges
annotate index.html @ 27:74f52b4966d7
Rewording of my last commit.
| author | Atul Varma <varmaa@toolness.com> |
|---|---|
| date | Tue, 31 Mar 2009 10:36:41 -0700 |
| parents | aae7b98d62ca |
| children | 923fcc0ad519 |
| rev | line source |
|---|---|
| 0 | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| 4 <head> | |
| 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |
| 6 <link rel="stylesheet" type="text/css" media="all" | |
| 7 href="index.css" /> | |
|
5
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
8 <title>Atul’s Open Web Challenges</title> |
| 0 | 9 <base target="_new"/> |
| 10 </head> | |
| 11 <body> | |
| 12 <div id="current-challenge"> | |
| 13 </div> | |
| 14 <div id="messages"> | |
| 4 | 15 <div id="msg-show-first-hint">Click here for a hint.</div> |
| 16 <div id="msg-show-another-hint">Click here for another hint.</div> | |
|
3
9b9d095c5d2c
Changed some CSS styles, other cosmetic issues.
Atul Varma <varmaa@toolness.com>
parents:
0
diff
changeset
|
17 <div id="msg-no-more-hints">All hints are displayed below.</div> |
| 0 | 18 <div id="msg-success">You got it!</div> |
|
5
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
19 <div id="msg-header">Atul’s Open Web Challenge #{id}</div> |
|
22
f44ab359f4af
Added an 'on to the next challenge!' button.
Atul Varma <varmaa@toolness.com>
parents:
21
diff
changeset
|
20 <div id="msg-next-challenge">On to the next challenge!</div> |
| 0 | 21 </div> |
| 22 <div id="challenge-1" class="challenge"> | |
| 23 <div class="content"> | |
| 24 <p>Use <a href="http://www.getfirebug.com">Firebug</a> to change | |
|
12
d0baeac9a413
Reversed objective of first test; now the user has to change 'hello world' to 'hai2u' instead of the other way round.
Atul Varma <varmaa@toolness.com>
parents:
6
diff
changeset
|
25 the text below to say “hai2u” instead of “hello world”.</p> |
|
d0baeac9a413
Reversed objective of first test; now the user has to change 'hello world' to 'hai2u' instead of the other way round.
Atul Varma <varmaa@toolness.com>
parents:
6
diff
changeset
|
26 <span class="boxed">hello world</span> |
|
18
fa108b6e9fbd
Added two secret bonuses to challenge 1.
Atul Varma <varmaa@toolness.com>
parents:
16
diff
changeset
|
27 <span class="secret">Secret Bonus 1: Use jQuery instead of |
|
fa108b6e9fbd
Added two secret bonuses to challenge 1.
Atul Varma <varmaa@toolness.com>
parents:
16
diff
changeset
|
28 Firebug!</span> |
|
fa108b6e9fbd
Added two secret bonuses to challenge 1.
Atul Varma <varmaa@toolness.com>
parents:
16
diff
changeset
|
29 <span class="secret">Secret Bonus 2: Use neither jQuery nor |
|
fa108b6e9fbd
Added two secret bonuses to challenge 1.
Atul Varma <varmaa@toolness.com>
parents:
16
diff
changeset
|
30 Firebug!</span> |
| 0 | 31 </div> |
| 32 <div class="hints"> | |
|
21
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
33 <p>These challenges require you to be using Firefox with Firebug |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
34 installed. If you don't have it, you can try using <a |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
35 href="javascript:var%20firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);" target="_self">Firebug |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
36 Lite</a>, but your mileage may vary.</p> |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
37 <p>If you have Firebug installed, you can show its panel by |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
38 going to the “View” menu and selecting “Firebug”.</p> |
|
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
39 <p>You may have to enable Firebug to work with this site; the |
| 25 | 40 panel at the bottom of this window should tell you how to do |
|
21
aaf8f3a74070
Added hint for using firebug lite.
Atul Varma <varmaa@toolness.com>
parents:
19
diff
changeset
|
41 that.</p> |
| 0 | 42 <p>You can inspect any visual element on a page by clicking |
|
5
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
43 “Inspect” at the top of the Firebug panel and then moving your |
|
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
44 mouse to the part of the page you’re interested in.</p> |
|
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
45 <p>It’s easy to “live edit” a page through Firebug—just |
|
881139cd3c4a
Replaced straight quotes/apostrophes with curly ones.
Atul Varma <varmaa@toolness.com>
parents:
4
diff
changeset
|
46 try clicking on any content you want to edit in the “HTML” |
| 0 | 47 tab!</p> |
| 48 </div> | |
| 49 <div class="validator"> | |
| 50 function(query) { | |
|
12
d0baeac9a413
Reversed objective of first test; now the user has to change 'hello world' to 'hai2u' instead of the other way round.
Atul Varma <varmaa@toolness.com>
parents:
6
diff
changeset
|
51 return query.find(".boxed").text() == "hai2u"; |
| 0 | 52 } |
| 53 </div> | |
| 54 </div> | |
| 16 | 55 <div id="challenge-2" class="challenge"> |
| 56 <div class="content"> | |
| 57 <p>Use <a href="http://docs.jquery.com">jQuery</a> to make the | |
| 58 box below fade away.</p> | |
| 59 <span class="boxed">hai2u</span> | |
| 60 </div> | |
| 61 <div class="hints"> | |
| 62 <p>You can use Firebug's “Console” tab to execute arbitrary | |
| 63 JavaScript code on the page.</p> | |
| 64 <p>jQuery is already loaded into the page; you can access it | |
| 65 in the console via the name <tt>jQuery</tt>.</p> | |
| 66 <p>Check out the documentation on <tt><a | |
| 67 href="http://docs.jquery.com/Core/jQuery#expressioncontext">jQuery(expression)</a></tt>. You | |
| 68 can use this to easily get ahold of any elements on a page using | |
| 69 a <a href="http://docs.jquery.com/Selectors">CSS selector</a>.</p> | |
| 70 <p>Check out jQuery's documentation on <a | |
| 71 href="http://docs.jquery.com/Effects">effects</a>.</p> | |
| 72 </div> | |
| 73 <div class="validator"> | |
| 74 function(query) { | |
| 75 return query.find(".boxed:hidden").length == 1; | |
| 76 } | |
| 77 </div> | |
| 78 </div> | |
| 23 | 79 <div id="challenge-3" class="challenge"> |
| 80 <div class="content"> | |
| 81 <p>Use <a href="http://docs.jquery.com">jQuery</a> to make all | |
| 82 three boxes below fade away.</p> | |
| 83 <span class="boxed">jQuery</span> <span class="boxed">is</span> | |
| 84 <span class="boxed">cool</span> | |
| 85 </div> | |
| 86 <div class="hints"> | |
| 87 <p>It's no coincidence that this is a lot like the <a href="?2" | |
| 88 target="_self">last</a> challenge.</p> | |
| 89 </div> | |
| 90 <div class="validator"> | |
| 91 function(query) { | |
| 92 return query.find(".boxed:hidden").length == 3; | |
| 93 } | |
| 94 </div> | |
| 95 </div> | |
|
19
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
96 <div id="challenge-does-not-exist" class="challenge"> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
97 <div class="content"> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
98 <p>Sorry, this challenge doesn't exist yet. Please check back later!</p> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
99 </div> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
100 <div class="hints"> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
101 <p>No, really, this isn't a challenge.</p> |
|
26
aae7b98d62ca
Added a link to the source code repository.
Atul Varma <varmaa@toolness.com>
parents:
25
diff
changeset
|
102 <p>Well, if you really want more puzzles, check out <a |
|
aae7b98d62ca
Added a link to the source code repository.
Atul Varma <varmaa@toolness.com>
parents:
25
diff
changeset
|
103 href="http://parchment.googlecode.com/svn/trunk/parchment.html?story=http://parchment.toolness.com/if-archive/games/zcode/Galatea.zblorb.js">Galatea</a>.</p> |
|
27
74f52b4966d7
Rewording of my last commit.
Atul Varma <varmaa@toolness.com>
parents:
26
diff
changeset
|
104 <p>Alternatively, you can browse the <a |
|
74f52b4966d7
Rewording of my last commit.
Atul Varma <varmaa@toolness.com>
parents:
26
diff
changeset
|
105 href="http://hg.toolness.com/open-web-challenges/file/tip"> |
|
74f52b4966d7
Rewording of my last commit.
Atul Varma <varmaa@toolness.com>
parents:
26
diff
changeset
|
106 source code</a> of this project, which is written entirely in |
|
74f52b4966d7
Rewording of my last commit.
Atul Varma <varmaa@toolness.com>
parents:
26
diff
changeset
|
107 HTML, CSS, and JavaScript with jQuery.</p> |
|
19
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
108 </div> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
109 <div class="validator"> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
110 function(query) { |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
111 return false; |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
112 } |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
113 </div> |
|
c029286305e2
Challenge IDs can now be specified in the querystring, and nonexistent ones show a 'does-not-exist' challenge.
Atul Varma <varmaa@toolness.com>
parents:
18
diff
changeset
|
114 </div> |
| 0 | 115 </body> |
| 116 <script src="jquery.js"></script> | |
| 117 <script src="open-web-challenges.js"></script> | |
| 118 </html> |