JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<html>

  <head>
  </head>

  <body>
    <div>
      <div id="quoteDisplay"></div>
      <!-- Sentences will display here -->
      <button id="sanswers">Show Answers</button>
    </div>
    <script>
      newQuote();

    </script>
  </body>

</html>

JavaScript

var qsentences = [{
    'question': 'That building / tall / a tree.',
    'answer': ''
  },
  {
    'question': 'My car / red / an apple.',
    'answer': 'Linux'
  },
  {
    'question': 'This book / interesting / the movie.',
    'answer': 'Test'
  },
  {
    'question': 'My sister / nice / your sister',
    'answer': ''
  }
]

var qanswers = []

function randomChoice(array) {
  var currentIndex = array.length;
  var temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

function newQuote() {
  var shuffle = randomChoice(qsentences);
  var ul = document.createElement('ul');
  for (let i = 0; i < 4; i++) {
    var li = document.createElement('li');
    var form = document.createElement('form');
    var input = document.createElement('input');
    var br = document.createElement('br');
    var p = document.createElement('p');

    input.type = "text";

    li.innerHTML = shuffle[i].question;
    ul.appendChild(li);
    li.appendChild(form);
    form.appendChild(input);
    li.appendChild(br);

    document.getElementById("sanswers").addEventListener('click', function() {
      li.appendChild(p);
      p.innerHTML = shuffle[i].answer;
    });
  }
  document.getElementById('quoteDisplay').appendChild(ul);
}