JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<html>
<head>
</head>
<body>
  <div id="quoteDisplay">
    <!-- 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': ''},
    {'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").onclick = function() {
            li.appendChild(p);
            p.innerHTML = shuffle[i].answer;
        }
    }
    document.getElementById('quoteDisplay').appendChild(ul);
}