Using the jQuery Cycle Plugin

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:

<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:

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

Comments

Popular posts from this blog

Console over SSH (ONTAP)

Brocade Zone Setup

OpenSolaris ZFS Setup