Help in presenting numbers

Question

1.00/5 (2 votes)

See more:

hello everyone,

I am developing a web project in C #. I have a number consists of 6 digits. is like a lottery. my problem is how to present these numbers to the end user. I'm thinking of getting a form to submit as if the numbers were being generated at the time randomly. or having to go to one of the numbers. but I have not the slightest idea of how to do this and what tool to use to help me in this process. already heard of jquery that allows us many graphic illustrations beautiful, but do not know where from. the base is to get this number I have saved in my DB and present the best possible for the end user ..

Posted 14-Oct-13 0:39am

fasher_the_one

Updated 14-Oct-13 0:40am

Eduard Keilholz

v2

Add a Solution

Comments

Andreas Gieriet 14-Oct-13 6:55am

Why graphics? Is this a requirement? Fill 6 text boxes with a number to start with. If this is not a nice enough presentation, you can improve later. First you need the round-trip implemented: request new number - get new number - show new number.
Cheers
Andi

Ankur^\m/ 14-Oct-13 7:42am

[copied from direct comment]
Dude, I'm working to show the end user something quite enjoyable. I do not just want to show the numbers in some textbox. I want to present the numbers in a different way, something illustrative purposes. an example is like some random numbers generator to run the numbers showing on the screen and then stop the winning number. but in my case I would use the value of my 6 digits stored in the database for display after the end. wanted something, or something different.
fasher_the_one - 13 mins ago

Andreas Gieriet 14-Oct-13 10:00am

Oops, wrong place ;-)
I've removed the reply and posted it now to the other place since otherwise you get involved without cause... ;-)
Sorry for the confusion.
Cheers
Andi

Ankur^\m/ 15-Oct-13 6:01am

I didn't delete the original comment so that you can continue the discussion there. So thank you for moving it. :)
Cheers!

fasher_the_one 14-Oct-13 7:25am

Dude,
I'm working to show the end user something quite enjoyable. I do not just want to show the numbers in some textbox. I want to present the numbers in a different way, something illustrative purposes. an example is like some random numbers generator to run the numbers showing on the screen and then stop the winning number. but in my case I would use the value of my 6 digits stored in the database for display after the end. wanted something, or something different.

Ankur^\m/ 14-Oct-13 7:41am

There is a reply button near your comment. Use that to reply to a comment or the commenter won't get notified and may never know about it.

Andreas Gieriet 14-Oct-13 11:20am

Dude is not my preferred greeting to hear, but so what...
You seem to struggle through the whole vertical chain, that's what I read from your post.
Get the rount-trip ready first before tweaking with GUI niceties.
Of course, everyone wants to provide a nice GUI, but first, the function must work. That's my message.
Go ahead an do it your way - you will ceratinly succeed. ;-)
Cheers
Andi

2 solutions

Solution 2

Try something like the below link which uses Jquery plugin for the number animation effects.

http://stackoverflow.com/questions/2540277/jquery-counter-to-count-up-to-a-target-number[^]

http://jsfiddle.net/YWn9t/[^]

You can start with this and may be have the code tweaked as per your needs or else you have many more such plugins available

Hope this helps

Posted 14-Oct-13 6:00am

JoCodes

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeBlack · Accepted Answer · 2013-10-14T03:08:00

you can use jquery timer for this kind of functionality.

When user click on the start button, using jquery methods like slideDown, slideUp and timer change all the 6 digits from zero to nine (like we see in Casinos) and till that time using asynchronous call you can retrieve number from database and split it into array.

Now when user click on the stop button,
increase the timer interval of first digit so that first digit starts moving very slowly and keep moving till the first digit does not match the first item of the array.

whenever it matches the first item of the array. stop the timer and show first digit and go to the second digit and do the same process upto 6 digist.

See Below Sample Application :

1. Add aspx page : Lotary.aspx
2. Add Generic handler : DigitHandler.ashx

1. Lotary.aspx :

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Lotary.aspx.cs" Inherits="TestApplication.Lotary" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
        .DigitContainer {
            border: 1px solid blueviolet;
            padding: 3px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" EnablePageMethods="True"></asp:ScriptManager>
        <div style="float: left">
            <div style="float: left" >
                <div id="digit1" class="DigitContainer">0</div>
            </div>
            <div style="float: left">
                <div id="digit2" class="DigitContainer">0</div>
            </div>
            <div style="float: left">
                <div id="digit3" class="DigitContainer">0</div>
            </div>
            <div style="float: left">
                <div id="digit4" class="DigitContainer">0</div>
            </div>
            <div style="float: left">
                <div id="digit5" class="DigitContainer">0</div>
            </div>
            <div style="float: left">
                <div id="digit6" class="DigitContainer">0</div>
            </div>
        </div>
        <br/><br/>
        <asp:Button runat="server" ID="buttonStart" Text="Start" OnClientClick="return StartRolling();" />
        <asp:Button runat="server" ID="button1" Text="Stop" OnClientClick="return StopRolling();" />
    </form>
</body>

<script type="text/javascript" language="javascript">
    var myDigits = new Array();
    var isStop = false;
    function StartRolling() {
        isStop = false;
        for (var i = 1; i <= 6; i++) {
            StartDigitRolling('digit' + i, i);
        }
        return false;
    }

    function StartDigitRolling(digitId, digitIndex) {
        var time = Math.floor(Math.random() * 150) + 100;
        myDigits[digitIndex] = setInterval(function () {


            setTimeout(function() {
                if (!isStop) {
                    var number = parseInt(document.getElementById(digitId).innerText);
                    if (number == 9) {
                        number = -1;
                    }
                    document.getElementById(digitId).innerText = number + 1;
                }
            }, 50);

        }, time);
    }

    function StopRolling() {
        var numbers;
        isStop = true;
        $.ajax({
            url: 'DigitHandler.ashx',
            async: true,
            cache: false,
            data: {},
            success: function (response) {

                if (response != null) {
                    numbers = response.split('');
                    isSuccess = true;

                    for (var i = 1; i < 100; i++)
                        window.clearInterval(i);

                    var counter = 1;
                    do {
                        document.getElementById('digit' + counter).innerText = numbers[counter - 1];
                        counter++;
                    } while (counter != 7)
                }
            },
        });

        return false;
    }
</script>
</html>

2. DigitHandler.ashx.cs

C#

using System.Web;

namespace TestApplication
{
    /// <summary>
    /// Summary description for DigitHandler
    /// </summary>
    public class DigitHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("123456");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Note : In ProcessRequest of handler, retrieve random number from database and insetead of 123456 put retrieved random number.

Regards,
CodeBlack