0

I am not sure if this is the right place to post, as this is more of a logic behind the code than a question about the actual code, but I will start here. I am running a booth at a 3-day conference. Everyone who comes to the conference will get a goodie bag with a number on it. At my booth, they can check if their number is a winning number. I am creating a simple web tool that has a spinning wheel animation to accompany checking if they are one of the winners.

Let's say that there are 2000 people going to the conference(there are only 4 "big prizes" everyone else wins a pen" Right now the code is set to simple if else statements saying if your number is w, x, y, or z you are a winner and everyone else wins a pen. We are setting the winning numbers randomly from the range of 1-2000(or choosing them specifically it doesn't really matter I don't think).

Here is a bare bones version of the code:

HTML

<p>
Numbers 1-4 are winning numbers
</p>

<form id="form">
    <input id="code" type="text" name="code" placeholder="Code" onfocus="this.placeholder=''" onblur="this.placeholder='Code'">
</form>
<button id="submit">Submit your number</button>
<div class="prize">

</div>

JS

$( document ).ready(function() {
  $( "#submit" ).click(function(){
      $('.prize').addClass('show');
      var prize = document.getElementById('code').value;
          console.log(prize);
          if (prize == 1){
              $('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
          } else if (prize == 2){
              $('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
          } else if (prize == 3){
              $('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
          } else if (prize == 4){
              $('.prize').html('<span style="color:red">YOU WIN AN IPAD</span>');
          } else {
              $('.prize').html('<span style="color:red">YOU WIN A PEN</span>');
          }
  });
});

CSS

.prize{
  display: none;
}
.prize.show{
  display: block;
}

Here is the fiddle: https://jsfiddle.net/zm6gjkvt/

The problem I am having is that we want this to have a more random feel like a Vegas roulette table to see if you hit the winning number. Also, even though the odds are extremely low, we don't want all of the big winners to be on day one, and we don't want to risk the 4 big winners to not show up to the booth at all leaving us with left over prizes. Is there a logic behind this that I am missing? I am kind of at a loss.

Given the logic I tried to explain above is there a better way to do this? An idea that was presented was have a winner be the first person to the booth after a certain time of the day, not quite sure how to accomplish this though

SleBluue
  • 257
  • 1
  • 5
  • 18
  • Possible duplicate of [Spin wheel image in HTML5 (e.g., roulette wheel)?](https://stackoverflow.com/questions/7668007/spin-wheel-image-in-html5-e-g-roulette-wheel) – Obsidian Age Jul 24 '17 at 23:34
  • 1
    In addition to that, there's also [**WheelDecide**](http://www.wheeldecide.com), which provides exactly what you're looking for. – Obsidian Age Jul 24 '17 at 23:35
  • I have already built something that kind of does that. I was just more asking for help on the logic side of making this. To force winners over certain periods of time to make sure there are winners but not have all of the winners happen on day one, (even though the odds of that are super low – SleBluue Jul 24 '17 at 23:44
  • 2
    Could do something like this, generate 4 random time points over the course of the entire event, the first person to come to the booth after each time point wins. This way you'll never have to worry about them being picked too close together and you also have the element of randomness you want. To do this, build some logic around random time generator, but you choose the day on which the time in generated. https://stackoverflow.com/questions/31378526/generate-random-date-between-two-dates-and-times-in-javascript – 88jayto Jul 24 '17 at 23:56
  • @88jayto Thank you! That was the answer I was looking for! – SleBluue Jul 25 '17 at 18:03

1 Answers1

0

@88Jayto answered my question what I was looking for. Going to generate 4 times randomly following this other question: Generate random date between two dates and times in Javascript

SleBluue
  • 257
  • 1
  • 5
  • 18