JSFiddle - React, Tailwind, and code Playground

HTML

<p id="text"><p>

JavaScript

var text = ["Plato", "writes", "the", "dialogues", "of ", "the", "Early", "Period:", "Apology", "Charmides", "Crito", "Euthyphro", "Hippias Minor", "Ion", "Laches", "Protagoras", "And"];

var blankNum = Math.floor(Math.random() * (text.length / 2));

var blanks = [];

function blankExists(i) {
    for (var bi = 0; bi < blanks.length; bi++) {
        if (blanks[bi] == i) return true;
    }
    return false;
}

for (var i = 0; i < blankNum; i++) {
    var blank = Math.floor(Math.random() * text.length);
    while (blankExists(blank)) {
        var blank = Math.floor(Math.random() * text.length);
    }
    blanks.push(blank);
}

var finalText = "";
var textPrelim;

for (i = 0; i < text.length; i++) {
    var currentText = text[i];
    if (blankExists(i)) {
        finalText += "<input type=\"text\"></input> ";
    }
    else {
        finalText += currentText + " ";
    }
}

document.getElementById('text').innerHTML = finalText;