JSFiddle - React, Tailwind, and code Playground

HTML

<div id="abc" class="words">Focus in the results frame, the press A or L.</div>

CSS

#abc {
    border: 1px solid #ccc;
    min-height: 200px;
    text-align: center;
    font-size: 20px;
}

JavaScript

var words = [ "Monkey", "Donkey", "Woof" ];
var pictures = new Array()
pictures[0]="http://lorempixel.com/400/200/sports/1/"
pictures[1]="http://lorempixel.com/400/200/sports/2/"
pictures[2]="http://lorempixel.com/400/200/sports/3/"


$(function(){
    $(document).keypress(function(e){
        if ($(e.target).is('input, textarea')) {
            return;
        };
        if (e.which === 97 || e.which === 108) {
            if(Math.random() < 0.5) {
                // Show a word
                new_word = words[Math.floor(Math.random() * words.length)];;
                $("#abc").text(new_word);
            } else {
                // Show an image
                var new_img =  pictures[Math.floor(Math.random() * pictures.length)];;
                $("#abc").empty();
                var imgtag = $('<img id="abcimg">');
                imgtag.attr('src',new_img);
                imgtag.appendTo('#abc');
            }
        };
    });
});