JS / jQuery - animated random name selection

Question

I am trying to create a lottery ticket selection script using JS and jQuery.

So far so good - my script is working. Now, however, I would like to make it more visual so that we can run it in the assembly.

I have a JS object that accepts the following format:

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

Then I use 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 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 - very briefly - to display the name of each student until a ticket is selected (ie RewardPurchases.PurchasesArray[Num] was found), then I would like it to stop and increase the font size (and, WINNER will probably say! over it or something).

Is this possible and relatively simple using jQuery?

EDIT

I tried the following code that just displays a single name. Where am I mistaken?

 $('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

Something works for me for you on jsfiddle http://jsfiddle.net/pomeh/63hug/ . I removed the irrelevant code for the demo and added some improvements. Look at the code to find out 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 can learn more about javascript variable lifting here http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting .

In addition, you should check item 4 of this list of common Javascript misunderstandings http://tobyho.com/2011/11/16/7-common-js-mistakes-or-confusions/

Hope this helps :)

Answer 2

If I understand your question, you want something like this: Enter this before comparing the number.

 $('#nameDisplay').text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(300); 

Enter this inside the if statement immediately before / instead of alert :

 $('#nameDisplay').animate({'font-size': 36}, 1500, function() { $(this).prepend('<span>!!! WINNER !!!</span>'); }); 

nameDisplay should be some kind of (hidden) element on your page, styled as you prefer. Try experimenting with CSS and animation functions to get a good result for the inserted span and nameDisplay element.

Answer 3

Good, so you want the program to choose a random number between 1 and (total number of students), which will be the winner. This number is tied to student numbers, so if # 45 is accidentally chosen, student # 45 wins.

It looks like you already have this bit, so next time you want some kind of lottery for slot machines to scroll through the names and “make a show” to select a winning number. The winning number will probably be completely separate from the lottery animation, so there is no reason for choosing random numbers to take longer than necessary (this is just one line of code).

So, for your animation, why not just skip each of the entries in your list of students, show them each one or two times one after another, and then in the third cycle it stops at the winning name and underlines it accordingly, For example: Mark, Jane , Dave, Mark Jane, Dave, Mark, JANE - WINNER !! Obviously animated and stylish, but you like it.

In short, the answer you are looking for is to select a winner, not displaying it immediately, and then repeating all the names a certain number of times and finally landing on the winner. Hope this helps you in the right direction without programming for you :)

Answer 4

Minor improvement (skip if you want)

First, to indicate an improvement in your code:

 for (var i in RewardPurchases.PurchasesArray) { if (i == Num) { //Do stuff with RewardPurchases.PurchasesArray[i] } } 

I suggest you:

 //Do stuff with RewardPurchases.PurchasesArray[Num] 

There is no need for an unnecessary loop (unless you also want to have an else ).

Back to the question :)

Say you have already selected a winner and saved the index in Num . You have a div with id="winner" that contains the winner! block and div with id=studentName to store blinking student names. Both must be hidden.

Now do the following:

 var flashDelay=100; //number of milliseconds to flash each name var flashTimes=50; //Flash a random username this many times var lastStudent=-1; //holds the last student displayed to avoid awkward repeats function flashStudent(){ var randStudent=Math.floor(Math.random() * Total+1); if(Num==randStudent||Num==lastStudent){ flashStudent(); //don't show the winner till the end. Also don't repeat students immediately }else{ lastStudent=Num; flashTimes--; //decrement count $("#studentName").css("display","block") //display if hidden $("winner").html(RewardPurchases.PurchasesArray[randStudent].Student_Name); //show name if(flashTimes==0){ clearInterval(flashNames); $("#studentName").css("display","block") //display if hidden $("#studentName").css("display","block") //display if hidden $("#studentName").html(RewardPurchases.PurchasesArray[Num].Student_Name); } } } var flashNames=setInterval(flashStudent,flashTimes) //make the method repeat evert flashTimes milliseconds 

I suggest an even better one where it "slows down" like roulette:

 var flashDelay=10; //number of milliseconds to initially flash each name var flashIncrement=10 //number of milliseconds to increment the delay by each time var flashTimes=50; //Flash a random username this many times var lastStudent=-1; //holds the last student displayed to avoid awkward repeats function flashStudent(){ var randStudent=Math.floor(Math.random() * Total+1); if(Num==randStudent||Num==lastStudent){ flashStudent(); //don't show the winner till the end. Also don't repeat students immediately }else{ lastStudent=Num; flashTimes--; //decrement count $("#studentName").css("display","block") //display if hidden $("winner").html(RewardPurchases.PurchasesArray[randStudent].Student_Name); //show name if(flashTimes==0){ $("#studentName").css("display","block") //display if hidden $("#studentName").css("display","block") //display if hidden $("#studentName").html(RewardPurchases.PurchasesArray[Num].Student_Name); }else{ setTimeout(flashStudent,flashDelay); //set timeout for next name flashDelay+=flashIncrement; //increment delay } } } 

I have not fully tested this - tomorrow I will make a test array and do it.