Mercurial > open-web-challenges

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" media="all"
        href="index.css" />
  <title>Atul’s Open Web Challenges</title>
  <base target="_new"/>
</head>
<body>
  <div id="current-challenge">
  </div>
  <div id="messages">
    <div id="msg-show-first-hint">Click here for a hint.</div>
    <div id="msg-show-another-hint">Click here for another hint.</div>
    <div id="msg-no-more-hints">All hints are displayed below.</div>
    <div id="msg-success">You got it!</div>
    <div id="msg-header">Atul’s Open Web Challenge #{id}</div>
    <div id="msg-next-challenge">On to the next challenge!</div>
  </div>
  <div id="challenge-1" class="challenge">
    <div class="content">
      <p>Use <a href="http://www.getfirebug.com">Firebug</a> to change
        the text below to say “hai2u” instead of “hello world”.</p>
      <span class="boxed">hello world</span>
      <span class="secret">Secret Bonus 1: Use jQuery instead of
      Firebug!</span>
      <span class="secret">Secret Bonus 2: Use neither jQuery nor
      Firebug!</span>
    </div>
    <div class="hints">
      <p>These challenges require you to be using Firefox with Firebug
      installed.  If you don't have it, you can try using <a
      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
      Lite</a>, but your mileage may vary.</p>
      <p>If you have Firebug installed, you can show its panel by
      going to the “View” menu and selecting “Firebug”.</p>
      <p>You may have to enable Firebug to work with this site; the
      panel at the bottom of this window should tell you how to do
      that.</p>
      <p>You can inspect any visual element on a page by clicking
      “Inspect” at the top of the Firebug panel and then moving your
      mouse to the part of the page you’re interested in.</p>
      <p>It’s easy to “live edit” a page through Firebug—just
      try clicking on any content you want to edit in the “HTML”
      tab!</p>
    </div>
    <div class="validator">
      function(query) {
        return query.find(".boxed").text() == "hai2u";
      }
    </div>
  </div>
  <div id="challenge-2" class="challenge">
    <div class="content">
      <p>Use <a href="http://docs.jquery.com">jQuery</a> to make the
      box below fade away.</p>
      <span class="boxed">hai2u</span>
    </div>
    <div class="hints">
      <p>You can use Firebug's “Console” tab to execute arbitrary
      JavaScript code on the page.</p>
      <p>jQuery is already loaded into the page; you can access it
      in the console via the name <tt>jQuery</tt>.</p>
      <p>Check out the documentation on <tt><a
      href="http://docs.jquery.com/Core/jQuery#expressioncontext">jQuery(expression)</a></tt>. You
      can use this to easily get ahold of any elements on a page using
      a <a href="http://docs.jquery.com/Selectors">CSS selector</a>.</p>
      <p>Check out jQuery's documentation on <a
      href="http://docs.jquery.com/Effects">effects</a>.</p>
    </div>
    <div class="validator">
      function(query) {
        return query.find(".boxed:hidden").length == 1;
      }
    </div>
  </div>
  <div id="challenge-3" class="challenge">
    <div class="content">
      <p>Use <a href="http://docs.jquery.com">jQuery</a> to make all
      three boxes below fade away.</p>
      <span class="boxed">jQuery</span> <span class="boxed">is</span>
      <span class="boxed">cool</span>
    </div>
    <div class="hints">
      <p>It's no coincidence that this is a lot like the <a href="?2"
      target="_self">last</a> challenge.</p>
    </div>
    <div class="validator">
      function(query) {
        return query.find(".boxed:hidden").length == 3;
      }
    </div>
  </div>
  <div id="challenge-does-not-exist" class="challenge">
    <div class="content">
      <p>Sorry, this challenge doesn't exist yet. Please check back later!</p>
    </div>
    <div class="hints">
      <p>No, really, this isn't a challenge.</p>
      <p>Well, if you really want more puzzles, check out <a
      href="http://parchment.googlecode.com/svn/trunk/parchment.html?story=http://parchment.toolness.com/if-archive/games/zcode/Galatea.zblorb.js">Galatea</a>.</p>
      <p>Alternatively, you can browse the <a
      href="http://hg.toolness.com/open-web-challenges/file/tip">
      source code</a> of this project, which is written entirely in
      HTML, CSS, and JavaScript with jQuery.</p>
    </div>
    <div class="validator">
      function(query) {
        return false;
      }
    </div>
  </div>
</body>
<script src="jquery.js"></script>
<script src="open-web-challenges.js"></script>
</html>
author	Atul Varma <varmaa@toolness.com>
date	Tue, 31 Mar 2009 10:36:41 -0700
parents	aae7b98d62ca
children	923fcc0ad519