JSFiddle - React, Tailwind, and code Playground

by Phoebe Jeske

HTML

<button type="button" id="takeButton">Take the Parts of A Cow Quiz</button>

<img id="cow" src="http://www.purposegames.com/images/games/background/30/30881.png">
<svg width="100" height="100" id="point1" class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point2" class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point3" class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point4"class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point5"class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point6"class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point7"class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point8" class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point9" class="point">
   <circle cx="50" cy="50" r="7"  fill ="#3956d6" style="cursor:pointer" />
   Sorry, your browser does not support inline SVG.
</svg>

<svg width="100" height="100" id="point10" class="point">
   <circle cx="50" cy="50" r="7"  fill...

CSS

#takeButton {
    position:fixed;
    top:30%;
    left:28%;
    background-color: #4CAF50;
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    visibility: visible;
    border-radius:10px;
}
 #cow {
  position:fixed;
  visibility:hidden;
  top:-6%;
  height:100%;
  width:100%;
  z-index:-5;
}
.point {
  visibility:hidden;
  z-index:50;
}
#point1 {
  position:fixed;
  top:1%;
  left:10%;
}
#point2 {
  position:fixed;
  top:1%;
  left:30%;
}
#point3 {
  position:fixed;
  top:5%;
  left:24.5%;
}
#point4{
  position:fixed;
  top:5%;
  left:47%;
}
#point5{
  position:fixed;
  top:1%;
  left:62%;
}
#point6{
  position:fixed;
  top:1%;
  left:68%;
}
#point7{
  position:fixed;
  top:2%;
  left:72%;
}
#point8{
  position:fixed;
  top:9%;
  left:81%;
}
#point9{
  position:fixed;
  top:21%;
  left:85%;
}
#point10{
  position:fixed;
  top:23%;
  left:78%;
}
#point11{
  position:fixed;
  top:28%;
  left:72%;
}
#point12{
  position:fixed;
  top:38%;
  left:67.5%;
}#point13{
  position:fixed;
  top:41%;
  left:65%;
}#point14{
  position:fixed;
  top:46%;
  left:64%;
}#point15{
  position:fixed;
  top:55%;
  left:60%;
}#point16{
  position:fixed;
  top:62%;
  left:32%;
}#point17{
  position:fixed;
  top:65%;
  left:32%;
}#point18{
  position:fixed;
  top:68%;
  left:32%;
}#point19{
  position:fixed;
  top:50%;
  left:-1%;
}#point20{
  position:fixed;
  top:42%;
  left:-1%;
}#point21{
  position:fixed;
  top:22%;
  left:-2%;
}#point22{
  position:fixed;
  top:9%;
  left:3%;
}#point23{
  position:fixed;
  top:59%;
  left:72%;
}#point24{
  position:fixed;
  top:63%;
  left:72%;
}
#point25{
  position:fixed;
  top:63%;
  left:72%;
}

JavaScript

document.getElementById("takeButton").addEventListener("mouseover", mouseButton);
document.getElementById("takeButton").addEventListener("mouseout", mouseoutButton);
document.getElementById("takeButton").addEventListener("click", clickButton);

function mouseButton () {
document.getElementById("takeButton").style.color = "white";

}
function mouseoutButton() {
document.getElementById("takeButton").style.color = "black";

}
function clickButton() {
document.getElementById("point1").style.visibility = "visible";
document.getElementById("point1").addEventListener("click", clickPoint1);
document.getElementById("point2").style.visibility = "visible";
document.getElementById("point2").addEventListener("click", clickPoint2);
document.getElementById("point3").style.visibility = "visible";
document.getElementById("point3").addEventListener("click", clickPoint3);
document.getElementById("point4").style.visibility = "visible";
document.getElementById("point4").addEventListener("click", clickPoint4);
document.getElementById("point5").style.visibility = "visible";
document.getElementById("point5").addEventListener("click", clickPoint5);
document.getElementById("point6").style.visibility = "visible";
document.getElementById("point6").addEventListener("click", clickPoint6);
document.getElementById("point7").style.visibility = "visible";
document.getElementById("point7").addEventListener("click", clickPoint7);
document.getElementById("point8").style.visibility = "visible";
document.getElementById("point8").addEventListener("click", clickPoint8);
document.getElementById("point9").style.visibility = "visible";
document.getElementById("point9").addEventListener("click", clickPoint9);
document.getElementById("point10").style.visibility = "visible";
document.getElementById("point10").addEventListener("click", clickPoint10);
document.getElementById("point11").style.visibility = "visible";
document.getElementById("point11").addEventListener("click",...