JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<textarea rows="10" id="textLoc" cols="50"></textarea>
<input type="button" id="submit" name="submit" onclick="createFIB()" value="Create FillitIn">
<p id="text"></p>
<input type="button" id="grade" name="submit" onclick="gradeit()" value="Grade">

JavaScript

var blanks = [];

function createFIB() { //creates a function that will be called once the text is entered

var txtAdd = document.getElementById('textLoc').value;
var text = txtAdd.split(' '); 

/*var txtLoc = document.getElementById('textLoc');
txtLoc.style.display = 'none';*/

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

    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;

} //ends creatFIB()

function gradeit() {

var allBlanksLoc = document.getElementById('text');
var allBlanks = allBlanksLoc.getElementsByTagName('input');

for(i=0; i<allBlanks.length; i++) {
var currentBlank = allBlanks[i];
var wordNum = blanks[i];
var blankWord = text[wordNum];
var usrAnswer = currentBlank.value;

if (usrAnswer != blankWord) {
alert('Hey thats wrong');
}
}

} //ends gradeit()