GOOCODE - Find your code/scripts

6 There in a television program called the flap a lottery sweepstakes form for the time being, there is a stage wall, wall to place several large squares, host or sweepstakes who opened the box corresponding to announced the winning results. Similar lottery form can also be applied in the WEB, this article will use PHP + jQuery for you to explain how to achieve the flap lottery program.

Draw flap implementation process: Front page offers six squares, followed by the numbers 1-6 represent six different squares, when the draw clicks six squares in a one time, flip to the back of the box to show the winning lottery information. A seemingly simple procedure, but contains a lot of knowledge WEB technology, so the reader of this article should be proficient jQuery and PHP knowledge.
HTML
And site on the articles using jQuery + PHP + Mysql to achieve lottery program is different, flap lottery lottery does not provide the start and end buttons, lottery themselves decide which one to select the box to complete the draw, so we page placed 6 squares, and treated with 1-6 to represent the different blocks.

     <p>First prize: Tablet PC, second prize: digital cameras, third prize: speaker equipment, Fourth Prize: 4G USB, five prize: $2 <br/> Click digital box, flip lottery, come and try it with your good luck. </p>
     <ul id="prize">
         <li class="red" title="Click lottery">1</li>
         <li class="green" title="Click lottery">2</li>
         <li class="blue" title="Click lottery">3</li>
         <li class="purple" title="Click lottery">4</li>
         <li class="olive" title="Click lottery">5</li>
         <li class="brown" title="Click lottery">6</li>
     </ul>
     <div style="clear:both; margin-top:20px"><a href="javascript:void(0)" id="viewother">[Open others]</a><a href="javascript:void(0);" id="repeat">[Retry again?]</a></div>
     <div id="data"></div>     <p>First prize: Tablet PC, second prize: digital cameras, third prize: speaker equipment, Fourth Prize: 4G USB, five prize: $2 <br/> Click digital box, flip lottery, come and try it with your good luck. </p>
     <ul id="prize">
         <li class="red" title="Click lottery">1</li>
         <li class="green" title="Click lottery">2</li>
         <li class="blue" title="Click lottery">3</li>
         <li class="purple" title="Click lottery">4</li>
         <li class="olive" title="Click lottery">5</li>
         <li class="brown" title="Click lottery">6</li>
     </ul>
     <div style="clear:both; margin-top:20px"><a href="javascript:void(0)" id="viewother">[Open others]</a><a href="javascript:void(0);" id="repeat">[Retry again?]</a></div>
     <div id="data"></div>

html structure, we use an unordered list placed six different squares, each li in clas property represents the color of the box, the list below is a link to a # viewother, later used to complete the draw, click on it, look other squares on the back of winning information, is hidden by default. Then there is a div # data, it is empty, the role is not drawn for temporarily storing data to other awards, the specific situation to see the code behind. To make 6 squares side by side looks comfortable point, you need to use CSS to beautify the next, specifically referring to demo, this article is no longer posted css code.
PHP
We first complete PHP backend processes, the main work of PHP is responsible for configuring the probability of winning awards and corresponding to the current end of the page, click the box when you flip a PHP backend will want to send ajax request, PHP backend configuration based on probability by probabilistic algorithms gives the winning results while not winning the award together with the information sent to the JSON data format to the front page.
First look at the probability calculation functions.

function get_rand($proArr) { 
    $result = ''; 
 
    //The total probability of accuracy probability array
    $proSum = array_sum($proArr); 
 
    //Probability array loop 
    foreach ($proArr as $key => $proCur) { 
        $randNum = mt_rand(1, $proSum); 
        if ($randNum <= $proCur) { 
            $result = $key; 
            break; 
        } else { 
            $proSum -= $proCur; 
        } 
    } 
    unset ($proArr); 
 
    return $result; 
} 

The code is a classic probabilistic algorithms, $ proArr is an array of pre-set, assuming that the array is: array (100,200,300,400), began to be screened range from 1,1000 this probability whether the first number in his probability within the range, if not, then the probability space, which is just the value of k minus the probability that the digital space, which in this case is minus 100, that the second number in the range of 1,900 within the screening. Such screening to the final, there will always be a few meet the requirements. Is equivalent to touch something in a box, not the first one, the second is not, and the third is not yes, that last one certainly yes. This algorithm is simple, but the efficiency is very high, the key is the algorithm has been used in our previous projects, especially the large amount of data items in great efficiency.
Next we configure the award by PHP.

$prize_arr = array( 
    '0' => array('id'=>1,'prize'=>'Table pc','v'=>1), 
    '1' => array('id'=>2,'prize'=>'Digital camera','v'=>5), 
    '2' => array('id'=>3,'prize'=>'Audio','v'=>10), 
    '3' => array('id'=>4,'prize'=>'4G U','v'=>12), 
    '4' => array('id'=>5,'prize'=>'$2','v'=>22), 
    '5' => array('id'=>6,'prize'=>'Oh, Sorry this time.','v'=>50), 
); 

Prize_arr is a two-dimensional array, which records all the information for this lucky draw prizes, where id represents the winning grade, prize, said prize, v represents the probability of winning. Note where v must be an integer, you can award the corresponding v is set to 0, which means that the probability of the award is drawn 0, v array sum (base), base to reflect the greater the probability of accuracy . In this case the sum of v is 100, then the tablet corresponding to the winning probability is 1%, if the sum of v is 10000, that is one ten thousandth of the probability of winning.
Front page of each request, PHP loop Awards array by calculating the probability function get_rand get drawn award id. The winning prize is stored in the array $ res ['yes'], whereas the rest are not winning the information stored in the $ res ['no'], the last number of data output json to the front page.

foreach ($prize_arr as $key => $val) { 
    $arr[$val['id']] = $val['v']; 
} 
 
$rid = get_rand($arr); //Get award id according to the probability
 
$res['yes'] = $prize_arr[$rid-1]['prize']; //prized items 
unset($prize_arr[$rid-1]); //The awards will be removed from the array, and the rest of the awards are not
shuffle($prize_arr); //shuffle 
for($i=0;$i<count($prize_arr);$i++){ 
    $pr[] = $prize_arr[$i]['prize']; 
} 
$res['no'] = $pr; 
echo json_encode($res); 

Direct output would have a winning message, why the information is not winning but also output to the front page it? Look at the back of the front-end code.
jQuery
First, in order to achieve the flap effect, we need to flip the plug-ins and pre-loaded jquery, jqueryui related plug-ins:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.flip.min.js"></script> 

You can flip the plug on its official website: http: //lab.smashup.it/flip/ for more information.
Next, we have the page by clicking on the box to complete the draw behavior.

$(function(){ 
    $("#prize li").each(function(){ 
        var p = $(this); 
        var c = $(this).attr('class'); 
        p.css("background-color",c); 
        p.click(function(){ 
            $("#prize li").unbind('click'); 
            $.getJSON("data.php",function(json){ 
                var prize = json.yes; //Drawn award
                p.flip({ 
                    direction:'rl', //Turning direction: right to left
                    content:prize, //Content that is displayed after flipping prizes
                    color:c,  //background color 
                    onEnd: function(){ //Flip End 
                        p.css({"font-size":"22px","line-height":"100px"}); 
                        p.attr("id","r"); //Winning box labeled id
                        $("#viewother").show(); //Show See other buttons
                        $("#prize li").unbind('click') 
                        .css("cursor","default").removeAttr("title"); 
                    } 
                }); 
                $("#data").data("nolist",json.no); //Save not winning information
            }); 
        }); 
    }); 
}); 

Code to traverse the six squares, each square is initialized to a different background color, click the current square, using $ .getJSON background data.php to send ajax request, the request is successful, call the flip flip box plug-in implementation, in obtaining the winning information displayed on the block after flip, flip over, marking the winning squares id, also freeze the click event on the box that unbind ('click'), the purpose is to let the lottery can only smoked once, smoked after each box can not flip a. Finally, the award will not draw information data () is stored in the #data in.
In fact, this step has been completed sweepstakes, in order to be able to see what other hidden box on the back of what we are given one after the draw can view links to other boxes on the back. By clicking the link, the other five squares rotate the back of the award information displayed.

$(function(){ 
    $("#viewother").click(function(){ 
        var mydata = $("#data").data("nolist"); //read data
        var mydata2 = eval(mydata);//By eval () function can be converted into an array of JSON
              
        $("#prize li").not($('#r')[0]).each(function(index){ 
            var pr = $(this); 
            pr.flip({ 
                direction:'bt', 
                color:'lightgrey', 
                content:mydata2[index], //Prizes information (not drawn)
                onEnd:function(){ 
                    pr.css({"font-size":"22px","line-height":"100px","color":"#333"}); 
                    $("#viewother").hide(); 
                } 
            }); 
        }); 
        $("#data").removeData("nolist"); 
    }); 
}); 

When you click #viewother, are not saved when you get drawn in the lottery prize data, and convert it into an array, flip five squares, prize information will be displayed in the corresponding box.
Why am I not spare Awards?
In many similar sweepstakes, participants tend to smoke less than winning, I give an example from the perspective of the program for you to see, if I were the organizers sweepstakes, I set up six awards, each award winning different probability, if the prize is a limousine, but I set up where the award probability is zero, which means what? This means that regardless of how those participation the lottery draw, never get this limousine. When turning the rest of the box every time the organizers, participants will find perhaps the first prize in a raffle box next to the figure just under, blame their own bad luck. Really bad luck it? In fact, when participants turning the box in the awards program has been decided, and flip view other awards just a box to see smoke bomb, confuse the audience and participants. I think after reading this article, you might know that television programs flap lottery tricky, and you may probably not going to re-election ShuangSeQiu the machine.
BUG FIX: thank enthusiastic users Samukawa and Tears continuous feedback about the flip bug, the solution after the click event, ajax click event insert the code before the restrictions:

$("#prize li").unbind('click');