Question

I’m trying to create a raffle ticket picking script using JS and jQuery.

So far so good – my script works. Now however I’d like to make it much more visual so that we can run it in assembly.

I have a JS Object which takes the following format:

var TempObj = { 'Student_ID' : i, 'Student_Name' : data.users[i].Student_Name };
RewardPurchases.PurchasesArray[Count] = TempObj;

I’m then using this code to randomly select one of the students:

$('button#random').click( function() {
    // "Total" is just the array length
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    // prove that the system has picked a random number out of the list
    alert("Random number out of " + Total + " is..." + Num);

    // find the array entry where the key is our random "Num"
    for (var i in RewardPurchases.PurchasesArray) {
        if (i == Num) {
            // we've found our entry, now we need more information about the corresponding student
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            // print out the student's information - he or she is the winner!
            alert("Ticket number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );

I would like to – very briefly – display each student’s name until the ticket has been picked (i.e. RewardPurchases.PurchasesArray[Num] has been found), then I’d like it to stop and increase the font size (and probably say WINNER! above it or something).

Is this possible, and relatively simple, using jQuery?

EDIT

I have tried the following code, which simply displays a single name. Where am I going wrong?

$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total);

    for (var i in RewardPurchases.PurchasesArray) {

        if (typeof RewardPurchases.PurchasesArray[i] === 'object' && typeof RewardPurchases.PurchasesArray[i] !== null) {

            $('#display').queue( function() { 
                $(this).text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(250); 
                $(this).dequeue();
            } );

        }

        if (i == Num) {
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            break;
        }
    }
} );

Thanks in advance,

Answer 1

I’ve something working for you available on jsfiddle http://jsfiddle.net/pomeh/63hug/. I’ve removed irrelevant code for the demo, and added some improvements. Look at the code to learn more.

var students = [
    { 'Student_ID': 0, 'Student_Name': "one" },
    { 'Student_ID': 1, 'Student_Name': "two" },
    { 'Student_ID': 2, 'Student_Name': "three" },
    { 'Student_ID': 3, 'Student_Name': "four" },
    { 'Student_ID': 4, 'Student_Name': "five" },
    { 'Student_ID': 5, 'Student_Name': "six" },
    { 'Student_ID': 6, 'Student_Name': "seven" },
];

var $display = $("#display");

$('#random').click(function(){
    var total = students.length,
        selected = Math.floor( Math.random() * total ),
        i = 0;

    console.log( "selected", selected );
    $display.animate( {"font-size": "12px"}, 0 );

    // improvement: use a for loop, instead of a for..in
    for (i=0; i<total; i++) {

        console.log( "for", i );
        // here is the trick, use an Immediately-Invoked Function Expression (IIFE)
        // see http://benalman.com/news/2010/11/immediately-invoked-function-expression/
        setTimeout((function(i){
            return function(){
                // code here will be delayed
                console.log( "timeout", i );
                $display.text( students[i].Student_Name.toUpperCase() );
                if( i === selected ) {
                    $display.animate( {"font-size": "30px"}, "fast" );
                }
            };
        }(i)), i*250);

        // improvement: triple equal sign, always !
        if( i === selected ) {
            // code here will execute immediately
            break;
        }
    }

});

You could learn more about Javascript variable hoisting here http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting.

Also, you should check the point 4 of this list of common Javascript confusions http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/

Hope that’ll help 🙂