Блог

Главная - Вопросы по программированию - Как рандомизировать содержимое (или положение) кнопок

Как рандомизировать содержимое (или положение) кнопок

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать простую обучающую игру для веб-сайта, чтобы научить детей наречиям.

В нем просто есть предложение с пустым словом и 3 кнопки, содержащие три возможных слова. I Одно из них является наречием, а два других — нет. Я создал несколько массивов, содержащих варианты предложений и слов, однако наречие всегда появляется в одной и той же кнопке, и я хотел бы его изменить.

 <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>

Ответ №1:

Это потому, что положение ваших кнопок всегда находится в одном и том же порядке.

Я немного отредактировал ваш скрипт. Проверьте это.

 <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>

Комментарии:

1. Привет. Вы не возражаете, если я задам вопрос о вашем коде, чтобы лучше понять. Можете ли вы объяснить, как ‘shuffle (orders);’ amp; ‘функция shuffle (array) { array.sort (() => Math.random () — 0.5); }’ работают вместе для достижения конечного результата? Я понимаю часть ‘Math.random () — 0.5’

Метки: