Here's a challenge for y'all

Question

sun-tzu 0 Light Poster

13 Years Ago

I am building a website for a charitable organization here in Paradise, CA called Heart to Hand. One of the many things that I am going to have the site do is list children in need of Christmas presents. For those people that are a bit indecisive I want to have kind of a "Pick a Random Kid" thing that resembles the Wheel of Fortune.

Ideally it would use jQuery to make a wheel of faces. You could then press a button in the middle that says spin, spin the wheel, and have it randomly choose a child.

If any one is interested in this opportunity to help out a great charity with your talents that'd be great.

javascript jquery

Edited 13 Years Ago by Ezzaral because: Snipped link. Please restrict personal links to your signature.

3 Contributors
7 Replies
423 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Taywin

Taywin 312 Posting Virtuoso

13 Years Ago

One problem to keep in mind, using JavaScript to decide a value is bad because anyone can manipulate the outcome of the random value. However, using JavaScript to display the wheel and the value decided from the server is fine.

Taywin 312 Posting Virtuoso

13 Years Ago

Sorry, your requirement doesn't have enough detail. Also I do not use JQuery. I do it in pure Java.

The requirement detail you should include:

1)Does the number of kids in a page is dynamic? In other words, you want the script to programmatically change the display regarding the incoming number of kids?
2)How would you design an input to start the wheel? And how would you design how to go after the wheel stop?
3)Do you want to display it in a frame or as an element of the page?
4)How do you want to send/receive decided value?

There are too many things. The page could be done in a day at most, but there are other requirements that need to be discussed along the way...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sun-tzu 0 Light Poster · Answer 1 · 2011-09-28T08:46:36+00:00

Oh yeah, I know that lol. It's a wordpress site and I'd write a script that picks 10 or so random kids.

sun-tzu 0 Light Poster · Answer 2 · 2011-09-28T20:51:54+00:00

Any ideas? It's important that I have this done soon...

sun-tzu 0 Light Poster · Answer 3 · 2011-09-28T23:22:09+00:00

Ok, to answer all your q's.

1) We'll say the number of kids will be set through a request to a server side page. In other words the script would set the number of kids to output, send it to the server, and the server would respond with the thumbnail image and the url to link to.

2) I'd want the input to start the wheel to be a button in the middle that says spin. A random value would then be generated that sets how many times the wheel will spin. Some kind of easing would have to be implemented to give it the look of slowing down. Then, whatever the top option is when the wheel stops spinning would be added to a window.location method or something.

3) I need to somehow figure out how to put it into a Wordpress page by making a page template.

4) I just want it to go to the decided url.

If you could help that'd be awesome! I can do all the graphics.

MartinRinehart 0 Junior Poster in Training · Answer 4 · 2011-09-29T02:04:51+00:00

I am building a website for a charitable organization here in Paradise, CA called Heart to Hand. One of the many things that I am going to have the site do is list children in need of Christmas presents. For those people that are a bit indecisive I want to have kind of a "Pick a Random Kid" thing that resembles the Wheel of Fortune.
Ideally it would use jQuery to make a wheel of faces. You could then press a button in the middle that says spin, spin the wheel, and have it randomly choose a child.
If any one is interested in this opportunity to help out a great charity with your talents that'd be great.

How much wheel? How much spin?

Would putting 10 images on screen in a circle work? Would moving kid1 to position 2, kid2 to position 3, etc. work? Otherwise, jQuery's got an animation function (try animate() ) to actually make them circle around.

Taywin 312 Posting Virtuoso · Answer 5 · 2011-09-29T08:22:52+00:00

The code below is an example for what you may consider. It is not JQuery because I don't use it. It automatically compute for location set for a fixed size of div. I also added a debug area when I was working on the script. Just to throw in my two cents...

<html>
<head>
  <title>Sample Spinning Wheel</title>
  <style type="text/css">
  .wholeboard {
    position: relative;
    width: 800px;
    height: 640px;
  }
  .slot {
    position: absolute;
    width: 32px;
    height: 48px;
    vertical-align: middle;
    text-align: center;
  }
  .selslot {
    border: 2px ridge teal;
  }
  .buttonarea {
    width: 800px;
    text-align: center;
  }
  </style>

  <script type="text/javascript">
  var MAXSLOTS = 16  // maximum number of slots
  var timeoutID = 0  // global timeout for stopping animation
  var allSlots = new Array()  // for use in animation

  function drawWheel(drawareaID) {
    var disp = document.getElementById(drawareaID)
    if (disp) {
      disp.innerHTML = ""  // dirty way to clean the whole area
      var xy = [0,250]  // start from direct bottom x,y
      var delta = 0
      var stepangle = 360/MAXSLOTS
      var xyprime

      // add slots
      for (var i=0; i<MAXSLOTS; i++) {  // 16 images
        xyprime = rotate(xy, delta)
        // adjust the position
        xyprime[0] += 384
        xyprime[1] += 300
        var newdiv = document.createElement("div")
        newdiv.id = "slotnum_"+i
        newdiv.className = "slot"+(i==0 ? " selslot" : "")
        newdiv.style.left = xyprime[0]+((document.all)? "" : "px")  // IE or others
        newdiv.style.top = xyprime[1]+((document.all)? "" : "px")  // IE or others
        newdiv.innerHTML = (i+1)  // can replace this with creating new img tag and add to it
//        var newtxt = document.createTextNode(i+1)  // can use createTextNode() too
//        newdiv.appendChild(newtxt)
        disp.appendChild(newdiv)
        allSlots[i] = document.getElementById(newdiv.id)  // save it for animation
        delta += stepangle
      }
    }
  }

  // will not work if point is not an array size 2
  // x' = xcos(a) - ysin(a)
  // y' = xsin(a) + ycos(a)
  function rotate(point, angle) {
    var newxy = [0,0]  // x,y
    var rad = deg2rad(angle)
    newxy[0] = Math.round((point[0]*Math.cos(rad)) - (point[1]*Math.sin(rad)))
    newxy[1] = Math.round((point[0]*Math.sin(rad)) + (point[1]*Math.cos(rad)))
    return newxy
  }

  function deg2rad(deg) {
    return ((deg*Math.PI)/180)
  }

  // Instead of using a random number generated from JavaScript, get the real
  // number from the server... Do not forget to save the decided value on the
  // server side. Do not send any value back to the server from the display!
  function spinwheel() {
    var numberOfSpin = Math.floor(Math.random()*100)+25  // at least 25 round
    showDebug("Spin number: "+numberOfSpin, false)
    timeoutID = window.setTimeout("spinning("+numberOfSpin+")", 80)
  }

  function spinning(spinNum) {
    if (timeoutID>0) { window.clearTimeout(timeoutID) }  // stop animation
    spinNum = parseInt(spinNum, 10) - 1  // ensure integer
    rotateSlots(true)
    if (spinNum<16) {  // 9 steps or less to stop
      timeoutID = window.setTimeout("stopping("+spinNum+",80)", 80)
    }
    else {
      timeoutID = window.setTimeout("spinning("+spinNum+")", 80)
    }
  }

  function stopping(spinNum, delaytime) {
    if (timeoutID>0) { window.clearTimeout(timeoutID) }  // stop animation
    spinNum = parseInt(spinNum, 10) - 1  // ensure integer
    delaytime = parseInt(delaytime, 10)+60
    rotateSlots(true)
    showDebug("Spin number: "+spinNum+" | Speed: "+delaytime, true)
    if (spinNum>0) {  // keep going but slowing down
      timeoutID = window.setTimeout("stopping("+spinNum+","+delaytime+")", delaytime)
    }
    // no else because it stops
  }

  // change it if it is an image instead of text
  function rotateSlots(goRight) {
    if (goRight) {
      var val
      for (var i=0; i<allSlots.length; i++) {
        val = parseInt(allSlots[i].innerHTML, 10)+1
        if (val>MAXSLOTS) { val = 1 }
        allSlots[i].innerHTML = val
      }
    }
    else {  // go left
      var val
      for (var i=0; i<allSlots.length; i++) {
        val = parseInt(allSlots[i].innerHTML, 10)-1
        if (val<=0) { val = MAXSLOTS }
        allSlots[i].innerHTML = val
      }
    }
  }

  // for debugging
  function showDebug(str, append) {
    var dbugEl = document.getElementById("dbugarea")
    if (dbugEl) {
      if (append) { dbugEl.innerHTML = dbugEl.innerHTML+str+"<br/>" }
      else { dbugEl.innerHTML = str+"<br/>" }
    }
  }
  </script>
</head>

<body>
  <h2>Sample Spinning Wheel Using Pure JavaScript</h2>
  <p>
  This is just a sample in pure JavaScript and contains a lot of hard-coded.
  You could improve it in many ways you want. I have my own version for spining
  roulette but I do not want to show or give to anyone yet. It is written using
  prototype fashion. Also, the content in the middle of the slot div area can be
  replaced with an image.
  </p>
  <div id="wheelboard" class="wholeboard">
    <script type="text/javascript">
    drawWheel("wheelboard");
    </script>
  </div>
  <div class="buttonarea">
    <input type="button" value="Spin!" onclick="spinwheel()">
  </div>
  <div id="dbugarea">
  </div>
</body>
</html>