stackoom
  简体   繁体   中英

Math game issues with randomly generated numbers for equations

 原文  2017-12-22 03:11:56  2   2    javascript/ math/ random/ equation-solving

Question

Hello My fellow coders im not sure how to address making a multiple choice game with randomly generated math equations.

My current coding is not returning any answers or numbers even inside the console. Please help me out without telling me exactly how to do it. I would love some pointers and explanations.

So my original angle on how to do this is that there would be two randomly generated numbers using a Math.random object and multiplying it by 10 so that i get whole numbers from 0-10 that are in the equation then i want to display them inside the box marked question with an id tag.

Right now i really need help on just getting the equation to pop up and i would like the simplest code to do it I have only been doing javaScript for 2 months now and haven't quite gotten the hang of it yet! Also How might i go about referring to the answer so that i can place it in a box later

Here's the html: 

<head>
    <title>Math Game</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <link rel="stylesheet" href="styling.css">
</head>

<body>      
    <div id="title">
            The Matheroo
        </div>
    <div id="sunYellow">
        <!--Because the score value is going to change as the user plays the game we need to place it in a span and refer to it later with some JAVA-->

        <div id="score">
            Score: <span id="scorevalue">0</span>
        </div>
        <div id="correct">
            Correct!
        </div>
        <div id="wrong">
            Try Again
        </div>
        <div id="question">
            <span id="firstInt"></span><span id="secondInt"></span>
        </div>
        <div id="instruction">
            Click on the Correct Answer
        </div>
        <div id="choices">
            <div id="box1" class="boxes"></div>
            <div id="box2" class="boxes"></div>
            <div id="box3" class="boxes"></div>
            <div id="box4" class="boxes"></div>
        </div>
        <div id="startreset">
            Start Game
        </div>
        <div id="time-remaining">
            Time Remaining: <span id="timer-down">60</span> sec
        </div>
        <div id="game-over">
            Game Over
        </div>
    </div>

    <!--It is good practice to write the java at the end of the body element so all the divs load. Also use an external file for the javascript for clarity-->
    <script src="Javascript.js"></script>
</body>

heres the javascript: 

    var gameOn = false;
var score;
var interval;

function stopGame() {
  gameOn = false;
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  document.getElementById("startreset").innerHTML = "Start Game";
  document.getElementById("time-remaining").style.display = "";
}


//if we click on the start/reset
document.getElementById("startreset").onclick = function () {
  //if we are not playing
  if (gameOn) {
    stopGame();
  } else {
    //change mode to playing
    gameOn = true;

    //set score to 0
    score = 0;

    document.getElementById("scorevalue").innerHTML = score;

    //show countdown box
    document.getElementById("time-remaining").style.display = "block";
    document.getElementById("startreset").innerHTML = "Reset Game";

    var counter = 60;

    //reduce time by 1sec in loops
    interval = setInterval(timeIt, 1000);
    function timeIt(){
      document.getElementById("timer-down").innerHTML = counter;
      counter--;

        //timeleft?
        //no->gameover
        if ( counter === 0) {
        stopGame();
        document.getElementById("game-over").style.display = "block";
      }
    }
      //generate new Q&A
      function generateQ(){
    var a = Math.floor(Math.random()*10);
    var b = Math.floor(Math.random()*10);
    var result = +a + +b;
    document.getElementById("firstInt").innerHTML = a;
    document.getElementById("secondInt").innerHTML = b;
    console.log(result);
  }
      }

  }
}

Here's the CSS stylesheet: 

html{
    height: 100%;
    background: radial-gradient(circle, #fff, #ccc);
}

#title{
    width: 400px;
    padding: 0px 20px;
    margin-left: 350px;
    margin-top: 50px;
    background-color: #84FFE3;
    color: white;
    border-radius: 10px;
    font-size: 3em;
    letter-spacing: 2.7px;
    font-family: cursive, sans-serif;
    text-align: center;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

/*The container for the game in the center of the page*/
#sunYellow{
    height: 400px;
    width: 550px;
    background-color: #FFDC00;
    /*Top and bottom margin is set to 100px and the left and right margin is set to auto so that the left and right margin gets bigger and bigger until the box is centered*/
    margin: 90px 280px 0px 280px;
    padding: 20px;
    border-radius: 10px;
/*    Reference for 'box-shadow' [horizontal offset(if the number is positive then the shadow will be on the right side of our box)] [vertical offset(if the number is positive then the shadow will be on the bottom of our box, if negative it will be the opposite)] [blur radius(This is how blurry or sharp the shadow will be)] [optional spread radius(how big the shadow is)] [color]*/
    box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    -moz-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    -webkit-box-shadow: 4px 4px 0px 0px rgba(248,151,74, 0.8);
    position: relative;
}


#score{
    background-color: #84FFE3;
    color: #2F4F4F;
    padding: 10px;
    position: absolute;
    left: 500px;
    /*Whenever using a 'box-shadow' add the cross browser compatibility syntaxs for mozilla and safari*/
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

#correct{
    position: absolute;
    left: 260px;
    background-color: #00FF0D;
    color: white;
    padding: 11px;
    display: none;
}

#wrong{
    position: absolute;
    left: 260px;
    background-color: #EF0200;
    color: white;
    padding: 11px;
    display: none;
}

#question{
    width: 450px;
    height: 150px;
    margin: 50px auto 10px auto;
    background-color: #00F5FF;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -moz-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    font-size: 100px;
    text-align: center;
    font-family: cursive, sans-serif;
    color: black;
}

#instruction{
    width: 450px;
    height: 50px;
    background-color: #00FF0D;
    margin: 10px auto;
    text-align: center;
    line-height: 50px;
    box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -mox-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(49, 79, 79, 0.5);
}

#choices{
    width: 450px;
    height: 100px;
    margin: 5px auto;
}

.boxes{
    width: 85px;
    height: 85px;
    background-color: white;
    float: left;
    margin-right: 36px;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    line-height: 80px;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

.boxes:hover, #startreset:hover{
    background-color: #00F5FF;
    color: white;
    box-shadow: 4px 3px 0px 0px #266df2;
    -moz-box-shadow: 4px 3px 0px 0px #266df2;
    -webkit-box-shadow: 4px 3px 0px 0px #266df2;
}

.boxes:active, #startreset:active{
    box-shadow: 0px 0px #266df2;
    -moz-box-shadow: 0px 0px #266df2;
    -webkit-box-shadow: 0px 0px #266df2;
    top: 4px;

}

#box4{
    margin-right: 0px;
}

#startreset{
    width: 83px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0px auto;
    font-weight: bold;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 4px 3px 0px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    /*This doesnt allow a user to select text for all browsers*/ 
    user-select: none;
    -webkit-user-select: none;     
    -moz-user-select: none;
    -ms-user-select: none; 


}

#time-remaining{
    width: 157px;
    padding: 7px;
    position: absolute;
    top: 395px;
    left: 400px;
    background-color: #84FFE3;
    border-radius: 3px;
    box-shadow: 4px 3px 0px 0px #00ad99;
    -moz-box-shadow: 4px 3px 0px 0px #00ad99;
    -webkit-box-shadow: 4px 3px 0px 0px #00ad99;
/*    visibility: hidden;*/
    display: none;
}

#game-over{
    height: 200px;
    width: 500px;
    background: linear-gradient(#F8974A, #3EB8C5);
    color: white;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 100px;
    left: 45px;
    /*Giving the 'game-over' div a higher z-index ensures it is on top of the other elements, which the default is 0*/
    z-index: 2;
    display: none;
}

EDIT: I have changed around some things with some success and some failure. I have randomly generated equations and wrong answers...BUT i am kinda stuck on how to shuffle them around so that the answer is not always in the second box and the wrong answers in the other. How could I go about randomizing where the answer and wrong answers are?And another thing how could i go about tracking the choice of the user to determine whether they chose the correct answer or not? Thanks guys you've all really helped me a lot so far and everyone is so polite and goes into detail! You da best 

generateQA();
      function generateQA(){
        //this is the first number in the equation  
        var Na = 1+ Math.round(Math.random() * 9);
        //this is the second number in the equation   
        var Nb  = 1+ Math.round(Math.random() * 9);
        //the correct answer is when you multiply both together  
        correctAnswer = Na * Nb;
        //these are the randomly generated wrong answers  
        var w1 = 1+ Math.round(Math.random() * 16);
        var w3 = 1+ Math.round(Math.random() * 22);
        var w4 = 1+ Math.round(Math.random() * 92);  
        document.getElementById("question").innerHTML = Na + "x" + Nb;
        document.getElementById("box1").innerHTML = w1;
        document.getElementById("box2").innerHTML = correctAnswer;
        console.log(correctAnswer);
        document.getElementById("box3").innerHTML = w3;
        document.getElementById("box4").innerHTML = w4;  
        }

2 answers

solution1
 0  2017-12-22 04:12:45

Like you asked, I won't give you details about solving the whole problem, but here is a hint to help you out: The Mozilla Developer Network gives some good examples of how you can use Math.random(), such as writing this function for getting random integers in a range: 

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

solution2
 0  2017-12-22 06:26:30

You don't actually call the generateQ() function,, so add: 

generate();

somewhere.

You have one too many closing } . You can comment each } to make your code easier to follow, for example: 

} // end if (counter...
} // end function generateQ

This makes tracking {} a lot easier.

Also, you don't need to write: 

result= +a + +b;

Just write: 

result = a+b;

instead.

Other than these, your code should work.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Adding percentages to randomly generated numbers Trying to make a randomly generated number guessing game Need to sort randomly generated numbers into numerical order How to add functions on randomly generated numbers Adding styling to randomly generated Javascript numbers How to print 52 randomly generated numbers to the console? Customizing MWD for math equations How to get randomly generated array to reset in simple memory game with jQuery Getting the sum of randomly generated numbers from 4 sources (jquery) How do I put randomly generated numbers into a table?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM