JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.outsharked.com/scripts/dev/jquery.imagemapster.1.2.5b33.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test with Plant Cell</title>


</head>


<body >


<img id="pcell" src="http://img96.imageshack.us/img96/6796/pcell1.png" usemap="#pcell_map" >


    <!--IMAGE MAP-->
<map name="pcell_map" id="pcell_map">
    <area shape="poly" id="chromatin"  name="chromatin" coords=" 316,469, 286,483, 290,493, 311,508, 328,509, 349,515, 359,526, 350,534, 330,534, 259,518, 238,498, 216,493, 209,491, 207,504, 209,515, 221,529, 255,545, 298,557, 353,565, 368,578, 331,596, 307,588, 317,589, 329,592, 338,584, 338,577, 332,572, 305,570, 275,562, 256,556, 234,551, 226,557, 231,568, 244,577, 261,585, 239,580, 200,557, 173,552, 165,556, 168,569, 173,585, 270,619, 370,616, 356,631, 264,624, 220,615, 207,616, 197,618, 196,625, 201,637, 216,649, 250,658, 358,657, 372,661, 349,667, 327,665, 316,664, 303,674, 314,688, 337,689, 376,688, 400,686, 431,694, 432,719, 438,723, 467,717, 473,712, 468,704, 479,708, 498,706, 514,707, 531,702, 539,698, 519,685, 509,680, 523,676, 533,672, 556,662, 580,652, 596,639, 599,628, 594,623, 586,623, 570,625, 527,645, 486,663, 452,663, 440,660, 461,653, 478,640, 470,632, 430,635, 420,628, 423,620, 489,612, 484,631, 497,639, 520,636, 537,626, 550,607, 552,600, 547,598, 544,599, 520,609, 521,600, 535,597, 545,587, 555,577, 554,566, 549,565, 543,565, 528,572, 491,586, 399,588, 419,579, 447,577, 473,569, 485,557, 465,547, 429,549, 398,546, 399,544, 413,539, 434,536, 445,524, 441,514, 426,500, 414,498, 370,490, 346,477, 320,469" href="#" alt="red hotspot"   />

    <area shape="poly" id="nucleole" name="nucleole" coords=" 491,290, 495,300, 499,313, 499,318, 499,321, 500,327, 497,334, 497,343, 492,355, 482,365, 463,386, 435,395, 415,396, 408,395, 394,391, 387,388, 380,382, 369,378, 364,369, 356,360, 354,354, 349,345, 347,333, 344,320, 345,307, 349,299, 353,293,...

JavaScript

function fn2() {
    var fval = this.value;
    var elem = document.getElementById("Ans1");
    if (elem.value == "") alert("Select portion of image first");
    else if (fval == elem.value) {
        alert("Correct Answer");
    }
    else {
        alert("InCorrect Answer");
    }
}

function finishSetup() {
    var image = $(this),
        imgWidth = image.width(),
        imgHeight = image.height(),
        maxWidth = $(window).width(),
        maxHeight = $(window).height(),
        newWidth=0,
        newHeight=0;

    if (imgWidth/maxWidth>imgHeight/maxHeight) {
        newWidth = maxWidth;
    } else {
        newHeight = maxHeight;
    }
    image.mapster('resize',newWidth,newHeight,0);
    

}
$(document).ready(function() {
    $('[type="submit"]').bind('click',fn2);
    var image = $('img');


    var xref = {
        chromatin: "<b>Chromatin Network </b>",
        nucleole: "<b>Nucleole </b>",
        membrane: "<b>Nuclear Membrane </b>",
        plasma: "<b>Nucleoplasma </b>",
    };
    image.mapster({
        mapScale: true,
        fillOpacity: 0.4,
        fillColor: "d42e16",
        strokeColor: "3320FF",
        strokeOpacity: 0.7,
        strokeWidth: 3,
        stroke: true,
        isSelectable: true,
        singleSelect: true,
        mapKey: 'name',
        listKey: 'name',
        onClick: function(e) {
            $('#Ans1').val(e.key);
        },
        areas: [
            {
            key: "chromatin",
            fillColor: "ADD8E6"},
        {
            key: "nucleole",
            fillColor: "ffffff"},
        {
            key: "membrane",
            fillColor: "000000"},
            ],
        onConfigured: finishSetup
    });
});