• Post Reply Bookmark Topic Watch Topic
  • New Topic

Help with HTML Lotto game  RSS feed

 
gloire tumba
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
i have a lotto game with me and i need some help in changing the theme of the game. does anyone know a that can allow the user to select or to deselect the number? a code that can show the number of guesses? and a code that show a splash screen when a user guesses the correct number?


 
L Foster
Ranch Hand
Posts: 242
14
Android Angular Framework AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi, Gloire:

That's a fun little problem, there.  This is marked "Student", which makes me think this is a learning project for maybe a course.  If so, it would be unfair to just give the answer away.  Even if not, the best way to learn is to do it yourself.  Don't you agree?

Here's what I would suggest, then.  You can see on the screen two rows of buttons.  Each of those buttons has an "<input" creating it.  If you had any doubts, you can look at the HTML text and see that there are 10 things named after numbers, and they are all inputs.  Those input tags have been linked with "onClick()" method calls.

What I would do to solve this, is look at what the onClick method does.  Look at the input value the method is given.  Read up and learn about how that works.  Once you know, you can make variations of that.  These changes you wish to make are not that different from what it does right now.

Enjoy!
 
gloire tumba
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thanks. yeah you're right Sir. i understood the code and the part you said about finding what the on click functions does. I've been looking at that and i am still struggling with the code. sorry if the question was asked in the wrong way, the thing is i have started learning JavaScript recently.
 
L Foster
Ranch Hand
Posts: 242
14
Android Angular Framework AngularJS Java Spring
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Gloire:

I am not an official here at the ranch, but I see nothing wrong with how you asked.  You included the necessary code and a good description.  I will go a bit further.

The "onClick" event for "actionButton1" (sorry, I should not have written "method call" earlier) is calling the function "userAction(1)".  "onClick" is a special 'event' that can hook together what a user does, with some JavaScript code.  Here, the JavaScript code just calls the JavaScript function "userAction(1)".  Of course, all the other action buttons are doing the same thing. The only difference is they call with a different number.

So, let's have a closer look at "userAction()":



This code is setup to stop the user after three guesses, and add text to an "outMessage" element, by ID.  You can find that element in your HTML.  If you want to see how that works, just change the text that is put into that when the guess count is exceeded.

The next thing userAction does is to to change the coloring of the button.  That's the little braced-block below the guessCount code.  If you want to see how that works, try changing the choice of colors.  Well-known values like "orange" or "black" can be substituted pretty easily.  To the user this is just showing them that their "pick" is saved.

After the coloring, we see these variables being set.  That could have been done in an array, but the author chose to use three different variables--userG1, userG2, and userG3.  And that's basically the whole method.  In summary, "userAction()" is taking up to three guesses from the user, and it is recording them in these variables (userG--whatever).  It is also showing the guesses on screen so the user can see what numbers they have picked.

You asked about de-selecting a number.  Since there is only one "onClick" event, that is where you would handle unselecting.  Or rather, since you have a function call, I would make any such change in that function.  The problem you are going to run into?  If you unselect something, the correct userG variable is going to have to be "freed up".  That's no big deal: you would just check which userG has the value from the button num the user just clicked.  Also, you'd have to decrement the guess count.  But what about when user clicks a new button to add a different guess?  In order to support that, you now have to figure out if any of the three variables is empty and use an empty one.

However, this game seems to be structured to let users have 3 chances, and then let them see if they were right.  The game does not run for hours, or anything, and the buttons are pretty big (there is little risk to just running the game again), so maybe what might be better is just a reset button that changes all the buttons back to what they were, zeros the guess count and clears all the userG variables.  Also, to do things really right, it would need to rerun the code at the bottom of the page, so there is a new value for the user to guess.  Otherwise that code (which runs on page load, BTW) is going to run once, pick some number like '5' or '3', and the user can just keep going forever, always guessing the right answer!

The last thing you asked about was the "splash screen".  JavaScript has something called an "alert()" function.  You should look that up.  You just call it and it makes a popup dialog.  I think you do get some kind of notice in that "outMessage" element, anyway.

I hope that helps!  When I suggested all these little changes (change the text, change the color), it's so you could empower yourself to learn this material, and see where things happen.  There is no magic, unless it's in the programmer's brain.
 
gloire tumba
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
thanks a lot. i will take a look at that.
 
Don't get me started about those stupid light bulbs.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!