MyGeekProject

Again, something simple is not always so simple. So we covered how do we get data from the database using Web Services and asynchronous callbacks but what if we needed to pass in like a User ID or something else that we are storing securely in the session?

We would need to pull down that session variable into our client side code so that we could send it back asynchronously in order to return the correct data set.

This is also handy for passing into Flash Vars.

Ok, so all that complicated mess for a one liner I know…

var UserID = ‘<%=Session(“UserID”)%>’;

I can then use that Javascript variable to pass it into an asynch web services call or use it as Flash vars etc.

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