Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    I need assistance on how exactly to get started with this problem

    ** sorry for the weird title

    I'm taking a coding class and we have a variety of different assignments.
    Recently we've been told to use code academy, and the ones I've recently done were learning Loops and functions.
    For this one particular assignment I'm tasked with finishing a incomplete web page function

    as seen below.

    <!DOCTYPE html>
    <html lang='en'>
    <head>
    <title>Dot Racer</title>
    <meta charset='utf-8' >
    <script src="../js/random.js"></script>
    <script>

    function takeAStep(){

    }




    </script>
    </head>
    <body>
    <h2>Online Dot Racer</h2>
    <p>
    Two dots race to the finish!
    <br<br>Enter the race length.
    <br<br>Each time the user clicks the button, each dot advances a random amount (1, 2, or 3 steps).
    <br<br>When a dot crosses the finish line, display the winner.
    </p>
    <p>
    Race Length: <input type="text" id="lengthBox" size="12">
    </p>
    <p style="color:red;">
    Red Dot: <span id="redSpan">0</span>
    </p>
    <p style="color: blue;">
    Blue Dot: <span id="blueSpan">0</span>
    </p>
    <input type="button" value="Take a Step" onclick="takeAStep();">
    <hr>
    </body>
    </html>


    now I'm not asking someone to completely solve this for me, I just want direction on what/how to get started.
    I know i'm supposed to address the part that I highlighted in orange.
    I'm supposed to make it so that whatever value the user puts in the "total distance" every time they press (take a step) red and blue take different steps untill they reach the finish, where a pop up/alert will announce the winner.

    in short:

    Two dots race to the finish! Enter the race length. Each time the user clicks the button, each dot advances a random amount (1, 2, or 3 steps). When a dot crosses the finish line, display the winner.

    so yeah i'm lost on what I should do.
    I have difficulties combining concepts together, you could say. I know I should be using the Looping function with some mathRdm thrown in there?

    I just ask for direction, if someone could simply or "dumb it down" For me by feeding me step by step instructions. I'm not asking for specific copy and paste instructions, more like "you should adress this issue, before doing this, and etc"

    or if you think there's some good resources for me or if I should do a particular exercise on code academy which would help...



    any input at all is most appreciated, thanks

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    1. Your HTML is invalid - for example the <input> should be inside a form - or you should use a <button> tag instead.

    2. Modern JavaScript is mostly attached just before the </body> tag so that you don't need to include code to test if the HTML has loaded before trying to interact with it.

    I guess if you are stuck with that poorly written page then there isn't much you can do about it for the assignment but you should make sure your own pages use valid HTML and put the JavaScript in the right place.


    To actually work out the code you need you should break what you need to do up into manageable pieces and code and test each one separately before combining them together into the finished script.

    For example you could start by writing a function that returns the distance a dot is to be moved on a click. You can then display the result of calling that function using an alert and then move on to code and test the next piece of code.

    Code:
    function takeAStep(){
    function stepSize() {return Math.floor(Math.random()*3+1);}
    
    alert(stepSize()); // temporary code to test
    
    }
    Next select another piece of what the code needs to do and write a function that does that.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    traptack (02-24-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    1. Your HTML is invalid - for example the <input> should be inside a form - or you should use a <button> tag instead.

    2. Modern JavaScript is mostly attached just before the </body> tag so that you don't need to include code to test if the HTML has loaded before trying to interact with it.

    I guess if you are stuck with that poorly written page then there isn't much you can do about it for the assignment but you should make sure your own pages use valid HTML and put the JavaScript in the right place.


    To actually work out the code you need you should break what you need to do up into manageable pieces and code and test each one separately before combining them together into the finished script.

    For example you could start by writing a function that returns the distance a dot is to be moved on a click. You can then display the result of calling that function using an alert and then move on to code and test the next piece of code.

    Code:
    function takeAStep(){
    function stepSize() {return Math.floor(Math.random()*3+1);}
    
    alert(stepSize()); // temporary code to test
    
    }
    Next select another piece of what the code needs to do and write a function that does that.
    probably poorly written because it's easier for beginners? unless that just makes it harder :P

    at your second point, i'm a tad confused.

    do you know of a website where I can test try my codes if you know what i'm talking about.

    and for the coding part, back to my main question
    I was thinking if this could work?

    for( var i = 0 ; i >= (user input) ; i +=(math random?) ) {
    console.log(i);
    }

    sorry if my response isn't exactly clear, i'm just trying to process things right now

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    traptrack - please post your code using code tags as described in the posting guidelines - not using assorted colours.

    Likewise - do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.

    I was thinking if this could work?

    for( var i = 0 ; i >= (user input) ; i +=(math random?) ) {
    console.log(i);
    }
    No, it will not work like that. You must specify the loop counter in the proper way.

    Code:
    var u = Number(document.getElementById("userinput")) || 0;  // trap NaN entries
    // check that u is a sensible value, say at least 10
    var num = 10;
    var randy = Math.floor(Math.random() * num +1);  // generates 1- 10
    for (var i =0; i<=u; i+=randy) {
    alert (i);
    }
    do you know of a website where I can test try my codes if you know what i'm talking about.
    You test your codes in your own browser. If you get Notepad++ you are offered the choice of 4 browsers to test in (assuming you have those browsers on your computer, of course).


    He's in a goldfish bowl, swimming against the tide. - Commentator Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by Philip M View Post

    He's in a goldfish bowl, swimming against the tide. - Commentator Radio 5 Live
    LOL! If that was meant as sarcasm by the commentator, then it was brilliant!

    Man, I *WILL* remember that one!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •