open-web-challenges

view index.html @ 28:923fcc0ad519

find changesets by author, revision, files, or words in the commit message
Changed boxed content of #2 to 'hai2u2'
author Atul Varma <varmaa@toolness.com>
date Tue Mar 31 10:51:03 2009 -0700 (3 years ago)
parents 74f52b4966d7
children
line source
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" />
8 <title>Atul’s Open Web Challenges</title>
9 <base target="_new"/>
10 </head>
11 <body>
12 <div id="current-challenge">
13 </div>
14 <div id="messages">
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>
17 <div id="msg-no-more-hints">All hints are displayed below.</div>
18 <div id="msg-success">You got it!</div>
19 <div id="msg-header">Atul’s Open Web Challenge #{id}</div>
20 <div id="msg-next-challenge">On to the next challenge!</div>
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
25 the text below to say “hai2u” instead of “hello world”.</p>
26 <span class="boxed">hello world</span>
27 <span class="secret">Secret Bonus 1: Use jQuery instead of
28 Firebug!</span>
29 <span class="secret">Secret Bonus 2: Use neither jQuery nor
30 Firebug!</span>
31 </div>
32 <div class="hints">
33 <p>These challenges require you to be using Firefox with Firebug
34 installed. If you don't have it, you can try using <a
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
36 Lite</a>, but your mileage may vary.</p>
37 <p>If you have Firebug installed, you can show its panel by
38 going to the “View” menu and selecting “Firebug”.</p>
39 <p>You may have to enable Firebug to work with this site; the
40 panel at the bottom of this window should tell you how to do
41 that.</p>
42 <p>You can inspect any visual element on a page by clicking
43 “Inspect” at the top of the Firebug panel and then moving your
44 mouse to the part of the page you’re interested in.</p>
45 <p>It’s easy to “live edit” a page through Firebug—just
46 try clicking on any content you want to edit in the “HTML”
47 tab!</p>
48 </div>
49 <div class="validator">
50 function(query) {
51 return query.find(".boxed").text() == "hai2u";
52 }
53 </div>
54 </div>
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">hai2u2</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>
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>
96 <div id="challenge-does-not-exist" class="challenge">
97 <div class="content">
98 <p>Sorry, this challenge doesn't exist yet. Please check back later!</p>
99 </div>
100 <div class="hints">
101 <p>No, really, this isn't a challenge.</p>
102 <p>Well, if you really want more puzzles, check out <a
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>
104 <p>Alternatively, you can browse the <a
105 href="http://hg.toolness.com/open-web-challenges/file/tip">
106 source code</a> of this project, which is written entirely in
107 HTML, CSS, and JavaScript with jQuery.</p>
108 </div>
109 <div class="validator">
110 function(query) {
111 return false;
112 }
113 </div>
114 </div>
115 </body>
116 <script src="jquery.js"></script>
117 <script src="open-web-challenges.js"></script>
118 </html>