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>
  <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>
    </div>
    <div class="hints">
      <p>You can enable Firebug by going to the “View” menu and
      selecting “Firebug”.</p>
      <p>You may have to enable Firebug to work with this site.</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>

</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 07:13:03 -0700
parents	d0baeac9a413
children	fa108b6e9fbd