jquery_quiz.js

/* Here is your chance to take over Socrates!  


Spend 10 minutes on each of the following hacks to the socrates website.
Enter them in the console to make sure it works and then save
your results here. 

Choose a new pair for each. Add your names to the section you complete.
*/

/*1. Use basic selectors (id, class, element) to choose an element on the page.
     Use the .css() method to alter at least two CSS properties of this element. */


/*2. Use basic selectors and the find() method to select an image on the page
    and change it with another image of your choice.  */

/*3. Use traverse methods to select all instances of a repeated word on the page 
     (like code) and use the animate() method to modify it.
*/

/*4. Try to find an element that requires at least three selectors / traverse 
     methods to locate it and then use the .on() method to bind an event handler 
     on these elements (use an event other than click).*/

/*5. Your choice. */

$('.nav nav-tabs li a').on('click', function(event) {
  event.preventDefault();

});


$('#toc_2').click(function(){
  $(this).css('color', 'magenta');
});


$("img").on('click', function() { event.preventDefault();   
  $(this).attr('src', "http://2.bp.blogspot.com/_jAPhpknwGxM/TRHauZjfHxI/AAAAAAAAAGE/0l03D4l-qlE/s1600/ChocolatePudding.jpg");
  }

  $($(document).text().match(/on/g).each


    $($(document).text().match(/on/g)



      each.match.animate


    document.each do |g|
    if document.match(/on/g) == 'g'


  $("li:contains('on')").css("text-decoration", "underline");





$('.content').html().match(/on/g);
["on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on", "on"]
$('.content').html().match(/on/g).each(function() {;
SyntaxError: Unexpected end of input
$('.content').html().match(/on/g).each(function() {$(this).animate()});
TypeError: Object [object Array] has no method 'each'
$('.content').html().match(/on/g); $(this).each(function(){};);
SyntaxError: Unexpected token ;
$('.content').html().match(/on/g); $(this).each(function(){});
[
Window
]
$('.content').html().replace(/on/g,"<span class ='on'>on</span>") 
"
<div class="row challenge_show">
<div class="span10 offset2">
<div class="row">
<h1 class="span8">
jQuery Challenge
<small>Challenge</small>
</h1>
</div>
<div id="challenge_c<span class ='on'>on</span>trols">
<div class="row" style="min-height: 46px;">
<div class="span2">
<butt<span class ='on'>on</span> class="btn btn-success challenge-butt<span class ='on'>on</span> disabled" name="butt<span class ='on'>on</span>" type="submit">Started</butt<span class ='on'>on</span>>
</div>

<div class="span8">
<div class="input-prepend">
<span class="add-<span class ='on'>on</span> modified-add-<span class ='on'>on</span>">
<div style="width: 90px">
<a href="https://gist.github.com/dbc-challenges/5613146" target="_blank">Original gist</a>
</div>
</span>
<input class="span5" id="source_repo" name="source_repo" type="text" value="https://gist.github.com/dbc-challenges/5613146" tabindex="4">
</div>
</div>
</div>
<form accept-charset="UTF-8" acti<span class ='on'>on</span>="/challenges/389/challenge_attempts/33248/submit" class="simple_form edit_challenge_attempt" data-remote="true" id="edit_challenge_attempt_33248" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" tabindex="5"><input name="_method" type="hidden" value="put" tabindex="6"><input name="authenticity_token" type="hidden" value="BBCCg1sg1VmyX2bLYeIR5mPB3x4VbRH9wFzOyhS9/cc=" tabindex="7"></div><div class="row">
<div class="span2">
<input class="btn btn btn-primary" data-disable-with="Submitting..." name="commit" type="submit" value="Submit this soluti<span class ='on'>on</span>" tabindex="8">
</div>
<div class="span7">
<div class="input-prepend">
<span class="add-<span class ='on'>on</span> modified-add-<span class ='on'>on</span>">
<div style="width: 90px">
<a href="https://gist.github.com/6212181" target="_blank">Edit this gist »</a>
</div>
</span>
<input class="span5" id="challenge_attempt_repo" name="challenge_attempt[repo]" size="30" type="text" value="https://gist.github.com/6212181" tabindex="9">
</div>
</div>
</div>
</form>

<div class="row">
<div class="alert alert-success span9" id="notice" style="display: n<span class ='on'>on</span>e"></div>
</div>

</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#objectives">
Objectives
</a></li>
<li><a data-toggle="tab" href="#comments">
Comments
</a></li>
</ul>
<div class="tab-c<span class ='on'>on</span>tent">
<div class="tab-pane active" id="objectives">
<h2 id="toc_0">Here is your chance to take over Socrates!</h2>

<p>JQuery is a powerful JavaScript library that allows you to manipulate DOM elements.  One fun way to practice jQuery is to use the c<span class ='on'>on</span>sole to run jQuery command <span class ='on'>on</span> an existing web site and modify its appearance and behaviour. </p>

<h3 id="toc_1">Learning Objectives</h3>

<ul>
<li>Understand jQuery Selectors, Traversing and Effects</li>
</ul>

<h2 id="toc_2">Objectives</h2>

<p>Spend 10 minutes <span class ='on'>on</span> each of the following hacks to the socrates website, work with a new pair <span class ='on'>on</span> each hack.
Enter them in the c<span class ='on'>on</span>sole to make sure it works and then save
your results in the linked gist.   For each hack give the names of the pair working and the jquery code used to create the hack.   You'll want to reference the <a href="http://api.jquery.com/">jQuery documentati<span class ='on'>on</span></a> .</p>

<ul>
<li>Use basic selectors (id, class, element) to choose an element <span class ='on'>on</span> the page.
 Use the .css() method to alter at least two CSS properties of this element. </li>
<li>Use basic selectors and the find() method to select an image <span class ='on'>on</span> the page
and change it with another image of your choice.<br></li>
<li>Use traverse methods to select all instances of a repeated word <span class ='on'>on</span> the page 
 (like 'code') and use the animate() method to modify it.</li>
<li>Try to find an element that requires at least three selectors / traverse 
 methods to locate it and then use the .<span class ='on'>on</span>() method to bind an event handler 
 <span class ='on'>on</span> these elements (use an event other than click).</li>
<li>Your choice. </li>
</ul>

</div>
<div class="tab-pane" id="comments">
<h2>Comments</h2>
<p class="muted">Please share: relevant blog posts, useful resources, thoughtful questi<span class ='on'>on</span>s</p>
<div class="span10 offset2">
<div id="new-comment">
<form accept-charset="UTF-8" acti<span class ='on'>on</span>="/comments" class="simple_form new_comment" data-remote="true" id="new_comment" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" tabindex="10"><input name="authenticity_token" type="hidden" value="BBCCg1sg1VmyX2bLYeIR5mPB3x4VbRH9wFzOyhS9/cc=" tabindex="11"></div><div class="form form-stacked">
<div class="field">
<div class="c<span class ='on'>on</span>trol-group">
<div class="c<span class ='on'>on</span>trols">
<textarea class="autogrow markdown" cols="40" id="new-comment-body" name="comment[body]" rows="2" tabindex="12" placeholder="You can use GitHub-flavored Markdown here." style="height: 40px;"></textarea>
<span class="help-inline hidden">Can't be blank</span>
</div>
</div>
<input id="comment_commentable_id" name="comment[commentable_id]" type="hidden" value="389" tabindex="13">
<input id="comment_commentable_type" name="comment[commentable_type]" type="hidden" value="Challenge" tabindex="14">
</div>
<div class="acti<span class ='on'>on</span>">
<input id="comment_actor_id" name="comment[actor_id]" type="hidden" tabindex="15">
<div class="btn-group">
<butt<span class ='on'>on</span> class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Comment As
<span class="caret"></span>
</butt<span class ='on'>on</span>>
<ul class="dropdown-menu">
<li><a href="#" class="actor-input" data-actor-id="16355">Andrew</a></li>
<li><a href="#" class="actor-input" data-actor-id="20922">Jerry</a></li>
<li><a href="#" class="actor-input" data-actor-id="28696">Both</a></li>
</ul>
</div>

</div>
</div>
</form>

</div>

</div>
<div class="row">
<div class="span10 offset2"></div>
<div id="comment-threads-c<span class ='on'>on</span>tainer">
<div class="comment-threads">

</div>
</div>

<div aria-hidden="true" aria-labelledby="New Comment" class="modal hidden" id="new-comment-modal" role="dialog">
<div class="form">
<form accept-charset="UTF-8" acti<span class ='on'>on</span>="/comments" class="simple_form new_comment" data-remote="true" id="new_comment" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" tabindex="16"><input name="authenticity_token" type="hidden" value="BBCCg1sg1VmyX2bLYeIR5mPB3x4VbRH9wFzOyhS9/cc=" tabindex="17"></div><div class="modal-header">
<butt<span class ='on'>on</span> aria-hidden="true" class="close" data-dismiss="modal" type="butt<span class ='on'>on</span>">x</butt<span class ='on'>on</span>>
<h3>New Comment</h3>
</div>
<div class="modal-body">
<div class="field">
<div class="c<span class ='on'>on</span>trol-group">
<div class="c<span class ='on'>on</span>trols">
<textarea class="autogrow markdown" cols="40" id="new-comment-modal-body" name="comment[body]" rows="5" tabindex="18" placeholder="You can use GitHub-flavored Markdown here." style="height: 40px;"></textarea>
<span class="help-inline hidden">Can't be blank</span>
</div>
</div>
<input id="comment_commentable_id" name="comment[commentable_id]" type="hidden" value="389" tabindex="19">
<input id="comment_commentable_type" name="comment[commentable_type]" type="hidden" value="Challenge" tabindex="20">
<input id="parent-comment-id" name="parent_comment_id" type="hidden" tabindex="21">
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<input class="btn btn-primary" data-disable-with="working" name="user[504]" type="submit" value="Comment as Andrew" tabindex="22">
<input class="btn btn-primary" data-disable-with="working" name="user[552]" type="submit" value="Comment as Jerry" tabindex="23">
</div>
</form>

</div>
</div>

</div>

</div>
</div>
</div>
</div>

"
 $( ".on" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
  });
[]
 $(this).click(function(){$( ".on" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
  });});
[
Window
]
$(document).click(function() {
  $( ".on" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});
[
#document
]