MyGeekProject

Recently I had to do a small project that involved creating a learning tool – virtual flash cards. I used the jQuery plugin Cycle to provide the animation effects for the “stack” of cards and I also used another jQuery plugin called quickFlip.

Basically I created a way for the user to grab a glossary from a specific course and then I used php and mysql to loop through the results each time generating the following div tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="quickFlip">
<!-- Front of card -->
<div class="quickFlipPanel front-card">
    <h4 class="">
       <p class="quickFlipCta" style="text-align: center; color: #ff0000;">Click here to flip the card over.</p>
    </h4>
</div>
 
<!-- Back of card -->
<div class="quickFlipPanel back-card">
    <h4 class="">
      <div style="text-align: center; width: 615px; height: 100px;">
        <div>
          <h3>Correct</h3>
        </div>
        <div>
          <h3><a>Incorrect</a></h3>
        </div>
      </div>
    </h4>
</div>

Here is the javascript function defined for update_correct and update_incorrect:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var correct_count = 0;
var wrong_count = 0;
function update_correct(pos) {
    correct_count = correct_count + 1;
    document.getElementById("number-correct").innerHTML = correct_count;
    var t = quickFlip.flip(pos, 1, 1);
}
 
function update_incorrect(pos) {
    wrong_count = wrong_count + 1;
    document.getElementById("number-wrong").innerHTML = wrong_count;
    var t = quickFlip.flip(pos, 1, 1);
}
 
function show_results() {
    $("#num_correct").html('You got ' + correct_count + ' right.');
    $("#num_wrong").html('You got ' + wrong_count + ' wrong.');
}

jQuery cycle plugin – http://malsup.com/jquery/cycle/
jQuery quickFlip plugin – http://jonraasch.com/blog/quickflip-jquery-plugin

Did you know that Google hosts the most popular Javascript libraries on their vast network? The AJAX Libraries API includes jQuery, Prototype, Scriptaculous, MooTools, Dojo and most recently SWFObject and YUI.

Sure, you can host these yourself, but using Google’s copies offers several important benefits:

• As other web applications use the API, the chances increase that a visitor to your site will already have the library cached
• HTTP cache headers are properly set
• Libraries are served through Google’s content distribution network
• The libraries are already minified and gzipped on-the-fly

For Rails apps, this can be turned on transparently if you use a plug-in. I found two, and Christopher Warren’s include_google_js looks like the better of them, but it assumes that Google hosts every version of a supported library, which isn’t necessarily true. Still, it’s probably true often enough that it won’t be a problem. To install:

script/plugin install git://github.com/chriswarren/include_google_js.git

Matthew Higgins’s googtaculous is the other. It is much simpler, but only supports Prototype and Scriptaculous and only a single version of each. In particular, Prototype 1.6.0.2, which isn’t the latest 1.6.0 patch release right now.

I came across this nice article pointed out by a friend, Brandon Burke.  It has to do with Multiple Select drop down box in a form.  You can use this select box to you guessed it, select multiple items.  You’ll need jQuery and the asmselect js code.

Here is a link to one of many examples.
First Example

Also here is the main article.
Main Article