JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<div id="print"></div>
<div id="wrong"></div>
<div id="listRight"></div>
<div id="listWrong"></div>

JavaScript

var questions = [
    ["How many middle names did Barney Fife have?", "3"],
    ["What was Floyd the barber's last name?", "lawson"],
    ["What was the name of opie's imaginary horse?", "blackie"]
];

var correct = false;
var counter = 0;
var wrong = 0;
var rightAnswer = [];
var wrongAnswer = [];
var report = [];

for (j = 0; j < questions.length; ++j) {
    var answer = prompt(questions[j][0]);
    if (answer.toLowerCase() === questions[j][1]) {
        correct = true;
    } else {
        correct = false;
    }

    if (correct) {
        ++counter;
        rightAnswer.unshift("<li>" + questions[j][0] + "</li>");
    } else {
        ++wrong;
    }

    if (wrong) {
        wrongster = message(wrong, "wrong");
        wrongAnswer.unshift("<li>" + questions[j][0] + "</li>");
    }
}

writeIt('print', message(counter, "correct"));
writeIt('wrong', wrongster);
writeIt('listRight', listResults("right", rightAnswer));
writeIt('listWrong', listResults("wrong", wrongAnswer));

function listResults(result, list) {
    return "<h3>These are the questions you got " + result + "</h3>" + "<ol>" + list.join('<br>') + "</ol>";
}

function message(argz, status) {
    return "You got " + argz + " " + status + ".";
}

function writeIt(id, text) {
    document.getElementById(id).innerHTML = text;
}