how can i put my randomized answer placement in different divs...Read Post

Question

I'm currently making a simple math game where it generates random multiplication problems and there is multiple choices that the user can pick from. Right now I am getting stuck on how to place my shuffled answers into separate divs for the multiple choices. Also if you notice any collisions that may arise in the future a heads up would be greatly appreciated

Here's the Javascript:

var gameOn = false;
var score;
var interval;
Array.prototype.shuffle = function(){
            var i = this.length, j, temp;
            while(--i > 0){
                j = Math.floor(Math.random() * (i+1));
                temp = this[j];
                this[j] = this[i];
                this[i] = temp;  
              }//while loop bracket
            return this;
        }

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


//if we click on the start/reset
document.getElementById("startreset").onclick = function () {

  //if we are not playing
  if (gameOn) {
    stopGame();
  }/*if gameOn bracket*/ 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";
        document.getElementById("game-over").innerHTML = "Game Over" + "<br />" + "<br />" + "Your Score is " + score + "!";

        }//if counter bracket
    }//timeIt function bracket

      //generate new Q&A
      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;
        console.log(correctAnswer);



        var myArray = [w1, correctAnswer, w3, w4];
        var result = myArray.shuffle();

        document.getElementById("box1", "box2", "box3", "box4").innerHTML = result;

        }//generateQA function bracket

    }//else statement bracket
}//startreset button function bracket

Here's the HTML:

    <!DOCTYPE html>
<html lang="en">

    <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">
                <br />
                Game Over
            </div>
        </div>

        <script src="Javascript.js"></script>
    </body>
</html>

score 0 · Answer 1 · answered Dec 23 '17 at 23:45

0

You can't select multiple elements with getElementById as you did in this line document.getElementById("box1", "box2", "box3", "box4").innerHTML = result;. Selecting multiple elements will be done with querySelectorAll. But for your case, just do it this way:

document.getElementById("box1").innerHTML = result[0];
document.getElementById("box2").innerHTML = result[1];
document.getElementById("box3").innerHTML = result[2];
document.getElementById("box4").innerHTML = result[3];

You can also do it with a for loop.

answered Dec 23 '17 at 23:45

TamirNahum

484
2
8

This answer could be improved by writing a loop using `querySelectorAll` as you've suggested. – jmargolisvt Dec 23 '17 at 23:48
@jmargolisvt so how might i go about using querySelectorAll in this case? would i just swap out .getElementById() with that and it could work or should i just stick to doing each individual results illustrated by TamirNahum – lukes jaafari Dec 24 '17 at 00:13
@lukesjaafari It's depends on you. It's just about making the code a little bit more efficiency. Read about looping the `querySelectorAll` object and how to commit actions on each of it's properties if you want to use this method. – TamirNahum Dec 24 '17 at 00:18
https://stackoverflow.com/questions/12330086/how-to-loop-through-selected-elements-with-document-queryselectorall – jmargolisvt Dec 24 '17 at 00:18

how can i put my randomized answer placement in different divs...Read Post

1 Answers1