CODEWITHSUNDEEP
javascriptjquery
bill_face
bill_face

Reputation: 37

How to randomise content (or position) of buttons

I'm trying to build a simple website learning game to teach children about adverbs.

It just has a sentence with a blanked out word, and 3 buttons containing three possible words. I One is an adverb the other two aren't. I have created some arrays to contain variations of sentences and words, however the adverb always appears in the same button, and I would like to vary it.

<html lang="en">
  <head>
    <title>Adverb Kings</title>
  </head>
  <body>
      <h1>Adverb Kings</h1>
      
      <div id="sentence"><p>Place an _____ here</p>
          
</div>
      
<div>
          <button type="button" class="btn btn-primary loser"><span id="other1"></span></button>
          <button type="button" class="btn btn-primary" id="winner"><span id="adverbs"></span></button>
          <button type="button" class="btn btn-primary loser"><span id="other2"></span></button>
          
          </div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script>
      
          var sentence;
sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];

var el = document.getElementById('sentence');
el.textContent = sentence[Math.floor(Math.random() * sentence.length)];


var adverbs;
adverbs = ['slowly', 'quickly', 'insanely'];

var el = document.getElementById('adverbs');
el.textContent = adverbs[Math.floor(Math.random() * adverbs.length)];

var other1;
other1 = ['burger', 'insane', 'ugly'];

var el = document.getElementById('other1');
el.textContent = other1[Math.floor(Math.random() * other1.length)];

var other2;
other2 = ['adverb', 'fist', 'gun'];

var el = document.getElementById('other2');
el.textContent = other2[Math.floor(Math.random() * other2.length)];

$("#winner").click(function() {
                
                alert("congratulations! You are a genius");
                
            });

$(".loser").click(function() {
                
                alert("Commiserations! You are a fool");
                
            });
      
      </script>
        </body>
</html>

Upvotes: 0

Views: 30

Answers (1)

Engin
Engin

Reputation: 815

That's because the position of your buttons are always in same order.

I edited your script a bit. Check this.

<html lang="en">
  <head>
    <title>Adverb Kings</title>
  </head>
  <body>
    <h1>Adverb Kings</h1>

    <div id="sentence"></div>

    <div>
      <button type="button" class="btn btn-primary"></button>
      <button type="button" class="btn btn-primary"></button>
      <button type="button" class="btn btn-primary"></button>

    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script>

      var sentence;
      sentence = ['The people _______ went crazy about the new game options', 'The man _______ slipped his hands around his desk handle', 'He _______ typed a new password for his school account'];

      var el = document.getElementById('sentence');
      el.textContent = sentence[Math.floor(Math.random() * sentence.length)];

      var orders = [0, 1, 2];
      shuffle(orders);
      
      var buttons = document.getElementsByTagName("button");
      buttons[orders[0]].setAttribute("id", "winner");
      buttons[orders[1]].classList.add("loser");
      buttons[orders[2]].classList.add("loser");
      
      var adverbs = ['slowly', 'quickly', 'insanely'];
      buttons[orders[0]].textContent = adverbs[Math.floor(Math.random() * adverbs.length)];

      var other1 = ['burger', 'insane', 'ugly'];
      buttons[orders[1]].textContent = other1[Math.floor(Math.random() * other1.length)];

      var other2 = ['adverb', 'fist', 'gun'];
      buttons[orders[2]].textContent = other2[Math.floor(Math.random() * other2.length)];

      $("#winner").click(function() {
        alert("congratulations! You are a genius");
      });

      $(".loser").click(function() {
        alert("Commiserations! You are a fool");
      });
      
      function shuffle(array) {
        array.sort(() => Math.random() - 0.5);
      }
    </script>
  </body>
</html>

Upvotes: 1

Related Questions