<html>
<body>
<h2 id="heading">It is summertime again, vacation time.<br>
You go to your uncle's house. He takes you on a tour around the city. There are many old buildings, but the oldest of all is on Main Street. The address is 880. He says that it is haunted, but you don't believe him.</h2>
<br>
<div id="starting" style="display:block;">
<button class="svg" id="option1" onclick="choice1()">Do you go inside?</button>
<br>
<button class="svg" id="option2" onclick="choice2()">Do you stay there?</button>
</div>

<div id="ending" style="display:none;">
<h3>THE END</h3>
<button class="svg" onclick="restartStory()">Restart</button>
</div>

</body>
</html>
body {
  margin: auto;
  width: 50%;
  text-align: center;
  padding: 10px;

}
button {
  position: relative;
  //display:block;
  height: 75px;
  width: 300px;
  margin: 10px 7px;
  padding: 5px 5px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #383736;
  border: 2px #383736 solid;
  border-radius: 4px;
  text-transform: uppercase;
  outline: 0;
  overflow:hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition:         0.08s ease-in;
  -o-transition:      0.08s ease-in;
  -ms-transition:     0.08s ease-in;
  -moz-transition:    0.08s ease-in;
  -webkit-transition: 0.08s ease-in;
}

.svg{
  -webkit-transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); 
}

.svg:before{
  position:absolute;  
  content:"";
  background: url(https://f.cl.ly/items/3H3A0D1N281a2T280F3o/heist.svg) no-repeat center center;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  opacity:0;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

.svg:after {
  content: "";
  position: absolute;
  background: #19d144;
  bottom: 0;
  left: 0;
  right: 0;
  top: 100%;
  z-index: -2;
  -webkit-transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); 
}
.svg:hover{
  color:white;
  border: 0px #19d144 solid;
}
.svg:hover:before {
  opacity: .8;
}
.svg:hover:after {
  top: 0;
}
var pages = ["It is summertime again, vacation time. You go to your uncle's house. He takes you on a tour around the city. There are many old buildings, but the oldest of all is on Main Street. The address is 880. He says that it is haunted, but you don't believe him.", "You say, \"I will go inside.\" He says, \"I want to watch you.\" You start up the stone steps of the old haunted house. You open the door and step inside and suddenly a sharp arrow streaks across in front of you! But it misses you.", "You stay there. Then you decide to go home, have an ice cream, and go to bed.", "You go up the stairs. You lean against the railing and it breaks. You fall and that's the end of you.", "You go through the swinging doors. You walk through the room.", "You go into the closet. You fall through a trapdoor and break your leg. The walls are too smooth to climb. There is no other way up.", "You go into a passageway under the house. You make your way along and it leads to a trapdoor that takes you back to where you started from. You meet a policeman at the top and he says to you, \"You were lucky to get out of there. Don't ever go in there again!\" You go home and have some ice cream."]

var currentPage = 0;

function choice1()
{
   switch(currentPage)
   {
      case 0:
          currentPage = 1;
          document.getElementById('option1').innerHTML = "Do you go up the staircase?";
          document.getElementById('option2').innerHTML = "Do you go through the swinging doors?";
          break;
      case 1:
          currentPage = 3;
          endStory();
          break;
      case 4:
          currentPage = 5;
          endStory();
          break;
      default:
          resetStory();
          break;
   }

   document.getElementById('heading').innerHTML = pages[currentPage];
}

function choice2()
{
   switch(currentPage)
   {
      case 0:
          currentPage = 2;
          endStory();
          break;
      case 1:
          currentPage = 4;
          document.getElementById('option1').innerHTML = "Do you go into the closet?";
          document.getElementById('option2').innerHTML = "Do you go into a passageway under the house?";
          break;
      case 4:
          currentPage = 6;
          endStory();
          break;
      default:
          resetStory();
          break;
   }

   document.getElementById('heading').innerHTML = pages[currentPage];
}

function endStory()
{
   document.getElementById('starting').style.display = 'none';
   document.getElementById('ending').style.display = 'block';
}

function restartStory()
{
   document.getElementById('starting').style.display = 'block';
   document.getElementById('ending').style.display = 'none';
   currentPage = 0;
   document.getElementById('option1').innerHTML = "Do you go inside?";       
   document.getElementById('option2').innerHTML = "Do you stay there?";
   document.getElementById('heading').innerHTML = pages[currentPage];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.