Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  <h1>Mrs Hangwoman</h1>
  <hr/>
  <!--Hamburger Menu-->
  <span class="container">
      <span class="checkbox-container">
        <input class="checkbox-trigger" type="checkbox"  />
        <span class="menu-content">
            <ul>
              <li><a href="https://codepen.io/chemie/full/WojEdJ" target="_blank">HOME</a></li>
              <li><a href="https://codepen.io/chemie/full/MboGBP" target="_blank">TRIVIA</a></li>
              <li><a href="https://codepen.io/chemie/full/aBwvYG" target="_blank">MEMORY</a></li>
            </ul>
            <span class="hamburger-menu"></span>
  </span>
  </span>
  </span>
  <!--End of hamburger menu-->
  <!--Screen-->
  <center>
    <div id=screen><img id="vocabGame" src="https://1.bp.blogspot.com/-Rq3OCx8lLXM/WDajKiDiGRI/AAAAAAAAEx0/IZukNoM7gdAQ0lYqBMzePE9xWCCgmXiLgCLcB/s1600/mrs%2Bhangwoman.png" />
      <div id="heartsDIV"><img id="heart1" class="hearts" src="http://i.giphy.com/LPJVN0RccP1W8.gif" /><img id="heart2" class="hearts" src="http://i.giphy.com/LPJVN0RccP1W8.gif" /><img id="heart3" class="hearts" src="http://i.giphy.com/LPJVN0RccP1W8.gif" /><img id="heart4"
          class="hearts" src="http://i.giphy.com/LPJVN0RccP1W8.gif" /><img id="heart5" class="hearts" src="http://i.giphy.com/LPJVN0RccP1W8.gif" /></div>
  </center>
  </div><br/>
  <center>
    <div>
      <button class="alphaButton" id="a" onclick="clickAlpha('a')">a</button>
      <button class="alphaButton" id="b" onclick="clickAlpha('b')">b</button>
      <button class="alphaButton" id="c" onclick="clickAlpha('c')">c</button>
      <button class="alphaButton" id="d" onclick="clickAlpha('d')">d</button>
      <button class="alphaButton" id="e" onclick="clickAlpha('e')">e</button>
      <button class="alphaButton" id="f" onclick="clickAlpha('f')">f</button>
      <button class="alphaButton" id="g" onclick="clickAlpha('g')">g</button>
      <button class="alphaButton" id="h" onclick="clickAlpha('h')">h</button>
      <button class="alphaButton" id="i" onclick="clickAlpha('i')">i</button>
      <button class="alphaButton" id="j" onclick="clickAlpha('j')">j</button>
      <button class="alphaButton" id="k" onclick="clickAlpha('k')">k</button>
      <button class="alphaButton" id="l" onclick="clickAlpha('l')">l</button>
      <button class="alphaButton" id="m" onclick="clickAlpha('m')">m</button></div>
    <center>
      <div>
        <button class="alphaButton" id="n" onclick="clickAlpha('n')">n</button>
        <button class="alphaButton" id="o" onclick="clickAlpha('o')">o</button>
        <button class="alphaButton" id="p" onclick="clickAlpha('p')">p</button>
        <button class="alphaButton" id="q" onclick="clickAlpha('q')">q</button>
        <button class="alphaButton" id="r" onclick="clickAlpha('r')">r</button>
        <button class="alphaButton" id="s" onclick="clickAlpha('s')">s</button>
        <button class="alphaButton" id="t" onclick="clickAlpha('t')">t</button>
        <button class="alphaButton" id="u" onclick="clickAlpha('u')">u</button>
        <button class="alphaButton" id="v" onclick="clickAlpha('v')">v</button>
        <button class="alphaButton" id="w" onclick="clickAlpha('w')">w</button>
        <button class="alphaButton" id="x" onclick="clickAlpha('x')">x</button>
        <button class="alphaButton" id="y" onclick="clickAlpha('y')">y</button>
        <button class="alphaButton" id="z" onclick="clickAlpha('z')">z</button></div>
    </center>
    <center>
      <h5 id="underscore"></h5></center>
    <center>
      <button id="start" onclick="start()"></button>
      <button id="restart" onclick="restart()"></button>
      <button id="next" onclick="next()"></button>
      <button id="skip" onclick="skip()"></button>
      <h2 id="lives"></h2>
      <h2 id="foodsLeft"></h2>
    </center>
    <div id="modalbtns">
      <button id="foodListButton" onclick="foodListBTN()">YOUR FOOD DISCOVERY LIST</button>
      <button id="instructions" onclick="instructionsBTN()"></button></div>

    <!-- The Instructions Modal -->
    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times</span>
          <h2>HOW TO PLAY</h2>
        </div>
        <div class="modal-body">
          <p>Complete the quest of discovering 10 fascinating foods! To guess each food, click the alphabet buttons to guess the alphabets in the word! You get 5 lives per food, for every alphabet you guess that isn't in the word, you lose a life. If you
            lose all your 5 lives for a word, you lose a heart too. You have 5 hearts at the beginning of the game. Lose all your 5 hearts before completing your quest, and you'll have to restart! (Take note: The set of 10 foods changes every time you
            restart!) Good luck!</p>
        </div>
      </div>
    </div>

    <!-- The Congrats Modal -->
    <div id="myCModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="cclose">&times</span>
          <h2>CONGRATULATIONS - You did it!</h2>
        </div>
        <div class="modal-body">
          <p>Congratulations! You have discovered the 10 fascinating foods of the Chemiesterious land! Click the restart button to discover more fascinating foods!</p>
        </div>
      </div>
    </div>

    <!-- The Food List Modal -->
    <div id="foodList" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
        <div class="modal-header">
          <span class="flclose">&times</span>
          <h2>YOUR FOOD DISCOVERY LIST</h2>
        </div>
        <div class="modal-body">
          <p id="food1" class="fdl"></p><hr id="break1" class="breaks"/>
          <p id="food2" class="fdl"></p><hr id="break2" class="breaks"/>
        <p id="food3" class="fdl"></p><hr id="break3" class="breaks"/>
          <p id="food4" class="fdl"></p><hr id="break4" class="breaks"/>
        <p id="food5" class="fdl"></p><hr id="break5" class="breaks"/>
          <p id="food6" class="fdl"></p><hr id="break6" class="breaks"/>
          <p id="food7" class="fdl"></p><hr id="break7" class="breaks"/>
          <p id="food8" class="fdl"></p><hr id="break8" class="breaks"/>
          <p id="food9" class="fdl"></p><hr id="break9" class="breaks"/>
          <p id="food10" class="fdl"></p>
        </div>
      </div>
    </div>

</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Raleway');

#instructions {
  background-image: url("http://icecream.me/uploads/3dde50f8bda13e8714d03e44f43f3dec.png");
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 30px;
  height: 30px;
  background-size: cover;
  border: none;
}

.fdl{
  text-transform: uppercase;
  font-weight: bold;
}
.breaks{
  visibility: hidden;
}
#foodListButton{
  border: none;
  width: 150px;
  background: none;
  color: #00ffcb;
  font-family: Helvetica;
  letter-spacing: 2px;
  font-weight: bold;
  text-shadow: 1px 2px #ff0083;
  position: fixed;
  bottom: 0px;
  right: 32px;
}

#heartsDIV {
  margin-top: -200px;
  margin-left: 220px;
}

.hearts {
  width: 35px;
  margin: auto;
  visibility: hidden;
}

#screen {
  position: relative;
  width: 50px;
  height: 200px;
  margin-left: -150px;
}

.checkbox-container {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  position: relative;
  background: #182825;
}

.checkbox-trigger {
  opacity: 0;
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0px;
  cursor: pointer;
  z-index: 5;
}

.hamburger-menu,
.hamburger-menu::before,
.hamburger-menu::after {
  display: block;
  position: absolute;
  background: white;
  width: 40px;
  height: 4px;
  margin: 1.3em 3em;
  transition: background 0.3s;
}

.hamburger-menu::before,
.hamburger-menu::after {
  content: '';
  position: absolute;
  margin: -0.7em 0 0;
}

.hamburger-menu::after {
  margin-top: 0.7em;
}

.hamburger-menu {
  position: relative;
  display: block;
  margin: 0;
  margin-top: 1.45em;
  margin-right: 0.35em;
  margin-left: 0.35em;
  margin-bottom: 1.45em;
}

.checkbox-trigger:checked {
  left: 152px;
}

.checkbox-trigger:checked + .menu-content ul {
  width: 150px;
  height: 150px;
  ;
  transition: width 0.7s ease 0.3s, height 0.3s ease;
}

.menu-content {
  display: flex;
  background: #00ffcb;
  color: black;
  float: left;
}

.menu-content ul {
  display: block;
  padding-left: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  margin: 0;
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition: height 0.3s ease 0.7s, width 0.7s ease;
}

.menu-content ul li {
  list-style: none;
  padding-top: 1em;
  padding-bottom: 1em;
  cursor: pointer;
  text-align: center;
  font-family: Helvetica;
  transition: color 0.5s, background 0.5s;
  font-weight: bold;
}

.menu-content ul li a {
  color: #FF0083;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  padding-right: 80px;
}

.menu-content ul li a:hover {
  color: white;
  background: black;
}

.menu-content ul li:hover {
  color: white;
  background: black;
}


/*END OF HAMBURGER MENU CSS*/

#vocabGame {
  width: 600px;
  height: auto;
}

#start {
  width: 320px;
  height: 120px;
  margin-top: -80px;
  background-image: url("https://1.bp.blogspot.com/-pBxdVapFizg/WDaKCyW-KlI/AAAAAAAAEvo/kPh_VF7PAKsUM2E8yhZS2nBmrsixrqaXgCLcB/s320/start%2Bbutton.png");
  border: none;
  background-color: white;
}

#restart {
  width: 0;
  height: 0;
  background-image: url('https://3.bp.blogspot.com/-c3EhF0EC4fU/WDaVQoPfO0I/AAAAAAAAEwQ/L_gWXErYALox962AJ3Wr7_7aIWTQ8_bZACLcB/s320/restart.png');
  border: none;
  background-color: white;
}

#next {
  background-image: url("https://4.bp.blogspot.com/-TZhsOIX_umo/WD1xF_TMpkI/AAAAAAAAE0s/m71xDwiJ6yMH1bDjJgwSOMJprXaAFDQhgCLcB/s320/next.png");
  border: none;
  background-color: white;
  width: 0;
  height: 0;
}

#skip {
  background-image: url("https://3.bp.blogspot.com/-suOgI70wyQU/WEVzmq8lzaI/AAAAAAAAFFA/7-uJF0MOko0iSoUUd5vEIQ8lgLH8vAJoQCLcB/s320/skip.png");
  border: none;
  background-color: white;
  width: 0;
  height: 0;
}

p {
  font-family: Helvetica;
  font-size: 15px;
}

h1 {
  color: #ff0083;
  text-shadow: 5px 2px #00ffcb;
  letter-spacing: 5px;
  line-height: 1px;
  font-size: 80px;
  text-align: center;
  position: relative;
  font-family: Helvetica;
  text-transform: uppercase;
}

h1:after {
  line-height: 1px;
  content: "MRS HANGWOMAN";
  position: absolute;
  top: 1px;
  left: 225px;
  text-shadow: none;
  color: #00ffcb;
  opacity: 0.5;
}

body {
  background-image: url("https://3.bp.blogspot.com/-F8e9GujLYl0/V9fPAsq492I/AAAAAAAAD_k/vx9IVhdjutkCYG8476xMg3okoG_OjaVUwCLcB/s1600/Screenshot%2B%2528773%2529.png");
}

.alphaButton {
  visibility: hidden;
  width: 0px;
  height: 0px;
  border-radius: 10px;
  color: #ff0083;
  font-weight: bold;
  font-family: Raleway;
  background-color: #00ffcb;
  font-size: 20px;
  text-shadow: 1px 1px black;
  border: none;
  margin: 1px;
}

.alphaButton:hover {
  color: white !important;
  background-color: black !important;
}

#underscore {
  font-size: 0px;
  margin-bottom: 20px;
  margin-top: 20px;
  font-family: Raleway;
}


/*SCROLLBAR*/

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 0.8em;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FF0083;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-image: url("https://1.bp.blogspot.com/-aC0SrhiF6SI/WDqdJCMNPcI/AAAAAAAAEzw/uczZ4ugM1Eg9ep8ZIAdu-AOw7oMM3E7xACLcB/s1600/RAINBOW%2BBOXES.gif");
}

#lives, #foodsLeft {
  font-family: Raleway;
  color: #FF6699;
  text-shadow: 1.5px 1.5px cyan;
  font-size: 0px;
}


/* Modal Box*/


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.modal-content {
  position: fixed;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* The Close Button */

.close, .cclose, .flclose {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus, .cclose:hover,
.cclose:focus, .flclose:hover,
.flclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  background-color: #00FFcb;
  color: #FF0083;
  font-family: Helvetica;
  padding: 2px 16px;
}

.modal-body {
  background: white;
  padding: 2px 16px;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
              
            
!

JS

              
                //list of words
var word1 = ["h", "a", "m", "b", "u", "r", "g", "e", "r"];
var word2 = ["c", "h", "o", "c", "o", "l", "a", "t", "e"];
var word3 = ["c", "u", "p", "c", "a", "k", "e"];
var word4 = ["g", "i", "n", "g", "e", "r", "b", "r", "e", "a", "d"];
var word5 = ["p", "o", "p", "s", "i", "c", "l", "e"];
var word6 = ["m", "a", "r", "s", "h", "m", "a", "l", "l", "o", "w"];
var word7 = ["t", "o", "f", "f", "e", "e"];
var word8 = ["w", "a", "l", "n", "u", "t"];
var word9 = ["w", "a", "t", "e", "r", "c", "r", "e", "s", "s"];
var word10 = ["z", "u", "c", "c", "h", "i", "n", "i"];
var word11 = ["o", "m", "l", "e", "t", "t", "e"];
var word12 = ["m", "u", "s", "h", "r", "o", "o", "m"];
var word13 = ["a", "v", "o", "c", "a", "d", "o"];
var word14 = ["c", "o", "c", "o", "n", "u", "t"];
var word15 = ["m", "a", "y", "o", "n", "n", "a", "i", "s", "e"];
var word16 = ["r", "a", "d", "i", "s", "h"];
var word17 = ["a", "r", "t", "i", "c", "h", "o", "k", "e"];
var word18 = ["c", "h", "i", "m", "i", "c", "h", "a", "n", "g", "a"];
var word19 = ["h", "o", "n", "e", "y", "d", "e", "w"];
var word20 = ["j", "a", "l", "a", "p", "e", "n", "o"];
var word21 = ["l", "i", "c", "o", "r", "i", "c", "e"];
var word22 = ["l", "y", "c", "h", "e", "e"];
var word23 = ["n", "e", "c", "t", "a", "r", "i", "n", "e"];
var word24 = ["m", "o", "z", "z", "a", "r", "e", "l", "l", "a"];
var word25 = ["m", "a", "c", "a", "r", "o", "o", "n"];
var word26 = ["m", "a", "c", "a", "r", "o", "n", "i"];
var word27 = ["m", "e", "r", "i", "n", "g", "u", "e"];
var word28 = ["m", "a", "r", "g", "a", "r", "i", "n", "e"];
var word29 = ["o", "y", "s", "t", "e", "r"];
var word30 = ["p", "e", "r", "s", "i", "m", "m", "o", "n"];
var word31 = ["p", "o", "m", "e", "g", "r", "a", "n", "a", "t", "e"];
var word32 = ["p", "r", "e", "t", "z", "e", "l"];
var word33 = ["p", "a", "n", "c", "a", "k", "e"];
var word34 = ["p", "a", "r", "s", "n", "i", "p"];
var word35 = ["r", "a", "v", "i", "o", "l", "i"];
var word36 = ["s", "p", "i", "n", "a", "c", "h"];
var word37 = ["s", "u", "n", "d", "a", "e"];
var word38 = ["t", "a", "n", "g", "e", "r", "i", "n", "e"];
var word39 = ["t", "o", "r", "t", "i", "l", "l", "a"];
var word40 = ["q", "u", "e", "s", "a", "d", "i", "l", "l", "a"];
var word41 = ["v", "a", "n", "i", "l", "l", "a"];
var word42 = ["w", "a", "t", "e", "r", "m", "e", "l", "o", "n"];
var word43 = ["s", "p", "a", "g", "h", "e", "t", "t", "i"];
var word44 = ["p", "u", "m", "p", "e", "r", "n", "i", "c", "k", "e", "l"];
var word45 = ["n", "u", "t", "m", "e", "g"];
var word46 = ["b", "l", "a", "c", "k", "c", "u", "r", "r", "a", "n", "t"];
var word47 = ["g", "o", "o", "s", "e", "b", "e", "r", "r", "y"];
var word48 = ["c", "a", "u", "l", "i", "f", "l", "o", "w", "e", "r"];
var word49 = ["b", "r", "o", "c", "c", "o", "l", "i"];
var word50 = ["g", "o", "o", "s", "e", "b", "e", "r", "r", "y"];
var wordList = [word1, word2, word3, word4, word5, word6, word7, word8, word9, word10, word11, word12, word13, word14, word15, word16, word17, word18, word19, word20, word21, word22, word23, word24, word25, word26, word27, word28, word29, word30, word31, word32, word33, word34, word35, word36, word37, word38, word39, word40, word41, word42, word43, word44, word45, word46, word47, word48, word49, word50];
var numberOfWords = wordList.length; //finds out how many words are in wordList
var chosenPosition = Math.floor(Math.random() * numberOfWords);
var chosenWorda = wordList[chosenPosition]; //randomly chooses one word to guess
var wordLength = chosenWorda.length; //finds out how many letters in chosenWord
var underscore = []; //create underscore as an array
for (var i = 0; i < wordLength; i++) { //create underscores based on number of letters in chosenWord
  underscore.push("_");
}
var underscores = underscore.join(" "); //removes commas from printing by replacing them with spaces
var chosenWord = chosenWorda.join(""); //removes commas from array chosenWord
document.getElementById("underscore").innerHTML = underscores; //print underscores
var newUnderscore;
var lives = 5;
var printLives = "You have " + lives + " lives remaining!";
document.getElementById("lives").innerHTML = printLives;
document.getElementById("vocabGame").style.margin = "-20px";
document.getElementById("vocabGame").style.marginLeft = "-200px";
document.getElementById("start").style.marginTop = "-15px";
var alphaArray = document.getElementsByClassName("alphaButton");
var heartsArray = document.getElementsByClassName("hearts");
var heartsLeft = 5;
var foodsLeft = 10;
document.getElementById("foodsLeft").innerHTML = "You have 10 foods left to discover!";
var statusClass = "unsolved";
console.log(chosenWord);

//button functions
function start() { //start button
  document.getElementById("lives").style.fontSize="1.5em";
    document.getElementById("foodsLeft").style.fontSize="1.5em";
  document.getElementById("vocabGame").src = "https://4.bp.blogspot.com/-pQ6AVRo8KEc/WEPz3iPBOHI/AAAAAAAAFEI/abreGf8OXa0VE5XOEuoEVfFeO7k4Ot-xACLcB/s1600/Question%2BMarks.gif"; //sets screen to question mark gif
  document.getElementById("vocabGame").style.height = "200px";
  document.getElementById("vocabGame").style.width = "200px";
  document.getElementById("restart").style.height = "120px";
  document.getElementById("restart").style.width = "320px";
  document.getElementById("start").style.height = "0px";
  document.getElementById("start").style.width = "0px";
  document.getElementById("skip").style.height = "119px";
  document.getElementById("skip").style.width = "320px";
  for (var num = 0; num < alphaArray.length; num++) { //displays alphabet buttons
    alphaArray[num].style.visibility = "visible";
    alphaArray[num].style.width = "50px";
    alphaArray[num].style.height = "50px";
    alphaArray[num].disabled = false;
  }
  document.getElementById("underscore").style.fontSize = "30px"; //displays underscores
  document.getElementById("vocabGame").style.margin = "0px";
  for (var hearts = 0; hearts < heartsArray.length; hearts++) { //displays hearts
    heartsArray[hearts].style.visibility = "visible";
  }
}

function restart() { //restart button
  if (statusClass == "over") {
    var userConfirm = true;
  } else {
    var userConfirm = confirm("Are you sure you want to restart?");
  }
  if (userConfirm == true) {
    //lives = 5; printLives = "You have " + lives + " lives remaining!"; document.getElementById("lives").innerHTML = printLives;
    //  document.getElementById("lives").style.fontSize="0px"; document.getElementById("foodsLeft").style.fontSize="0px";
    //document.getElementById("vocabGame").src = "https://1.bp.blogspot.com/-Rq3OCx8lLXM/WDajKiDiGRI/AAAAAAAAEx0/IZukNoM7gdAQ0lYqBMzePE9xWCCgmXiLgCLcB/s1600/mrs%2Bhangwoman.png"; document.getElementById("vocabGame").className = "screen"; document.getElementById("vocabGame").style.width = "600px"; document.getElementById("vocabGame").style.height = "auto"; document.getElementById("vocabGame").style.marginLeft = "-200px"; document.getElementById("vocabGame").style.marginTop = "-20px";
    //document.getElementById("start").style.height = "120px"; document.getElementById("start").style.width = "320px"; document.getElementById("restart").style.height = "0px"; document.getElementById("restart").style.width = "0px"; document.getElementById("next").style.height = "0px"; document.getElementById("next").style.width = "0px"; document.getElementById("skip").style.height = "0px"; document.getElementById("skip").style.width = "0px";
    //for (var num = 0; num < alphaArray.length; num++) { alphaArray[num].style.visibility = "hidden"; alphaArray[num].style.width = "0px"; alphaArray[num].style.height = "0px"; alphaArray[num].style.backgroundColor = "#00FFCB"; alphaArray[num].style.color = "#FF0083"; }
    //document.getElementById("underscore").style.fontSize = "0px";
    //numberOfWords = 50; var wordList = [word1, word2, word3, word4, word5, word6, word7, word8, word9, word10, word11, word12, word13, word14, word15, word16, word17, word18, word19, word20, word21, word22, word23, word24, word25, word26, word27, word28, word29, word30, word31, word32, word33, word34, word35, word36, word37, word38, word39, word40, word41, word42, word43, word44, word45, word46, word47, word48, word49, word50]; chosenWorda = wordList[Math.floor(Math.random() * numberOfWords)]; wordLength = chosenWorda.length; underscore = [];
    //for (var i = 0; i < wordLength; i++) { underscore.push("_"); }
    //underscores = underscore.join(" "); chosenWord = chosenWorda.join(""); document.getElementById("underscore").innerHTML = underscores;
    //for (var hearts = 0; hearts < heartsArray.length; hearts++) { heartsArray[hearts].style.visibility = "hidden"; }
    //statusClass="new";
    //foodsLeft=10;
    //document.getElementById("foodsLeft").innerHTML="You have 10 foods left to discover!";
    //heartsLeft = 5;
    location.reload(true);
  }
}

function newWord() {
  for (var num = 0; num < alphaArray.length; num++) { //resets alpha buttons
    alphaArray[num].style.backgroundColor = "#00FFCB";
    alphaArray[num].style.color = "#FF0083";
    alphaArray[num].disabled = false;
  }
  //resets word
  wordList.splice(chosenPosition, 1);
  numberOfWords--;
  chosenPosition = Math.floor(Math.random() * numberOfWords);
  chosenWorda = wordList[chosenPosition]; //randomly chooses one word to guess
  wordLength = chosenWorda.length; //finds out how many letters in chosenWord
  underscore = []; //create underscore as an array
  for (var i = 0; i < wordLength; i++) { //create underscores based on number of letters in chosenWord
    underscore.push("_");
  }
  underscores = underscore.join(" "); //removes commas from printing by replacing them with spaces
  chosenWord = chosenWorda.join(""); //removes commas from array chosenWord
  document.getElementById("underscore").innerHTML = underscores; //print underscores
  //resets lives
  lives = 5;
  printLives = "You have " + lives + " lives remaining!";
  document.getElementById("lives").innerHTML = printLives;
  console.log(chosenWord);
}

function next() { //next button
  newWord();
  document.getElementById("next").style.width = "0px";
  document.getElementById("next").style.height = "0px";
  document.getElementById("skip").style.height = "119px";
  document.getElementById("skip").style.width = "320px";
  foodLeft();
}

function skip() {
  statusClass = "wrong";
  var userResponse = confirm("Are you sure you want to skip? (Take note: You will lose a heart if you skip.)");
  if (userResponse == true) {
    newWord();
    heartsLeft--;
    numHearts();
    foodLeft();
  }
}

function foodLeft() {
  if (statusClass == "unsolved") {
    foodsLeft--;
  } else if (statusClass == "wrong") {
    statusClass = "unsolved";
  }
  if (foodsLeft == 1) {
    document.getElementById("foodsLeft").innerHTML = "You have " + foodsLeft + " food left to discover!";
  } else if (foodsLeft == 0) {
    document.getElementById("foodsLeft").innerHTML = "Congratulations! You have completed your quest!";
    congratsModal();
    document.getElementById("skip").style.height = "0px";
    document.getElementById("skip").style.width = "0px";
  } else {
    document.getElementById("foodsLeft").innerHTML = "You have " + foodsLeft + " foods left to discover!";
  }
}

function numHearts() {
  if (heartsLeft == 4) {
    document.getElementById("heart5").style.visibility = "hidden";
  } else if (heartsLeft == 3) {
    document.getElementById("heart4").style.visibility = "hidden";
  } else if (heartsLeft == 2) {
    document.getElementById("heart3").style.visibility = "hidden";
  } else if (heartsLeft == 1) {
    document.getElementById("heart2").style.visibility = "hidden";
  } else if (heartsLeft == 0) {
    document.getElementById("heart1").style.visibility = "hidden";
    var failAudio = new Audio("http://soundbible.com/mp3/Sad_Trombone-Joe_Lamb-665429450.mp3");
    failAudio.play();
    alert("Unfortunately, you have not managed to complete the quest to uncover the 10 fascinating foods! Your journey ends here! Click the restart button to try to complete the quest again!");
    //removes next button
    document.getElementById("next").style.height = "0px";
    document.getElementById("next").style.width = "0px";
    document.getElementById("skip").style.height = "0px";
    document.getElementById("skip").style.width = "0px";
    //change screen 
    document.getElementById("vocabGame").src = "https://2.bp.blogspot.com/-2PZPJkwtoM8/WEWBNdH-uTI/AAAAAAAAFFQ/1mCUKiHfuYA9X7nxmqeLhkbihe6QMGf5QCLcB/s700/fail%2Bmsg%2Bfull.png";
    document.getElementById("vocabGame").style.width = "700px";
    document.getElementById("vocabGame").style.height = "217px";
    document.getElementById("vocabGame").style.marginLeft = "-250px";
    for (var num = 0; num < alphaArray.length; num++) { //disables alpha buttons
      alphaArray[num].disabled = true;
    }
    statusClass = "over";
  }
}

function zeroLives() {
  if (lives == 0) {
    alert("You're out of lives! The answer was " + chosenWord + "!");
    for (var num = 0; num < alphaArray.length; num++) { //disables alphabet buttons
      alphaArray[num].disabled = true;
    }
    heartsLeft--;
    document.getElementById("next").style.height = "120px";
    document.getElementById("next").style.width = "320px";
    document.getElementById("skip").style.height = "0px";
    document.getElementById("skip").style.width = "0px";
    numHearts();
    statusClass = "wrong";
  }
}
//alphabet buttons
function clickAlpha(letter) {
  document.getElementById(letter).style.backgroundColor = "LightGrey";
  document.getElementById(letter).style.color = "white";
  var chosenWordIndex = chosenWord.indexOf(letter);
  var indexes = []; //create array called indexes
  for (var i = 0; i < chosenWord.length; i++) {
    if (chosenWord[i] === letter) {
      indexes.push(i); //create array with position numbers of letter in chosenWord
    }
  }
  var letter1 = indexes[0];
  var letter2 = indexes[1];
  if (letter2 !== undefined) {
    underscore[letter1] = chosenWord[letter1];
    underscore[letter2] = chosenWord[letter2];
    newUnderscore = underscore.join(" ");
    document.getElementById("underscore").innerHTML = newUnderscore;
  } else if (chosenWord.indexOf(letter) == -1) {
    lives--;
    if (lives == 1) {
      printLives = "You have " + lives + " life remaining!";
      document.getElementById("lives").innerHTML = printLives;
    } else {
      printLives = "You have " + lives + " lives remaining!";
      document.getElementById("lives").innerHTML = printLives;
    }
  } else {
    underscore[chosenWordIndex] = chosenWord[chosenWordIndex];
    newUnderscore = underscore.join(" ");
    document.getElementById("underscore").innerHTML = newUnderscore;
  }
  zeroLives();
  checkCorrect();
}

function foodDiscoveryList() {
  if (foodsLeft == 10) {
    document.getElementById("food1").innerHTML = chosenWord;
  } else if (foodsLeft == 9) {
    document.getElementById("break1").style.visibility="visible";
    document.getElementById("food2").innerHTML = chosenWord;
  } else if (foodsLeft == 8) {
    document.getElementById("break2").style.visibility="visible";
    document.getElementById("food3").innerHTML = chosenWord;
  } else if (foodsLeft == 7) {
    document.getElementById("break3").style.visibility="visible";
    document.getElementById("food4").innerHTML = chosenWord;
  } else if (foodsLeft == 6) {
    document.getElementById("break4").style.visibility="visible";
    document.getElementById("food5").innerHTML = chosenWord;
  } else if (foodsLeft == 5) {
    document.getElementById("break5").style.visibility="visible";
    document.getElementById("food6").innerHTML = chosenWord;
  } else if (foodsLeft == 4) {
    document.getElementById("break6").style.visibility="visible";
    document.getElementById("food7").innerHTML = chosenWord;
  } else if (foodsLeft == 3) {
    document.getElementById("break7").style.visibility="visible";
    document.getElementById("food8").innerHTML = chosenWord;
  } else if (foodsLeft == 2) {
    document.getElementById("break8").style.visibility="visible";
    document.getElementById("food9").innerHTML = chosenWord;
  } else if (foodsLeft == 1) {
    document.getElementById("break9").style.visibility="visible";
    document.getElementById("food10").innerHTML = chosenWord;
  }
}

function checkCorrect() {
  var compareWord = chosenWorda.join(" ");
  if (newUnderscore == compareWord) {
    var youDidIt = new Audio("http://soundbible.com/mp3/Ta%20Da-SoundBible.com-1884170640.mp3");
    youDidIt.play();
    alert("Congratulations! You have solved the word " + chosenWord + "! Please press the 'next' button to continue your quest!")
    document.getElementById("next").style.height = "120px";
    document.getElementById("next").style.width = "320px";
    document.getElementById("skip").style.height = "0px";
    document.getElementById("skip").style.width = "0px";
    for (var num = 0; num < alphaArray.length; num++) {
      alphaArray[num].disabled = true;
    }
    foodDiscoveryList();
  }
}

//INSTRUCTIONS MODAL BOX
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("instructions");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function congratsModal() {
  //CONGRATULATIONS MODAL BOX
  // Get the modal
  var cmodal = document.getElementById('myCModal');
  // Get the <span> element that closes the modal
  var cspan = document.getElementsByClassName("cclose")[0];
  // Open the modal 
  cmodal.style.display = "block";
  var questComplete = new Audio("http://soundbible.com/mp3/Short_triumphal_fanfare-John_Stracke-815794903.mp3");
  questComplete.play();
  // When the user clicks on <span> (x), close the modal
  cspan.onclick = function() {
      cmodal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == cmodal) {
      cmodal.style.display = "none";
    }
  }
}

function foodListBTN() {
  //CONGRATULATIONS MODAL BOX
  // Get the modal
  var modal = document.getElementById('foodList');
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("flclose")[0];
  // Open the modal 
  modal.style.display = "block";
  var magicnoise = new Audio("http://soundbible.com/mp3/Magic%20Wand%20Noise-SoundBible.com-375928671.mp3");
  magicnoise.play();
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
    }
    // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}
              
            
!
999px

Console